Contacto

Rediseño del sitio web de Bodegas Príncipe de Viana

Descubre los trucos de diseño del nuevo desarrollo web de Príncipe de Viana.

Laura Catalan

Dedicada a la gestión de proyectos online, diseño web

A lo largo del 2016 hemos abordado muchos proyectos, pero el rediseño de Príncipe de Viana ocupa un lugar especial ya que supuso un gran reto y estamos muy orgullosos del resultado. Por un lado se trabajó la imagen de marca desde un enfoque más narrativo por medio de la técnica de Storytelling y se desarrolló una práctica y moderno ecomerce llamado "Tu tienda online de vinos".

Los objetivos

  • Potenciar la imagen de marca Príncipe de Viana por medio de un sitio web moderno, elegante, genuino, que se diferencie de su competencia.
  • Resaltar la calidad del producto
  • Dar a conocer el proceso de producción del vino destacando la calidad de su materia prima y de sus procesos de elaboración.
  • Potenciar la venta online por medio del Ecommerce del grupo que comprende distintas bodegas: Albret, Clunia, Príncipe de Viana, Rioja Vega.

El enfoque

Tras el análisis de la competencia y con los objetivos del proyecto en mente se trabajó en el hilo conductor del proyecto. Por medio de la técnica llamada "Storytelling".

El Stoytelling es el arte de contar una historia y es una técnica muy utilizada en el Marketing tradicional. Trata de contar historias conectando emocionalmente con nuestro interlocutor.

Una historia cercana y emotiva es la mejor manera para transmitir lo valores de confianza y fidelidad que todas las marcas buscan.

"De la viña a tu copa"

La aplicación de esta técnica en nuestro proyecto consistió en describir de manera narrativa el proceso de creación de un vino en tres fases: El viñedo, La bodega, En tu copa.

¿Necesitas (realmente) rediseñar tu sitio web?

Ebook gratuito

Diseño

Vídeo en bucle

Para darle calidez y personalidad a la home se ha optado por utilizar un vídeo de apenas 3-4 seg en modo en bucle para crear un efecto visual. En él se ve un detalle de una planta del viñedo. En un primer momento parece una foto estática, pero se intuye un ligero movimiento de las hojas del viñedo.

Menú "Off-canvas"

En vez de usar un menú de navegación convencional, se ha optado por un menú "off-canvas", es decir, situado fuera del escenario. Ello permite crear un diseño más elegante y limpio despejando la cabecera de información dando un mayor protagonismo al logotipo, al buscador y a los idiomas.

Al clicar sobre el icono de las tres rayitas aparece en pantalla completa las opciones del menú. Esto nos permite utilizar tipografías más grandes y legibles facilitando así la navegación desde cualquier dispositivo.

Este comportamiento viene heredado del diseño de dispositivos móviles, donde por se tiende a ocultar la navegación por un problema de espacio.

Sticky menú

Literalmente significa "menú pegajoso" y es un efecto, muy utilizado actualmente en las páginas con contenido extenso.Al realizar desplazamiento vertical el menú se queda pegado a la barra de navegación acompañando al usuario. De esta manera siempre puede acceder al menú sin tener que volver hasta la parte superior.

Elementos de conversión

Facilitar la navegación entre los distintos contenidos de un sitio web es una parte fundamental dentro del marketing de contenidos. Destacar una promoción, rellenar un formulario o facilitar el contacto son algunas de las acciones que buscamos en nuestros usuarios.

Para ello en el marketing online utilizamos los llamados elementos de conversión, que no son más que una llamada a la acción acompañada de un botón con enlace al contenido de interés.

Un elemento de conversión está compuesto por:

  • Un gran titular con "gancho"
  • Una pequeña descripción
  • Un botón con la llamada a la acción
  • Una imagen de fondo o destacada ilustrativa

conversion-pv

Efectos parallax

Seguro que te has encontrado en multitud de sitios web algunos efectos de movimiento. Por ejemplo cuando bajas el scroll y la imagen de fondo se mueve más despacio. Pues es un sencillo ejemplo de los llamados "efectos parallax" que podemos aplicar en un sitio web.

En concreto en el rediseño de Príncipe de Viana se han usado efectos en imágenes de fondo y efectos de movimiento en iconos. Este tipo de recursos dotan de dinamismo, frescura y modernidad un sitio web.

Iconos svg ¿Qué es y por qué utilizarlo?

Cuando se trabaja con iconos en proyectos web la mayoría de las ocasiones se opta por formatos .JPG o .PNG si trabajamos con transparencias. Pero actualmente disponemos de un formato vectorial .SVG con muchas ventajas.

  • Al ser vectorial es escalable.
  • Pesa poco, en KB.
  • Obtenemos una gran nitidez y definición a cualquier tamaño.
  • Iconos responsive: Se ajusta al tamaño de pantalla sin perder calidad.
  • Calidad óptima para dispositivos con pantalla de resolución elevada.

