El Layout Web

Fundamentos diseño web, el Layout

Muy buenas diseñadores!

Layout Grid Behance

Al terminar de leer este post al fin vas a entender cómo funciona el layout web, como adaptamos nuestros diseños a diferentes pantallas o cómo usar los grids… ¡Vamos allá!


Aquí vamos a repasar una serie de conceptos sobre el layout web que todo diseñador web que se precie tiene que tener claros y dominar.
Si bien es cierto que existen muchas maneras de diseñar webs y existe mucha libertad a la hora de diseñar una web, pero existen una serie de factores que hemos de entender y que se mantienen en todos los diseños webs por muy raros y disruptivos que parezcan.

  • ¿Qué es el Layout?
  • La ciencia del color
  • Luminosidad del color
  • Glosario del color
  • Combinar colores, la armonía
  • Cómo robar colores

¿Qué es el layout web?

Hoy nos vamos a centrar en la base del diseño web, en el layout. ¿Qué es el layout?
Bien, nos referimos al layout cuando hablamos de la disposición de todos los elementos que forman el diseño de nuestra página web.


Así que a la hora de diseñar un layout estamos pensando en columnas, márgenes o gutters, espaciados, separaciones, versiones responsive…Ya sabes por donde voy. Esos detalles que harán que tu web se vea profesional y tengas una consistencia a la hora de diseñarla.

Existen  muchas guías para crear nuestro layout pero nosotros nos basaremos en las bases que sentó Google, podéis ver mucha información sobre esto en material.io, “La biblia del diseño web”. Es una página para guardarla en favoritos el resto de tu vida y poderla consultar siempre que sea necesario.

Bien, existen 3 premisas a la hora de diseñar una web, 3 premisas que han de ser nuestra hoja de ruta. La primera, la predecibilidad, trata de hacer diseños coherentes y previsibles, no trates de romper con lo establecido todo el rato, solo dominando y entendiendo lo establecido y porqué es así podremos innovar con sentido. 

La segunda es la consistencia, trata de hacer diseños consistentes, si usas un color, trata de usarlo con consistencia, que no haya variaciones, setea tus guidelines antes de comenzar un diseño web. Piensa bien todos los tamaños de la tipografía, los colores, botones, sombras, espaciados y se constante con ello.

No solo nos quedará mucho más profesional nuestro diseño web, sinó que será mucho más sencillo diseñar y desarrollar, tenemos unos tamaños y de allí no nos salimos.
Responsive, si evidentemente hemos de diseñar nuestra web en responsive, pensando en todos los layouts posibles, eso desde hace años lo sabemos, pero cada vez más las webs no son sólo responsive en cuanto a layout o dispositivo en el que se acceda. Las webs cada vez se adaptan más al usuario, es importante entender como navegan, no todos los usuarios reaccionan de la misma forma ni navegan igual. Hemos de poder adaptar nuestras webs a las necesidades de nuestros usuarios.

Anatomía layout web

Airbnb- Appbar
Appbar en Facebook
Airbnb- Appbar
Appbar en Youtube

Para comenzar a hablar del layout es importante entender cómo llamamos a cada elemento, para ello vamos a ver unos ejemplos.
Esta barra de aquí arriba la llamaremos APPBAR o NAVBAR, la encontramos en casi todas las webs, la parte donde normalmente va nuestro logo y el menú, en muchas ocasiones también una searchbar.

Navegación en Facebook
Youtube Navigator

Luego tenemos el Navigation, esta zona no está en todas las webs, pero la vemos casi siempre en las webapps. Suele haber un menú que nos permite navegar entre los diferentes bodys. Y se suele encontrar a la izq de la pantalla.

Airbnb- Body
Behance- Body
body en Youtube

Por último tenemos el cuerpo de página o body, dónde encontraremos toda la información.

Grid Layout

Vemos que todos los ejemplos tienen varios de estos elementos pero cada uno es muy diferente al anterior y esto a qué se debe. Se debe al Grid Layout.

Todas las páginas webs respetan un grid layout pero no tiene porque ser él mismo, existen muchas posibilidades a la hora de diseñar el nuestro dependiendo de las necesidades que tenga nuestra web.

Layout Grid AirBNB
Layout Grid Facebook
Layout Grid Behance
Layout Grid Youtube

