Skip to main content

Veritran Docs

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.