Conceptualización de un diseño web: mensaje, eslogan y simbología

Conceptualización de un diseño web: mensaje, eslogan y simbología

Por Oto Whitehead | 12 noviembre, 2015

Hace un par de semanas hablábamos sobre diseño web y cómo hacer que un planteamiento gráfico genere emociones. Es importante focalizar los esfuerzos de un diseño web en el target al que queremos llegar. Nada debe quedar a la improvisación.

La experiencia de usuario siempre es importante. Para ello, la conceptualización de los diseños web también son importantes y hay que tenerlos en cuenta para plantear una idea gráfica coherente con la marca. Así, el eslogan, el mensaje a transmitir y la simbología que utilicemos debe “respirar” el mismo espíritu de la marca que se encuentra detrás.

Hemos tomado como referencia los diseños web de marcas de bebidas energéticas como Red Bull, Monster y Burn, para ver cómo lo están haciendo.

En Red Bull dos toros rojos que se envisten en muestra de desafío, energía, reto y fuerza. Y al fondo un sol naciente que recuerda sus orígenes asíaticos. Cuando crees una marca tiene que evocar una historia e incitar a la curiosidad del cliente para provocar que hable de ella.

Monster que se dirige a un público más joven y claramente masculino, elige una garra como símbolo que invita a los milenialls a sacar “ese algo salvaje” que llevan dentro consiguiendo que su target se identifique con la marca.

Y por otro lado, Burn se dirige a las personas que viven el momento, la diversión de la noche y que les apasiona la música y la diversión, y también a aficionados a deportes de riesgo, de ahí la llama metafórica del “fuego que llevas dentro o que hay en ti”, la pasión por vivir.

La homepage en un diseño web

Acorde a cada mensaje Red Bull y Monster destacan sus contenidos y protagonistas, los deportistas, con sus logros personales. Como se trata de mucho contenido tienen que realizar una arquitectura más trabajada, jerarquizar los contenidos, y segmentar distintas categorías. Burn, no obstante, pone en el centro la actividad social en redes sociales de su marca y de sus seguidores.

Monster sigue las pautas de branded content que marcara Red Bull como pionera. No obstante, se complica menos en la arquitectura de contenidos, los deportes están vinculados a los atletas, pero alrevés no. Segmenta más su público y elige deportes minoritarios más cercanos a los milenialls (modo afición) y masculiniza el mensaje haciendo que la mujer aparezca como un objeto de deseo.

Mientras Burn, por contra, elige un diseño minimalista y muy simple. Destaca en una imagen grande la experiencia de vivir el momento y, como se orienta más a ocio, pone de relieve sus redes sociales e interacción con su público directo. Se les ve disfrutando de la música, asistiendo a eventos y fiestas, etc.

La importancia de los colores y la tipografía en el marketing experience

La marca que más destaca la personalización en este área es Red Bull. Los naranjas, rojos, azules, son distintivos de la marca. Son colores vivos y fuertes. Se pueden asociar a la fuerza, la vitalidad y la energía.

En la web también juegan con los colores de fondo creando contrastes para diferenciar conenidos. En el ejemplo que sigue si hacéis scroll lo iréis viendo.

Fondo negro para tv, luego blanco y seguido, para diferenciar espacios, vemos una foto de detalle de una super ola como fondo y de nuevo otro fondo blanco para otro espacio y finalmente pie de página sobre azul Red Bull.

Sin embargo, en Monster y Burn predomina el fondo en color negro y gris sin contrastes entre categorías.

Las tres marcas utilizan efectos css para textos y enlaces. En cuanto a la tipografía, nuevamente es Red Bull la que más juega con este recurso y os lo explicamos a continuación.

Las historias personales en primer plano

En Red Bull los protagonistas son los deportistas. Por eso nos hemos fijado también en el diseño de la ficha de perfil de los deportistas, ya que a fin de cuentas son el leitmotiv de la estrategia de las bebidas energéticas. En Red Bull primero vemos una portada que combina varias imágenes de distintos tamaños en armonía presentando a los atletas más destacados. Y luego hay una opción de perfiles donde se muestra la bio de cada deportista. El objetivo es crear sensaciones con el diseño y en este apartado es acercar al consumidor a las experiencias que viven los deportistas y a su historia personal.

Si os fijáis, en Red Bull son los propios deportistas quienes mediante una introducción narran sus aspiraciones y filosofía de vida. Para mayor acercamiento entre usuario y marca, en Red Bull utilizan tipografía “mano alzada” para que resulte más personal. Y hay que tener en cuenta también que en sus fotos de perfil están desarrollando su actividad y usan un recorte en círculo para que se asemeje más a un album abstracto, quizá más “familiar”. En Monster no juegan con las máscaras de recorte, son todas rectangulares y tampoco con la tipografía.

