DocuWare Design

DocuWare principles, design language, and market best practices

Docy

Grid

Estimated reading: 2 minutes 73 views
The grid is the foundation for positioning components and patterns on user screens. Designing on a grid helps create a seamless and easy-to-use experience.

Principles

  • The grid comprises columns, gutters, and margins, providing a convenient structure for layout elements within the body region.
  • Components, imagery, and text should be aligned with the column grid to ensure a logical and consistent layout across screen sizes and orientations.
  • As the size of the body region grows or shrinks, the number of grid columns changes in response.

Application

Using a base grid of 8 pixels should allow flexibility in scaling and spacing. To ensure that each UI element is aligned to the pixel grid, values ​​multiplied by 8 (eight) should be used to determine component sizes, padding, and margins.

Common Grid Layouts

A grid consists of a framework of cells laid out and aligned vertically and horizontally. It helps users read and visually navigate website content more efficiently, using a responsive, scrollable column structure.

Full width
12 columns
100%
One-half width
6 columns
50%
Two-thirds width
8 columns
60%
One-third width
4 columns
30%
Three-quarters width
9 columns
75%
One-quarter width
3 columns
25%

Structure

Layouts can feature one or more subdivisions, both horizontally and vertically. The division is straight, rectangular, and bled to the edge; it can be either symmetrical or clearly asymmetrical.

CONTENTS
Chat Icon Close Icon