- Cliente: Dreamlab (difícil)
- Tipo de proyecto: Creación de página web e interfaz de usuario
- Herramientas: Adobe Ilustrador, Adobe Photoshop, Front-end development, back-end development
Descripción del proyecto
Dreamlab fue uno de los proyectos más interesantes que me ha tocado realizar, ya que teníamos muy poco tiempo para terminarlo y el cliente tenía requerimientos muy específicos. Su marca es de colchones inteligentes, almohadas y bases para clientes que buscan una mejoría física al dormir. Es una empresa con pocos productos de alta gama, por lo mismo tuvimos que buscar una estrategia para armar algo muy visual y atractivo para tan poca cantidad de productos.
Saberes aplicados
- Metodología agile y atom
- Integración y configuración de apps (reviews, mapa, testimoniales)
- Secciones nuevas con código directo al template (html, liquid)
- Edición del código css del template
- Edición del código liquid del template
- Creación, edición y exportación de assets
- Seguimiento con el cliente
- Trabajo en equipo con los integrantes del proyecto
Retos
- Crear una página web que solo venderá 3 productos
- Proyectar todos los requerimientos del cliente sin afectar el user interface del template
- Crear y editar nuevas plantillas con código liquid para adaptar el template elegido
- Hacer el diseño más visual e intuitivo
- Realizar el prototipo en muy poco tiempo con poca información
- Que las secciones fueran manipulables para el cliente
- El cliente cambiaba de referencias al avanzar el proyecto
Aprendizajes
- Crear una interfaz amigable y simple para la cantidad de productos que manejan
- Nuevas herramientas del código liquid de shopify
- Hacer un comparativo de los wireframes propuestos con las referencias que proporcionaron
- Proporcionarle a un producto en específico más atención sin dejar los otros fuera de foco
Una página acogedora con destellos de tecnología
Dreamlab necesitaba dar a conocer sus productos de tal manera en que los usuarios pudieran sentir que estaban en un ambiente cómodo, no saturado, y que al mismo tiempo supieran que se trataban de productos de alta tecnología, por lo que resaltarlos a todos sus productos de manera independiente fue todo un reto visual que llegue a disfrutar.
Wireframing
Esta fue una de las facetas más importantes del proyecto, como en todos los proyectos, el cliente quería previa aprobación del proyecto en wireframes para poder inciar el diseño de los mockups.
El detalle en éste proyecto en específico es que mientras se iban realizando los mismos, el cliente cambiaba de opinion sobre sus referencias y proponía cosas distinas a los requerimientos anteriormente establecidos.
¡Se realizaron más de 5 versiones completas de estructuras de páginas en wireframes!
Una nueva experiencia en diseño
Con bases establecidas en colorimetría y referencias de los puntos a resaltar del cliente, se creo una imagen gráfica y personalizada para su sitio web. El reto fue poder realizar el código con las funcionalidades necesarias en una plataforma con secciones ya establecidas y que respetara el diseño en el código liquid nuevo en todas las resoluciones necesarias.
