UI Kit Generation
Previous steps
To generate the UI kit, the UX Designer must have previously created the project's documentation repository and obtained the brandbook that represents the client's brand identity.
Who participates in the UI kit generation instance?
The UX designer is in charge of preparing and defining the UI kit document.
Where do you work?
To work on this step, you must use the Design System document (UI Kit appears in the first section) and the Layouts document available in the repository in Figma. Follow the links to access them and read Tasks execution below to learn which tasks you must perform.
Step 2 - UI Kit Document
The UI kit (User Interface kit) is an initial approach to the look and feel of the app interface, where the visual guidelines are presented and validated with the client. It includes a collection of pre-designed elements to streamline the design process, ensuring consistency and efficiency.
The UI kit consists of:
Brandbook details: the brand identity (logos), fonts, color palettes, icons, animations, images and illustrations.
Assets: Resources such as images, video files, audio files or icons, that are part of the design and aesthetics of the app. For example, the images related to the client's logo, banners or icons that are part of the client's brand.
Basic components: text inputs, text labels or buttons. These components do not show functionalities or behaviors, but just how they will look like in their basic form. Then, based on this information and once the client approves the UI kit, the designer defines the atomic components in the Design System and configures the app theme with the styles for each of them (that can be applied when the components are configured in the app screens).
Note
For all of the above, an accessibility check is required.
Reference screens: basic screens that don't show functionalities but are prepared to demonstrate the basic design aspects of the screens and their interaction.
Layouts: Structures that define how visual elements are arranged in a screen or a part of a screen. This definition is based on the project requirements and the purpose of the app to be built.
The different layouts available are defined in the Layouts document that is part of the project's documentation repository. This document specifies each layout purpose and use.
In this step, the UX Designer must execute the following tasks:
Go to the Design System file in the project's documentation repository duplicated and then go to the UI Kit section to complete it following the template.
Important
The UX Designer must stick to the contents in the template and complete all the sections accordingly. They must not add additional information or remove content from the duplicated template.
Transfer the information from the brandbook, as specified in the description above, and import the client logos.
Important
The UX Designer must ensure that resources are provided by the client. If not, they will define a set of assets for the app based on the project requirements and needs. Logos are always provided by the client.
Define the basic components that will be used in the app screens.
Run the accessibility color check to check if the color palette and fonts defined in the brandbook pass the accessibility test. Read Visual Accessibility to learn more about this task.
Define the layouts that will be used in the app. This includes:
Select the layouts from the templates available, based on the project requirements. You must select at least three layouts. A layout for initial, a general layout, and a modal layout.
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.
Important
Changes in areas sizes must be specified and be clear enough for the implementer to easily understand them.
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
Note
Each prebuilt layout in the Layouts template section in Studio has the breakpoints already configured in the CSS File field.
Include the configuration of the flex containers and their attributes. 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.
Create the reference screens that will be sent for client's approval.
Once this version of the UI kit document is ready, the UX Designer must send it to the client for their approval. Even though there can be changes throughout the app building process, approval is required so that the team ensures that they will work on a design that fits the client's needs.
Important
The team must not start working on the Design System until the client approves the UI kit.
Understanding Visual Accessibility
To determine that the app is visually accessible, the team member in charge of the design must evaluate the elements in Figma and confirm that the app complies with AA and AAA guidelines regarding color contrast.
Important
Accessibility contrast guidelines, such as those defined by the WCAG (Web Content Accessibility Guidelines), require that text and background have a minimum contrast ratio to ensure readability for all users, including those with visual impairments or color perception difficulties. This contrast ratio is measured as a proportion, with a minimum of 4.5:1 recommended for regular text and 3:1 for large or bold text.
For this purpose, the team has three tools available:
a new Figma functionality;
the Stark plug-in in its free version; or
the A11y plug-in.
The use of these tools ensures that the text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standards.
Understanding Layouts
Layouts are included in two steps in the design process stages: first, the UX Designer decides which of the prebuilt templates will be used for the app, and defines their areas and final space occupied by each of them. These definitions are specified in the Figma file. Then, the implementer makes any changes required (if applicable) in Studio.
A layout is the visual structure of a digital design - it is the way in which visual elements are arranged in a screen or a part of a screen. It defines how graphic elements (such as images, texts or buttons) are distributed in a digital area, thus creating a visual hierarchy and facilitating user navigation.
Veritran layouts for web apps
Responsive layouts
To include the responsive versions, layouts are built under four different breakpoints predefined for Veritran Studio, as follows:
Extra-extralarge: screens with a resolution higher than 1401px;
Extralarge (screen resolution from 1201px to 1400px): applicable to extra-large screens or TV screens;
Large (screen resolution from 992px to 1200px): applicable to large screens or desktop devices;
Medium (screen resolution from 769px to 991px): applicable to small screens like iPads and tablets; and
Small (screen resolution from 481px to 768px): applicable to mobile devices.
Important
Breakpoints cannot be modified.