The Artboard

The Artboard

Web Design and the Grid

Besides graphic design, there are several other fields of design that warrant using the grid, of them, the most noteworthy is web design. Some references that offer a more in depth analysis of web and the grid include the 960 design, from the grid system (, and the design by grid (

Both sites offer a look into articles, tutorials and resources for what it means to design on the web using the well-known grid for print production.

“In the example template, the artboard is 1920px x 2160px. The height of the artboard is about three scrolls of the screen height — which is about the number of scrolls that the average user with an average amount of interest will scroll.

The width of the artboard is quite wide and gives plenty of room to design a more lush background if desired — if you find the width of the artboard way too wide, you can always resize it.”

This example demonstrates a grid used on a standard desktop screen resolution of 1024 x 768.  I use this grid at work to create user friendly as well as a universal grid layout. I retrieved this layout from Design Festival ( Here they explain the tools the use to create the artboard and it’s use on the standard computer monitor screen.

The 960 grid is used to create a web layout in about half the time it would take to create a layout from scratch. This resource explains the terms that web designers use to create sites, such as fold, viewport and fixed width designs.

Semi Fluid and Fluid layouts:

Web is not print-The difficulty with web design is size. It is the most annoying aspect of designing for the web; it can be the brilliant feature of your site or completely ruin your design. Putting together a fluid design will allow you to measure how the site will look on any page, screen or device. Most companies will go out of their way to create an entirely different set of HTML and CSS for mobile devices. However, grid layouts and fluid design will ultimately fix those issues.

Please check out the Golden Grid System

The Anatomy of  the Typographic Grid:

“Grids act as guides for the placement of elements in a design. No matter how simple or complex, grids share some common parts, each fulfilling a specific function. Not every one of these parts needs to be present in every grid.”

This is one of my favorite articles: it explains the terminology behind many aspects of the grid itself. Such terms are modules, flowlines, margins, spacial zones, format, columns, rows, gutters, folio, header/footer, and markers.

Please read  Grid Nomenclature

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: