Grid Based Design

Let’s talk about Grids!

The G word! The tedious but crucial GRID, which is used in all designs. Because consumers want information presented in a way that is not overwhelming and crowded, grids are useful in web layouts. Editorial pages, instructional design, advertising design, websites, social media platforms, and more have all used grids. Grids serve as guidelines for designers to see how their creative work is presented on paper or in a digital environment and whether it is simple to read and comprehend.

 

Successful grid-based website design

This grid-based website design’s vibrant and wild aesthetic appealed to me. Although it is wild, it also shows grids that are simple to scroll through from top to bottom and left to right. This site has a different visual hierarchy than most others. In this instance, the larger box stands out and may also serve as a profile image or an important component, whereas the smaller boxes are all in line and uniformed with their respective sections. The audience can click on a box of their choice without the boxes looking similar to the boxes around it because each box on the webpage contains a separate image or design. Additionally, it is evident that the grids are symmetrical, which aids in the website’s adaptable design when viewed on a computer screen, tablet, or mobile device.http://grundini.com

 

A wireframe grid layout of Grudini webpage.

 

Grid-based design (print design)

A grid-based design can be seen in the “Eye Chart” or Snellen Chart, named after Herman Snellen. For some people, looking at the snellen chart will bring up memories of trying to read letters while covering one eye at the eye doctor’s office. You must take into account the process of design used for the chart in order to determine whether this design is adequate for a vision exam. Although the block letters are large enough to be focused on, their size gets smaller as you proceed down the chart. To avoid confusing the audience, the spacing and padding between each letter were meticulously determined in a grid arrangement beforehand.

“The result was a chart with letters organized proportionally and in rows organized with font sizes ranging from larger to smaller as the patient made their way down the chart. As the NIH Library points out, “the sizing of letters is geometrically consistent, meaning that optotypes representing 20/40 are twice the size of those representing 20/20.” (Ross, 2022) https://atlanticeyeinstitute.com/history-of-the-eye-chart/

 

Breaking the grid

The first artist that comes to mind when I think of defying the grid or the rules is the late Virgil Abloh. Designer Virgil Abloh likes to mix things up and apply his own principles to what he envisions.His “Free Game” website demonstrates how to create a page that reflects your individuality in addition to using professional content that the public can understand and digest. The days of visual hierarchy adhering to a standard grid and design flow are long gone. Virgil demonstrates to his audience how a design, or in this example, a webpage, may be loaded with visual hierarchy in one place and then carried across the rest of the design. https://virgilabloh.com/free-game/