Understanding Layouts

Veritran Docs

Understanding Layouts

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.

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.

Web app layouts

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

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

Veritran Layouts

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.

This layout implies three main use patterns:

The right area of the layout can contain institutional information.
The area used to include forms must occupy at least 30%, considering that the user interacts with the information displayed in this area.
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%.

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.

This layout implies four main use patterns:

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

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.

This layout implies seven main use patterns:

It usually contains three large areas: a header, a navbar and a footer.
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.
The aside must not occupy more than 30% of the layout space.
The wrapper2 contains three areas that occupy the 70% left of the layout and must contain the transactions components.
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).
The content area must be the largest area and must contain the features available to execute transactions in the app.
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.

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.

This layout involves three main use patterns:

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

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.

This layout involves two main use patterns:

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.
It can be aligned to the right of the screen (mostly in rectangular shape).

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.

In this section:

Was this helpful?

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

Veritran Docs

Understanding Layouts

Web app layouts

Veritran Layouts

Search results