Proyecto 1: Prototipado y Diseño de una Interfaz Web con Figma.

Objetivo General de la Fase

El objetivo de esta primera fase es que los estudiantes diseñen una interfaz de usuario completa para una aplicación web que consuma una API REST, utilizando Figma como herramienta de prototipado. Se trabajará en todos los aspectos relacionados con la experiencia de usuario (UX) y el diseño de la interfaz (UI), creando una guía de estilo y wireframes que servirán como base para la maquetación en el módulo de Desarrollo Web en Entorno Cliente.

Resultados de aprendizaje y Criterios de evaluación

RA1 Planifica la creación de una interfaz web valorando y aplicando especificaciones de diseño.

Criterios de evaluación:

1a. Se ha reconocido la importancia de la comunicación visual y sus principios básicos.
1b. Se han analizado y seleccionado los colores y tipografías adecuados para su visualización en pantalla.
1c. Se han analizado alternativas para la presentación de la información en documentos web.
1d. Se ha valorado la importancia de definir y aplicar la guía de estilo en el desarrollo de una aplicación web.
1e. Se han utilizado y valorado distintas tecnologías para el diseño de documentos web.
1f. Se han creado y utilizado plantillas de diseño.

Actividades de la Fase 1: Prototipado en Figma

1. Análisis de los principios de comunicación visual

Descripción: Debéis estudiar y aplicar los principios de diseño visual (jerarquía, balance, contraste, y proximidad) para asegurar que la interfaz diseñada no solo sea atractiva, sino que también sea funcional y clara para el usuario.
Producto Final: Un moodboard en Figma que contenga una recopilación de imágenes, colores, tipografías y elementos visuales que representen el estilo que se quiere transmitir en la interfaz de la aplicación. Con las explicaciones pertinentes sobre las referencias.
Criterios de evaluación:
- Claridad y coherencia del moodboard.
- Adecuación de los elementos visuales al propósito de la aplicación.

2. Selección de colores y tipografías

Descripción: Se deberá definir una paleta de colores accesibles que asegure contraste adecuado y cumpla con los estándares de accesibilidad WCAG. Asimismo, se elegirán una o dos tipografías que se adapten a los distintos tamaños de pantalla y que sean legibles y coherentes con la temática de la aplicación.
Producto Final: Una biblioteca de estilos en Figma con la paleta de colores y tipografías seleccionadas.
Criterios de evaluación:
- Contraste y accesibilidad de la paleta de colores.
- Legibilidad y consistencia de las tipografías seleccionadas.

3. Wireframes de baja fidelidad

Descripción: Deberéis crear wireframes de baja fidelidad para las principales páginas de la aplicación: Página de inicio, Acceso de usuario y Registro, Perfil de Usuario, Página de Búsqueda con listado de elementos y la página del elemento a visualizar, Página de Contacto, Error 404, etc. Estos wireframes no deben centrarse en los detalles gráficos, sino en la disposición y funcionalidad básica de la interfaz.
Producto Final: Wireframes en Figma que muestren claramente la estructura de la aplicación, con énfasis en la usabilidad.
Criterios de evaluación:
- Estructura clara y lógica de los elementos en cada página.
- Coherencia entre las diferentes pantallas y facilidad de navegación.

4. Definición de la Guía de Estilo

Descripción: Creación de una guía de estilo que contenga todos los componentes reutilizables de la interfaz, como botones, campos de formularios, tarjetas de contenido, menús de navegación, etc. Esta guía de estilo servirá como referencia para la implementación para el proyecto 4 de este módulo, que se realizará conjuntamente con Desarrollo Web en Entorno Cliente.
Producto Final: Una guía de estilo en Figma que incluya ejemplos de todos los componentes UI, junto con sus estados (normal, hover, activo, deshabilitado, etc.). Se debe argumentar la elección de los elementos elegidos.
Criterios de evaluación:
- Complejidad y variedad de los componentes.
- Coherencia en la aplicación de los estilos definidos (colores, tipografías, espaciados).

5. Prototipado de alta fidelidad

