Nosotros mismos somos los mayores usuarios de nuestra página web. En muchos casos no estamos satisfechos con la apariencia que tiene nuestra web y no sabemos bien por qué. El diseño aplicado a un sitio web ha de relacionar infinidad de elementos gráficos (menús, imágenes, botones, áreas de contenido, etc.).
El diseño de estos elementos gráficos ha de realizarse teniendo en cuenta dos pilares fundamentales en el desarrollo de una página web: la funcionalidad de la página y un diseño gráfico atractivo. En este sentido, hay diseños web que están a la vanguardia creando escuela, otros diseños que se adaptan perfectamente a las necesidades actuales del usuario, y por último, esos diseños a los que les falta ese “no se qué” para ser una página web atractiva al usuario y optimizada para que pueda ser más competitiva.
El diseño de estos elementos gráficos ha de realizarse teniendo en cuenta dos pilares fundamentales en el desarrollo de una página web: la funcionalidad de la página y un diseño gráfico atractivo. En este sentido, hay diseños web que están a la vanguardia creando escuela, otros diseños que se adaptan perfectamente a las necesidades actuales del usuario, y por último, esos diseños a los que les falta ese “no se qué” para ser una página web atractiva al usuario y optimizada para que pueda ser más competitiva.
Así que nos marcaremos a fuego los siguientes 5 puntos para evitar que el diseño gráfico de nuestra web vaya decayendo con el tiempo con las aportaciones que vamos haciendo. Al contrario, conseguiremos una página web moderna, útil y de la que por fin podamos decir: que web más chula tengo :D
1) Una buena jerarquía
Todo en nuestra web es importante, no puede faltar de nada, pero ¿qué es lo más importante y qué lo menos?¿Lo más importante es lo de mayor tamaño?¿Qué es primero, la funcionalidad o la estética? Aquí es donde se levantan los cimientos del diseño gráfico aplicado a nuestra página web. Existen tendencias de usabilidad que nos enseñan como los usuarios suelen moverse por las distintas webs, qué elementos y botones pulsan más y qué contenidos son los más visitados. Así que por esas lineas nos moveremos para asegurarnos de tener una web optimizada para la mayoría de usuarios. Detalles a tener en cuenta:
- Un menú superior es la base de la navegación web. Además si ese menú nos persigue cuando hagamos scroll por la página, mejor. Así tendremos siempre a mano la posibilidad de cambiar de sección. Como es un elemento siempre visible, no es necesario que sea muy grande, es más una herramienta que una zona superdestacada. En esa barra de menú es interesante que se encuentren elementos como nuestro logotipo, contacto principal y redes sociales.
- Nuestro mejor producto o servicio sí que debe aparecer destacado. Un gran tamaño y una imagen atractiva es muy importante. Mucho cuidado con rellenar un área grande con una imagen de poca calidad. Sería contraproducente. Y no nos olvidemos de incluir un botón directo que nos lleve a ese producto o servicio.
- Un scroll nos ayuda a tener una jerarquía de contenidos sencilla y comprensible. Los más importantes arriba y los menos abajo.
- El pie de página es un recordatorio de todos los contenidos por los que podemos navegar. Como el pie también está presente en todas las páginas puede tener una estructura sencilla de enlaces básicos.
2) Color corporativo sí, pero sin pasarse
Cómo nos gusta nuestra marca, así, con ese rojo corporativo que tanto nos identifica. Es necesario que el color corporativo esté en nuestra página web, por supuesto, pero… ¿conviene inundarlo todo de ese rojo?
La creatividad no tiene límites pero cuando además buscamos funcionalidad… Podemos combinar espacios más relajados donde nuestro color corporativo destaque (p.e. en el diseño de un botón), con espacios donde el color llene la pantalla, buscando llamar la atención sobre un servicio de una forma más activa. Lo que siempre buscaremos en cualquier caso es una máxima legibilidad de textos y una fácil identificación del elemento gráfico principal.
3) Cuántas tipografías, y qué bonitas
Nos gustan las tipografías especiales, algo original que nos haga destacar. Es una buena idea siempre que esa tipografía tan original no se adueñe de nuestra página web. Las tipografías especiales se pueden y se deben utilizar, pero con mucha moderación y, por supuesto, siempre que sean legibles. En Google Fonts podemos encontrar un gigantesco catálogo de fuentes descargables que podemos utilizar en nuestra web y optimizadas para ello, con un buscador, filtros de búsqueda así como un personalizador de texto de prueba.
Pero no nos volvamos locos y queramos colocar a saco todas esas fuentes en nuestra web. Lo ideal sería utilizar un par de tipografías, una más especial para títulos y algunos elementos destacados, y otra tipografía más convencional que nos proporcione una lectura relajada y un fácil reconocimiento de números y signos. También sería interesante utilizar solamente 3 ó 4 tamaños de fuentes (pequeña, mediana, grande y titulares). De esta forma también creamos una jerarquía según la importancia del contenido a leer.
4) Una imagen vale más que mil palabras, pero sólo si es buena
Vale, ya tengo mi tienda online, ya están los productos en mi estantería virtual, tengo los precios más buenos y unas ofertas que nadie podrá rechazar. Solo me faltan las fotos. Las tiendas online son de las webs que más fotografías utilizan, podemos decir que casi el 90% de lo que muestra un e-commerce es fotografía. Si ahí bajamos un pelín el nivel nuestra página se resentirá mucho tanto a nivel económico como a nivel estético. No hay diseño gráfico que pueda soportar una tienda online con productos mal fotografiados. Por ello un fotógrafo profesional en coordinación con el diseñador gráfico deberían encargarse de esa misión.
En páginas web corporativas además podemos recurrir a bancos de imágenes libres de derechos. La utilización de estas imágenes nos permite mantener un alto grado visual, de una forma económica y eficiente.
5) Llamando a la acción
Ahora que tenemos los elementos gráficos bien colocados, nuestro color corporativo presente, unas tipografías que nos diferencian y unas imágenes atractivas, solo falta crear en el usuario la ganas de pulsar esos elementos, de interactuar con los contenidos, en definitiva de disfrutar de la experiencia de navegar por nuestra página web. ¿Y como conseguimos esto?
Nuestra página no puede ser un mero listado de productos o servicios, tenemos que elevar ese contenido. Para ello vamos a crear “llamadas a la acción” mediante botones destacados, banners de ancho de página completo o links especiales. También debemos ser cautos con la aglomeración de este tipo de recursos, ya que podemos crear el efecto “feria” confundiendo al usuario en vez de guiarlo. Por eso es importante dejar espacio libre entre los elementos para relajar la experiencia y encontrar fácilmente estas llamadas.
En definitiva, hay que jugar con la moderación en la cantidad de recursos gráficos, con la calidad a nivel fotográfico, y con la eficacia de las llamadas a la acción. Haciendo un repaso a estos puntos nuestra página web tendrá un diseño gráfico atractivo y ayudará al usuario a navegar con facilidad por ella.
¿Hay alguno de estos puntos que afecte a tu página web?
¿Eres más de diseño o de usabilidad?
¿Crees que falta algún punto a esta lista?
Muy buen artículo, ¡claro y conciso! :)
ResponderEliminarMuchas gracias por tus consideraciones Avellana! :-)
EliminarNos alegra que te haya gustado el artículo de nuestro Diseñador Gráfico Gregorio :-)
Para cualquier cuestión, aquí nos tienes.
Un saludo
Muy buen artículo!
ResponderEliminarGracias!! Nos alegra que te haya gustado ;-)
EliminarSaludos