Si no tiene diseño Responsive Web Design es como si no existiera en dispositivos móviles

Responsive web Design

Existen varios factores que deben animar a los sitios Web a realizar sus diseños con tecnología Responsive Web Design:

  • Fidelizar clientes.
  • Aumentar ventas.
  • Evitar envíos absurdos.
  • Disminuir las bajas.
  • Ganar imagen de marca.

Para conocer la ampliación de esta información visite el artículo: La importancia del responsive design: olvidarse de los dispositivos móviles, gran error de algunas empresas

Pasos para mejorar la conversión en su sitio Web

Resultados

La convesión es lo que permite que el objetivo de su sitio web se cumpla.

Los pasos necesarios para mejorar la conversión son:

1. Transmitir nuestra Propuesta de Valor en forma inmediata.

2. Sí en 5 segundos debemos explicarle al usuario de que se trata nuestro sitio.

3. Defina su tunel  de conversión

4. Mida permanentemente y optimice el tunel.

Para conocer más del tema visite el artículo: 4 aprendizajes en Conversión Online para StartUps

 

Guía para usar el Diseño Web para llevar su empresa de la mente de sus clientes a su corazón

Marketing emocional aplicado al diseño de sitios Web

El Marketing Emocional es una herramienta muy importante que nos permite llevar la empresa de la mente de los clientes a su corazón, es por eso que está siendo cada vez más utilizado en el marketing offline y online.

Para implementar un el marketing emocional en el diseño Web se deben tener en consideración los siguientes aspectos:

  • La armonía.
  • El ritmo.
  • Los Colores
  • Las tipografías.
  • El espacio
  • La jerarquía

Para ver el detalle de este artículo visite: Marketing emocional aplicado al diseño de sitios Web y aplicaciones para redes sociales.

Imagen tomada de: blogs.msdn.com

Newegg.com aumentó sus ventas anuales en US$1,300 millones con ajustes de su sitio Web. Conozca como lo hizo

Google Analytics Experimentos

Si quiere saber como funciona “Experimentos”, el nuevo servicio de Google Analytics que permite crear pruebas A/B y multivariables para optimizar un sitio Web. También se revisará un caso de éxito que muestra la efectividad de estos ajustes: Newegg.com aumentó sus ventas anuales en 1,300 millones de dólares optimizando el sitio a través de esta metodología.

Para conocer más del tema puede ver el artículo: Pruebas A/B y multivariables: herramientas indispensables para aumentar la conversión y ventas de su sitio Web.

 

Modernice su sitio Web: 22 templates gratis de diseño líquido (adaptable)

Modernice su sitio Web: 22 Templates gratis de diseño líquido (adaptable)

Imagen tomada de johnpolacek.github.com

He escrito en mi blog personal un artículo con los principales templates con tecnología Responsive Web Design para los administradores de contenido WordPress, Joomla y Drupal.

Las plantillas con tecnología Responsive Web Design también son llamadas plantillas de diseño líquido, diseño adaptable o diseño flexible. Se llaman así ya que se adaptan a cualquier tipo de pantalla: PC, iPad o Móvil.

Los dejo con el artículo:

22 plantillas gratis Responsive Web Design para WordPress, Joomla y Drupal

 

Marketing Digital del Real Madrid: fortalezas y oportunidades de su sitio Web

Marketing Digital del Real Madrid fortalezas y oportunidades de su sitio WebExisten dos equipos de fútbol que se destacan en el uso adecuado del Marketing Digital: el Real Madrid y el FC Barcelona. En este artículo revisaré algunos aspectos relevantes del sitio Web del Real Madrid.

1. Fortalezas del sitio Web del Real Madrid

1.1. Pre home.

El sitio de Real Madrid cuenta con un Prehome que le permite destacar algunos elementos de conversión como son: la compra de entradas a los partidos de fútbol, la inscripción al club Madridista, entre otros.

1.2. Canal de ventas.

Se utiliza el portal como un efectivo canal de ventas, permitiendo vender entradas, tours y accesorios. El Real Madrid vendió 24 millones de euros en 2011 cifra que serviría para pagar los sueldos de Cristiano Ronaldo y José Mourinho.

1.3. Información actualizada.

