[en] Understanding Layouts

Veritran Docs

[en] Understanding Layouts

[en] Layouts are included in two steps in the design process stages: first, they are defined and set by the UX Designer. Then, they are modified in Studio according to the designer's specifications by the Implementer.

[en] 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.

[en] In the following sections, you can learn more about the area levels that can be applied in a layout and the description and use of the layouts available for Veritran projects.

[en] Web app layouts

[en] Layouts for web apps can be configured for different resolutions – that is to say, the layouts have specific structures applicable for the responsive versions of the app. The Layouts template available in Figma describes the structure and purpose of layouts for a web app and include their responsive designs.

[en] To include the responsive versions, layouts are built under four different breakpoints, as follows:

[en] Extra-extralarge: more than 1401px;
[en] Extralarge (from 1201px to 1400px): applicable to extra-large screens or TV screens
[en] Large (from 992px to 1200px): appicable to large screens or desktop devices
[en] Medium (from 769px to 991px): applicable to small screens like iPads and tablets
[en] Small (from 481px to 768px): applicable to mobile devices

[en] Layout areas levels and arrangement

[en] Layouts can have three area levels: Level A, Level B and Level C.

[en] The Layouts Documentation document contains the six layouts made available by Veritran and their configuration in the three levels (such as the example in the image below). Read the sections below to learn more about the how each level is defined.

[en] Level A represents the screen areas - that is, the elements that the app screen contains. There are seven areas:

[en] Header: Area used to contain introduction or navigation components within the app. The header is placed in the top part of the layout and usually appears in all the screens of the app. There are also internal areas that have their own header (for example, the content area or a modal).
[en] Content
[en] Nav or Navbar: Area that contains links to navigate to other app pages or to sections within the same page. Its purpose is to make navigation easier and make the app more accessible. The Nav area can be within the Aside area.
[en] Aside: (soon to be called sidebar): Area located in the left or right side of the layout to show additional information, navigation components or other features of the app. In Veritran projects, the main menu is usually placed within the Aside area.
[en] Footer: Area located in the bottom part of the layout that contains additional information apart from the main content.
[en] Bottomaside: Area exclusively used to define the space to be occupied by a modal.
[en] Wrapper: Area that exclusively contains other areas, that is used to group and set the structure of components within the app. In Veritran projects, it is used to group areas that change the alignment orientation – for example, if the areas are aligned in vertical orientation, a wrapper will be added so that those areas are aligned in horizontal orientation.

[en] Level A layouts are configured in Studio as Layout templates (Design > Layout templates). Then, they are applied in each app screen.

Importante

[en] All projects will have the prebuilt layout templates in Studio to work on duplicates. Therefore, neither implementers nor designers have to create them from scratch.

[en] Level B includes the areas that set the structure of the content area within Level A areas. The content area (one of the main areas within a layout) can have different secondary areas, which include the header, the content body or the footer. Level B areas are:

[en] Content header: displays elements that replicate across app screens or that can be reused between interaction flows, such as headings, logos, wizards or any other element that does not vary in information or position in the different screens it appears.
[en] Content body: displays informative content, forms or actions that vary across the app screens. The body can also be divided in different areas, which can also be separated into different columns (one, two or three columns), according to the app design or the feature displayed in the screen.
[en] Content footer: mainly displays elements that replicate across app screens or that can be reused between interaction flows, such as menus, links, buttons or any other element that does not vary in information or position in the different screens it appears.

[en] The information and features that can be displayed in Level B areas are flexible. This means that they will vary according to the solution offered and the design decisions made by the team.

[en] Level B areas are configured as parent flex containers within the screens of the app that use Level A layout templates. To learn more, read Flex Container.

[en] Level C includes the arrangement that sets the organization of the content body of a Level B area. La arrangement of the content body can be organized in one, two or three columns:

