Layout
Definición del espacio y estructura del contenido en Web y Apps.
Layouts
Harmonía utiliza dos medidas mínimas de layout establecidas como breakpoints con la siguiente estructura de columnas:
| Mobile & Apps | 360 px | 4 columnas |
| Desktop | 1440 px | 8 columnas |
El offset en ambos lados del contenedor siempre es variable de acuerdo a los distintos tipos de pantalla que hay en la actualidad, por lo que no es un parámetro que pueda ser determinado, esta medida siempre será dinámica; sin embargo, deberá ser tomado en cuenta para efectos prácticos al diseñar a partir de un ancho de 360 px siguiendo la metodología Mobile First con un offset minimo de 16px.
La proporción del contenido deberá mantenerse siempre fijo y tanto las columnas como los medianiles (Gutters) requieren persistir siempre con las medidas indicadas.
*Esta configuración de Layout propuesta en Harmonía ha sido establecida de acuerdo a lo que ya existe en producción durante el periodo del desarrollo de este Sistema de Diseño (2023), con la intención de alinear los fundamentos y componentes de la manera más práctica y ágil que no conlleve un rediseño general de todo el sitio web, tanto en versión Desktop como Mobile.
Web Mobile & Apps Layout
Especificaciones:
Configuración en Figma:
Figma Grid Style
Desktop Layout
Especificaciones:
Configuración en Figma:
Figma Grid Style
Content Layout
La organización del contenido es indispensable para mantener un diseño armonioso y funcional en cualquier plataforma con el objetivo de lograr una consistencia visual en cualquier formato de pantalla.
Aplicando correctamente todos los fundamentos anteriores tenemos como resultado los siguientes layouts y las columnas de contenido que las conforman, las cuales nos dan la pauta correcta para diseñar la estructura del contenido en el e-commerce de Elektra así como generar las dimensiones correctas de las secciones, componentes y elementos que conforman el sistema.
Desktop
Web Mobile & Apps
Crear o utilizar layouts de contenido distinto que no estén alineados a esta configuración provoca un desajuste en las medidas y dimensiones utilizadas en el 8 px grid system y en consecuencia la inconsistencia al utilizar los componentes, espaciados, textos y diversos elementos.
Vertical rhythm
Este concepto es muy útil y valioso cuando se aplica correctamente en el diseño de nuestra interfaz al darle su debido espacio a cada sección, texto o componente que la conforman, brindando un diseño fresco y funcional.
Se sugiere mantener las siguientes separaciones básicas entre los elementos para darle un buen ritmo vertical a las pantallas a lo largo de su desplazamiento y brindar la percepción de calidad y organización a los usuarios.
Spacing
El spacing es la distancia entre los objetos del diseño de la interfaz. Debe usarse para complementar el objetivo de la plataforma, creando una jerarquía en las secciones o componentes y ayudando a que el contenido sea útil y comprensible visualmente.
Una vez más, la unidad de referencia vuelve a ser protagonista, ya que es la que sirve para generar todos estos valores basados en el 8 px grid system, por lo que los espacios deberán ser múltiplos de 8 siendo los siguientes los más esenciales:
También puedes consultar
Grid
Typography
A través de nuestro sistema de diseño establecemos prácticas que nos permitan el diseño de una interfaz más aceptable y que ayuden a mejorar la experiencia de nuestro usuario para el e-commerce de Elektra.mx
Aquí puedes encontrar el portal digital y las apps disponibles:
