Layout
El layout estructura la pantalla organizando la distribución de los elementos, ya sean explícitos (imágenes, textos, bloques de color) o implícitos (espaciados).
Jerarquía
Organiza el nivel de importancia de cada elemento. Teniendo en cuenta su peso visual, ayuda a decidir qué información se ve primero facilitando el entendimiento de la tarea.
Alineación
Crea una apariencia limpia y pulida. Dispopone los elementos en una página organizando el diseño y creando una conexión visual entre ellos.
Próximidad
Cercanía entre elementos visuales. Permite comprender el contexto y saber cuáles pertenecen a un mismo grupo.
Contraste
Característica particular de un elemento. Resalta diferencias para captar el interés y la atención de las personas.
Organización de la información
Pensar qué información necesitará conocer y con cuál deberá interactuar primero la persona para definir cómo se deben ordenar y jerarquizar los elementos en la página.
Conexión entre elementos
La cercanía ayuda a que los objetos se entiendan como parte de un mismo grupo. Cuanto más relacionados estén, más cerca deben estar.
Espaciado en múltiplos de 8px
Para elementos relacionados utilizamos espaciados más estrechos y, para instancias donde buscamos hacer foco y/o entre grupos conceptuales distintos, el espaciado es más amplio.
Abordar el diseño primero en Mobile
De esta manera nos aseguramos una correcta lectura y visualización del contenido en las dimensiones más pequeñas para después poder escalarlo a las de mayor tamaño.
Consistencia cross dispositivo
El diseño debe permenecer reconocible en sus diferentes formatos (mobile y desktop).
Ubicar los elementos dentro de las columnas
Ayuda a mantener alineación y consistencia en el espaciado generando armonía en el diseño.
No usar gutters por fuera de las columnas
Genera errores en la alineación rompiendo la armonía del diseño.
Distribuir los componentes dentro de la grilla
Organiza el contenido en bloques conceptuales para mantener la consistencia en el espaciado.
No ordenar elementos individualmente
La distancia entre elementos fuerza la grilla alterando la conexión y entendimiento entre sí.
Ubicar el contenido dentro de los márgenes
Asegura que no se corte el texto y
facilita la lectura.
Distribuir los elementos dentro de la sección
Ayuda a balancear la información facilitando la lectura y mejorando el entendimiento.
1
Column
Bloque vertical que se utiliza para ubicar el contenido.
2
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3
Margin
Espacio que separa el contenido de los bordes laterales de la pantalla.
Desktop
Con un tamaño mínimo de 1440px de ancho por 1024px de alto en 12 columnas con un gutter de 24px. Con dos tipos de grilla:
Fixed
Columnas de ancho fijo y márgenes adaptables que centran el contenido. Uso predilecto para web.
Flex
Columnas de ancho flexible y márgenes fijos adaptables al ancho del contenido. Uso predilecto para herramientas internas.
Mobile
Con un tamaño mínimo de 360px de ancho por 640px de alto en 4 columnas con un gutter de 16px.
Contemplamos dos tipos de orientación:
Portrait
Orientación vertical de la pantalla. Posición por defecto.
Landscape
Orientación horizontal, rotación 90º del dispositivo.