Foto de Hal Gatewood en Unsplash
“Cuando estudié diseño nunca me enseñaron esto, o al menos, no de forma sencilla. Recuerdo perfectamente el bloqueo que sufrimos toda la clase cuando nos enfrentamos a diseñar por primera vez una web y el desastre que fue.
Así que vamos a ver como plantear el “esqueleto” de una web de forma fácil”.
El mapa web
Lo primero que hay que plantear antes de comenzar con el diseño de una página es su “mapa web”. Es algo tan sencillo como definir una lista con las partes va a tener la web, definiendo las diferentes “páginas internas” que se van a plantear.
Por ejemplo: página de inicio, página de servicios, página de contacto, etc.
Las partes del esqueleto
Hay que tener claro que en lo referente al diseño, una página web se divide en tres partes, dos que se mantendrán fijas –header y footer- y que compartirán todas las páginas internas del diseño y -el cuerpo- que es la parte que cambia en función del contenido de cada una de ellas.
Header
Es la cabecera de la página y en un diseño tradicional siempre contiene al menos, la marca de la empresa y el menú de navegación entre las páginas internas.
Cuerpo
Esta es la parte dónde variará el contenido que se quiera añadir en el diseño, por ejemplo imágenes, vídeos, títulos, textos, etc.
Footer
Es el pié de página de la web. Normalmente se utiliza para realizar un resumen muy breve de todos los elementos generales del diseño. Marca de la empresa, menú de navegación, datos de contacto, menú legal, etc.
La estructura básica del diseño
Las tres partes del esqueleto de la una página web se construyen en base a una estructura básica, los contenedores, que nos ayudarán a distribuir los diferentes elementos que después vamos a ir colocando en el diseño.
Cómo lo más común en diseño web es comenzar diseñando la versión de “escritorio” vamos a ir dibujando contenedores horizontales con forma de rectángulo, llevando los extremos hasta el borde de la pantalla.
Se trata de ir añadiendo un contenedor debajo del que ya tenemos dibujado, creando franjas horizontales dónde después se añadirán elementos de contenido.
**** Añadir dibujo de la estructura
Elementos comunes
Una vez tengamos clara la disposición general de la web y la estructura básica del diseño, ya podemos comenzar a jugar con los diferentes elementos que se pueden colocar.
Me refiero a distribuir en los contenedores del cuerpo de las diferentes páginas internas, las imágenes, vídeos, títulos, textos, botones, etc.
Para realizar todo esto no es necesario conocer el contenido final de la web, porque lo que estamos haciendo es un boceto estructural del diseño, vale con saber que elemento básico se quiere colocar.
**** Añadir dibujo de elementos básicos
Elementos emergentes
Muchas veces queremos añadir elementos que no se ven a simple vista, como menús o ventanas emergentes, simplemente hay que tener claro cuando van a aparecer en el diseño.
En lo referente a la maqueta, es tan sencillo como dibujarlos a parte, siguiendo la misma estructura que hemos usado para el resto del diseño.
Pensar en la adaptabilidad
Una vez esté acabado el diseño de la maqueta de la versión ordenador, hay que pensar como redistribuir los elementos que se han colocado.
Aquí la clave es ponérselo fácil al usuario y pensar en “cómo se va a usar esa web”. Este punto es importante porque a día de hoy el 98% de los usuarios van a visualizar el diseño en móvil o en una tablet.
Mas adelante escribiré específicamente sobre el proceso de adaptabilidad y usabilidad, porque es realmente importante aportar una buena experiencia de usuario a la hora de diseñar una página web.
El estilo del diseño
Hasta ahora no he comentado nada respecto al estilo que se quiera usar, porque todo lo que hemos hecho es realizar un esqueleto que nos va a ayudar a construir la página web.
De echo, el mismo esqueleto se podría usar para varias web con diferentes estilos, porque es ahora cuando habrá que buscar y unificar los detalles de diseño.
Habrá que buscar el tono, el estilo y los recursos específicos que correspondan a la marca a la que pertenecerá la web. Este será el siguiente punto importante en el diseño y desarrollo de un proyecto web, porque es en este punto dónde se conseguirá una cohesión entre todo lo que hemos planteado antes.
