Diseñador de UI – Diseñador de interfaces digitales con Figma (en línea) - gratis

Objetivo de aprendizaje: RA2: Intervenir en el diseño del producto digital asegurando el uso de criterios de Diseño Universal y la optimización de la Experiencia del Usuario.

Unidad 1 – DISEÑO DE SOLUCIONES

DEFINICIÓN DE ARQUITECTURAS DE INFORMACIÓN

El papel del diseñador de interfaz de usuario en el proceso de diseño digital

• Estructura de una interfaz digital y principios de usabilidad

• Leer el informe e identificar los requisitos de la interfaz.

• Destinatarios y contexto de uso

• Reconocimiento de productos de referencia

• Organizar, agrupar y etiquetar el contenido

• Jerarquía de contenido

• Diseño del flujo de navegación • Lógica priorizando los dispositivos móviles

• Entorno de trabajo y configuración de archivos: Descripción general de Figma: área de diseño, marcos, herramientas principales, paneles, recursos

• Organización y nomenclatura de archivos, páginas y estructura del proyecto

• Figma Jam para recopilar y organizar ideas

• Primeros flujos operativos y trabajo colaborativo

REALIZACIÓN DE LA ESTRUCTURA ALÁMBRICA

• Bocetos de baja fidelidad de las pantallas clave

• Representación de los mecanismos de interfaz y las funcionalidades previstas.

• Verificar la coherencia entre los flujos de navegación y los wireframes.

• Revisión del wireframe y transición a alta fidelidad

- PROTOTIPADO

• Principios del diseño visual: paleta de colores y jerarquía del significado del color Tipografía y escala tipográfica Jerarquía visual, contraste, coherencia gráfica Ritmo y proporciones • Investigación de referencias y moodboards

• Gestión de gráficos y recursos: Herramientas vectoriales: formas, pluma, trazados. Máscaras y gestión de imágenes. Cuadrículas, columnas y sistemas de espaciado. Exportación y preparación de recursos para su desarrollo.

• Sistema de diseño tipográfico: variables y colecciones, tipos de valores y criterios de nomenclatura. La colección tipográfica se divide en familias con y sin serifa. Se vinculan las familias a los estilos de texto. Se propagan los cambios de la variable a los estilos y a todo el proyecto.

• Diseños flexibles y adaptables: restricciones y comportamiento de los elementos al redimensionar Diseño automático: espaciado, dirección, relleno Elementos anidados y adaptación del contenido Diseño para puntos de interrupción y prueba del comportamiento adaptable

• Sistema de diseño de color: tokens primitivos y construcción de la escala cromática. Tokens semánticos obtenidos mediante la agrupación de los primitivos. Aplicación únicamente a los niveles de tokens semánticos. Mantenimiento y evolución del sistema cromático.

• Componentes, propiedades y construcción del sistema: componentes primarios e instancias Variantes y estados de componentes: predeterminado, al pasar el ratón por encima, pulsado, enfocado, deshabilitado Propiedades de variante para versiones primarias y secundarias Propiedades de texto, propiedades de intercambio de instancias para iconos, propiedad booleana para variación de forma Asignación de propiedades mediante el cambio de nombre de capas Creación de un conjunto completo de botones de componentes

• Creación de prototipos: conexiones entre pantallas y puntos de acceso. Interacciones, estados y superposiciones. • Construcción de flujos navegables. • Componentes interactivos y transiciones entre estados. Animaciones inteligentes y microinteracciones. Simulación de comportamientos realistas. Completitud de los flujos y estados esperados. Compartición del prototipo.

• Documentación del sistema y recursos del proyecto: documentación del sistema de diseño: estructura, criterios de uso de tokens y componentes, reglas de aplicación, ejemplos de uso correcto e incorrecto. Creación de bibliotecas y kits de interfaz de usuario. Publicación y actualización de bibliotecas: funcionamiento y ámbito de uso en planes profesionales (demo). Plantillas, complementos, widgets y materiales de la comunidad. Verificación de licencias y términos de uso.

PRUEBAS DE USABILIDAD

• Configuración de una prueba de usabilidad en wireframes y prototipos: definición de tareas, observación, registro de problemas críticos.

• Resumen y jerarquía de los problemas detectados

• Compruebe la funcionalidad de las pantallas y los flujos.

• Revisión del proyecto basada en la evidencia recopilada

Unidad 2 OPTIMIZACIÓN DE LA EXPERIENCIA DEL USUARIO

INTEGRACIÓN DEL DISEÑO DE PRODUCTO EN RELACIÓN CON LA ERGONOMÍA Y LA ACCESIBILIDAD

• Criterios ergonómicos aplicados a la interfaz: dimensiones mínimas de las áreas interactivas

