Grids are invisible guidelines that creative professionals use to lay out elements on a page or canvas in an aesthetically pleasing way. They help place text, images, and columns in a balanced and coherent structure. While grids provide an underlying framework, elements can occasionally be placed outside the grid intentionally for more visual impact. Grids come in various forms for different mediums and formats.

1. The Grid
What is a Grid?
Creative people use rulers, guides, and lines to place elements on a page and have them look
good together. These underlying horizontal and vertical lines are what we call The Grid.
Consider this as a scaffolding, a foundation, or a skeleton. While creating your design, these
grid lines are used for laying out text, aligning images, and making columns or rows. These lines
are removed or covered up when finalizing your work.
On a canvas, a painter may make rough pencil lines. Muralists draw a grid on a big wall before
they add their artwork, and magazine designers use digital grids.
You don’t always have to follow the grid, but when you break out of the grid...do it intentionally.
Not accidentally.
Explore these grid-related topics in the coming slides.
Digital Layout
The Golden Ratio Composition
The Rule of Thirds
Grid strategies for your
computer-based projects.
The art of using math
to make art.
Utilize the traditional strategies
of artists and painters.
A classic grid approach to
improve your images.
How can I use grids in my projects?
How to Be a Professional Creative Person HappyAwesome.com Slide #A0025a
Why should I use a Grid?
Makes design more sophisticated and cohesive
Grids help to establish a visual hierarchy
If designers didn’t use a grid, we’d never be able to read a
newspaper or map
When you occasionally break out of the grid, it has more
emphasis and impact
Grids allow designers to make quicker decision
Balance is easier to achieve with grid
When a page is laid out well, we say that it has harmony...all
the elements are singing together. Grids allow harmony.

2. A common approach is the 8-Point Grid where
most measurements are multiples of 8.
Spacing elements consistently and with standard units will make your design more
readable, and it will feel more organized. Many typical screen types are divisible by
eight. Plus, it’s beneficial when working on teams where everyone can use the
same consistent approach.
4 8 12 16 20 24 32 48 72 96 128
Digital Layout
When designing on a computer, visual guides can assist in
organizing the various elements of our creation. These guides
can be easily turned on and off throughout the process to view
our work with or without the guiding lines. Once complete, the
grid can be hidden to reveal the final design.
Gutter
20-32 pixels
The measurements on this slide are one
approach. Explore other grid approaches
and find one that works for you. Keep
grids consistent within each project.
Margins
On mobile our margins
are 20-32 pixels
On desktop margins vary
greatly from 20-100.
Remember that viewers
have screens of
different widths
Rows
Establish a vertical rhythm
(how many pixels you will place above
or below particular elements)
4-8 pixels
(the little gray ones)
Rulers
Column
60-96 pixels
The number of columns depends on the
screen you are designing for.
Typically 12 columns for desktop computers,
8 for tablets and 4 on mobile devices.
How to Be a Professional Creative Person HappyAwesome.com Slide #A0025a
How to Be a Professional Creative Person

3. How to Be a Professional Creative Person HappyAwesome.com Slide #A0025a
Use this technique to create visually appealing compositions within your photographs, designs, and
paintings. Divide your image into nine equal-sized rectangles using four lines. Place your subject on the
intersection of these lines or along the horizontal or vertical lines for a successful composition.
Next time you're shooting or cropping photos, laying out a presentation slide, or creating a poster,
remember this rule. While it's tempting to place your subject in the center of the image every time, resist
that urge for a more human appeal.
Remember, the Rule of Thirds is more of an approach than a strict rule. Use it as a guide when you do
creative work, and always evaluate if it's the best fit for the particular image. Sometimes another grid or
no grid at all can produce a better layout.
In most cases, you’ll want to avoid placing your subject directly in the center. Occasionally
symmetry can be appealing, but off-center images are usually more pleasant.
Identify the location of your horizon line. Usually, raising or lowering your horizon line will
make a better image. Beware of placing your subject too close to the edge of your image.
Align your subjects along one of the lines and put critical elements at the intersection of lines.
41% 20%
14%
25%
Percentage of viewer’s attention
each focal point receives.
Make lines like a
Tic-tac-toe board
over your image.
The Rule of Thirds
Place your horizon line along
one of the horizontal lines.
Place important parts of your
image at the intersection of lines.
Vertical subjects like people
and trees can align with one
of the vertical lines.
Tip: leave two-thirds of the
space in front of where
your subject is looking.

4. The Golden Ratio
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711, 28657, 46368, 75025, 121393, 196418, 317811
Fibonacci Sequence
ϕ1.6180339887498948482045868343656381177203091798057628621354486227052604628189024497072072041893911374847540880753868917521266338622235369317931800607667263544333890865959395829056383226613199282902678806752087668925017116962070322210432162695486262963136144
The Golden Ratio has been mesmerizing creative people for ages. This mathematical
formula describes a phenomenon in nature and can also be applied to our creative
projects. This topic is deep and complex; this page is merely a cursory introduction.
Phi ϕ is the lesser-known cousin of Pi π. Both are irrational numbers that go on
forever, never repeating. Phi is approximately 1.618 and can be very useful in design.
A related concept is the Fibonacci Sequence. This is a series of numbers, each the
sum of the previous two numbers. The ratio between any two numbers in the
sequence will be about 1.618.
A grid approach used by designers, artists, and
architects. Divide the long side of a rectangle into two
sections with a ratio of 1 to 1.618. Inside the smaller
rectangle, do the same thing again — into infinity.
Then add arcs and circles to each box. Superimpose
the whole grid over (or under) your design as a guide
for arranging elements. Remember, these are general
suggestions for layout and proportions,
not absolute laws.
The Golden Rectangle
Golden Section
Golden Mean
Divine Proportion
Golden Cut
Golden Number
Divine Section
Also known as...
1.618
REMEMBER THIS NUMBER
1.618
REMEMBER THIS NUMBER
1.618
1.618
1.618
1
1
1
Text sizes and hierarchy: A heading can be
1.618 times the size of the body text.
Photos can be composed or cropped with
this grid in mind, improving composition.
Other uses include: UI design, page layouts,
logo design, illustration, and curves.
Grids are lines invisible to the viewer but
which help guide designers.
How Creative People Use This
How to Be a Professional Creative Person HappyAwesome.com Slide #A0025b
Humans feel an attraction to the
Golden Ratio. Balance and symmetry
can be comforting, aesthetically
pleasing, and natural.

5. Composition
When shooting a photo, designing a PowerPoint slide, or
creating an illustration, try to visualize the overall shape you
are making. These classic approaches have aided artists
throughout history. Imagine these shapes as an invisible
grid over your work and let it be a loose guide.
Triangle / Pyramid
Cross
Radiating Lines
Golden Triangles
Focal Group
Diagonal
Circle
Frame within a Frame
Fulcrum / Steelyard
Compound Curve (the S curve)
Tunnel
L Shaped
How to Be a Professional Creative Person HappyAwesome.com Slide #A0025c