El sitio actualiza su información sobre el equipo Real Madrid de manera frecuente. La similitud del portal con el formato de un periódico, muestra la importancia que le da el equipo a la información. El portal entiende el contenido como un elemento generador de valor a su comunidad.

1.4. Información en múltiples formatos.

El sitio Web agrega en los artículos información en múltiples formatos: texto, fotos y videos, lo que enriquece mucho la experiencia del usuario. El portal tiene además un acceso rápido a las galerías de fotos y videos.

1.5. Recursos para el móvil.

El portal tiene muchos recursos para dispositivos móviles, lo que muestra que le están dando importancia a este canal que viene creciendo de manera significativa. Algunos de los recursos que ofrece son:

  • Animaciones
  • Juegos
  • Música
  • Videos
  • Wallpapers
  • Información
  • Apps para Android, iPhone y iPad

1.6. Otras fortalezas importantes.

  • Login con Facebook: Este recurso de usabilidad agiliza de manera significativa el proceso de login.
  • Patrocinadores: Se destacan en el sitio Web la presencia de sus dos patrocinadores principales: Adidas y bwin.
  • Idiomas. El portal está en cuatro idiomas y carga por defecto el español, lo que da un indicio del alcance internacional que tiene su estrategia.

Home Real Madrid

2. Oportunidades de mejora del sitio Web del Real Madrid

2.1. Falta de integración con Redes Sociales.

No tiene en el home del sitio Web el enlace a las Redes Sociales, lo que se convierte en un punto de mejoramiento de su portal. Las redes sociales solo se integran en el Pre home.

Propuesta de mejora: Por ser las redes sociales tan fuertes en el fútbol y en el Real Madrid, considero que además de poner el síguenos en redes sociales, se deben poner las últimas publicaciones en Twitter y Facebook.

2.2. Mezcla de públicos objetivos.

El portal está mezclando dos públicos objetivos que, en mi opinión, tienen intereses muy diferentes: los interesados en el fútbol y los interesados en el baloncesto.

Propuesta de mejora: El sitio Web debe utilizar el pre home para segmentar su público objetivo entre fútbol y baloncesto debido a la diferencia en sus intereses y crear un portal para cada deporte.

2.3. Falta de menú desplegable.

Por ser un sitio muy extenso y complejo, la falta de menú desplegable aumenta el número de clics para llegar a la información necesitada, lo que va en contra vía de la usabilidad. Además el sitio tiene un doble menú (principal y de íconos) que puede confundir al visitante.

Propuesta de mejora:

  • La utilización de un mega menú disminuiría de manera significativa el número de clics en el portal.
  • El menú de íconos se puede ubicar en la parte superior del portal para alejarlo del menú principal y facilitar la navegación.

2.4. Falta de televisión Online.

El canal de televisión del Real Madrid no es retransmitido por Internet con lo que se desaprovecha este canal para aumentar su audiencia.

Propuesta de mejora: Enviar su canal de TV por Internet sería una oportunidad de aumentar su difusión y fortalecer su marca.

2.5. No tiene blog.

El portal no tiene blog que es un elemento muy importante en la Web 2.0 y de posicionamiento en buscadores (SEO).

Propuesta de mejora: Se puede crear un espacio de blog en el portal donde participen sus jugadores más importantes y algunos hinchas. Este blog debe tener un comité editorial para garantizar la calidad de las publicaciones.

Para reflexionar:

Les  dejo con una pregunta para conocer su opinión:

¿Qué otra fortaleza u oportunidad de mejora ve en el sitio Web de Real Madrid?

Los invito a dejar su opinión sobre este artículo o realizar preguntas que con gusto las responderé.

 

Guía de Responsive Web Design: todo lo que necesita saber sobre Responsive Web Design

Responsive Web Design (Diseño Web Adaptable): sitios Web que se adaptan al dispositivo (PC, Mobile, iPad)

Imagen tomada de Sortega.com

Marcelo Rincón un cliente y gran conocedor del tema de usabilidad me mostró una nueva tecnología para desarrollar sitios Web que me dejó impactado. Me refiero a la tecnología llamada Responsive Web Design, que algunos llaman en español Diseño Web Adaptable.

1. Qué es el Responsive Web Design

El Responsive Web Design permite crear sitios Web que se adaptan al ancho del dispositivo en que se esté navegando, lo que permite tener un único diseño para PC, mobile y tabletas.

