Twitter0

LinkedIn0

Las claves del diseño web perfecto

Crear una web profesional y efectiva a la vez, no es tarea sencilla, puede ser bonita e impactante, pero a la vez poco eficiente. Trabajar bajo un diseño web que cumpla todos los requisitos, objetivos marcados y que a la vez funcione de manera práctica es lo utópico, y lo que todos los diseñadores y desarrolladores web queremos lograr.

Para llegar a este punto en este post muestro las 10 claves que en mi opinión un diseño web debe cumplir para ser «perfecto» o al menos efectivo entre un 80%-100%.

Diseño web fluido, sencillo y limpio

Escuchamos a menudo que el diseño debe ser limpio, sencillo, responsive y adaptable a todos los dispositivos, pero lo realmente importante además de todo esto es que el diseño transmita lo que queremos. El usuario que entra en la web debe concebir tu mensaje en menos de 20 segundos, que es aproximadamente el tiempo y la paciencia que una persona tiene cuando busca algo en internet.

Una web sin carisma, sin identidad tiene muy complicado crear conversiones a través de ella. Una manera de acercar al usuario, es creando un diseño con cariño, con sentimiento, pensando previamente qué necesita el usuario que entra en la web. Pongo dos ejemplos:

• Empatía en el diseño
  Como todo en la vida la empatía es un aspecto muy positivo para lograr hacer las cosas bien, y digo esto porque hace pocos días me llegaba una cliente psicoterapeuta con una web en tonos oscuros y marrones, mi propuesta es que si una persona te encuentra porque tiene un problema de fobia, de depresión…le muestres una salida a sus problemas a través de algo positivo visualmente.
  Lo primero que hice fue discurrir y romperme la cabeza buscando imágenes que consiguieran transmitir este mensaje, y encontré las siguientes, que pude utilizar para slider y otras áreas:
  

  Foto 1:
  Una persona aparece de espaldas y al borde de un precipicio, el cielo gris, quizás esto puede representar una situación en la que el individuo tiene un problema y lo ve todo oscuro, pero en cambio aparece con los brazos abiertos y eso lo interpreto como que reta a sus miedos, a sus fobias, y tiene esa actitud de superación necesaria para afrontar todos sus males.

  

  Copyright 123RF
  
  Foto 2:
  Aquí el cielo ya es azul, y la mirada es hacia arriba, los edificios son altos y una escalera que te guía hacia allí, la interpretación que le doy es que ahora el individuo con problemas tiene otra actitud, ha encontrado el camino, y ve todo de modo positivo, por lo tanto se encuentra satisfecho, como diciendo «Toma Ya!! mira lo que encontré…!!»
  
  Copyright 123RF

• Los colores en el diseño
  Por otro lado, el tema de los colores y la sintonía entre las fotografías e imágenes de una web resulta muy importante, para ello recomiendo el uso de imágenes similares en images.google.com , lo que a veces da soluciones rápidas y eficientes para que la mezcla entre ellas y con el diseño de la web sea perfecto, pongo un ejemplo en la siguiente captura de pantalla de una web realizada por nosotros:

  

Cuidar el Link Juice en la Home

Importantísimo son los enlaces internos tanto para el SEO como para el diseño, que el usuario se sienta orientando dentro de la web es una de las claves, cuando un visitante fluye y navega por las páginas con naturalidad, sin sentirse frustrado…los objetivos marcados acaban cumpliéndose con mayor facilidad.
Ahora bien, si además tenemos en cuenta el Posicionamiento en buscadores, hemos de saber que la mayor fuerza y autoridad de la web reside en su página inicial, y que dicha autoridad se divide entre todos sus enlaces internos creados dentro de la home, algunas teorías explican que el reparto de link juice es equitativo entre todos sus enlaces, otras en cambio comentan que los primeros enlaces tienen mayor relevancia sobre el resto. De igual modo hemos de saber que deben existir los links justos y necesarios, evitando sobre todo crear páginas dentro del sitio con poco e irrelevante contenido.

Código web limpio

Especial cuidado con los maquetadores visuales que suelen generar suciedad en el código fuente con estilos css dentro del html, excesivos divs …etc. Resulta importante repasar el código y construir html a mano, insertando las debidas etiquetas de encabezado h1, h2, h3 previamente discurridas con paciencia y con la ayuda de un buen keyword research.

Estructura del contenido y menú de navegación

Quizás en el punto anterior cuando hayamos hecho la búsqueda de keywords se nos haya encendido la bombilla en cuanto a cómo estructurar el contenido y el menú de navegación de la web.

Se recomienda un menú con un tamaño razonable que tenga en cuenta todas las áreas, y que además muestre la información más importante y relevante al inicio. Así conseguiremos la fluidez del usuario dentro del sitio. Un menú limpio y sin fallos, no como algunos menús que he visto últimamente que tienes que estar segundos pasando el ratón por encima para que salga el desplegable y puedas hacer clic (esto me pone de los nervios!!!).

Carga rápida y comprobación del diseño

Durante el diseño o a posteriori (dependiendo de la dificultad y magnitud del mismo), hemos de comprobar que nuestra creación es de carga rápida, y que además funciona correctamente en los diferentes navegadores web, sobre todo firefox o safari que en ocasiones tiene resultados dispares al resto (habitualmente en formularios o bordes de tablas…etc.), y por supuesto internet explorer, el rey de la disparidad, ya que en sus versiones antiguas no acepta los estándares del resto, y por lo tanto ya todos conoceréis o habréis sido víctimas de esta problemática.

En resumen, la fórmula que contiene las claves del diseño web perfecto son una mezcla de creatividad, lógica, y además la actitud necesaria para intenta conseguir ser lo más práctico posible.

¿Tenéis algún consejo que añadir?

Si te gustó este artículo o te sirvió de ayuda por favor compártelo
Un saludo,
Óscar / DevService
Por Óscar Carrillo

Twitter0

LinkedIn0