[en] One-column arrangement: mainly used for forms with a short number of fields or that must be displayed in small areas (between 40% and 60% of the total screen space), journeys or indications of steps in a process or feature, informative or introductory texts that explain features, tables or movements lists.
[en] Two-column arrangement: manly used for forms with a large number of fields or that occupy the total width space of the screen, products or transactions details that include visual information (such a card carrousel with cards images and card information) or notification inboxes that show details of each notification in the same screen.
[en] Three-column arrangement: manly used for forms with a large number of fields or that occupy the total width space of the screen, products or transactions details that include visual information (such a card carrousel with cards images and card information), products or promotions cards, or access to features.

[en] As in the case of Level B areas, the information and features that can be displayed in Level C columns is flexible. This means that they will vary according to the solution offered and the design decisions made by the team.

[en] Level C arrangement is configured in children flex containers within parent flex containers in the screens of the app. To learn more, read Flex Container.

[en] Veritran Layouts

[en] Layout No. 1 or Initial 1 is the first most used to structure login screens and any options that may appear before a user is active in the app. This layout uses the whole space available (100%) with app features. It consists of two main spaces that can occupy a space between 60% and 40% each, or 70% and 30% each, respectively.

[en] This layout implies three main use patterns:

[en] The right area of the layout can contain institutional information.
[en] The area used to include forms must occupy at least 30%, considering that the user interacts with the information displayed in this area.
[en] The form section usually contains three areas: a header, a content and a footer. This section can be used or, if not used, the configuration should be defined in 0%.

[en] Layout No. 2 or Initial 2 is the second most used to structure a login page. It is currently the most used on the market because it can be easily adapted to a mobile version. This layout uses the whole space available (100%) in visual terms and (when compared with Initial 1) contains a smaller space for the login feature. It contains only one large area that occupies 100% of the layout.

[en] This layout implies four main use patterns:

[en] The layout usually includes three areas: a header, a footer and a content area.
[en] The header area must not occupy a space larger than 15%. It usually contains the logo or the menu information.
[en] The footer area must not occupy a space larger than 10%. It usually contains useful links or a legend.
[en] The central area is the content1 area and it usually occupies more than 70% of the layout.

[en] Layout No. 3 or General 1 is the first most used in screens where the user is active in the app and starts executing transactions. This layout is applied in approximately 80% of the app features.

[en] This layout implies seven main use patterns: It has three large areas:

[en] It has three large areas: a header, a navbar and a footer.
[en] The header area must be full screen (placed from left to right) of the layout and must not occupy more than 8% of the layout space.
[en] The aside must not occupy more than 30% of the layout space.
[en] The wrapper2 contains three areas that occupy the 70% left of the layout and must contain the transactions components.
[en] The navbar must not occupy more than 20% of the layout space and must be used to define the page title, the links or internal navigation (such as breadcrumbs).
[en] The content area must be the largest area and must contain the features available to execute transactions in the app.
[en] The footer must not occupy more than 10% of the layout space and can be used to contain logos or external links and legal information.

[en] Layout No. 4 or General 2 is currently the second most used in screens where the user is active in the app and starts executing transactions. It is similar to General 1 but the header area is not full screen – as a result, the Aside area occupies the full height of the layout.

[en] This layout involves three main use patterns:

[en] It has two main areas: a sidebar and a content area.
[en] The sidebar area must not occupy a space larger than 30% of the layout.
[en] The content area must occupy at least 70% of the layout. This area contains the transactions execution features.

[en] Layout No. 6 or Modal is used to set modals or elements of the app that are displayed as modal windows or pop-up modal dialog boxes and appear overlapped to the main content. Modals contain information that is relevant to the user or specific actions such as add or delete content. To go back to the main content, the user must interact with the modal, by executing an action or closing it. To be able to overlap the modal with the rest of the areas, it is necessary to configure the background with the overlay property.

[en] This layout involves two main use patterns:

[en] It can occupy the center of the screen, and the space must not be larger than 60% of the whole screen. This alignment is used for modals that give messages to the user.
[en] It can be aligned to the right of the screen (mostly in rectangular shape).

Was this helpful?

Would you like to provide feedback? Just click here to suggest edits.