Ecommerce Bicicletas
Diseño web mobile| Proceso
Se nos plantea un proyecto de actualidad: el reto de crear la web mobile de un ecommerce enfocado a la venta de bicicletas eléctricas.
Para ellos, se nos pide incluir unos requisitos mínimos:
La web debe contener:
- Suscribirse a la newsletter
- Multi idioma
- Ofertas
- Mención a la colaboración con el medio ambiente
- Se pueden personalizar las bicis con: Color, motor, ruedas… (excepto las de oferta)
También se nos proporciona un árbol de navegación:
*Hay que incluir “política de cookies”y “aviso legal”
¡Comenzamos con el reto!
Lápiz y papel
Para empezar con buen pie, primero hacemos un esquema de todas las pantallas a mano, así podemos revisar rápidamente como podría ser la estructura de nuestra web:
Wireframes
Una vez tenemos un esquema en papel, podemos pasar a los wireframes, donde colocaremos todos los elementos necesarios, aunque no nos importa tanto la posición ni el tamaño, solo queremos ver los elementos que tendremos que colocar en cada pantalla cuando llegue el momento.
Mockup
Una vez que tenemos los wireframes definidos podemos dar paso a los mockups, donde empezaremos a dar color, pero no tienen porqué ser los colores definitivos ni las tipografías, simplemente nos proporcionará las nociones de cuantos tamaños de tipografía vamos a necesitar y cuantos colores. Aquí ya podemos incluir el logo, si lo tenemos.
Prototipo final
En cada parte del proyecto, hemos ido reduciendo el número de vistas debido a la falta de tiempo, en un proyecto real, se tendría que dedicar más tiempo en cada parte del proceso para poder finalizarlo.
En la parte del prototipo final, ya aplicamos el “pixel perfect” utilizando un grid de 8 y 4 columnas:
Cuando tenemos definida la grid y las columnas, podremos determinar otros aspectos cómo definir la paleta de color exacta, la tipografía y crear nuestros estilos y componentes.
Finalmente iremos rehaciendo los mockups con precisión para llegar hasta nuestro prototipo final:
Y esto es todo, ya tenemos nuestra web de bicicletas eléctricas!
Hasta la próxima!
