Anatomy of Grid Systems in Web Design

Anatomy of Grid Systems in Web Design – Today web applications and websites of all kinds have changed and dramatically improved, this is of course thanks to frameworks that incorporate powerful grid principles such as Bootstrap, Foundation, Skeleton, etc.

Responsive web design brings a new appreciation of the role of the grid in the digital world. Designers no longer only think about creating a website for one screen (desktop). But they have thought of creating a website that can be opened properly on various screen sizes. Website appearance that is required to be good on every screen forces website makers to think in terms of a dynamic grid system as opposed to a fixed screen display.

grid
Image by olle svensson

Digital design is still in its relatively young age and the use of the Grid system is also still new. Designers and developers must look back to bring digital design into the future. It has been more than 500 years since the printing press was invented and nearly 300 years since the industrial revolution. Grid has gone through many design moves, approaches, and improvements. Despite this history, grids are still in their infancy in interaction design.

Here are the different elements that make up the box. Some terminology has been adopted by the digital design community and some has not. There are clear reasons why some terms from print media should not be included in interaction design.

Column
Columns are the vertical sections of the grid. The more columns in the grid the greater the flexibility.

columns

Rows
Rows are the horizontal sections of the grid. They are often overlooked in web design. A grid with rows and columns is called a modular grid.

rows

Modules
A module is a unit of space created by the intersection of rows and columns.

modules

Regions
Regions are groupings of columns, rows, or modules that make up the elements of a composition.

regions

Gutter
Columns and rows divided by distance. The distance is deep, the visual tension is created. Widely spaced grids produce a calming layout because the elements of the composition are neither too tense nor too tightly packed between them.

gutter

Margin
Margins are the outer space of grid columns and rows. Not to be confused with padding, which is the space in rows and columns.

margins

Flowline
Flowlines are usually used to break up parts of a composition. They made a natural stop and started to take their place in the design.

flowline

marker
Marker is an area that contains secondary content. Books generally contain chapter titles, page numbers, etc. in the marker area.

marker

Also Read:

Web Design Using Grid
Example of a Super Cool Grid-Based Website
Creating HTML Grid Layouts With LESS
Creating Patterns for Website Backgrounds With Photoshop
Grid Types
Hierarchical
Hierarchical grids are intuitive grids built to focus on the proportions of elements in a design. This type of grid is often used for non-standard and repetitive content.

hierarchical-grid

Manuscript
The manuscript grid is the oldest type of grid used in print media. These usually present as rectangles containing the content on the page or screen.

manuscript-grid

Column Grid
The column grid is by far the most used grid in web design because the screen width is limited, unlike the height, which can last forever if the user has the ability to scroll. Most column grids used on the web are 12 columns, but that shouldn’t stop designers and developers from exploring other alternatives.

column-grid

Modular Grid
The modular grid is designed by rows and columns that form overlapping modules. The modular grid is the most complex type of grid. It should be used when vertical and horizontal spaces are of the same concern. This type of grid is becoming more popular in digital media with the advent of wearable devices that rely on ‘cards’ to communicate.

modular-grid

Hopefully you can understand the anatomy and recognize the various types of grids that we often encounter in the world of digital design.

See you in the next Indonesian Web Design Tutorial post.

set from medium