Un aspecto muy interesante de esta nueva tecnología es que no solamente cambia el diseño cuando cambia el ancho del dispositivo, sino que también se ajusta el tamaño de las imágenes.

He grabado un video para ilustrar lo que acabo de decir:

 2. Beneficios del Responsive Web Design

  • Reducción de costos. Se reducen los costos ya que hasta hoy se debe hacer un portal para la Web y otro para dispositivos móviles. Esto origina mayores costos de creación y mantenimiento de la información.
  • Eficiencia en la actualización. El sitio solo se debe actualizar una vez y se ve reflejada en todas las plataformas. Cuando tenemos los portales independientes para Web y Mobile se debe realizar la actualización dos veces lo que crea la necesidad de mayor cantidad de recursos y posibilidad de error.
  • Mejora la usabilidad y conversión. Esta tecnología aporta a la usabilidad y la conversión. Se han hecho estudios que demuestran que cuando se aprovecha toda la pantalla del visitante aumenta la conversión.
  • Impacto en el visitante. Esta tecnología por ser nueva genera impacto en las personas que la vean en acción, lo que permitirá asociar a la marca con creatividad e innovación.

 3. Ejemplos de sitios creados con la tecnología Responsive Web Design

En un artículo llamado: Responsive Web Design: 50 Examples and Best Practices muestra excelentes ejemplos de la aplicación de esta tecnología. Los cuatro ejemplos que más me impresionaron son:
dConstruct 2011

dConstruct 2011 ejemplo de Responsive Web Design

Boston Globe

Boston Globe ejemplo de Responsive Web Design

Food Sense

Food Sense ejemplo de Responsive Web Design

Deren keskin

Deren Keskin ejemplo de Responsive Web Design

4. Cómo construir un sitio con Responsive Web Design

Los que quieran profundizar en la creación de este tipo de portales les dejo tres referencias que considero bastante buenas:

A los que les gusta los video tutoriales les recomiendo dos (aunque son en inglés tiene la posibilidad de Closed Caption en español):

  • Responsive Web Design: Fluid Grids: Introduction and HTML

  • Webinar: Responsive Web Design for eCommerce

Para reflexionar:

Les  dejo con una pregunta para conocer su opinión:

¿Cuál es su opinión de esta nueva tecnología?

Los invito a dejar su opinión sobre este artículo o realizar preguntas que con gusto las responderé.

 

HTML5 vs FLASH. ¿Cuál usar en su diseño Web?

HTML5 vs FLASH: ¿Cuál usar en su diseño Web?

Imagen tomada de Extensiondoscero.com

En este artículo revisaremos los temas de ¿Qué es HTML5?, comparación entre HTML5 y FLASH y concluiremos con cual tecnología utilizar en nuestros sitios Web. Si usted no es ingenier@, no se preocupe ya que este artículo está dirigido a personas no técnicas en sistemas.

Para iniciar quiero informarles que el pasado 9 de noviembre de 2011 Adobe publicó un artículo en su blog donde anunció que no seguirán desarrollando el Flash para móviles y que empezarán a contribuir con la tecnología al HTML5.

1. ¿Qué es el HTML5?

Es frecuente escuchar que el HTML5 es la tecnología futura para creación de sitios Web usables y estéticamente agradables.

HTML son la iniciales de las palabras en inglés (HyperText Markup Language) y es un lenguaje para crear páginas Web estándar creado por la W3C.

HTML5 es la última versión del HTML que en realidad es una familia de tecnologías:

  • HTML: es el lenguaje de modelado semántico que permite modelar la información.
  • JavaScript: es el lenguaje de programación que permite agregar interactividad.
  • CSS: es el lenguaje que le da estilos al diseño gráfico de HTML que permite agregarle estética y capacidad visual.

Es importante anotar que aunque el HTML5 ya está siendo muy utilizado en el mundo, aunque todavía se encuentra en modo experimental en la W3C.

Una de las principales novedades del HTML5 es el Canvas. El Canvas permite dibujar en la página todo tipo de formas mediante un API para JavaScript, que permite animar y lograr interacción del usuario, por lo que permitiría reemplazar al Flash.

Le dejo un corto pero claro video del profesor Sergio Luján Mora que define el HTML5:

