Skip to main content

Layout

El Layout es la estructura del contenido principal en el diseño. Usamos diferentes Layouts para diferentes requisitos de diseño. Un Layout está formado por contenedores, que a nivel de página, envuelven el contenido. El número de contenedores a nivel de página que se utilizan para envolver el contenido principal determina la variación del diseño.

Un buen diseño de Layouts se relaciona con los objetivos y en una buena experiencia de usuario. Por eso podemos decir que una distribución correcta hace que el usuario encuentre lo que busca. Esto también se refleja en una mayor realización de tareas.

Layout de 12 Columnas

Layouts más comunes​

Layouts

Full Width Layout​

El contenido se adapta al ancho establecido en el Layout. Este Layout es el más utilizado en landings y páginas de inicio.

Layout de 2 columnas​

Tiene dos contenedores a nivel de página. Cada contenedor puede tener un ancho relativo (%). En general, un contenedor a nivel de página comparte más peso de columna en comparación con el otro.

El ancho de la barra lateral se fija en determinados breakpoints, el espacio restante está ocupado por un contenedor de ancho fijo o ancho fluido. Un dashboard con menu lateral fijo es el ejemplo perfecto de diseño con Sidebar Layout.

Layouts en Adevinta​

Las diferentes marcas en Adevinta tienen diferentes Layouts según sus necesidades de negocio. Por ejemplo, en base a los diferentes formatos publicitarios, el Layout de las diferentes páginas de inicio difiere entre verticales. Estos Layouts también pueden variar entre diferentes pantallas, para una misma página, de una misma marca.

Para poder trabajar de manera más alineada y consistente, se recomienda definir y estandarizar las definiciones de los Layouts utilizados por cada marca. Un ejemplo, seria definir estos Layouts como Componentes en Figma, de manera que podamos arrastrar una Instancia y empezar a diseñar dento del Layout acordado.

¿Dónde están los layouts de mi marca?​