Hacer actividad clase de diseño: moodboard+mockup+guia

Es un trabajo de clase en el que tengo que hacer moodboard+mockup+guia de estilo, tengo todas las especificaciones y ya he creado los wireframes con el que se realizaría el diseño por lo que seria montarlo en figma.

A partir de la creación de un moodboard trabajarás la gráfica de las tres páginas a diseñar (los mockups) y definirás la guía de estilo: un documento de normas y pautas que aporta consistencia y armonía al aspecto de un producto digital y que se utiliza de referencia por los profesionales que trabajan en el proyecto, por ejemplo, otros diseñadores o desarrolladores.

Antes de empezar a diseñar las páginas, es necesario realizar un moodboard que te ayude a representar los criterios estéticos que quieres transmita tu proyecto. Este tablero de inspiración debe contener aproximadamente 15 imágenes relacionadas con el tono visual que quieras darle (pueden ser más o menos, siempre que esté bien definido).

El objetivo del moodboard es establecer un marco de referencia que permita definir cuál será el tono visual de tu propuesta de diseño: ¿qué connotaciones tendrá?, ¿qué sensaciones debe sugerir al usuario?

Para llevar a cabo el moodboard, recuerda los insights y conclusiones extraídas a partir del benchmarking de la Actividad 1.

¿Qué debe contener el moodboard?
Las imágenes que has reunido en forma de tablero de inspiración. Puedes incluir el tablero directamente en el documento de entrega o utilizar herramientas externas como Pinterest o, incluso, Figma. Si se trata de una herramienta externa, debes incluir en el documento la URL para acceder.
Unas conclusiones finales en forma de lista que expliquen los criterios generales que tendrá su diseño.

A partir del moodboard y wireframes, diseña la capa visual de las tres páginas del proyecto previamente indicadas: HomeLinks to an external site., Dónde dormirLinks to an external site., ContactaLinks to an external site.. Desarrolla los mockups en versión escritorio y móvil, teniendo en cuenta las características de cada formato y los estándares del responsive web design.

Es indispensable que la propuesta gráfica tenga alta calidad y que no incluya elementos pixelados o inacabados. En cuanto al logotipo de la Ruta del Cister, puedes descargarlo en formato vectorial desde este enlaceLinks to an external site..

Recuerda que debes trabajar el prototipo con Figma. No se aceptará el diseño realizado con otras herramientas.

A continuación se detallan los pasos a seguir para realizar la tarea:
Crea los frames sobre los que diseñarás basándote en los wireframes de la actividad 1. Recuerda que es recomendable trabajar con los tamaños preestablecidos del software.
Revisa el feedback recibido por el docente y aplica los cambios a la propuesta.
Define la retícula base y créalo en Figma con la opción Layout Grid.
Trabaja la gama cromática a partir de las decisiones tomadas en el moodboard y crea las muestras de color en Figma.
Detalla los estilos tipográficos en los que se basará el diseño (títulos, párrafo, etc.). Siempre que sea posible, sigue los criterios de los estilos CSS (H1, H2, H3, párrafo, etc.). Como con las dos opciones anteriores, crea estilos tipográficos en Figma.
Diseña el prototipo gráfico completo de las tres páginas señaladas (en versión móvil y versión escritorio).
¿Qué debe incluir la entrega del prototipo gráfico?
Las pantallas del prototipo en el PDF donde entregarás el resto de ejercicios. Asegúrate de que tienen calidad suficiente para ver bien los detalles.
El enlace al prototipo de Figma con permiso de edición para el docente. Asegúrate de que el enlace sea clicable (o se pueda copiar con facilidad) y que permita acceder fácilmente al contenido. Consulta el Laboratorio de Prototipado si tienes dudas sobre cómo compartir archivos.
Un listado con los cambios realizados a partir del feedback del docente.
Simultáneamente a la creación del prototipo gráfico, desarrolla la guía de estilo que describa las pautas de diseño de la propuesta. Como mínimo debe incluir los siguientes elementos:

Retícula.
Tipografía.
Gama cromática.
Elementos de interacción (es decir, características de los botones, enlaces, radio buttons, checkboxes y otros elementos de interacción). Ten en cuenta su estado básico, su estado clicado y su estado en hover (el efecto de cuando pasamos el ratón por encima).
Elementos de formulario (es decir, todos los elementos necesarios para completar un formulario, como por ejemplo un campo para introducir texto). Ten en cuenta los diferentes estados de los campos de formulario: Básico, focus, disabled, error…
Diseña la guía de estilo en Figma
Dentro del mismo documento genera los estilos (retícula, tipografía y muestras de color) y aplícalos a tu diseño. Si tienes dudas sobre cómo crear estilos en Figma, consulta el Laboratorio de Prototipado. Una vez finalizada esta tarea, explica cómo ha sido la experiencia de crear una guía de estilo y de aplicarla:

¿Qué dificultades has encontrado? ¿Qué has aprendido? ¿Qué crees que podría aportarte en la creación de las siguientes páginas?