EX03 - Grids

Invisible Tools

Excellent design is minimally intrusive. Few better examples of this principle exist than the unseen grid.

Updated December 21, 2019

Ideas are transformed into visual representations everyday.

Without fully realizing their actions, designers often begin sketching concepts without concern for color, type, or basic interaction. In doing so, designers focus on structure the idea above all else. The resulting output is often driven by an unseen grid, resting below the work.

While the fidelity of those initial concepts will increase, if the final work is any good you can bet that there is a well-defined grid underneath it.

Grids are at the core of any good design because they allow designers to align their work with greater speed and accuracy.

Perhaps this exchange between Erica Glasier and Pavel Samsonov sums up the importance of grids best...

Use the resources provided below before attempting the exercises that follow.

Resources for review

Article/Video Source/Author
Grids Make Everything Better New Pragmatic
Designing with Grids Visme
Thinking with Grids Thinking with Type


Length: Around an hour to complete

Recognition and usage of grids is fundamental to your ability to create usable modern designs. The exercise below will first test your ability to spot grid structures in the wild before putting your knowledge of grids to work.

Part one: In the Figma file provided, there are two designs present. Follow the instructions on each frame to display how a grid is being used on the design shown.

Part two: Using the same Figma file, create a grid structure for the elements provided and align them on the grid you have created.

Once complete, update your Program Journal with links the assets produced for this exercise. Post your Journal in the #Feedback-Loop channel for review.


Up next Type Structure

Receive daily feedback and weekly meetings with Chris Courtney by signing up for monthly mentorship today!

Sign up today!