Grid

The grid is the geometric foundation of all the visual elements of Bewond Design, from typography to columns, boxes, icons, and illustrations. It provides structure and guidance for all creative decision-making.

Fundamentals

The core concept of the grid is to divide or multiply by two, forming a visual rhythm. Fluid grids are built by division, whereas fixed grids are built with multiplication.

Mini unit

The basic unit of grid geometry is the 8-pixel square mini unit. Multiples of mini units compose the dimensions of columns, rows, boxes, along with their margins and padding. The mini unit adapts to your content while maintaining a consistent visual rhythm. For devices with very small screens, a 4-pixel square mini unit can be used.

Sizing scale

Fixed base unit

Use this fixed sizing scale, comprised of select mini unit multiples, when sizing icons, tiling boxes, and applying vertical margin space.

Fluid base unit

For fluid grids, the column width is the base unit. Just as a box can span multiple columns, its height is a multiple of column width. After determining your base size, multiply it as needed for each use. For box sizing, apply an aspect ratio too.

Fluid grid

A fluid grid divides space by twos. This division is immediately evident in the column structure. Within a breakpoint, the column count is constant, and unit size scales with screen size. Choose a column count by starting with one, then divide by two as needed.

Fixed grid

A fixed grid starts with a fixed unit size from the sizing scale, then tiles and wraps as needed, like text. To employ the concept, multiply box sizes by two and mix them together.

When tiling fixed boxes, the column count is not known in advance, but a grid emerges visually due to the use of a consistent sizing scale. On breakpoint boundaries, fixed sizing scales match column sizes.

Hybrid grid

Hybrid grids are also frequent in practice, and hybrid boxes have properties of both.

Aspect ratio

When sizing boxes, constrain dimensions to one of the aspect ratios shown below whenever possible. Doing so will heighten the perception of unity between products. Choose an aspect ratio from the table, then multiply the base unit in each dimension as needed to set width and height, maintaining the ratio in either portrait or landscape.

Aspect ratios
1:1, 2:1, 2:3, 3:2, 4:3, 16:9

Components

Components can be sized like other boxes: either fixed or fluid, and often hybrid, with fixed height and fluid width. When interior space within a component is cramped, use the minor sizing scale: When multiple components adhere to the same scale, grid relationships naturally emerge.