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...

Somehow it took me until 2nd year of design school to learn the trick that aligning all the stuff makes your design look 100 times better

— Pavel A. Samsonov (@PavelASamsonov) December 19, 2019

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

Exercise

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