Casi siempre que navegamos por nuestras páginas web favoritas, no solemos fijarnos en el diseño gráfico que las envuelve. Nos dedicamos a buscar infomación, compartir algo en las redes sociales, ver videos de caidas :) o comprar algún producto en nuestra tienda online más segura. Pero aunque no nos demos cuenta, el diseño gráfico de una página web nos hace más agradable el entrono y mucho más útil la navegación.

En este artículo vamos a ver como se desarrolla el diseño gráfico de una página web desde cero. Así, la próxima vez que naveguemos por una web seremos más conscientes de que el diseño gráfico funciona, aunque no nos demos cuenta.

Aún no hemos abierto nuestro programa de diseño y ya comenzamos a barajar posibilidades gráficas. Cuando el cliente nos cuenta su idea para una nueva web o quiere actualizar la que tiene, los diseñadores comenzamos a buscar la forma de atraer al nuevo usuario. Un estilo elegante para una tienda de complementos, una web sólida para una gran empresa o un diseño dinámico para un parque acuático son conceptos iniciales de los que posteriormente se inundará el entorno gráfico de una nueva página web.

Antes de colocar el primer “ladrillo” gráfico de nuestra web debemos estudiar el diseño corporativo que la empresa viene utilizando. El logotipo de la empresa es el pilar del desarrollo gráfico de cualquier elemento y siempre se colocará en un lugar preferente dentro de la web. El logotipo nos transmite los valores de la empresa, además de mostrarnos sus colores corporativos. Incluso nos proporciona ciertos detalles gráficos que se repetirán en las diferentes zonas de la web para dar una uniformidad gráfica a todo el entorno.

Ya se va concretando el aspecto de la web. Para ello es fundamental crear una esquema visual de la distribución de los contenidos de la página. Normalmente se diseña a un nivel muy básico, utilizando textos, líneas y recuadros. Con esta estructura podemos ver que por ejemplo, la página tendrá una gran fotografía al inicio, o que después de la sección de noticias se colocará una sección de contacto, o que el porfolio se mostrará con miniaturas más o menos pequeñas.

Ya estamos listos, tenemos la idea, los elementos corporativos y un esquema de distribución de contenidos. Es la hora de hacer realidad la idea de web que teníamos en un principio. Seguiremos fielmente el esquema que ya teníamos predefinido, no obstante aportaremos soluciones gráficas que transformarán dicho esquema en un entorno web real. El tamaño de los distintos elementos serán reales, las tipografías utilizadas también tendrán un tamaño y una posición real. Después del proceso de diseño se presentará una propuesta gráfica, no interactiva, para que tanto desarrolladores como cliente puedan aportar sus sugerencias o correcciones.

Una web, además de ofrecer sus contenidos al usuario, transmite unos valores de marca que están representados mediante su logo y por consiguiente, por sus colores corporativos. De una forma u otra, el diseño de nuestra web debe incluir su color o colores corporativos. Así conseguiremos una uniformidad gráfica reconocible por el usuario. Por otro lado, tendremos mucho cuidado a la hora de incluir otros colores que no sean los corporativos. Estos nuevos colores deben utilizarse en pequeños elementos para que no batallen con nuestro color principal.

Debemos buscar tipografías con una alta legibilidad, y no usar más de dos tipos de letra. Una tipografía sencilla y elegante nos ayuda a tener una experiencia más relajada y satisfactoria. Hay tipografías que funcionan muy bien cuando forman parte de un logotipo, pero son de difícil lectura si tienen que formar parte de un párrafo. Una tipografía demasiado historiada puede ofrecernos problemas de lectura, aunque sea muy corporativa.

Seguramente nos guste presentar cada una de las páginas interiores de nuestra web de una forma distinta. Esto daría dinamismo a la página y ofrecería al usuario elementos nuevos. No obstante tenemos que conseguir que el entorno gráfico y de navegación siempre sea el mismo. Para ello tenemos que utilizar elementos gráficos comunes a todas las páginas. La repetición de estos elementos nos hace reconocer ciertas pautas de usabilidad, sintiéndonos más cómodos navegando por la web. Un menú principal común, una cabecera similar y un pie de página igual en todas las páginas nos sitúa dentro de un entorno conocido. Otros elementos como formularios de contacto o botones también deben ser iguales en todas las páginas. Así el usuario sabrá que dichos elementos tienen el mismo funcionamiento independientemente de la página en los que se encuentren.

Hoy en día nuestra web debe adaptarse a cualquier dispositivo móvil que se precie. La adaptación a móvil de nuestra web requiere un cambio en la presentación de contenidos, por lo tanto también en el diseño gráfico. Hay dos cuestiones fundamentales para esta adaptación. Por un lado está la nueva distribución de elementos. Si desde un principio se crea un diseño modular, la nueva distribución se producirá sin problema alguno, ordenándose nuevamente todos los elementos pero manteniendo el mismo aspecto gráfico. Por otro lado está la supresión de elementos, ya que la pantalla de un móvil es más pequeña y no puede admitir toda la información que se muestra por ejemplo, en nuestro portátil. Hay que eleminar estos elementos pero procurando que la web sea reconocible en cualquier dispositivo.

¡A probar la web se ha dicho! Navegaremos por todas sus páginas para comprobar que está todo bien, o corregir cualquier fallo de última hora, tanto de diseño como de navegación. Ver que todos los botones y enlaces funcionan, que no se nos ha olvidado ningún contenido, que se adapta correctamente a todos los dispositivos son acciones que debemos realizar antes de que nuestra web vea la luz. Cualquier problema se solucionará y solo entonces llegará el hora de la verdad…

Ahora cruzamos un poco los dedos porque siempre el usuario final tiene la razón. Si todo está bien, tendrá una experiencia satisfactoria utilizando nuestra web. Si no, con nuestras estadísticas de uso podremos ver cuales son los caminos que coge el usuario al navegar, detectaremos el fallo y nos permitirá corregirlo para obtener más fluidez en la navegación.

En definitiva el diseño gráfico siempre está a disposición de una funcionalidad, eso sí, siempre buscando ese acabado artístico que nos emocione. Una web puede tener el contenido más interesante u ofrecer los mejores productos, pero sin un buen diseño, los usuarios cambiarán rápidamente de página, haciendo que perdamos oportunidades para nuestro negocio.

¿Qué otra cuestión nos ayudará a diseñar nuestra web?

¿Puede ser un diseño artístico y funcional a la vez?
¿Que fallos de diseño tiene tu web? ¿Tendrían fácil solución?