Generación de UI kit
Pasos anteriores
Para generar el UI kit (kit de interfaz de usuario), el diseñador UX debe haber creado previamente el repositorio de documentación del proyecto y haber obtenido el manual de marca que representa la identidad de marca del cliente.
¿Quién participa en la instancia de generación del UI kit?
El diseñador UX se encarga de preparar y definir el documento del UI kit.
¿Dónde trabajas?
Para trabajar en este paso, debes utilizar el documento Sistema de Diseño(UI Kit aparece en la primera sección), y el documento de Layoutsdisponible en el repositorio en Figma. Sigue los enlaces para acceder a ellos y lee Ejecución de tareas más abajo para saber qué tareas debes realizar.
Paso 2 - Documento del UI kit
El UI kit es una primera aproximación al aspecto de la interfaz de la aplicación, en la que se presentan y validan las directrices visuales con el cliente. Incluye una colección de elementos prediseñados para agilizar el proceso de diseño, garantizando coherencia y eficacia.
El UI kit consta de:
Detalles del manual de marca: la identidad de marca (logotipos), fuentes, paletas de colores, iconos, animaciones, imágenes e ilustraciones.
Recursos: Recursos como imágenes, archivos de vídeo, archivos de audio o iconos, que forman parte del diseño y la estética de la aplicación. Por ejemplo, las imágenes relacionadas con el logotipo del cliente, banners o iconos que forman parte de la marca del cliente.
Componentes básicos: entradas de texto, etiquetas de texto o botones. Estos componentes no muestran funcionalidades o comportamientos, sino sólo el aspecto que tendrán en su forma básica. A continuación, basándose en esta información y una vez que el cliente aprueba el kit de interfaz de usuario, el diseñador define los componentes atómicos en el sistema de diseño y configura el tema de la aplicación con los estilos para cada uno de ellos (que pueden aplicarse cuando los componentes se configuran en las pantallas de la aplicación).
Nota
Para todo lo anterior, se requiere un control de accesibilidad.
Pantallas de referencia: pantallas básicas que no muestran funcionalidades pero están preparadas para demostrar los aspectos básicos del diseño de las pantallas y su interacción.
Layouts: Estructuras que definen la disposición de los elementos visuales en una pantalla o parte de ella. Esta definición se basa en los requisitos del proyecto y la finalidad de la aplicación que se va a crear.
Los diferentes layouts disponibles se definen en el documento Layouts que forma parte del repositorio de documentación del proyecto. Este documento especifica la finalidad y el uso de cada layout.
Importante
Este documento incluye ahora diseños para aplicaciones móviles y web.
En este paso, el Diseñador UX debe ejecutar las siguientes tareas:
Ir al archivo Design System en el repositorio duplicado de documentación del proyecto y luego ir a la subsección UI Kit (en UX/UI Definitions) para completarlo siguiendo la plantilla.
Importante
El diseñador UX debe ceñirse a los contenidos de la plantilla y completar todas las secciones como se indica. No debe añadir información adicional ni eliminar contenido de la plantilla duplicada.
Transferir la información del manual de marca, como se especifica en la descripción anterior, e importar los logotipos de los clientes.
Importante
El diseñador UX debe asegurarse de que el cliente haya proporcionado los recursos. Si no, definirá un conjunto de recursos para la aplicación basados en los requisitos y necesidades del proyecto. Los logotipos siempre los proporciona el cliente.
Definir los componentes básicos que se utilizarán en las pantallas de la aplicación.
Ejecutar la comprobación de accesibilidad del color para comprobar si la paleta de colores y los tipos de letra definidos en el manual de marca superan la prueba de accesibilidad. Lee Sobre la accesibilidad visual para obtener más información de esta tarea.
En la sección Layouts, definir los layouts que se utilizarán en la aplicación. Esto incluye:
Seleccionar los layouts a partir de las plantillas disponibles en el documento, en función de los requisitos del proyecto.
Copiar y pegar cada diseño seleccionado en una subsección diferente. En el caso de una aplicación web, seleccionar al menos tres diseños. A continuación, debes realizar acciones diferentes en función de si la aplicación es móvil o web:
Para una aplicación web:
Revisar y definir el tamaño de cada área de layout - si el tamaño por defecto no cumple con los requisitos del proyecto, cambia los tamaños de acuerdo con las recomendaciones en el Sistema de Diseño, y no excedas las especificaciones de tamaño explicadas para cada área en el documento Layouts . Consulta la página Acerca de los recursos en la documentación de Veritran para obtener más información.
Importante
Los cambios en el tamaño de las áreas deben especificarse y ser lo suficientemente claros para que el ejecutor los comprenda fácilmente.
Definir el porcentaje de distribución para cada área considerando cada punto de quiebre a utilizar. No sobrepasar las especificaciones de tamaño explicadas para cada zona en la documentación de Layouts.
Nota
Cada layout prediseñado en la sección Layouts templates de Studio tiene los puntos de ruptura ya configurados en el campo CSS File.
Incluir la configuración de los Flex containers y sus atributos. A continuación, el implementador utilizará la información sobre los layouts para realizar los cambios en Studio (durante la tercera fase del proceso). Lee Sobre los layouts para obtener más información.
Para una aplicación móvil:
Revisar y definir cada estructura de diseño e incluir la configuración de los flex containers y sus atributos. Además, especificar el comportamiento de la estructura de la pantalla. A continuación, el implementador utilizará la información sobre los layouts para realizar los cambios en Studio (durante la tercera fase del proceso). Lee Sobre los layouts para obtener más información.
Nota
El diseñador UX y el implementador suelen mantener conversaciones para acordar las definiciones de las estructuras de las pantallas.
Crear las pantallas de referencia que se enviarán para la aprobación del cliente.
En el caso de una aplicación móvil, ir a la subsección Store app icons y seguir las instrucciones especificadas para definir los iconos que se utilizarán en las tiendas de aplicaciones cuando se publique la aplicación.
Nota
La primera versión de los iconos de las tiendas de aplicaciones puede cambiar a lo largo del proceso de creación de la aplicación.
Una vez que esta versión del documento del UI kit esté lista, el diseñador UX debe enviarla al cliente para su aprobación. Aunque puede haber cambios a lo largo del proceso de creación de la aplicación, es necesaria la aprobación para que el equipo se asegure de que trabajará en un diseño que se ajuste a las necesidades del cliente.
Importante
El equipo no debe empezar a trabajar en el sistema de diseño hasta que el cliente apruebe el UI kit.
Sobre los layouts
Los layouts se incluyen en dos etapas del proceso de diseño: en primer lugar, los define y establece el diseñador UX. Luego, el implementador los modifica en Studio según las especificaciones del diseñador.
Un layout es la estructura visual de un diseño digital: es la forma en que se disponen los elementos visuales en una pantalla o parte de ella. Define cómo se distribuyen los elementos gráficos (como imágenes, textos o botones) en un espacio digital, creando así una jerarquía visual y facilitando la navegación del usuario.
Layouts de Veritran
El documento Layouts incluido en el repositorio de documentación describe los seis diseños principales que pueden utilizarse para las aplicaciones web. Cada layout tiene variantes específicas que contienen diferentes áreas junto con su configuración. Cada estructura describe los tamaños de cada área, junto con los tamaños aplicables en sus versiones de diseño adaptable (tanto tamaños verticales como horizontales). Además, incluye casos de uso para que visualices cómo se aplican estas estructuras en las apps.
Nota
En total, hay 22 layouts que pueden utilizarse para aplicaciones web.
Layouts para aplicaciones web
Para incluir las versiones responsivas, los layouts se construyen bajo cuatro puntos de ruptura o breakpoints diferentes, como se indica a continuación:
Extra extragrande: más de 1401px;
Extralarge (de 1201px a 1400px): aplicable a pantallas extragrandes o pantallas de TV
Grande (de 992px a 1200px): aplicable a pantallas grandes o dispositivos de escritorio
Mediana (de 769px a 991px): aplicable a pantallas pequeñas como iPads y tablets.
Pequeño (de 481px a 768px): aplicable a dispositivos móviles
Importante
Los puntos de quiebre no pueden modificarse.
Layouts de Veritran para aplicaciones móviles
Las aplicaciones móviles sólo pueden tener un diseño, denominado General Mobile. Sin embargo, este diseño puede tener múltiples estructuras dependiendo de las áreas que necesite incluir en cada pantalla. Estas estructuras se definen en el editor de pantallas mediante el uso del componente flex container, el componente repetidor y sus atributos. Esto significa que todas las pantallas de tu aplicación móvil tendrán el mismo diseño y, para cada una de ellas, tendrás que configurar diferentes flex containers (y/o componentes repetidores) en función de la estructura que quieras establecer.
El documento Layouts incluido en el repositorio de documentación describe diecisiete posibles estructuras con el layout General Mobile aplicables a diferentes casos de uso. Estas estructuras se dividen en cuatro categorías principales que varían según el comportamiento de la pantalla:
Desplazamiento completo: utilízalo si necesitas la función de desplazamiento disponible para toda la información de la pantalla.
Desplazamiento de contenido: utilízalo si necesitas la función de desplazamiento disponible sólo para el área de contenido.
Contenido con repetidor: utilízalo si necesitas la función de desplazamiento disponible y un componente repetidor.
Contenido flotante: utilízalo si necesitas incluir contenido flotante en la pantalla.
Sugerencia
La sección layouts móviles incluye un código QR que puedes descargarte para ver las estructuras aplicadas a distintos casos de uso.
Cada estructura especifica las áreas que incluye, los componentes que debes añadir a la pantalla para establecer dichas áreas y cómo configurarlas en el panel derecho.
Nota
Puedes elegir entre cuatro o cinco estructuras de pantalla para su aplicación móvil.
Sobre los layouts
Los layouts se incluyen en dos etapas del proceso de diseño: en primer lugar, los define y establece el diseñador UX. Luego, el implementador los modifica en Studio según las especificaciones del diseñador.
Un layout es la estructura visual de un diseño digital: es la forma en que se disponen los elementos visuales en una pantalla o parte de ella. Define cómo se distribuyen los elementos gráficos (como imágenes, textos o botones) en un espacio digital, creando así una jerarquía visual y facilitando la navegación del usuario.
Layouts de Veritran
El documento Layouts incluido en el repositorio de documentación describe los seis diseños principales que pueden utilizarse para las aplicaciones web. Cada layout tiene variantes específicas que contienen diferentes áreas junto con su configuración. Cada estructura describe los tamaños de cada área, junto con los tamaños aplicables en sus versiones de diseño adaptable (tanto tamaños verticales como horizontales). Además, incluye casos de uso para que visualices cómo se aplican estas estructuras en las apps.
Nota
En total, hay 22 layouts que pueden utilizarse para aplicaciones web.
Layouts para aplicaciones web
Para incluir las versiones responsivas, los layouts se construyen bajo cuatro puntos de ruptura o breakpoints diferentes, como se indica a continuación:
Extra extragrande: más de 1401px;
Extralarge (de 1201px a 1400px): aplicable a pantallas extragrandes o pantallas de TV
Grande (de 992px a 1200px): aplicable a pantallas grandes o dispositivos de escritorio
Mediana (de 769px a 991px): aplicable a pantallas pequeñas como iPads y tablets.
Pequeño (de 481px a 768px): aplicable a dispositivos móviles
Importante
Los puntos de quiebre no pueden modificarse.
Layouts de Veritran para aplicaciones móviles
Las aplicaciones móviles sólo pueden tener un diseño, denominado General Mobile. Sin embargo, este diseño puede tener múltiples estructuras dependiendo de las áreas que necesite incluir en cada pantalla. Estas estructuras se definen en el editor de pantallas mediante el uso del componente flex container, el componente repetidor y sus atributos. Esto significa que todas las pantallas de tu aplicación móvil tendrán el mismo diseño y, para cada una de ellas, tendrás que configurar diferentes flex containers (y/o componentes repetidores) en función de la estructura que quieras establecer.
El documento Layouts incluido en el repositorio de documentación describe diecisiete posibles estructuras con el layout General Mobile aplicables a diferentes casos de uso. Estas estructuras se dividen en cuatro categorías principales que varían según el comportamiento de la pantalla:
Desplazamiento completo: utilízalo si necesitas la función de desplazamiento disponible para toda la información de la pantalla.
Desplazamiento de contenido: utilízalo si necesitas la función de desplazamiento disponible sólo para el área de contenido.
Contenido con repetidor: utilízalo si necesitas la función de desplazamiento disponible y un componente repetidor.
Contenido flotante: utilízalo si necesitas incluir contenido flotante en la pantalla.
Sugerencia
La sección layouts móviles incluye un código QR que puedes descargarte para ver las estructuras aplicadas a distintos casos de uso.
Cada estructura especifica las áreas que incluye, los componentes que debes añadir a la pantalla para establecer dichas áreas y cómo configurarlas en el panel derecho.
Nota
Puedes elegir entre cuatro o cinco estructuras de pantalla para su aplicación móvil.
Sobre la accesibilidad visual
Para determinar que la aplicación es visualmente accesible, el miembro del equipo encargado del diseño debe evaluar los elementos en Figma y confirmar que la aplicación cumple las directrices AA y AAA de contraste de colores.
Importante
Las pautas de contraste de accesibilidad, como las definidas por la WCAG (Web Content Accessibility Guidelines), establecen que el texto y el fondo deben tener una relación de contraste mínima para garantizar la legibilidad para todas las personas, incluyendo aquellas con discapacidad visual o con dificultades para percibir el color. Esta relación de contraste se mide en una proporción, y las pautas recomiendan una mínima de 4.5:1 para el texto normal y 3:1 para el texto grande o en negrita
Para esto, el equipo cuenta con tres herramientas:
una nueva funcionalidad de Figma,
la versión gratuita del plug-in Stark, y
el plug-in A11y.
La herramienta A11y garantiza que el texto sea legible para los usuarios cumpliendo las normas WCAG (Pautas de Accesibilidad para el Contenido Web). Aparece visible en los archivos Figma en todo momento como un panel flotante (ver la imagen siguiente)