Dentro de nuestro grid layout encontramos 3 elementos, que van a  ser los causantes de los diferentes estilos de nuestra web.
Las columnas son las divisiones horizontales que nos permiten ordenar nuestro contenido de forma coherente en todo el diseño. Que están separadas por espacios o gutters. Que es el espacio entre estas columnas. Y los márgenes, que serán el espacio total con los lados de nuestra página.Los espacios laterales.

Como os digo hay infinidad de posibilidades a la hora de diseñar nuestro Grid layout pero hay algunas premisas que hemos de entender.

Break Points

Para entender el grid layout hemos de entender los que son los breakpoints, o puntos de rotura.
Los puntos de rotura son aquellos tamaños por los que nuestro layout cambiará y se adaptará al siguiente dispositivo. Podemos crear tantos puntos de rotura como sea necesario para nuestro proyecto pero lo normal es no diseñar más 5. Como digo hay varias opciones a la hora de definir nuestros breakpoints, vamos a mostrar la que nos comentan en Design.io.

Aplicar layout web

Layout grid Desktop

Normalmente comienzo a diseñar con el tamaño 1440px, el tamaño de portátil o macbook. Comienzo a diseñar en este porque es el que tenemos a mitad, nuestros diseños o partes de estos nos servirán para tamaños más grandes y seguramente también para más pequeños.

Para portátil diseñamos 12 columnas, con 16px de espaciado. En los márgenes podemos variar, jugar con márgenes de 32px, o de 24px, podríamos jugar con márgenes mayores si fuera necesario.

Layout grid tablet

Por abajo tenemos el tamaño tablet, horizontal 1240px, vertical 768px, podemos diseñar el horizontal si es necesario, pero muchas veces nos funcionará bien nuestro diseño macbook.

Si no es así, lo crearemos de 8 columnas, con espaciados de 24px y márgenes de 24 o 32.
en la vista vertical, lo trataremos como si fuera un móvil grande, creando 4 columnas, con 16px de espaciado y márgenes de 16px.

ayout grid de iphone SE

A partir de 600px pasamos a la vista móvil hasta 320px del iphone SE. Para esta vista usaremos 4 columnas con 16px de espaciado y de margen.

Por encima de la vista macbook, la primera que hemos visto, tenemos la vista desktop.
Más de 1440, en este caso usaremos 12 columnas y 24px, de espacio con márgenes variables.

La regla de los 4px

Layout Grid AirBNB
Layout Grid Facebook
Layout Grid Behance
Layout Grid Youtube

Vemos como cada uno tiene su grid layout y el contenido se ajusta a las columnas, pero ojo, no todo se ajusta a esto. Esto es un error muy común cuando empezamos a diseñar webs, queremos ajustarlo todo a las columnas y no puede ser. Para ello tenemos los espaciados. No nos basamos en guías, ni en columnas, ni en nada parecido sino en la regla del 4px y 8px. Todos nuestros espaciados (llamados paddings) respetan la regla del 4px, veamos un ejemplo en la página Behance, pero sí hacéis la prueba en cualquier página bien diseñada veréis lo mismo. Para que un diseño tenga consistencia hemos de seguir esta simple norma. Tanto en vertical como en horizontal. 

Behance código

Esta misma regla la tendremos en cuenta también para las dimensiones, el tamaño siempre múltiplo de 4px o 8px para que todo tenga consistencia.

Alineación

En cuanto a la alineación, dos detalles, Alineación vertical siempre tratamos de alinear al centro a no ser que necesitemos crear algún diseño concreto.
En cuanto a la alineación horizontal, trataremos de alinear todo a la izquierda. Podemos alinear al centro textos cortos, no más de 3 líneas, no es aconsejable, cuestan de leer.
Y por favor no justifiquemos los textos, el justificar un texto es un arte y es algo muy complejo, el ordenador lo automatiza y da resultados realmente horrorosos, creando ríos en el cuerpo de texto que dificultan la lectura.


Para alinear todo podemos ayudarnos de Keylines o guías, para ajustar todo a múltiplos de 4px. Entre Keylines y columnas podremos ajustar todo mucho mejor.

Bien, hemos hecho un repaso intensivo de lo que es un layout, si seguimos todo lo que hemos comentado en el post, nuestros proyectos web van a tener un aspecto mucho más profesional, va a ser mucho más fácil trabajar con ellos y nos va ahorrar mucho tiempo.

Deja una respuesta

No te quedes fuera

⏳En Febrero 2023 subiremos los precios de co-freelance a los nuevos miembros, no te quedes fuera.

.