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