Acá les dejo una imagen, ojalá les sirva.
¿Qué es un Sistema de Diseño?
Lo que aprenderás sobre los sistemas de diseño
¿Qué es un Sistema de Diseño?
Bonus: Utilizando Notion
Quiz: ¿Qué es un Sistema de Diseño?
Principios del Sistema de Diseño
Principios del Sistema de Diseño
Niveles de Sistematización
Bonus: Utilizando Coggle
Quiz: Principios del Sistema de Diseño
Paradigmas de Sistemas de Diseño
Paradigmas: Diseño atómico, diseño procedural y DRY
Bonus: Utilizando Adobe XD
¿Qué es un componente?
Foundations
Quiz: Paradigmas de Sistemas de Diseño
Estilos para tu Sistema de Diseño
Tipografía
Bonus: Cómo evitar colores constrastantes
Paleta de colores
Quiz: Estilos para tu Sistema de Diseño
Reglas de espaciado, Animación, Voz y Tono
Reglas de espaciado
Animación
Consejos para empezar a animar usando After Effects
Voz y tono
Quiz: Reglas de espaciado, Animación, Voz y Tono
Icon System y UI Kit
Iconografía
Hitos
Bonus: UI Kit
Quiz: Icon System y UI Kit
Un sistema basado en personas
Un sistema basado en personas
Iteremos
Cierre
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Las reglas de espaciado son muy útiles cuando trabajamos nuestros sistemas de diseño para anticipar la visualización de nuestras interfaces en diferentes dispositivos.
Aportes 55
Preguntas 7
Acá les dejo una imagen, ojalá les sirva.
Aclaro: El elemento de 50 x 50px con borde de 1px tendría un tamaño de 52 x 52px. Si agregamos un margen de 1px pasaría a medir 54px x 54px. Recuerda que si agregas un borde de 1px se agregará en todas las aristas, arriba, derecha, abajo e izquierda, sumando 2px a cada eje.
En CSS Diego de Granda nos enseño a utilizar la unidad “rem” ya que esta toma el valor del tamaño de fuente del elemento padre mas lejano (html) que al asignarle a este elemento un font-size de 62.5% hacia que un “rem” fuera igual a 10px lo cual considero que podría utilizarse para el ejemplo de esta clase.
tamaño de las distancias o espaciados
size = 32px
margin = azul
margin = size/2
padding = rojo
padding = size/2
Podemos añadir bootstrap a adobe XD ??? para probar como va a quedar la app antes de empezar a programar??
Gracias!!!
px=pixeles Si un elemento mide 50px por 50px y le poner un border de 1px el elemento medirá 52px y le ponemos una margen de 1px el elemento mide 54px Esto por que pues que al colocar un margen, border, etc este se coloca a la derecha e izquierda arriba y abajo.(Hay excepciones)
✨ Concepto clave
Los Layouts son la culminación de reglas espaciales y de la organización de contenido en una simple composición.
.
Definiendo el escalado lógico, es posible definir nuestros puntos de cambio (Break points) para escalar los tamaños y la variedad de tamaño de nuestros elementos.
.
ℹ️ Definición
Es un layout que cambia enteramente en el formato que será presentado.
.
Generalmente, se trabajan diferentes experiencias según sea el dispositivo (Desktop, Tablet, Mobile, etc.).
.
.
ℹ️ Definición
Es un layout que adapta el contenido con base en la dimensión actual, mantenido el mismo a escala.
.
Generalmente, el más costoso ya que se busca homologar un misma experiencia a lo largo de todos los tamaños de ventanas.
.
.
ℹ️ Definición
Ya que se omite la interacción, se degrada la flexibilidad por la legibilidad.
Utilizada por gráficas o tablas de información.
.
Ya que se omite la interacción, se degrada la flexibilidad por la legibilidad.
.
Utilizada por gráficas o tablas de información.
.
Cuando no están definidas las reglas de espaciado, es muy común que la gente de Front-end según el dispositivo tienda a separar los elementos de manera subjetiva.
Regla de espaciado: Definir el espacio que va a tener un elemento del otro. Esto permite generar Ritmo en la aplicación. Hay 3 tipos de espacios que podemos encontrar cuando estamos diseñando (Padding, border, margin)
Padding: Es el espacio que se encuentra entre el borde y el interior del elemento.
Margin: es un espaciado que tiene el elemento hacia afuera.
Border: Es el espacio que le damos al borde del elemento.
Es importante definir los distintos tipos de layout que tiene nuestra aplicación. Layout es un template donde se define las posiciones y distribución de los elementos que componen la pagina.
En el momento de documentar, tener en cuenta dejar claro como se manejan las unidades de espaciados. Y definir las unidades de espaciado que va a llevar los padding, border y margin de cada elemento.
Tengo una duda, tratare de explicarlo en el sistema que uso para programar al poner los elementos en la pantalla, siempre me queda un espaciado diferente mas que nada por el pading, en este caso que recomendación me darías
1.-
2.-
Todos los elementos tienen la opción de centrado.
⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.
✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.
Pues, si sabes CSS esto se te hace muy fácil de entender porque es el día a día, el Box Model o modelo de caja:
Mírenlo así: Todo elemento está contenido en una caja o box,
A mí la que me funciona bastante bien es la Regla del 8. En la cual baso todas las medidas basadas en los números múltiplos de 8,
ℹ️ Definición
Un sistema espacial define las reglas de tamaño y espaciado, mientras una grilla ayuda a la organización de nuestro contenido en proposiciones estructuradas.
.
Tomando los principios de la impresión, se toma a las grillas para organizar bloques de texto e imágenes a jerarquías visuales con el objetivo de la legibilidad.
.
ℹ️ Definición
Una organización de contenido en una distribución de espacio vertical, uniformemente.
.
Un ejemplo común es el uso de 12 columnas, permitiendo dividir el área en mitad, tercias, cuartas y sextas.
.
.
ℹ️ Definición
Una organización que toma columnas y renglones, distribuyendo el contenido en una matriz estructural.
.
Una matriz modular es ideal para el estricto formato, flexible donde se dicta su área.
.
.
ℹ️ Definición
Una organización usada para la distribución de texto, párrafos, etc.
.
Hay que definir el espacio que tendrán los elementos entre si, para generar un ritmo dentro del proyecto. Es mejor que haya un ritmo visual tranquilo, a uno acelerado. Tenemos 3 tipos de espaciado:
El layout son cosas que se tienen que definir, para saber el orden donde irán todas las cosas y contenido de nuestro proyecto.
Se pueden hacer reglas de espaciado, donde utilicemos unidades de acuerdo a una medida exacta, esto ayudara mucho al programador al momento de hacer la pagina.
✨ Concepto clave
Un sistema espacial, grid y layout proveen de reglas que dan a nuestros diseños un ritmo consistente, acotando la toma de decisiones, ayudando a los equipos a mantenerse alineados.
.
ℹ️ Definición
Un sistema espacial es un conjunto de reglas para gestionar las medidas, tamaños y espacio entre los elementos conformantes de un sistema de diseño.
.
Uniformemente, homologa una consistencia reduciendo el número de desiciones al momento de incorporar nuevos elementos visuales.
.
Como recomendación, se empieza definiendo una unidad base que servirá como referencia para crear una escala de valores
.
De ahí, puede variar los siguientes pasos a realizar porque supongamos:
.
.
En la imagen, podemos observer un tamaño de palabra (20px
).
.
De aquí podemos suponer 2 tipos de transformación sobre un espaciado, del cual definiría un determinado comportamiento.
.
❓ Debate
¿Cómo deberíamos priorizar nuestras medidas, elemento o contenido?
.
Enfocándonos en el tamaño, tomamos prioridad de los elementos con contenido predecible, manteniendo el ritmo como conjunto de información.
.
Podemos mencionar botones (buttons) o entradas de texto (input text).
.
.
Enfocándonos en las dimensiones, tomamos prioridad de los elementos con contenido menos predecible, del cual tomamos cuidado de su puesta en escena.
.
Podemos mencionar que tablas o descriptores (hero).
.
.
.
✨ Concepto clave
Herramientas como Figma exponen bordes internos y externos, los cuales en la web podemos manipularla mediante la propiedad box-sizing.
.
De esto, tenemos que tomar la decisión de aquel aspecto que deberá comportarse a lo largo de un sistema de diseño un elemento, y no como una sola unidad.
.
El uso de box-sizing
dependerá de:
content-box
- Al darle la propiedad al elemento, todas las medidas encapsuladas será sumadas al rederizado final, pudiendo superar la medida final.border-box
- Al darle la propiedad al elemento, todas las medidas encapsuladas será sumadas, dando una medida exacta.Es importante para el border conocer si es Inner, center o outter. con ello influye o no en el tamaño del elemento.
¡Yo también te quiero profe!
Interesante información. Normalmente, no nos preocupamos (yo), hasta que, ya estoy escribiendo el código.
Este tema al principio puede ser un poco confuso yo la unica forma de poder entenderlo bien es
Padin = border transparente desde la caja hacia dentro
Border = border con cualquier color desde la caja hacia fuera
Margin = espacio de separación entre las cajas las cuales pueden estar con bordes o sin ellos
Este curso me gusta cada vez mas.
Es importante dejar claras las reglas de diseño para que el programador no trate de reparar como el creé que debe hacerse.
a esta clase le falto animaciones, pudo mostrar un cuadrado en el navegador e ir variándole las cosas que mencionó
un pan ahhhahahahah grande rulotico, siempre tan particular XD
equisde
son mas conceptos que se usan en web, bueno yo lo uso solo en css
este tema de espaciado,en vez de escribirlo, ¿seria mejor ponerlo en zeplin y ahi nos respetaria los px de los espaciados?
Wow! Todo ha cambiado tanto desde que se grabó este curso! Adobe Xd ya trabaja con padding, ya no solo es algo de programación!
Podemos añadir bootstrap a adobe XD ??? para probar como va a quedar la app antes de empezar a programar??
Gracias!!!
Que hermosaaaaa claseeeeee 😱
Mantener un espaciado consistente entre elementos similares brinda coherencia y facilita la comprensión del diseño. Asegúrate de establecer medidas uniformes para el espaciado vertical y horizontal en elementos como botones, campos de formulario y bloques de contenido.
Esta uniformidad no solo contribuirá a una apariencia estéticamente agradable, sino que también mejorará la legibilidad y la comprensión de la interfaz por parte de los usuarios, independientemente del dispositivo que utilicen. La coherencia en el espaciado es un aspecto fundamental para garantizar la usabilidad y la percepción visual positiva de tu sistema de diseño.
Interesante esto de que el layout sea en columnas, toca averiguar más xd
Que gran profesor!!
Cabe recordar que es siempre mejor emplear las medidas “rem” que “px” debido a temas de accesibilidad y facilidad en cuanto a la construcción de nuestro sitio o app. Esto se puede alterar escribiendo en la etiqueta de html en nuestro archivo de css:
html {
font-size: 62.5%;
}
.
Así no sólo alteramos el tamaño base de nuestas fuentes sino también estandarizamos todo con las medidas rem
Unidades de espaciado, muy util
se puede enviar el link de notion por aca?
El border es el borde basicamente!!!😁
pos sí
El ritmo es el espacio que se da a un elemento arriba y a otro abajo. Afecta directamente en la estructura y la jerarquización de la información. Se genera ritmo visual al generar espacio entre un elemento y otro.
Hay tres componentes de espaciado que intervienen en los elementos gráficos web y de interfaces, y que afectan el ritmo:
Padding. Espaciado alrededor de un elemento, hacia adentro.
Margin. Espaciado de los elementos hacia afuera.
Border. Espacio que se le puede dar al contorno del elemento.
Por otro lado, está este componente de las interfaces, el cual es importante en la arquitectura de información:
Spacing
Layout
Ritmo
Me parece o el profesor tiene la voz de Sasuke? xD
El notion de Rulotico no esta completo!!!
cv
alguien en pleno 2021 tiene accesos al documento de Notion ?
¿Soy yo o no funciona el enlace de Notion?
Apuntes de la clase:
<h3>Reglas de espaciado</h3>Esto es importante por todos los distintos tamaños de pantallas que tenemos actualmente. Al definir el espaciado entre los elementos generamos un ritmo visual.
Tenemos 3 elementos (en CSS) que afectan nuestro espaciado:
El espaciado entre 2 componentes se llama unidaddes.
De igual forma debes documentar esto.
https://youtu.be/rYx7W49dF2E yo quede con dudas sobre padding y margin que este video de 3 minutos me dejo claro.
I’m 🦄
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?