Rediseño de la web de Floristería Valenciana
Durante mi actividad como diseñadora en la agencia de marketing CLYB, llevé a cabo el rediseño responsive de la página web de uno de los clientes de la agencia: una floristería en la ciudad de Valencia.
IMAGEN CORPORATIVA
La anterior imagen corporativa de Floristería Valenciana abusaba del uso de las flores como elemento gráfico y creaba una sensación de sobrecarga visual. Además, la estética se encontraba desfasada de acuerdo a las últimas tendencias de diseño que se caracterizan por la sencillez y se rigen por las directrices del flat design.
Para la nueva imagen corporativa de la empresa se propone una simplicidad de las formas, manteniendo como elemento principal el producto que se vende: las flores. Se apuesta por la sencillez mediante colores planos y una estructura ordenada. Para ello, se realiza una ilustración plana de una flor y se crea un composición con la misma, lo que contrasta con el anterior logotipo que utilizaba recortes de fotografías reales de flores para realizar la composición.
En lo que a colores se refiere, se elige la combinación de dos colores monocromáticos, es decir, de un solo color base, el rosa. Ambos son colores con una saturación baja que sugieren nostalgia, pero también seguridad y calma. Son colores relajantes que generan sentimientos amables y profundos. De esta forma, se induce al cliente a sentir cariño, amor o protección: sentimientos que se pueden identificar con el significado de las flores como obsequio.
Respecto a la tipografía, se utiliza una combinación entre dos variantes de la fuente Source: Sans Pro y Serif Pro.
DISEÑO DE ELEMENTOS WEB
Header
La cabecera o header de la versión desktop comienza con el nuevo logotipo horizontal diseñado para la imagen visual de la empresa, alineado a la izquierda. En la parte derecha, podemos visualizar el teléfono de contacto y enlaces directos a las secciones “Dónde estamos” y “Horario”. Por último, es posible elegir el idioma de visualización mediante un pequeño desplegable y visualizar la cesta de compra.
Para la versión mobile, se prescinde de los enlaces directos de las secciones “Dónde estamos” y “Horario”, así como del selector de idioma. En su lugar, se coloca un icono que despliega el menú donde se integrarán esas acciones. En el centro de la cabecera, se coloca el nuevo isotipo vertical y, finalmente, a la derecha se encuentra el teléfono de contacto y el acceso a la cesta de la compra.
Menú
En este rediseño de la versión desktop, se coloca el menú de navegación en una posición privilegiada justo debajo de la nueva cabecera de la web. El menú está integrado por las principales categorías de flores y se compone de dos niveles de detalle.
Como se ha indicado anteriormente, en la versión mobile el menú de navegación se despliega en la parte izquierda de la pantalla al pulsar el icono de la cabecera. Además, integra los enlaces directos a la secciones “Horario” y “Dónde estamos” y el selector de idiomas. De nuevo, se reproduce la estructura en dos niveles de la versión desktop.
Footer
En el pie de página o footer se coloca los principales datos relevantes de la empresa (horario y localización) e información de Copyright. Finalmente, se completa con el mapa de la ciudad de Valencia colocando la ilustración de la flor en aquellos lugares donde hay un establecimiento físico de la floristería.
En la versión mobile se prescinde del mapa con la localización de los establecimientos y se pasa de una estructura de doble columna a una de solo una columna para adaptarse mejor al ancho de pantalla de los dispositivos móviles.
Otros elementos
Finalmente, se diseñan otros elementos gráficos para la interacción de la página web:
- GIF de carga formado por la concatenación de diferentes versiones de la ilustración digital de la flor girada distintos ángulos para simular el giro típico de los engranajes en las pantallas de carga.
- Icono dinámico de cesta de la compra que varía su estado al añadir artículos, incluyendo una flor en la cesta.
PROTOTIPO
A continuación se muestra el resultado de la integración de los apartados anteriores mediante la visualización del prototipo navegable tanto en su versión desktop como en su versión mobile:
