Rule of thirds in web design

• Proposes that an image should be imagined as divided into nine
equal parts by two equally spaced horizontal lines and two equally
spaced vertical lines, and that important compositional elements
should be placed along these lines or their intersections
• Aligning a subject with these points creates more tension, energy
and interest in the composition than simply centering the subject
• The main reason for observing the rule of thirds is to discourage
placement of the subject at the center, or prevent a horizon from
appearing to divide the picture in half.
• Makes photos more interesting and dynamic.
• Off-Center subjects give a sense of direction.
• An image needs to linger to be effective. The brain understands
symmetry and brushes it aside. Asymmetry, however, is
challenging, exciting, new. Oddly enough, it is this aesthetically
pleasing reason that has lead to artists using the likes of the rule of
thirds (and its cousin, divine proportion) for centuries.

• The photographs on the right
demonstrates the application
of the rule of thirds.
• The horizon sits at the
horizontal line dividing the
lower third of the photo from
the upper two-thirds.
• The tree sits at the
intersection of two lines,
sometimes called a power
point or a crash point

• The “Rule of Thirds” is
the basis for well
balanced and
interesting shots.
• In the picture of the
bee, the bee’s eye
becomes the point of
focus

• In this image the head
of the subject is
intentionally placed on
one of the intersecting
points – “especially his
eyes” which are a
natural point of focus
for a portrait.
• The tie and flower also
take up a secondary
point of interest.

• In this shot the
subject is placed
along a whole line
which means she is
considerably off
center and therefore
creating an
additional point of
interest!

• The basic principle behind the rule of thirds is
to imagine breaking an image down into
thirds (both horizontally and vertically) so
that you have 9 parts. As follows.
• The theory is that if you place points of
interest in the intersections or along the lines
that your photo becomes more balanced and
will enable a viewer of the image to interact
with it more naturally. Studies have shown
that when viewing images that people’s eyes
usually go to one of the intersection points
most naturally rather than the center of the
shot – using the rule of thirds works with this
natural way of viewing an image.
• The rule states that eye-catching items should
line up near the intersections of these lines
for the most impactful results.
• Giving your brain more to study.

• Researchers found that not only will users judge websites as beautiful or not
within 1/50th – 1/20th of a second, but also that “visually complex” websites are
consistently rated as less beautiful than their simpler counterparts.
• the average adult brain is able to store between 5-9 “chunks” of information
within in the short term.
• The ideal goal is to capture something in a unique way that draws attention into
some part of the website.
• You want inequality because this forces some elements to appear more significant
than others(even if it’s just clever design).
• The rule of thirds is more of a guideline to aid a designer in where to focus
content. The rule of thirds is meant to be a UX concept, not a full design principle.
This principle is used to analyze the canvas and determine sections of the page
that naturally draw attention.
• For blogs and news sites, keeping to the 1.6 (etc., etc.) golden ratio is relatively
easy. You’ve got your main content section on the left, and a side bar that’s just
over one-third of the size of the content space.
• Most readers look at a website in the “”F”“ formation. Scan the top of the page, and
then move down the left hand side.
• Next readers look at a website in the “Z” formation.

• Along the top three
rectangles, we have the
usual navigation
goodies with a clean
logo, so we know what
we’re getting into.
• The slogan lines up
nicely with the upper
third, fitting in just well
enough to make it like
the horizon line in the
earlier photograph
example.

• The most important
application for the rule
of thirds in web design is
what appears above the
scroll. This entryway into
a webpage typically
contains a few key items
– logo or header,
navigation and basic
image or information.
• Place these items in key
rule of thirds locations
for the most impact.

• The rule of thirds concept
is most important on
homepages.
• This is where users
develop a first-impression
of a website and makes
decisions about whether
the site is useful to them.
• The rule of thirds is
important to a lesser
degree on content pages,
but still comes into play
for overall aesthetic
value.

• Break down the page into 9 squares with 4 crucial
intersecting points.
• The top-left corner of a website is one of the first
areas to grab attention.
• This also means the top-left intersecting point
should fall on or near an important part of the
page.
• The intersecting point doesn’t need to be on top
of a link or a photo(although it could be). It
should be more like a marker to distinguish an
important piece of the layout.

• http://en.wikipedia.org/wiki/Rule_of_thirds
• http://digital-photography-school.com/rule-of-thirds/
• http://www.webdesignerdepot.com/2014/01/d
esign-to-the-nines-and-the-rule-of-thirds/
• http://webdesignledger.com/tools/rule-of-thirds-
in-web-design
• http://static.googleusercontent.com/external_c
ontent/untrusted_dlcp/research.google.com/en
/us/pubs/archive/38315.pdf
• http://www.psych.utoronto.ca/users/peterson/
psy430s2001/Miller%20GA%20Magical%20Seve
n%20Psych%20Review%201955.pdf

Rule of thirds in web design

More Related Content

Similar to Rule of thirds in web design (20)

More from Manuswath K.B (20)

Recently uploaded (20)

Rule of thirds in web design