En Red Bull, en “Todos los atletas” verás efectos on mouse over con CSS para imágenes. Es decir, si pasas el ratón sobre la imagen, te aparece una div transparente con una frase inspiradora del deportista. Si os fijáis, tanto la tipografía como el color se tienen en cuenta para no quitar valor al peso de la imagen y se mantiene legible. Y qué mejor que una frase que inspire para generar emoción con diseño.

Monster, sigue el ejemplo de Red Bull manteniendo las distancias, se dirige a otro target. No obstante, dedica menos esfuerzo en la arquitectura y estructura de contenido. En Roster, en menú principal, categoriza a los deportistas por orden alfabético en lugar de relacionarlos con su respectivo deporte y con el nombre en texto. Y además, la bio de cada uno es en tercera persona mientras que en Red Bull personalizan hasta la tipografía y los protagonistas hablan en primera persona en una breve intro. Y por otro lado, Monster presenta a sus atletas en orden alfabético y texto mientras que Red Bull pone foto de perfil del personaje central, más texto.

Al menos sí que vinculan, al igual que Red Bull, las redes sociales de cada deportista y ponen botones flotantes para compartir contenido. Para mi gusto, el plugin de Red Bull es más estiloso que el de Monster y se adapta mejor a la versión mobile.

Burn se dirige e identifica con un target radicalmente distinto. Por eso eligen una arquitectura de contenidos basada en las redes sociales donde cada protagonista narra su acción. El universo Burn es un espacio más social para gente que le gusta divertirse y salir de fiesta. Como es totalmente social, jerarquiza los contenidos por redes sociales donde la marca directamente elabora sus contenidos propios en origen (remoto) y también se muestran las interacciones de los fans con la marca. Arquitectura de contenidos simple pero eficaz.

Branded content

Imágenes grandes e impactantantes hero aéreas, imágenes background, dinámicas de fondo,… Ejemplos de foto:

01_recortada_Burn-diseno-imagen-grande-concierto


02-Monster-diseno-imagen-grande-motocross


03-RedBull-diseno-imagen-grande-free-ski

Vídeos que te ponen los pelos de punta. Primeros planos, planos subjetivos (GoPro), panorámicas 360º, cortometrajes y documentales que abarcan experiencias extremas, estilos de vida, viajes, arte y cultura.

Lo audiovisual te hace sentir parte de algo más trascendente que lo que meramente se ve. Además, fijaros en la música de fondo, varía según las sensaciones que se quieren provocar (ambiental = situación, lentas = emoción, rápidas = adrenalina).

Ejemplo de vídeos:

Diseñon web en Red Bull



Navegación y user experience

La conexión y navegación entre contenidos siempre es mejorable, sobre todo si se dispone de tanta cantidad de contenidos. Aunque sea Red Bull quien mejor cuida este aspecto, también podría mejorarse.

Por ejemplo, ni en Red Bull ni en Monster las noticias no guardan conexión con el perfil de los deportistas, se podría mejorar interconectando los contenidos. Para ver a lo que me refiero, podéis echar un vistazo al diseño web que hemos realizado para BH Bikes en su BH Team.

Diseño en e-shop

Solo la marca con alas brinda la opción de tienda online al usuario. Las tres marcas son negocios b2b pero en este aspecto no siguen la misma estrategia.

Monster y Burn optan por una simple descripción de producto y no van más allá. Sin embargo, Red Bull, además de descripción de producto, opta también por e-shop. En esta tienda online no sólo encontrarás las latas sino todo el merchandising que gira entorno al mundo Red Bull. Y van más allá, no sólo han creado las redes sociales propias de la tienda online, sino que además han cuidado el diseño web del ecommerce al máximo para que se visualice con facilidad en distintos dispositivos, sea intuitivo y ágil.

Para su ecommerce, la marca ha elegido diseño horizontal y minimalista, con grandes fotos y textos muy legibles para diseño mobile. Se facilita tanto scroll tanto horizontal (bien visto, porque la mayoría de las compras online se realizan a través de móvil) como vertical. Muy sencillo, con iconografía clara y grande para facilitar la UX usuario en mobile, fondos neutros, imágenes gigantes, y un menú simple pero accesible en la parte superior izquierda (diseño mobile) con desplegable con contenidos categorizados.

Esperamos haberos ayudado y haber desentrañado algunas claves del marketing experiencial aplicadas al diseño online y qué cuestiones plantearos para esbozar vuestro diseño web basado en estas claves.

Recuerda, si eres una marca de bebida, turismo, restauración y/o deportes que quiere:

  • Despegar socialmente y online. Integración entre marca y usuario.
  • Generar marca y reputación. Un impacto relevante en tu target.
  • Crear nuevas alianzas.
  • Que las recomendaciones de tu producto sean “vox populi”.

Estás a tiempo de crear conexiones que transmitan sensaciones con diseño también y “enganchar” a la gente.



Checklist auditar web

Conceptualización de un diseño web: mensaje, eslogan y simbología

Valora este artículo

Diseño web

, , ,

¿Te ha gustado el artículo?

Suscríbete a la newsletter y recibe cada semana los contenidos en tu email.

Comentarios

Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.