Para los que estén interesados en aprender HTML5 les recomiendo la siguiente guía en español: Guía de HTML5: aprende desde cero el nuevo lenguaje en la Web.

2. Comparación de HTML5 y FLASH

Revisaremos varios aspectos para realizar esta comparación:

  • Potencia: En cuanto a la potencia actual para la animación 2D, se pueden hacer las mismas cosas con HTML5 y Flash. En cuanto a animación 3D es superior en el Flash que el HTML5, sin embargo a mediano plazo se prevé que el HTML5 tendrá la misma potencia del Flash.
  • SEO: Los sitios realizados completamente en Flash tienen limitaciones significativas para posicionarse en motores de búsqueda ya que el buscador no es capaz de leer su contenido, en cambio los sitios realizados en HTML5 tienen buen posicionamiento en buscadores ya que es entendido completamente por los buscadores.
  • Móviles: Flash no se ve en algunos dispositivos móviles y el HTML5 sí, siempre y cuando se cuente con un navegador actualizado.
  • Flash player: ya no se realizarán para dispositivos móviles, pero si se continuará haciendo para computadores de escritorio.
  • Grandes empresas: están de lado de HTML5 y están dejando de lado a Flash, incluido Google Chrome, Firefox, Safari y Adobe.
  • Documentación: la documentación para HTML5 y Canvas no es tan extensa como la documentación de ActionScript 3. Esta diferencia se irá reduciendo con el tiempo.
  • Compatibilidad: HTML5 no funciona en navegadores viejos.

 3. ¿Cuál debe utilizar?

Si va a iniciar un sitio web que tiene elementos de animación importantes recomiendo utilizar HTML5 ya que hacerlo en Flash le dará una vida útil menor.

Si tiene un sitio Web que ya es rico en utilidades Flash le recomiendo que haga un plan de migración de dichas aplicaciones a HTML5.

Para reflexionar:

Les  dejo con una pregunta para conocer su opinión:

¿Considera que debe utilizar HTML5 o FLASH en sus diseños Web y por qué?

Los invito a dejar su opinión sobre este artículo o realizar preguntas que con gusto las responderé.

Colores en el diseño Web emocional: efectos psicológicos del uso de los colores

Colores en el diseño Web emocional: efectos psicológicos del uso de los colores

Imagen tomada de Logodesigncolors.blog.com

En este artículo revisaremos el efecto psicológico y emotivo tanto positivo como negativo del uso de los diferentes colores en los sitios Web. Veremos el significado de cada color, lo que aporta en el diseño y que produce su uso excesivo.

Soy atrevido al tratar este tema en mi blog ya que sufro de daltonismo, sin embargo, con mucha frecuencia encuentro que el uso de los colores en los diseños web se hace de manera subjetiva y no se aprovecha el poder emocional y psicológico que los colores tienen en el diseño.

Es importante aclarar que los sitios Web deben ser consistentes en el uso de colores con la imagen de la empresa en el mundo físico, sin embargo a la hora de utilizar otros colores es importante tener presente el efecto psicológico que estos producen.

Veamos el efecto psicológico y emotivo de algunos colores (tomado del sitio  webusable.com):

1. Blanco

1.1 Efecto psicológico y emocional del uso del color blanco

El blanco se asocia a:

  • Pureza
  • Bondad
  • Inocencia
  • Perfección
  • Seguridad
  • Frescura
  • Limpieza

Su uso purifica la mente a los más altos niveles.
1.2. Usos del color blanco en un sitio Web

  • En la promoción de productos de alta tecnología, el blanco puede utilizarse para comunicar simplicidad.
  • El blanco es un color apropiado para organizaciones caritativas.
  • El blanco se le asocia con hospitales, médicos y esterilidad.
  • Puede usarse por tanto para anunciar productos médicos o que estén directamente relacionados con la salud.
  • A menudo se asocia a con la pérdida de peso, productos bajos en calorías y los productos lácteos.

1.3. Efecto del uso excesivo del color blanco 

El uso excesivo de este color no tiene ningún efecto psicológico ni emotivo.

2. Amarillo

2.1 Efecto psicológico y emocional del uso del color amarillo

El amarillo se asocia a:

  • Luz del sol
  • Alegría
  • Felicidad
  • Inteligencia
  • Energía
  • Tibieza
  • Precaución
  • Innovación

Su uso ayuda a la estimulación mental y aclara una mente confusa.

