white concrete building

The Display Grid

Understanding the layout of a webpage can be overwhelming. This is because the normal visualization of a webpage is that everything is floating. This is not true. Nothing truly ever floats. It is held in place by the “ether“.

The “ether” that holds all display components (Text, Icons, Buttons, Lines, Boxes, Graphics, etc.) is a grid. A grid is a defined unit area that creates a map overlay of coordinates for every position on a display device. The unit grid component used for webpages is the CSS Box Model. This is a grid unit divided into layers centered around a display element (content).

Raster Image

Everything starts with points of light called pixels. Pixels are the defining components of a raster image display device. Grouping pixels together allows us to create all the types of graphical shapes to form a representation of information. These graphical shapes are placed on a webpage to provide a user experience. This could be a simple as displaying black text on a white background, or can be as complex as rendering a complete visual experience complete with Buttons, Animations, Sliders, Forms, Scroll Bars, etc.

When we are look at a webpage, we overlook the hidden grid that web designers use to structure our visual display. The placement of the image components depends on the baseline grid layout utilized by the designer.

grid

Grid Unit

The smaller the grid unit, the more options the designer has for creating a unique web experience for the user. The grid unit is further scaled and organized into rows and columns. Using this technique, a complete representation of a website can be created.

Basic Webpage Layout

This design would overlay the grid units. Each layout section would make up a group of row-column (x by y) set of grid units. Each grid unit can supply various types of content for that section. This technique of row-column-grid layout design is not new in the graphical design community. Most design ideas start with a grid to facility the design layout. However, as a web developer, it is easy to overlook this simple principle. As a beginning web developer, this can be overwhelming when reviewing different web sites.

Leave a Comment