Grid System

Grid System and Spacing.

2 Sections

Modular Grid

We use a Modular Grid System, which help us keep the visuals aligned and give our users the same visual positioning experience that helps them define the location of each item on the screen easily and in some cases the can figure out the location of any CTA or element faster way.

Width

We take the full width with a max of (1800px), any other case we leave whitespaces from the right and left with this values depends on the screen size


Columns/Module

We use 12 Columns in desktop and mobile since it is the best practices.


Gutter

Gutter between columns each other is fixed value: 40px.


Baseline

Our baseline value is 40px. We use this value to unify as much as possible in the case of whitespaces and sizing.


Columns/Module height

For each module hight, we use 1 or 2 or 3 extra counts of baselines. The major rule here is we must create any kind of components (expect buttons and for elements only) shaped by grouping one or more baseline are. Then we leave another baseline at least as whitespace.

Whitespace

Whitespace defines the hierarchy of the content on the screen. Following are some design rationales that support the use of optimal whitespace (or negative space):

  1. Whitespace provide the UI elements “room to breath
  2. The following are some ways using which whitespace can be introduced:
    1. Margins and Paddings
    2. Space around visuals
    3. Line spacing for text
  3. Whitespace makes grasping of the content (reading, skimming, making sense) easier
  4. Whitespace helps in clarifying proximal relationships  (UI elements in close proximity are perceived as one object)
  5. Helps in maintaining the visual hierarchy

Spacing Guidelines