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 Design System (UI Kit aparece en la primera sección) y el documento Layouts disponible en el repositorio de 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
[en] This document now includes layouts for mobile and web apps.
En este paso, el Diseñador UX debe ejecutar las siguientes tareas:
Ir al archivo Design System en el repositorio de documentación del proyecto y luego ir a la sección UI Kit 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 Accesibilidad visual para obtener más información sobre esta tarea.
Definir los layouts que se utilizarán en la aplicación. Esto incluye:
Seleccionar los layouts a partir de las plantillas disponibles, en función de los requisitos del proyecto. Debes seleccionar al menos tres layouts. Un layout inicial, un layout general, y un modal.
[en] Copy and paste each layout selected in a different subsection. In the case of a web app, you must select at least three layouts. Then, you must perform different actions depending on whether the app is mobile or web:
[en] For a web app:
[en] Review and define each layout area size - if the default size does not meet the project's requirements, change sizes following recommendations on the Design System and do not exceed the size specifications explained for each area in the Layouts Documentation. Refer to Veritran's Understanding Layouts to learn more.
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.
[en] Define the distribution percentage for each area considering each breakpoint to be used. Do not exceed the size specifications explained for each area in the Layouts Documentation
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.
[en] For a mobile app:
[en] Review and define each layout structure and include the configuration of the flex containers and their attributes. In addition, specify the behavior of the screen structure. The information on layouts will be then used by the implementer to make the changes in Studio (during the third stage of the process). Read Understanding Layouts to learn more.
Nota
[en] The UX Designer and the implementer usually have discussions to agree on screens structures definitions.
Crear las pantallas de referencia que se enviarán para la aprobación del cliente.
[en] In the case of a mobile app, go to the Store app icons subsection and follow the instructions specified to define the icons that will be used in app stores when the app is published.
Nota
[en] The first version of the app stores icons may change throughout the app building process.
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
[en] The Layouts document included in the documentation repository describes the six main layouts that can be used for web apps. Each layout has specific variants that contain different areas together with their configuration. Each structure describes the sizes of each area, together with the sizes applicable in their responsive design versions (both vertical and horizontal sizes). In addition, it includes use cases for you to visualize how these structures are applied in apps.
Nota
[en] In total, there are 22 layouts that can be used for web apps.
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.
[en] Veritran layouts for mobile apps
[en] Mobile apps can only have one layout, called General Mobile. However, this layout can have multiple structures depending on the areas you need to include to each screen. These structures are defined in the screens editor through the use of the flex container component, the repeater component and their attributes. This means that all screens of your mobile app will have the same layout and, for each of them, you have to configure different flex container components (and/or repeater components) depending on the structure you want to set.
[en] The Layouts document included in the documentation repository describes seventeen potential structures with the General Mobile layout that are applicable to different use cases. These structures are divided into four main categories that vary according to the screen behavior:
[en] Full scroll: use it if you need the scroll feature available for the whole screen information.
[en] Content scroll: use it if you need the scroll feature available only for content area.
[en] Content with repeater: use it if you need the scroll feature available and a repeater component.
[en] Floating content: use it if you need to include floating content in the screen.
Sugerencia
[en] The mobile layouts section includes a QR code that you can download to see the structures applied to different use cases.
[en] Each structure specifies the areas it includes, the components you must add to the screen to set such areas, and how to configure them in the right panel.
Nota
[en] You can choose between four or five screen structures for your mobile app.
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)