Unidad II: Configuración de visualización de App
1. Introducción
La asignatura Taller Diseño Plataformas Digitales tiene como propósito desarrollar en los estudiantes las competencias necesarias para idear, estructurar, diseñar, prototipar y testear aplicaciones digitales, considerando los requerimientos del usuario, los escenarios de uso y los principios de usabilidad. Para ello, resulta fundamental comprender cómo se construyen los sistemas gráficos de una aplicación y cómo sus interfaces deben adaptarse a diferentes dispositivos y formatos de visualización.
En esta evaluación, los estudiantes deberán desarrollar el Kit UI, el sistema gráfico y las pantallas de una aplicación, considerando las directrices de diseño de iOS y Android, tanto para teléfonos celulares como para dispositivos plegables (Fold). El objetivo es aplicar los conocimientos relacionados con la construcción de interfaces, la organización de sus componentes y la adaptación de los elementos visuales a diferentes dimensiones de pantalla, manteniendo una experiencia de usuario coherente y funcional.
Este ejercicio permitirá fortalecer la capacidad de tomar decisiones de diseño fundamentadas, desarrollar sistemas visuales consistentes y comprender la importancia de la adaptabilidad en aplicaciones destinadas a diferentes dispositivos.
2. Desarrollo de la evaluación
Descripción general del encargo
El estudiante deberá desarrollar el sistema visual y las interfaces de una aplicación digital, tomando como referencia el proyecto y los requerimientos definidos previamente en el Brief.El trabajo contempla tres componentes principales: la creación del Kit UI, la definición del sistema gráfico y el diseño de las pantallas de la aplicación para distintos dispositivos y formatos de visualización.
La propuesta deberá considerar las directrices de diseño correspondientes a iOS y Android, incorporando las adaptaciones necesarias para teléfonos celulares y dispositivos plegables en orientación horizontal, según los formatos definidos para el proyecto.
Se evaluará especialmente la coherencia visual, la correcta aplicación de los componentes, la organización de los contenidos y la capacidad de adaptar la interfaz sin perjudicar su funcionalidad ni la experiencia del usuario.
2.1. Desarrollo del Kit UI
El Kit UI corresponde al conjunto organizado de elementos visuales y componentes reutilizables que permiten mantener la consistencia gráfica de una aplicación.
El estudiante deberá desarrollar y documentar los elementos necesarios para construir las interfaces de su proyecto, considerando las características de la marca, el perfil del usuario y los requerimientos establecidos en el Brief.
El Kit UI deberá incluir, según las necesidades de la aplicación:
- Identidad visual: logotipo o identificador de marca y recursos gráficos asociados.
- Paleta cromática: colores principales, secundarios, de fondo y de estados, como éxito, advertencia y error, cuando corresponda.
- Sistema tipográfico: familias tipográficas, tamaños, pesos y jerarquías para títulos, subtítulos, textos y etiquetas.
- Iconografía: conjunto de iconos coherentes en estilo, tamaño y función.
- Botones: estados y variantes de los botones principales, secundarios y de otras acciones necesarias.
- Campos de entrada: componentes para formularios, búsqueda y captura de información.
- Componentes de navegación: barras, menús, pestañas y otros elementos requeridos por la aplicación.
- Componentes complementarios: tarjetas, listas, selectores, indicadores, alertas y otros elementos necesarios según el tipo de proyecto.
2.2. Desarrollo del sistema de diseño
El sistema gráfico establece las reglas que organizan y regulan la aplicación de los elementos visuales en las diferentes pantallas de una interfaz.En esta etapa, el estudiante deberá definir los parámetros que permitan construir interfaces consistentes, legibles y adaptables a los distintos formatos.
Se deberán considerar los siguientes aspectos:
- Jerarquía visual: relación entre títulos, contenidos, acciones principales y elementos secundarios.
- Espaciado: definición de una escala de separación para organizar los componentes de forma consistente.
- Reglas de color y tipografía: criterios para aplicar los colores y estilos tipográficos en los distintos elementos.
- Reglas de iconografía: tamaños, alineaciones, estilos y usos de los iconos.
- Componentes y estados: criterios de aplicación para botones, campos, tarjetas y otros elementos interactivos.
- Adaptabilidad: reglas para reorganizar los contenidos y componentes cuando cambien las dimensiones o la orientación de la pantalla.
2.3. Diseño de pantallas para iOS y Android
El estudiante deberá diseñar las pantallas de la aplicación para los siguientes formatos:
Formato 1: iOS – Pantalla de celular
Diseño de las pantallas de la aplicación para un teléfono del ecosistema Apple. Se deberán considerar las convenciones de navegación, los componentes nativos, la jerarquía visual y las áreas seguras de la interfaz.Formato 2: iOS – Formato Fold
Adaptación de las pantallas al formato plegable definido para el proyecto. Se deberá reorganizar el contenido para aprovechar el espacio disponible, conservar la legibilidad y evitar que los componentes queden mal distribuidos.Formato 3: Android – Pantalla de celular
Diseño de las pantallas para teléfonos Android, aplicando las convenciones de Material Design, los componentes correspondientes y una distribución adecuada de los contenidos y acciones.Formato 4: Android – Formato Fold
Adaptación de las pantallas a un dispositivo Android plegable, considerando el espacio adicional, la orientación solicitada, la reorganización de los componentes y la continuidad de las tareas del usuario.Las adaptaciones no deben consistir únicamente en aumentar o reducir el tamaño de la pantalla. Se espera que el estudiante analice la distribución de los elementos y determine qué componentes deben mantenerse, desplazarse, reorganizarse o presentarse de otra manera para responder a cada formato.
2.4. Criterio para seleccionar las pantallas
Para optimizar el trabajo y evitar la repetición innecesaria de diseños, el estudiante deberá desarrollar únicamente las pantallas únicas de cada tipo o función.Cuando una misma estructura de pantalla se repita con información diferente, se diseñará solamente un ejemplo representativo, siempre que los cambios no impliquen una estructura o interacción distinta.
Por ejemplo, si una aplicación contiene diez productos que utilizan la misma plantilla, bastará con diseñar la pantalla de uno de ellos. No será necesario desarrollar las diez variantes, salvo que alguna requiera una estructura, funcionalidad o distribución diferente.
Este criterio no significa eliminar pantallas esenciales del flujo de navegación. Se deben representar todas las tipologías necesarias para comprender la experiencia completa de la aplicación y sus adaptaciones.
2.5. Consideraciones técnicas y de diseño
Durante el desarrollo, el estudiante deberá tener en cuenta los siguientes principios:- Coherencia visual: mantener una identidad gráfica reconocible en todos los formatos.
- Consistencia de componentes: utilizar los elementos definidos en el Kit UI de manera uniforme.
- Adaptabilidad: reorganizar los componentes según las dimensiones y orientación de cada dispositivo.
- Usabilidad: facilitar la comprensión de la interfaz y la ejecución de las tareas principales.
- Jerarquía visual: destacar la información y las acciones relevantes para el usuario.
- Aplicación de directrices: respetar las convenciones de iOS y Android sin confundir sus respectivos patrones de interfaz.
- Legibilidad y accesibilidad: asegurar que los textos, iconos, contrastes y controles puedan utilizarse adecuadamente.
3. Formato de entrega
El estudiante deberá crear una carpeta en un servicio de almacenamiento en la nube de su elección o proporcionar enlaces directos a los archivos. Los permisos deberán configurarse para que el docente pueda acceder al material sin solicitar autorización adicional, identificar en el campo de texto de la tarea los integrantes del grupo y sección.La entrega deberá incluir los siguientes elementos:
1. Evidencia del Kit UILink público al documento que contiene los componentes visuales, la paleta cromática, la tipografía, la iconografía y los demás elementos reutilizables de la aplicación.2. Evidencia del sistema de diseño (sistema gráfico)Link público al documento que presenta las reglas de construcción de las interfaces.3. Pantallas solicitadasArchivo PDF o enlace público que contenga los diseños de las pantallas únicas de la aplicación, organizadas e identificadas por plataforma y formato:
- iOS – Celular.
- iOS – Fold.
- Android – Celular.
- Android – Fold.
Importante: antes de realizar la entrega, el estudiante deberá comprobar que los tres enlaces funcionen, que los documentos estén completos y que los permisos de acceso sean públicos o permitan la visualización directa por parte del docente.
4. Aprendizaje esperado
Esta evaluación aborda el aprendizaje esperado 2.1, orientado al desarrollo de interfaces de aplicaciones híbridas que respondan a las necesidades de uso en múltiples dispositivos y formatos de visualización, considerando los requerimientos del Brief, la innovación y el diseño centrado en el usuario.Mediante la creación del Kit UI, la documentación del sistema de diseño y el desarrollo de las pantallas adaptadas, el estudiante deberá demostrar que puede transformar una propuesta conceptual en un sistema de interfaz organizado, consistente y adaptable a diferentes contextos de uso.
El trabajo requiere integrar conocimientos de diseño visual, arquitectura de interfaz, construcción de componentes y adaptación de contenidos, justificando las decisiones adoptadas según las características de cada plataforma y dispositivo.
5. Conclusión
La evaluación permite consolidar los conocimientos relacionados con la configuración visual de aplicaciones digitales, promoviendo el desarrollo de sistemas gráficos coherentes y la adaptación de interfaces a diferentes dispositivos. A través de la construcción del Kit UI, la definición de reglas gráficas y el diseño de pantallas para iOS y Android, el estudiante podrá demostrar su capacidad para organizar componentes, mantener la consistencia visual y responder a las necesidades de los usuarios en distintos formatos de visualización.En relación con los criterios de evaluación, el trabajo permitirá evidenciar el cumplimiento del criterio 2.1.2, mediante la definición de una pauta de estilo gráfico vinculada con la identidad conceptual de la aplicación y su perfil de usuario; del criterio 2.1.3, a través de la aplicación sistemática de esa pauta en los componentes, las reglas gráficas y las pantallas; y del criterio 2.1.4, mediante el diseño de visualizaciones adaptadas a distintos dispositivos, considerando la usabilidad, la funcionalidad y la interacción. De esta manera, la evaluación busca comprobar que el estudiante no solo es capaz de diseñar interfaces visualmente consistentes, sino también de fundamentar y adaptar sus decisiones para construir experiencias digitales claras, funcionales y centradas en el usuario.
Indicaciones de entrega
|
No hay comentarios.:
Publicar un comentario