4Vegans
La cocina vegana nunca ha sido tan divertida
UI DESIGN / INTERACTION DESIGN
4Vegans es una web de recetas que acerca a los usuarios lo mejor de la comida vegana
gracias los mejores chefs internacionales
Punto de partida
Este es un proyecto del Gran Curso de Diseño Visual y de Interacción (2019) diseñado junto con mis compañeros John Mateu y Clara García en La Nave Nodriza (Madrid). El objetivo era diseñar un prototipo de una web de recetas, basado en un wireframe previo. Todo esto siguiendo el proceso de diseño y poniendo foco en el diseño visual.
Diseño visual
Moodboard
En el moodboard se identificaron una serie de valores que definirían el diseño de nuestra web. Estos valores fueron: mediterráneo, humanista, sostenible y natural. A continuación se seleccionaron fotos que evocaban estos valores. Desde este momento se empezó a definir la paleta de colores y el estilo fotográfico.
Librería
Gracias al moodboard empezó a definirse el estilo visual de 4Vegans. Se diseñaron los primeros componentes con los que se creó la librería, que incluía todos los elementos necesarios para poder diseñar las múltiples pantallas de la web.
Estilo visual
Teníamos claro que debía ser una web que tuviera gran impacto visual para el usuario. Por esto escogimos una tipografía geométrica con gran personalidad. La paleta de colores estaba compuesta por colores muy vibrantes y contrastados. El estilo de la fotografía fue la clave para dotar de personalidad a la web. Las fotos de los platos en plano cenital permiten disfrutar de la variedad de productos y colores de cada plato. Finalmente, el estilo redondeado de las cards, botones y demás elementos gráficos crea unidad con el resto de elementos de la interfaz.
Interacción
Un elemento clave que definió la interacción de la web fue el scroll horizontal. Gracias a las fotografías de los platos circulares y las cards redondeadas, el scroll horizontal permite que se puedan visualizar más cards ganando peso del estilo visual. El resto de elementos de intración hacen que 4vegans sea una web funcional y accesible para los usuarios.
Conclusiones
En este ejercicio se puede comprobar cómo es el proceso de diseño de un producto digital, en este caso de una web. Sin dejar de lado las funcionalidades y la usabilidad, en este proyecto se puso todo el esfuerzo en conseguir un acabado visual que fuera atractivo para los usuarios.