Diseño de Paginas Web

Diseño visual de una página web

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (10 votos, promedio: 4,10 de 5)
Cargando...

El diseño visual es una de las últimas etapas en el diseño web, ya que muchos de los aspectos visuales de la página dependen de decisiones tomadas en otras etapas. Vemos los elementos que lo componen y cómo ayuda a la usabilidad.

Dentro de las etapas en las que debe desarrollarse el diseño de un sitio web, el diseño visual es una de las últimas, ya que muchos de los aspectos visuales de la página dependen en gran medida de decisiones tomadas en otras etapas del diseño.

Esto no quiere decir de ninguna manera, que el diseño visual sea algo superficial o secundario. Por el contrario, al igual que otros aspectos del diseño de un sitio web, el aspecto visual puede influir en la efectividad del mismo.

Tengamos en cuenta que los aspectos visuales influiyen psicológicamente en un visitante, y que el diseñador debe tener en cuenta esto y tratar de influenciar al visitante para que tome decisiones o al menos tenga una cierta tendencia a ello.

Los diseños visuales, tanto para elementos impresos como web, en la actualidad se encuentran conformados por una serie de bloques o módulos dispuestos en una forma más o menos estandarizada, que permiten a los usuarios captar con simples recorridos visuales donde se encuentran los diferentes elementos que componen una página.

Esta disposición estandarizada, responde a modelos de lógica visual que están relacionados con el comportamiento de los usuarios.

En base a esto, los diseñadores gráficos deben plantearse como objetivos la creación de una jerarquía visual que permita al usuario de una página web detectar de inmediato cuales elementos son importantes y cuales son secundarios.

Definir cuáles serán las secciones principales del sitio y formar grupos de elementos relacionados de forma tal que los visitantes puedan ver claramente la estructura del contenido.

Coherencia del diseño

Al navegar por diferentes páginas de un sitio, el visitante debe tener la sensación de que las diferentes páginas que visitan pertenecen a un mismo sitio.

La coherencia se logra mediante la repetición de algunos elementos, que dan un estilo consistente a la web.

Esta repetición, además de dar una unidad visual a todo el sitio, permite a los visitantes ubicar los elementos más importantes, ya que se encontrarán con la misma distribución (o similar) en todos los puntos de la web.

En el siguiente ejemplo, la coherencia en el diseño de las páginas interiores es evidente, presentando muchos aspectos similares entre ellas.

Coherencia en el diseño de páginas web

En el ejemplo anterior, puede apreciarse además, que la repetición no quiere decir que no se puedan hacer ligeras variaciones, como en el caso del color de los encabezados de las páginas interiores del ejemplo.

Esto, en muchos casos, es deseable, ya que estas variaciones pueden resultar atractivas y mejorar la estética del sitio web.

La estética cuenta en el diseño de páginas web

En 2002, el Proyecto de Credibilidad Web de Stanford (Stanford Web Credibility Project) publicó los resultados de una investigación sobre las causas que promueven que las personas adquieran confianza o desconfianza al visitar un portal en Internet.

Algunas de las preguntas de la investigación fueron: ¿Qué causa que las personas crean (o no crean) en lo encontrado en la Web?, ¿Qué factores de diseño web influencian esta dinámica?, y otras preguntas.

De esta investigación, surgieron diez guías para construir la credibilidad de un sitio web. La guía #6 indica: Diseña tu portal de tal forma que luzca profesional (o apropiado para su propósito).

Encontramos que las personas evalúan rápidamente un sitio web por su diseño visual solamente.

Cuando diseñes tu web, presta atención a la estructura, tipografía, imágenes y consistencia en general. El diseño visual del portal debe apoyar al propósito del portal.

Factores fundamentales del diseño visual de una página web

Los factores fundamentales del esquema de una página web son: Jerarquía Visual, Flujo Visual y Agrupamiento.

Jerarquía visual en diseño web: el peso óptico

Coloca el contenido más importante de tal forma que resalte más y el menos importante para que resalte menos.

Algunos le llaman a esta estrategia de diseño web el Peso Óptico, la cual se utiliza para decidir que elementos gráficos llamarán más la atención (teniendo un peso óptico mayor) y cuales llamarán menos la atención (teniendo un peso óptico menor).

Flujo visual de la web: el punto focal

¿Qué elemento de tu página web llama la atención principalmente?, ¿Es el título o el logo?, ¿Será una foto o los botones de colores llamativos?

Este elemento principal será el que determine el flujo visual del portal y el punto focal.

A partir del punto focal, las personas seguirán un recorrido visual que los guiará hacia lo que es más importante, y entonces focalizarán su atención en ello con mayor probabilidad.

Debes desarrollar destrezas para diseñar webs con un flujo visual que funcione.

Tu interés es que el visitante explore tu portal. Como lo hará, es una combinación de estrategia y suerte.

Cada persona tiene características únicas que determinarán la forma en que navegará tu web. Trata de anticipar e intencionalmente diseñar el flujo visual de la página Web.

Agrupamiento en la web

