Noticias y consejos sobre Marketing Online

Diseño web: Caso práctico de conversión web

Publicado por Eric Lehoucq

Encuéntrame en:

17/11/13 16:28

diseño webTodos sabemos que un gran diseño web y las conversiones van mano a mano, pero ¿que conecta ambas cosas?

Lo que muchos no entienden es que su sitio web es más una "experiencia de usuario" que un folleto corporativo: las personas interactúan con su sitio, mientras navegan por él, así que hacerlo gráficamente atractivo no debería ser su única preocupación.

Afortunadamente, hay muchos estudios sobre el seguimiento ocular que revelan la forma en que los clientes realmente ven su sitio web.

En este artículo vamos a centrarnos en uno de los aspectos importantes en la conversión web: destacar las cosas importantes.

Todo el mundo aprecia un diseño web que mezcla los colores correctos y textura sutiles, pero ¿Qué debería destacar en el diseño de un sitio web?

De acuerdo con múltiples investigaciones lo que debería destacar son sus llamadas a la acción: las cosas que están "aisladas" de los demás llaman la atención en primer lugar.

¿Cuál es el mejor color para las conversiones?

¿Verde? ¿Rojo? ¿Naranja?

La respuesta es: el mejor color es el color que se destaca del resto de su diseño. ¿Sorprendido o decepcionado por la respuesta? Lo que se destaca consigue recordarse, lo que se mezcla con sus colores base es ignorado.

Un diseño web ha de tener 2 colores: pasivos y activos.

Los colores pasivos son los de su diseño base (típicamente lo de su logo que aplica a elementos general del diseño). Los colores activos son los que destacan: los colores de sus llamados a la acción y que por tanto deben ser distintos (más visibles) que sus colores pasivos.

diseno web madrid

En G4 Marketing Online usamos el verde para destacar un llamado a la acción en comparación con nuestro esquema de color blanco y rojo, ya que sobresale... y queremos que lo haga.

Pasos a seguir para elegir el mejor color para las conversiones:

1 - Primero tiene que ver cuáles son sus colores base y su tonalidad. (ver apartado abajo sobre Teoría del color)

2 - Después, necesita para encontrar un color que destaca entre estos colores. Esto se convertirá en el color de la acción.  Por ejemplo si utiliza una combinación de colores blanco y verde neutral para la mayoría de su sitio web, puede ir por el naranja para su llamada a la acción. Mint hace esto:

ejemplo diseño web

3 - IMPORTANTE: Asegúrese de utilizar el "color de la acción" sólo para las acciones para evitar confundir a sus visitantes.

Una de las cosas más difíciles de hacer en el diseño de un sitio web es llegar a un buen esquema de color y aplicarlo de una manera elegante.

La buena noticia es que la teoría del color y las buenas combinaciones tienen una base en matemáticas, así que con un poco de conocimiento, y las fórmulas adecuadas, puede estar absolutamente seguro de que sus colores coincidirán y no tiene que preocuparse acerca de si sus clientes le preguntan si eso es lo que su sitio web va a llevar.

Diseño web y Teoría del color

Veamos 3 simples relaciones de color y algunos consejos que debe saber y puede usar de inmediato.

Colores Análogo - son los colores que tienen tonos a juego. Son más difíciles de usar bien porque pueden dominar a los demás si se usan demasiado, pero ya que tienden a ser vibrante puede tener un sitio web rico en color e interesante.

Colores Analogo diseno web resized 600

Colores Monocromáticos - Hay un enfoque en un solo color, pero la intensidad y luminosidad varía. Este esquema de color es normalmente el más fácil y seguro de utilizar. Puede muy rara vez ir mal en la aplicación de este esquema de color.

Colores Monocromaticos diseno web

Colores Complementarios - Dos colores opuestos el uno del otro en la rueda de color. Esta combinación de colores es el término medio entre monocromático y análogos. Da más variedad visual, pero no es tan difícil de implementar.

Colores Complementarios diseno web

Uniendo todas las piezas

Una vez haya elegido su combinación de colores veamos cómo adaptarlos a un sitio web. Primero necesita identificar los tres colores de su paleta.

  • color de fondo: Este color es el más utilizado y establece el tono general y la sensación del sitio web.
  • color base: Este color se utiliza para romper el fondo y es típicamente el barítono, el hijo del medio, ni aburrido ni llamativo, pero el pegamento que mantiene todo junto.
  • Color acento: Este color es el que menos se utiliza, pero le da al sitio su personalidad. A menos que esté usando un esquema de color monocromático, su color acento tendrá un marcado contraste con sus colores de fondo y base. Suele ser el color más audaz.

A continuación algunos ejemplos utilizando una paletas de colores. Estas no son, obviamente, las únicas maneras en que se puede hacer, pero debe tener una buena idea de lo que estás buscando.

Ejemplo Análogo

ejemplo diseño web 1 resized 600Ejemplo complementario

ejemplo diseño web 2 resized 600Ejemplo monocromático

ejemplo diseño web 3 resized 600

 

 

Temas: diseño web, colores diseño web, diseño sitio web, conversion web