Tipografías

En cualquier proyecto de diseño gráfico, la selección tipográfica juega un papel muy importante. La combinación de distintos fuentes y cuerpos tipográficos aporta cohesión y coherencia con la marca.

En este caso, hemos seleccionado dos fuentes tipográficas con distintos objetivos:

  • Source Sans pro: Fuente de sistema (visible por cualquier usuario) de palo seco y con una amplia gama de variantes desde la "ligth" a la "black". Esta tipografía forma parte de nuestras "fuentes de cabecera" ya que es muy versátil, ligera y destaca por ser muy legible.
  • PlayFair Display: Perteneciente a la familia de Google Fonts. Fuente con serif se caracteriza por una líneas curvas y elegantes. Ideal para dotar de un toque clásico al diseño haciendo un guiño a la tipografía del logotipo.

Tus vinos online

Para la tienda online de tusvinosonline.com apostamos por WooCommerce como plataforma de comercio electrónico.

Los motivos principales:

  • Perfecta integración con WordPress. Respeta las funciones nativas del gestor de contenidos, pero otorgándole nuevas posibilidades.
  • Desarrollo basado en estándares, lo que asegura su compatibilidad con las últimas tecnologías.
  • Es de código abierto, de tal forma que permite adaptarlo a todas nuestras necesidades.
  • Dispone de una gran comunidad detrás, que colabora en su evolución y mejora continua.
  • Resulta muy sencillo su manejo por parte del usuario y puede estar dando de alta nuevos productos y gestionando su catálogo prácticamente desde el minuto 1.
  • Ofrece informes y datos completos sobre los pedidos, clientes y stock de productos.
  • Permite la integración con la mayor parte de pasarelas de pago de internet.
  • Es actualizado frecuentemente, con corrección de errores y mejoras de rendimiento y seguridad, un aspecto éste que consideramos fundamental.

Navegación y filtros

Para facilitar la navegación y localización de los vinos, apostamos por llevar al menú principal las categorías de producto (Albret, Clunia, Príncipe de Viana, Rioja Vega y Otras Bodegas). Como complemento, utilizamos los atributos para desarrollar un filtro que complemente la navegación general y facilite al usuario encontrar el vino que se ajuste a sus necesidades: por tipo de vino, por variedad de uva, por precio, por región o por ocasiones de consumo.

Comparador de productos

A pesar de los múltiples filtros que hemos mencionado anteriormente, puede haber ocasiones en las que el usuario no sepa qué vino adquirir. Para estas situaciones, incorporamos una funcionalidad de comparador de productos, mediante la cual es posible realizar una comparativa de vinos y así decidir mejor cuál se adapta a las necesidades.

Lista de deseos

El sitio web de tusvinosonline.com ofrece un sistema de lista de deseos para que aquellos clientes que no pueden o no quieren realizar una compra en un determinado momento, puedan realizarla más adelante. Mediante este sistema pueden marcar y guardar aquellos productos que le interesan y comprarlos cuando lo deseen. Con esta funcionalidad, facilitamos la visita al comprador, ya que evitamos que tenga que ponerse a buscar a través de todo el sitio aquel producto que en su momento vio y le interesó, pero que no adquirió en ese momento.

Ficha de producto completa

La información acerca de cada producto viene complementada por una galería de imágenes de calidad, que muestran en detalle el producto y facilitan así la toma de decisiones de compra; y por un bloque de productos relacionados, que potencian las ventas cruzadas, retienen al usuario durante más tiempo en el sitio web y ayudan al SEO, al ofrecer valor añadido al contenido aportado.

Área de socios

Más allá de las posibilidades que ofrece WooCommerce, desarrollamos un área para socios a través del cual el cliente puede beneficiarse de descuentos y ofertas especiales. Incorporamos campos adicionales al formulario de registro y al de gestión de cuenta para permitir que el usuario pueda hacerse socio y proporcione información acerca de sus preferencias y hábitos de consumo de vino, y así poder ofrecerle aquellas promociones más ajustadas a sus intereses.

Como veis el rediseño de un sitio web es un proceso laborioso pero que merece la pena desde un punto de vista tanto estético como comercial, para potenciar la marca y  mejorar resultados.

Si os estáis preguntando si ha llegado la hora de actualizar, rediseñar o reconstruir tu web aquí os dejo otras muchas razones.

Guía con 3 estrategias exitosas para impulsar tu marca o negocio

Ebook gratuito

Sal de dudas

Conversa gratis con un experto en marketing digital durante 30 minutos

Más contenidos relacionados en Estrategia online

Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

No hay comentarios