Cocosolis
Landing page: Rediseño y maquetación web.
Productos de Cocosolis
Skills
Benchmarking · Arquitectura · Wireframes · Prototipo
Herramientas
Papel y lápiz · Figma · Photoshop · Visual Studio Code · HTML · CSS · Bootsrap · Zeroheight
Duración
1 semana
Resideño de la landing page de Cocosolis y maquetación web utilizando el framework Bootstrap 4.
UI de la web: Benchmarking, secciones, grids y productos.
Arquitectura y wireframes
Gracias al bechmarking y un análisis de las webs más destacadas del sector, se propuso una arquitectura de la información simple para el nuevo rediseño de la landing page, dividiéndose en cuatro secciones principales: hero, principios, productos y suscripción a la newsletter.
Este wireframe nos ayuda a entender cómo se estructurará la landing page en alta fidelidad:
Alta fidelidad
Con la información clara y las secciones organizadas fue el momento de empezar a diseñar en Figma. Seguí la grid de Bootstrap para su posterior maquetación, e hice dos breakpoints: desktop y mobile.
Cocosolis Mobile
Cocosolis Desktop
Puedes consultar el sistema de diseño en:
Tocaba poner en práctica lo aprendido en el curso de maquetación web y cambiar Figma por Visual Studio Code.
Para crear la landing usamos la grid de columnas de Bootstrap, facilitando así la creación de una web totalmente responsive.
Soy "novel" y autodidacta y aún no estoy preparada para compartir todo el código ya que imagino que no lo he desarrollado de la manera más académica/correcta posible. Pero no descartemos la idea de un crear un GitHub en un futuro...
Landing page. Diseño en Figma VS Diseño maquetado
- Como diseñadora pienso que en este sector es imporante conocer cómo es el trabajo en desarrollo.
- Puede que nuestra competencia no es saber programar o maquetar, pero sí entender qué hacemos cuando estamos utilizando una herramienta como Figma, no estamos "dibujando".
- El uso de un framework como Bootstrap 4 ayuda tanto en el diseño, poniendo una serie de "normas", como en el proceso de maquetación.
- Seguiré mejorando mis diseños y algunos de ellos pasarán por Visual Studio Code.