Descripción: Con base en los wireframes de baja fidelidad, desarrollaréis un prototipo de alta fidelidad en Figma (Tanto desktop como móvil, con versión dark mode), que represente de manera precisa el diseño final de la aplicación. El prototipo debe ser interactivo y permitir navegar entre las diferentes pantallas simulando la experiencia del usuario.
Producto Final: Un prototipo navegable en Figma, con animaciones que mejoren la experiencia del usuario y den retroalimentación visual, como transiciones entre páginas, hover en botones, y campos de formularios interactivos, es decir, componentes interactivos que ayuden a proporcionar el mayor realismo de la aplicación, tanto con la animación de los mismos, como con el uso de sus variaciones.
Criterios de evaluación:
- Precisión del diseño en relación a los wireframes y guía de estilo.
- Fluidez e interactividad del prototipo.
- Usabilidad del prototipo, considerando la experiencia del usuario final (flujo de navegación intuitivo).

Fase Final del Proyecto: Presentación en Clase

Objetivo: Evaluar las habilidades de comunicación y la capacidad para justificar y defender decisiones de diseño frente a un público. Se evaluarán también soft skills como la claridad al presentar, la capacidad de síntesis, y la habilidad para responder a preguntas.

En esta fase, debéis presentar el prototipo de vuestra aplicación en clase. La presentación debe incluir: - Explicación del proceso de selección de colores y tipografías. - Justificación de las decisiones de diseño basadas en los principios de comunicación visual. - Mostrar las plantillas de diseño creadas en Figma y cómo se integran en la estructura final. - Reflexión sobre el uso de guías de estilo y tecnologías empleadas. - Demostrar cómo el prototipo facilita la futura implementación en el módulo de Desarrollo Web en Entorno Cliente.

Requisitos del Proyecto

1. Guía de Estilo

Debe incluir:
- Paleta de colores con códigos HEX.
- Tipografías seleccionadas y jerarquía tipográfica (h1, h2, párrafos, etc.).
- Componentes y sus variaciones (botones, campos de formularios, tarjetas).
- Estados interactivos (hover, clic, deshabilitado).
- Iconografía.

2. Wireframes y Prototipo

Las páginas mínimas que deben ser diseñadas y prototipadas:
1. Página de Inicio: Página principal de acceso a la aplicación web.
2. Acceso y Registro: Estructura simple de formularios con validación visual.
3. Perfil de usuario: Sección con imagen del usuario, información editable, y favoritos. (intentad añadir muchos campos para su validación)
4. Búsqueda: Página donde se mostrarán los resultados obtenidos de la API, con un sistema de filtros.
5. Elemento: Una página de referencia del elemento buscado, con la información más detallada.
6. Contacto: Formulario con validación y mensajes visuales de éxito/error.
7. Página de error 404: Visualmente atractiva para posteriormente utilizar animaciones CSS.

3. Accesibilidad

Los elementos de la interfaz deben cumplir con los estándares de accesibilidad web, especialmente en cuanto a contraste de colores, uso de tipografías legibles, y el orden lógico de navegación.

Herramientas a Utilizar

Figma: Para la creación del prototipo y los wireframes.
WCAG Color Contrast Checker: Para verificar la accesibilidad de la paleta de colores.
Fuentes accesibles y libres: Asegurarse de que las tipografías utilizadas estén disponibles bajo licencias abiertas, como Google Fonts.