2.2. Usos del color amarillo en un sitio Web

  • Con frecuencia se le asocia el amarillo a la comida.
  • La combinación amarillo y negro se puede usar para resaltar avisos o reclamos de atención, es muy útil para destacar los aspectos más importantes de un sitio web
  • El amarillo es muy adecuado para promocionar productos para los niños y para el ocio.
  • Los hombres normalmente encuentran el amarillo como muy desenfadado, por lo que no es muy recomendable para promocionar productos caros, prestigiosos o específicos para hombres.
  • El amarillo es un color espontáneo, variable, por lo que no es adecuado para sugerir seguridad o estabilidad.

2.3.  Efecto del uso excesivo del color amarillo

  • El uso excesivo del color amarillo, puede tener un efecto perturbador, inquietante. Algunos estudios han encontrado que los bebés lloran más en habitaciones amarillas.
  • El uso excesivo del color amarillo también puede producir agotamiento, y generar demasiada actividad mental.

3. Rojo

3.1 Efecto psicológico y emocional del uso del color rojo

El rojo se asocia a:

  • Energía
  • Vitalidad
  • Poder
  • Fuerza
  • Apasionamiento
  • Valor
  • Peligro
  • Guerra
  • Valor
  • Agresividad
  • Determinación
  • Deseo
  • Amor

Las tonalidades de rojo tienen diferentes efectos psicológicos:

  • El rojo claro simboliza alegría, sensualidad, pasión, amor y sensibilidad.
  • El rosa evoca romance, amor y amistad. Representa cualidades femeninas y pasividad.
  • El rojo oscuro evoca energía, vigor, furia, fuerza de voluntad, cólera, ira, malicia, valor, capacidad de liderazgo. En otro sentido, también representa añoranza.
  • El marrón evoca estabilidad y representa cualidades masculinas.

El uso del rojo ayuda a intensificar el metabolismo del cuerpo, aumenta el ritmo respiratorio y eleva la presión sanguínea. Conduce a generar apasionamiento y a disipar la depresión.

3.2. Usos del color rojo en un sitio Web

  • El rojo tiene una visibilidad muy alta, por lo que se suele utilizar en avisos importantes, prohibiciones y llamadas de precaución.
  • El rojo es muy recomendable para llevar a las personas a tomar decisiones rápidas durante su estancia en un sitio web.
  • Se utiliza el rojo también para provocar sentimientos eróticos. Símbolos como labios o uñas rojos, zapatos, vestidos, etc., son arquetipos en la comunicación visual sugerente.
  • Como el rojo está muy relacionado con la energía, es muy adecuado para anunciar coches motos, bebidas energéticas, juegos, deportes y actividades de riesgo.

3.3.  Efecto del uso excesivo del color rojo

  • El uso excesivo del color rojo puede provocar ansiedad, agitación y tensión.

4. Azul

4.1 Efecto psicológico y emocional del uso del color azul

El azul se asocia a:

  • Verdad
  • Confianza
  • Lealtad
  • Serenidad
  • Armonía
  • Sabiduría
  • Inteligencia
  • Fe
  • Fidelidad
  • Sinceridad
  • Responsabilidad

Las tonalidades de azul tienen diferentes efectos psicológicos:

  • El azul claro se asocia a la salud, la curación, el entendimiento, la suavidad y la tranquilidad.
  • El azul oscuro representa el conocimiento, la integridad, la seriedad y el poder.

El uso del azul ayuda a retardar el metabolismo y producir un efecto relajante. Es un color fuertemente ligado a la tranquilidad y la calma.

4.2. Usos del color azul en un sitio Web

  • Es muy adecuado para sitios web de productos relacionados con la limpieza (personal, hogar o industrial) y todo aquello relacionado directamente con:
    • El cielo (líneas aéreas, aeropuertos)
    • El aire (acondicionadores paracaidismo)
    • El mar (cruceros, vacaciones y deportes marítimos)
    • El agua (agua mineral, parques acuáticos, balnearios)
  • El azul es adecuado para promocionar productos de alta tecnología o de alta precisión.
  • El azul es un color típicamente masculino, muy bien aceptado por los hombres, por lo que en general será un buen color para asociar a productos para estos.
  • Se debe evitar para productos alimenticios y relacionados con la cocina en general, porque es un supresor del apetito.