De acuerdo a los expertos en conducta humana, el cerebro y los ojos reaccionan favorablemente al orden. Por eso el agrupamiento de objetos es importante.

Algunos elementos que provocan orden y agrupamiento son:

  • Posición – Agrupa los objetos similares en color y dimensión cerca uno del otro. Esto llama la atención del visitante.
  • Tamaño y Color – Utiliza colores y formas similares para cada objeto. De esta forma, se promueve la uniformidad visual, la cual es un aspecto importante del buen diseño de páginas Web.
  • Continuidad – Alinea los diferentes elementos visuales de la página, tales como: líneas, curvas, y otras formas, para dirigir el flujo visual del diseño Web.

Creación de jerarquías en el diseño

La creación de jerarquías entre los diferentes elementos de una página web, es una de las tareas más importantes de un diseñador. Uno de los principios de diseño web que pueden emplearse para ellos, es el principio del contraste.

Cuando un visitante llega a una página web, se encuentra con una gran cantidad de información visual, la cual debe ser clasificada por su cerebro para poder acceder a los diferentes elementos.

La utilización de contrastes hace posible diferenciar los elementos principales de los secundarios y a su vez a estos del fondo.

Capturar la atención en el texto

Los textos en sí mismos son elementos que pueden considerarse de baja visibilidad, a menos que se tomen algunas medidas que permitan que los visitantes detecten con facilidad ciertas partes del texto y estas los conduzcan al resto.

Apóyate de imágenes, negritas, listados e incluso recuadros de texto de color (como los que usamos en lawebera). El objetivo es captar la atención del contenido de tu web.

Importancia del diseño limpio

El uso de interfaces limpias se ha convertido en una tendencia refrescante para el mundo del diseño web.

Son muchos los sitio web que optan por utilizar estructuras con grandes espacios en blanco, lo que permite al usuario concentrar su atención en tan sólo unas cuantas actividades; aquellas que son consideradas las más relevantes del sitio y que generalmente llaman a la acción principal.

Generalmente utilizamos el término “limpio” para describir a una clase de sitio web que opta por utilizar un espaciado amplio, alineaciones simétricas y colores que promueven la amplitud.

Este tipo de estructuración promueve cierta sensación de profesionalidad y calidad, por lo que su uso en la comunidad de diseñadores ha venido en constante incremento.

Un diseño web limpio tiene la ventaja de ser simple y funcional, por lo que al aplicarlo en un sitio, esto mejora la experiencia de usuario.

Limpio no es lo mismo que minimalista

Comúnmente, cuando se habla de diseño web limpio, la mayoría de las personas piensan en minimalismo.

La confusión entre ambos términos es algo muy frecuente y fácil de cometer. Si bien hay algunas similitudes y coincidencias de los principios de diseño entre los dos términos, existen diferencias fundamentales.

  • El diseño minimalista tiende a centrarse en remover lo superfluo y los elementos no esenciales, para de esa manera permitir que el mensaje principal del sitio sea el centro de atención, es por eso que cada elemento que utilicemos debe tener un propósito totalmente justificable.
  • El diseñar de manera limpia nos lleva a refinar lo que ya exponemos, en vez de eliminar todo lo que se pueda. Esto llevará a que el diseño general sea equilibrado, permitiendo que la información fluya y sea fácil de consumir.

¿Cómo crear un diseño limpio?

Un diseño desordenado, lleno de elementos innecesarios, con un mal flujo y con saturación de espacios, representa un muy mala experiencia para el usuario.

Es por eso que se debe buscar un balance entre el contenido y los elementos gráficos que conforman la página, para que de esa manera disminuyamos la cantidad de elementos sobrecargados.

Diseño web limpio: balance

El uso del espacio en blanco en nuestros diseños, representa un área de descanso para la vista de nuestros visitantes, además de que proporciona un constraste entre el contenido y los elementos de diseño que conforman la página, ayudando al usuario a encontrar exactamente lo que está buscando y de esa manera disminuye la posibilidad de que abandone el sitio rápidamente.

Diseño web limpio: espacio en blanco

Es muy importante que busquemos dirigir la atención del visitante hacia donde deseemos mediante el uso de imágenes y gráficos.

Diseño web limpio: elementos gráficos

Combinar todos estos factores es lo que te llevará a crear un diseño visual armonioso y efectivo que centre al usuario en lo que te interesa más.

Al proporcionar un espacio adecuado entre los elementos de un sitio web se genera una sensación de amplitud, de calma y de elegancia.

Cómo crear diseños que llamen a la acción

Llamar a la acción (o call to action en inglés) es un término que muy probablemente hayamos escuchado o leído en distintos artículos de diseño web, pero que en nuestra mente puede no tener mucho contexto.

¿Qué es una llamada a la acción o call to action?

Éste conjunto de palabras se utiliza para referirse al hecho de que los elementos de una página deben solicitar un tipo de acción por parte del usuario y de esa manera lograr un tipo de respuesta a tu contenido.

