SlideShare a Scribd company logo
1 of 4
Download to read offline
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.
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.
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.
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

More Related Content

Similar to The_Grid

Survival Techniques
Survival TechniquesSurvival Techniques
Survival Techniquesugent
 
Digital illustration handbook
Digital illustration handbookDigital illustration handbook
Digital illustration handbookMrLawler
 
P.4 you have gotta get this
P.4 you have gotta get thisP.4 you have gotta get this
P.4 you have gotta get thisdarci pappano
 
Presentation Board Layout
Presentation Board Layout Presentation Board Layout
Presentation Board Layout NYCCTfab
 
Lecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual GraphicsLecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual Graphicslucita cabral
 
Simple Business Meeting by Slidesgo_2.pptx
Simple Business Meeting by Slidesgo_2.pptxSimple Business Meeting by Slidesgo_2.pptx
Simple Business Meeting by Slidesgo_2.pptxssuser461734
 
Theories and Relevant Practitioners
Theories and Relevant PractitionersTheories and Relevant Practitioners
Theories and Relevant PractitionersThomas Haase
 
GRAPHIC ORGANIZERS (DESCRIPTION AND TYPES).pptx
GRAPHIC ORGANIZERS (DESCRIPTION AND TYPES).pptxGRAPHIC ORGANIZERS (DESCRIPTION AND TYPES).pptx
GRAPHIC ORGANIZERS (DESCRIPTION AND TYPES).pptxoraylislie02
 
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesigners
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesignersEngl317 project3 slidedoc1_graphic_designprinciplesfornondesigners
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesignersZachary Williamson
 
Graphic representation of technical projects
Graphic representation of technical projectsGraphic representation of technical projects
Graphic representation of technical projectsgabriela-technoteacher
 
Power Point 2007-Get Visual With Smart Art Graphics
Power Point 2007-Get Visual With  Smart Art GraphicsPower Point 2007-Get Visual With  Smart Art Graphics
Power Point 2007-Get Visual With Smart Art GraphicsOklahoma Dept. Mental Health
 
Siml Geometric Presentation by Slidesgo.pptx
Siml Geometric Presentation by Slidesgo.pptxSiml Geometric Presentation by Slidesgo.pptx
Siml Geometric Presentation by Slidesgo.pptxUgoGonzlez1
 
Visio 2007ù Expertly Position, Stack, And Group Shapes
Visio 2007ù Expertly Position, Stack, And Group ShapesVisio 2007ù Expertly Position, Stack, And Group Shapes
Visio 2007ù Expertly Position, Stack, And Group ShapesOklahoma Dept. Mental Health
 
USE OF DIAGRAMS IN TECHNICAL WRITING
USE OF DIAGRAMS IN TECHNICAL WRITINGUSE OF DIAGRAMS IN TECHNICAL WRITING
USE OF DIAGRAMS IN TECHNICAL WRITINGravi kiran
 

Similar to The_Grid (20)

Survival Techniques
Survival TechniquesSurvival Techniques
Survival Techniques
 
Digital illustration handbook
Digital illustration handbookDigital illustration handbook
Digital illustration handbook
 
P.4 you have gotta get this
P.4 you have gotta get thisP.4 you have gotta get this
P.4 you have gotta get this
 
Presentation Board Layout
Presentation Board Layout Presentation Board Layout
Presentation Board Layout
 
compositional F07.ppt
compositional F07.pptcompositional F07.ppt
compositional F07.ppt
 
Lecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual GraphicsLecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual Graphics
 
Simple Business Meeting by Slidesgo_2.pptx
Simple Business Meeting by Slidesgo_2.pptxSimple Business Meeting by Slidesgo_2.pptx
Simple Business Meeting by Slidesgo_2.pptx
 
Theories and Relevant Practitioners
Theories and Relevant PractitionersTheories and Relevant Practitioners
Theories and Relevant Practitioners
 
101 project ideas
101 project ideas101 project ideas
101 project ideas
 
Graphic Design Workshop, 2018
Graphic Design Workshop, 2018Graphic Design Workshop, 2018
Graphic Design Workshop, 2018
 
GRAPHIC ORGANIZERS (DESCRIPTION AND TYPES).pptx
GRAPHIC ORGANIZERS (DESCRIPTION AND TYPES).pptxGRAPHIC ORGANIZERS (DESCRIPTION AND TYPES).pptx
GRAPHIC ORGANIZERS (DESCRIPTION AND TYPES).pptx
 
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesigners
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesignersEngl317 project3 slidedoc1_graphic_designprinciplesfornondesigners
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesigners
 
Graphic representation of technical projects
Graphic representation of technical projectsGraphic representation of technical projects
Graphic representation of technical projects
 
01 graphic representation
01 graphic representation01 graphic representation
01 graphic representation
 
Power Point 2007-Get Visual With Smart Art Graphics
Power Point 2007-Get Visual With  Smart Art GraphicsPower Point 2007-Get Visual With  Smart Art Graphics
Power Point 2007-Get Visual With Smart Art Graphics
 
Siml Geometric Presentation by Slidesgo.pptx
Siml Geometric Presentation by Slidesgo.pptxSiml Geometric Presentation by Slidesgo.pptx
Siml Geometric Presentation by Slidesgo.pptx
 
Basic sketching
Basic sketchingBasic sketching
Basic sketching
 
Visio 2007ù Expertly Position, Stack, And Group Shapes
Visio 2007ù Expertly Position, Stack, And Group ShapesVisio 2007ù Expertly Position, Stack, And Group Shapes
Visio 2007ù Expertly Position, Stack, And Group Shapes
 
present
presentpresent
present
 
USE OF DIAGRAMS IN TECHNICAL WRITING
USE OF DIAGRAMS IN TECHNICAL WRITINGUSE OF DIAGRAMS IN TECHNICAL WRITING
USE OF DIAGRAMS IN TECHNICAL WRITING
 

More from ToddTibbetts3

More from ToddTibbetts3 (8)

Value vs. Effort
Value vs. EffortValue vs. Effort
Value vs. Effort
 
Learn Composition
Learn CompositionLearn Composition
Learn Composition
 
Happy Awesome AI Mix 1
Happy Awesome AI Mix 1Happy Awesome AI Mix 1
Happy Awesome AI Mix 1
 
Outpainting 2
Outpainting 2Outpainting 2
Outpainting 2
 
Outpainting 01
Outpainting 01Outpainting 01
Outpainting 01
 
Test2
Test2Test2
Test2
 
Test AI
Test AITest AI
Test AI
 
Raster vs. Vector Graphics, a mini-lesson
Raster vs. Vector Graphics, a mini-lessonRaster vs. Vector Graphics, a mini-lesson
Raster vs. Vector Graphics, a mini-lesson
 

Recently uploaded

Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersCre8iveskill
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesThomas Schielke
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Pranav Subramanian
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 

Recently uploaded (20)

Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's Matters
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering Portfolio
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives cities
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 

The_Grid

  • 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. 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.
  • 3. 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.
  • 4. 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