Criterios/Logro	Excelente (10 pt)	Bien (7,5 pt)	Suficiente (5 pt)	Insuficiente (2,5 pt)	Muy Deficiente (0 pt)
1a. Se ha reconocido la importancia de la comunicación visual y sus principios básicos.	Explica claramente los principios visuales aplicados, justificando cada decisión con ejemplos de accesibilidad, usabilidad y diseño universal. Muestra autonomía para investigar, aplicar y mejorar el diseño. Integra componentes con variaciones en Figma. La organización es impecable y sigue las mejores prácticas. Hay coherencia y consistencia en todo el diseño. Comunica sus ideas con claridad y confianza, respondiendo a preguntas de forma efectiva.	Expone los principios visuales de manera clara, pero con justificaciones generales. Utiliza componentes con variaciones en Figma, pero su organización requiere ajustes. La organización y las prácticas son buenas, aunque con áreas de mejora. La coherencia es adecuada, pero con leves inconsistencias en algunos aspectos. Presenta el proyecto de manera adecuada, aunque con áreas de mejora en la justificación.	Expone los principios básicos, pero con justificaciones limitadas. Integra algunos componentes en Figma sin variaciones. La organización es funcional, pero puede ser más eficiente. La coherencia es limitada, con varios elementos inconsistentes. Requiere orientación externa en varias ocasiones.	Muestra poca comprensión de los principios visuales. No utiliza componentes con variaciones en Figma. La organización es deficiente, lo que dificulta el uso y comprensión del diseño. La coherencia está prácticamente ausente, con decisiones de diseño inconsistentes. Depende excesivamente de la asistencia para avanzar.	No demuestra comprensión de los principios visuales. No usa Figma para crear componentes. La organización es caótica o inexistente, sin seguir buenas prácticas. El diseño carece completamente de coherencia y consistencia. No muestra autonomía, depende completamente de otros. No presenta ni puede defender el trabajo.
1b. Se han analizado y seleccionado los colores y tipografías adecuados para su visualización en pantalla.	Colores y tipografías seleccionados de acuerdo con estándares de accesibilidad y estética. Las variaciones de componentes en Figma reflejan un uso claro de la teoría del color y de la tipografía. La organización de capas y elementos es excelente, con coherencia total en todo el sistema visual. Presenta con claridad las razones para cada elección, respondiendo de manera eficaz a las preguntas. Utiliza herramientas y técnicas apropiadas para una correcta implementación.	Selección adecuada, con buenos contrastes y legibilidad. Las variaciones de componentes son funcionales, pero con espacio para mejorar. La organización es buena, pero no siempre sigue las mejores prácticas. La coherencia es buena, pero hay pequeños fallos. Comunica bien las elecciones de diseño, pero con áreas de mejora. Utiliza herramientas adecuadas, aunque podría optimizar algunos procesos.	Selección funcional, pero con limitaciones en contraste o legibilidad. Los componentes en Figma no muestran muchas variaciones. La organización es básica, con algunos elementos desorganizados. Hay problemas de coherencia entre tipografías o colores. Defiende las decisiones de manera básica, pero sin profundidad. Implementa herramientas con dificultades técnicas.	Selección inapropiada de colores y tipografías. No hay variaciones de componentes. La organización es pobre, con capas desordenadas que dificultan el uso del archivo. La falta de coherencia afecta gravemente la experiencia visual. Dificultades serias en la presentación de justificaciones. Uso pobre de herramientas y técnicas.	No se analiza ni selecciona colores o tipografías de manera adecuada. No hay creación de componentes en Figma. La organización es inexistente y el diseño carece completamente de coherencia. No muestra autonomía ni capacidades para defender o justificar el diseño. No usa herramientas adecuadas o no completa la tarea.
1c. Se han analizado alternativas para la presentación de la información en documentos web.	Muestra un análisis detallado de alternativas, con variaciones de componentes en Figma y justificaciones bien documentadas. El autolayout se usa para asegurar que todas las alternativas sean responsive. La organización y uso de buenas prácticas son impecables, mostrando coherencia en todas las alternativas. Aplica las mejores prácticas en accesibilidad y usabilidad, integrando componentes multimedia.	Explora varias alternativas con justificaciones razonables. Utiliza componentes con algunas variaciones, pero no de manera exhaustiva. El autolayout se aplica correctamente, aunque podría mejorarse. La organización es buena, pero algunas áreas podrían ser más claras. La coherencia es adecuada, aunque con margen para mejorar. Integra componentes multimedia, pero con mejoras posibles en accesibilidad.	Muestra alguna alternativa, pero con análisis limitado. Las variaciones en los componentes son mínimas, y el autolayout no se emplea adecuadamente. La organización es funcional pero no óptima. La coherencia en las alternativas es inconsistente, lo que afecta el diseño general. Implementa componentes multimedia de manera limitada o sin seguir estándares de accesibilidad.	Pocas alternativas exploradas. No hay uso de variaciones de componentes y el autolayout no se aplica. La organización es deficiente, y la falta de coherencia entre las alternativas afecta gravemente el diseño. No aplica o no integra componentes multimedia.	No explora alternativas. No utiliza Figma de forma adecuada ni aplica autolayout. La organización es inexistente y no hay coherencia en la presentación de información. No aplica componentes multimedia.
1d. Se ha valorado la importancia de definir y aplicar la guía de estilo en el desarrollo de una aplicación web.	Aplica la guía de estilo de manera coherente, creando componentes reutilizables en Figma con múltiples variaciones. El autolayout se emplea para asegurar que los diseños sean responsive. La organización es clara y sigue las mejores prácticas. El diseño es coherente y consistente en todos los aspectos. Comunica de manera efectiva cómo la guía refuerza el diseño y la cohesión del proyecto. Aplica estándares de calidad y accesibilidad de manera rigurosa.	Aplica la guía de estilo con consistencia, pero algunas variaciones de componentes no se implementan adecuadamente. El autolayout funciona bien, pero tiene áreas de mejora. La organización sigue buenas prácticas, pero hay áreas que podrían ser más eficientes. La coherencia es adecuada, pero con pequeños fallos. Presentación clara, pero podría mejorar la profundidad de la justificación. Aplica estándares adecuados, pero con espacio para mejoras.	Aplica la guía de estilo, pero con errores o inconsistencias. Las variaciones de componentes son limitadas o inexistentes, y el autolayout se usa de manera básica o incorrecta. La organización no sigue las mejores prácticas, y hay incoherencias en la aplicación del estilo. Presenta de manera básica con dificultades para justificar su trabajo. Aplica estándares de manera incompleta o sin coherencia.	No aplica correctamente la guía de estilo. No crea componentes reutilizables, y el autolayout no se emplea. La organización es caótica, y el diseño carece de coherencia en la aplicación del estilo. Muestra poca autonomía en la aplicación de la guía, dependiendo del docente. Presentación pobre, sin capacidad para defender decisiones. No aplica estándares de calidad o accesibilidad.	No sigue una guía de estilo. No usa Figma para crear componentes ni aplica el autolayout. La organización es inexistente, y el diseño no muestra coherencia ni consistencia. No muestra autonomía en el desarrollo del proyecto. No presenta ni puede justificar decisiones. No sigue estándares ni guías.
1e. Se han utilizado y valorado distintas tecnologías para el diseño de documentos web.	Analiza y aplica tecnologías como Figma con gran destreza. Crea y gestiona componentes con variaciones y usa autolayout para hacer los diseños responsive. La organización del trabajo es clara y bien estructurada. El diseño mantiene coherencia y consistencia en todos los elementos. Presenta de manera clara y organizada el proyecto. Aplica estándares de accesibilidad y calidad en el proyecto.	Selecciona y usa Figma de manera adecuada, pero algunas variaciones de componentes no se aplican correctamente. El autolayout se usa, pero necesita optimización. La organización es buena, pero puede ser más eficiente. La coherencia es adecuada, aunque con fallos menores en algunas áreas. Presentación correcta, aunque podría mejorar la justificación del uso de tecnologías. Cumple con los estándares de accesibilidad, pero con margen de mejora.	Utiliza Figma de manera básica, sin aprovechar las variaciones de componentes. El autolayout se usa de manera limitada. La organización es funcional pero podría ser más clara. Hay inconsistencias en la coherencia del diseño web. Defiende el uso de tecnologías, pero con poca profundidad en la justificación. Aplica estándares de forma limitada o incompleta.	Uso limitado de Figma, sin variaciones de componentes y sin aplicar el autolayout. La organización es pobre, y la falta de coherencia afecta negativamente el diseño. Muestra poca autonomía en la selección de tecnologías, dependiendo de la guía docente. Presentación con dificultades para defender decisiones tecnológicas. No sigue estándares de accesibilidad o calidad.	No utiliza ni valora tecnologías adecuadas como Figma. No muestra autonomía ni capacidad de justificación. No presenta ni puede justificar el uso de tecnologías. No sigue estándares de accesibilidad ni de calidad.
1f. Se han creado y utilizado plantillas de diseño.	Crea y gestiona plantillas con variaciones y alta reutilización en Figma. Usa autolayout para asegurar que las plantillas sean responsive. La organización es excelente, siguiendo buenas prácticas de diseño. Las plantillas son coherentes con el resto del diseño, y presenta el proyecto de manera clara. El diseño es accesible y cumple con altos estándares de calidad.	Crea plantillas reutilizables, pero con pocas variaciones. Usa autolayout pero necesita optimización. La organización es buena, pero algunas áreas son mejorables. Las plantillas son coherentes, pero algunos elementos podrían ser más consistentes. Presenta correctamente, pero la justificación de sus elecciones podría mejorar. Aplica estándares de accesibilidad, pero con áreas mejorables.	Las plantillas no muestran muchas variaciones y el autolayout se utiliza de manera limitada. La organización no es clara y hay inconsistencias en las plantillas. Presentación funcional pero sin profundidad en la justificación. Aplica estándares de accesibilidad, pero no de manera consistente.	No crea plantillas reutilizables ni emplea autolayout. La organización es deficiente y las plantillas son incoherentes con el resto del diseño. Presentación y justificación pobre. Aplicación limitada o inexistente de estándares de accesibilidad.	No crea plantillas. No usa autolayout ni sigue buenas prácticas de organización. Las plantillas no son coherentes ni consistentes. No presenta ni defiende el trabajo. No sigue estándares de calidad o accesibilidad.