4.3.  Efecto del uso excesivo del color azul

  • El uso excesivo del color azul puede provocar depresión, aflicción y pesadumbre.

5. Verde

5.1 Efecto psicológico y emocional del uso del color verde

El verde se asocia a:

  • Armonía
  • Crecimiento
  • Exuberancia
  • Fertilidad
  • Frescura
  • Estabilidad
  • Resistencia
  • Acaudalado
  • Celos
  • Moderado
  • Equilibrado
  • Tradicional

Las tonalidades de verde tienen diferentes efectos psicológicos:

  • El verde “Agua” se asocia con la protección y la curación emocional.
  • El verde amarillento se asocia con la enfermedad, la discordia, la cobardía y la envidia.
  • El verde oscuro se relaciona con la ambición, la codicia, la avaricia y la envidia.
  • El verde oliva es el color de la paz.

El uso del verde es útil para aminorar el agotamiento nervioso, para equilibrar la emociones del visitante, para revitalizar el espíritu y para estimular la compasión.

5.2. Usos del color verde en un sitio Web

  • Es recomendable utilizar el verde asociado a productos médicos o medicina.
  • Por su asociación a la naturaleza es ideal para promocionar productos de jardinería, turismo rural, actividades al aire libre o productos ecológicos
  • El verde apagado y oscuro, por su asociación al dinero, es ideal para promocionar productos financieros, banca y economía.
  • El verde se utiliza en el sentido de “vía libre” en señalización.

5.3.  Efecto del uso excesivo del color verde

  • El uso excesivo del color verde puede crear energía negativa.

6. Negro

6.1 Efecto psicológico y emocional del uso del color negro

El negro se asocia a:

  • Poder
  • Autoridad
  • Fortaleza
  • Elegancia
  • Prestigio
  • Seriedad
  • Formalidad
  • Muerte
  • Misterio
  • Intransigencia

El uso del negro permite transmitir sensación de paz y silencio.

6.2. Usos del color negro en un sitio Web

  • En un sitio web puede dar imagen de elegancia, y aumenta la sensación de profundidad y perspectiva. Sin embargo, no es recomendable utilizarlo como fondo ya que disminuye la legibilidad.
  • Es conocido el efecto de hacer más delgado a las personas cuando visten ropa negra. Por la misma razón puede ayudar a disminuir el efecto de congestión de áreas de contenido, utilizado debidamente como fondo.
  • Es típico su uso en museos, galerías o colecciones de fotos on-line, debido a que hace resaltar mucho el resto de colores. Contrasta muy bien con colores brillantes.
  • Combinado con colores vivos y poderosos como el naranja o el rojo, produce un efecto agresivo y vigoroso.

6.3.  Efecto del uso excesivo del color negro

  • El uso excesivo del color negro puede producir un efecto distante e intimidatorio.

Para reflexionar:

Les  dejo con una pregunta para conocer su opinión:

¿En sus diseños Web tiene en consideración el efecto psicológico de los colores?

Los invito a dejar su opinión sobre este artículo o realizar preguntas que con gusto las responderé.

Diseño Web emocional. El marketing emocional aplicado al diseño de sitios Web y páginas de Facebook.

Diseño Web emocional El marketing emocional aplicado al diseño de sitios Web y páginas de Facebook

Imagen tomada de blog.guiasenior.com

El concepto de Marketing Emocional está siendo cada vez más utilizado en el marketing digital. En este artículo revisaremos como aplicar el concepto Marketing emocional en el diseño de sitios Web, páginas y aplicaciones en Facebook.

Este artículo lo he basado en una excelente presentación que realizó la diseñadora María José Castañer sobre diseño emocional.

1. ¿Qué es el Marketing Emocional?

El Marketing Emocional pretende que una empresa cree y desarrolle un vínculo afectivo y duradero con sus clientes, de tal forma que estos sientan la marca como algo propio, y deseen contribuir a su crecimiento y supervivencia.

Se puede afirmar que hoy las marcas ya no venden atributos, venden emociones. Lo que pretenden las empresas es llegar al corazón y no a la mente.

Se puede decir que el marketing ha evolucionado como sigue:

  • Marketing transaccional que se fundamenta en el producto.
  • Marketing relacional que se fundamenta en  cómo satisfacer al cliente.
  • Marketing emocional que se fundamenta en cómo conectarse emocionalmente con el cliente.