• Distancias entre elementos activos y prevención de errores de selección

• Zonas accesibles para su uso con una sola mano

• Criterios de accesibilidad: Relaciones de contraste y nivel de cumplimiento AA verificados en los tokens de color.

• Legibilidad, longitud mínima de texto y de línea

• Información no basada únicamente en el color.

• Estados de enfoque, retroalimentación y reconocimiento de elementos activos

• Navegación mediante teclado y tecnologías de asistencia

•Comprobar y corregir: comprobación instrumental con complemento de control de contraste

• Control de áreas y estados interactivos

• Revisión de tokens y estilos tras las comprobaciones

INTEGRACIÓN DEL DISEÑO DE PRODUCTO EN RELACIÓN CON LOS PRINCIPIOS DE DISEÑO UNIVERSALES

• Origen y propósito del Diseño Universal

• Diseñar para el mayor número de personas sin soluciones específicas.

• Barreras perceptivas, motoras y cognitivas en el uso de un producto digital

• Limitación de los contextos de uso: brillo, ruido, conectividad reducida

• Interfaces estandarizadas: patrones de interfaz reconocibles y convenciones de uso.

• Consistencia del comportamiento entre elementos con la misma función

• Previsibilidad y tolerancia a errores, reversibilidad de las acciones

• Adaptabilidad del producto: adaptación a diferentes dispositivos y formatos de pantalla.

• Respetar las preferencias del sistema del usuario

• Sencillez y reducción de la carga cognitiva

• Documentación de las opciones de diseño universal adoptadas en el proyecto.

Evaluación del aprendizaje: El módulo concluye con pruebas de evaluación para supervisar las habilidades y los conocimientos adquiridos.

Objetivo de aprendizaje: RA3: Gestionar la comunicación relativa a la funcionalidad y el uso del producto digital, desde el diseño de maquetas y prototipos interactivos, asegurando su idoneidad (corrección, exhaustividad, eficacia, disponibilidad, etc.).

Unidad 1 - Comunicación

DISEÑO DE MAQUETA

• El prototipo como herramienta de presentación de producto

• Selección de pantallas significativas con respecto a las características que se van a ilustrar.

• Creación de vistas de presentación y previsualizaciones de contexto.

• Secuencia de pantallas e instrucciones de uso

• Presentación del proyecto al cliente a partir de los objetivos y las limitaciones.

• Realizar la revisión y gestionar la retroalimentación.

• Comparación con desarrolladores y verificación de viabilidad.

•Paso de archivos: tamaños, espaciado, estados, comportamientos de respuesta, recursos

• Documentación de las decisiones de diseño

• Verificación de la exactitud, integridad y disponibilidad del material.

CREACIÓN DE CONTENIDO PARA COMUNICACIONES DIGITALES

• Contenido textual y gráfico para ilustrar el uso, las características, la funcionalidad y los beneficios del producto.

• Organización de contenidos según el canal y la herramienta de distribución • Adaptación de contenidos a los formatos requeridos por los diferentes canales

• Creación de sitio de portafolio: reconstrucción en Framer de un proyecto de portafolio profesional asignado: estructura de contenido, jerarquía visual, componentes, comportamiento adaptable.

• Transferencia de la lógica aprendida en Figma al entorno de publicación: analogías operativas y diferencias

• Diferencias entre el prototipo de diseño y el sitio publicado: comportamiento real, rendimiento, mantenimiento, accesibilidad en línea.

• Publicación del sitio y entrega del sistema a los estudiantes para su posterior incorporación con sus propios trabajos.

DISEÑO DE ESTRATEGIAS DE COMUNICACIÓN

• Identificación de herramientas y canales adecuados para la presentación del producto: sitio web, redes sociales, boletín informativo, presentaciones.

• Criterios de selección basados ​​en los destinatarios y los objetivos de comunicación.

• Coherencia del sistema visual entre diferentes canales

• Aplicación del sistema de diseño a formatos de comunicación

• Planificar la secuencia de presentación del producto a usuarios externos.

• Justificación de las elecciones de estrategia y contenido

Evaluación del aprendizaje: El módulo concluye con pruebas de evaluación para supervisar las habilidades y los conocimientos adquiridos.

Módulo estructurado de conformidad con el Decreto Legislativo 81/08 y los Acuerdos Estado-Regiones.

Evaluación del aprendizaje: El módulo concluye con pruebas de evaluación para controlar los conocimientos adquiridos.

Aborda el principio de igualdad de trato económico y normativo con respecto a los empleados de la empresa usuaria, las normas del contrato con la Agencia de Empleo (ApL) y las obligaciones de diligencia, obediencia y seguridad en el trabajo.