Los elementos a utilizarse para realizar esta función pueden variar según el tipo de página y el contenido, pero generalmente se utilizan botones para lograr este efecto.

Una vez que el usuario ha establecido la interacción con alguno de dichos elementos, se realiza alguna acción como por ejemplo una compra, suscripción a una lista de correo, registro de cuenta o descargas de archivos.

Llamada a la acción: caja de suscripción
Es por esto que resulta de alta importancia la elaboración y diseño de los elementos visuales que harán la llamada.

Una llamada a la acción es el punto de inflexión entre el rebote y la conversión; es decir, es la diferencia entre que un usuario deje el sitio o realice la actividad a la que lo estamos tratando de incitar.

Muchos diseñadores pasan por alto esta parte y terminan tratando a los botones como un elemento cualquiera del sitio.

Llamada a la acción o call to action

Además de darle un diseño atractivo que encaje con el sitio, los elementos que llaman a la acción deben idearse de tal manera que sean efectivos, recordemos que esta acción es la que marcará la diferencia.

El área de colocación, su tamaño, color y elementos adyacentes juegan un papel vital en la consecución de objetivos de la web.

Botones como llamada a la acción

El diseño del botón es la ayuda visual necesaria para que los visitantes se sientan atraídos, mientras que el texto que contiene el botón es la parte que inclinará la balanza para que terminen o no haciendo clic en él, ya que se encarga de decir por qué realizar dicha acción.

Un buen texto que incite a la conversión

La primera palabra es recomendable que sea un verbo, por ejemplo “Llama ahora” o “Comprar en Amazon”.

Una cosa que debemos evitar al redactar el texto del botón, es utilizar palabras que den la impresión de que se está dando una orden, trata de ponerte en el lugar del visitante y pregúntate qué es lo que desearías ver. Trata de añadir valor y relevancia a tu botón, en lugar de utilizar frases como “Compra ya tu camiseta”, las cuales son totalmente imperativas, utiliza otras como “Obtén tu camiseta aquí”.

Ubicación de tus call to action

Un botón entregará resultados en base a la posición donde se le coloque, si lo ubicamos de manera errónea las conversiones por parte de los visitantes serán pocas o nulas.

La gran mayoría de los diseñadores comete el error de colocar los botones de acción después de una gran cantidad de texto e información, esta clase de zonas se consideran saturadas, por lo que la atención del usuario se pierde fácilmente.

Trata de utilizar el espacio en blanco para hacer del botón un elemento más visible.

Sin embargo, utilizar demasiado espacio en blanco alrededor de un botón puede hacer que éste parezca no relacionado con el contenido que se presenta, algo que también puede afectar al rendimiento del call to action, ya que el usuario puede llegar a pensar que el botón es para algún otro tipo de acción distinta a lo que acaba de leer.

Es importante tratar de colocar el botón en una sección superior de la página, esto puede llevar a un mayor número de conversiones.

Incluso se puede optar por colocarlo en dos lugares a la vez, al inicio y al final, de esa manera el usuario no tendrá la necesidad de regresar.

8 respuestas

  1. Muy buen artículo. Antes de publicar cualquier diseño, ya sea un diseño web o cualquier otra cosa siempre hay que revisar bien todo, la composición, tipografía, etc. No es bueno que al publicar la página los usuarios puedan tener problemas al acceder a la página web desde el primer momento. Estos consejos son muy útiles para evitarlo y optimizar el diseño web.

  2. Muy buenos consejos para tener un buen mantenimiento de las páginas web y su diseño web. A veces pueden surgir errores que tenemos que solucionar para evitar que moleste a la navegación de los usuarios, sino perderemos la calidad de nuestro sitio web.

  3. La gran ventaja de tener una pagina web con estética profesional es la presencia de marca que demostramos de nuestra pagina y le damos mas importancia a la hora de demostrar la seriedad de nuestros servicios o productos, hoy día esto es el futuro y lo que busca la gente. Marcar presencia.

  4. Ricardo, estoy contigo, pero creo más en que el contenido prima sobre el diseño, ya que he visto numerosas web bien posicionadas con diseños espantosos. Yo creo en que las mejores ideas son aquellas que funcionan con pocos recursos.

    Saludos y gracias

  5. Gracias me ayudaron tus puntos de vista, es que en realidad soy novato y es la primera pagina web que voy a hacer pero mis ideas eran que una pagina con muchas imagenes y efectos visuales eran lo mas importante pero me has dado una mejor perspectiva acerca del tema. Gracias de antemano

  6. La coherencia entre diseño y contenido juega un rol de primer orden a la hora de crear una web. En buena medida, de ello depende el éxito o fracaso de los distintos proyectos web.

  7. Un artículo muy correcto, comparto tus consejos, yo mismo los tengo siempre presentes a la hora de construir una página. Es cierto que a veces te tienes que desviar un poco de ellos, principalmente porque hay clientes que tienen una idea fija sobre lo que quieren y te tienes que adaptar a ellos, aunque nunca sin comentarles antes tu punto de vista como profesional del medio.

    Saludos.

Deja una respuesta