2. Aspectos que influyen en la conexión emocional del diseño Web

El diseño del sitio Web y la página de Facebook debe ofrecer experiencias positivas y memorables que disfruten para que las personas regresen.

Mostraré seis aspectos que menciona María José Castañer en su conferencia para lograr este tipo de diseños:

2.1. La armonía

Cuando un sitio Web o página de Facebook nos resulte agradable, aunque no sepamos definir por qué, quiere decir que tiene armonía.

Generalmente la armonía implica tener proporción en los elementos, espacios, colores, tipografías, etc.

Una persona considerada bella (agradable a la vista) tiene una cara con proporciones adecuadas.

2.2. Ritmo

El ritmo aunque proviene de la música, a nivel gráfico también se puede representar y se pueden representar elementos gráficos que transmiten orden. Habla de la repetición y la estructura y permite separar el orden del caos.

El sitio Appinformatica.com es un ejemplo de un sitio Web sin ritmo que hacer ver desorganizado el sitio (caos).

Diseño Web Emocional Ejemplo página sin ritmo

2.3. Colores

Los colores tienen la capacidad de evocar ciertos aspectos emocionales y fisiológicos.

  • Rojo es pasión y puede generar hiperactividad
  • Amarillo es alerta
  • Azul es tranquilidad, confianza y origina relajación en el visitante.
  • Marrones y oscuros pueden generar nerviosismo
  • Los colores tierra generan dulzura y genera un estado mental positivo hacia el sitio Web.
  • Negro es oscuridad

Dentro de un mismo color se pueden evocar diferentes sentimientos o sensaciones de acuerdo a la tonalidad.

Un elemento con color rodeado de ausencia de color permite llamar la atención en el único punto que tenga color. Esto permite que el visitante siempre mire el elemento de color.

La ausencia total del color (blanco y negro) lo que permite es que la emoción la ponga el visitante.

2.4. Tipografías

Son transmisores de mensajes muy efectivos. Gracias a sus formas, jerarquías, rasgos, diferenciadores, inclinaciones, etc. Se podría decir que cada tipografía tiene una personalidad.

Puede llegar a evocar un recuerdo o un sentimiento. Cada detalle de una tipografía está pensado para transmitir o reforzar un mensaje.

Es por esto que se deben seleccionar muy bien cuando se realice el diseño de un sitio Web o una página de Facebook.

Las letras mayúsculas pueden producir una sensación de potencia, seguridad, coherencia, transparencias.

Debemos evitar crear diseños con demasiadas tipografías en un sitio Web o página de Facebook para evitar confusión, ruido y caos. En ocasiones los sitios de Web de niños o teens pueden admitir demasiadas tipografías en un solo sitio como se ve en el sitio de Seventeen.com

Diseño Web Emocional Ejemplo de sitio con muchas tipografías

2.5. Espacio

Los espacios transmiten volúmenes, realzan el mensaje, crean interés y llaman la atención.

Se debe gestionar el espacio y perderle miedo al vacío para poder manejar la mirada del visitante.

Con la gestión de espacios podemos lograr la atención del visitante sobre un elemento sin tener que aumentar su tamaño que es lo que hacen la mayoría de los diseñadores.

La gestión de espacios también me ayudan a jerarquizar: qué miro primero, que miro después y así sucesivamente.

2.6. Jerarquía

Las jerarquías en los elementos de nuestro diseño puede ser determinante a la hora de clarificar la lectura de la información.

Los espacios, las tipografías, lo tamaños y los colores me permiten jerarquizar mi sitio Web o página de Facebook.

Debo determinar que quiero ver primero y que quiero ver después. Debo determinar el elemento más importante del sitio Web.

Un ejemplo de sitio Web donde es difícil identificar qué es lo más importante es el sitio de Carrefour.es como se ve en la gráfica siguiente:

Diseño Web Emocional ejemplo de página sin Jeraquía

 

Para reflexionar:

Les dejo con una pregunta para conocer su opinión:

¿Conoce otros aspectos de diseño Web que afecta la conexión emocional de los visitantes? Cuéntenos cuál.

Los invito a dejar su opinión sobre este artículo o realizar preguntas que con gusto las responderé.

123