10/4/2017

Imaging and Design for the

Online Environment
Week 6 – Handout #6

What is the most visited

website in the world?
Think about it for a
second.

1
 10/4/2017

Here is a clue, the site’s mission

statement is to organize the
world’s information and make it
universally accessible and
useful.” You have probably
guessed it by now,

2
 10/4/2017

On March 23, 2016, Alexa.com, a

renowned website for ranking web
page popularity, ranks this website
number one in the entire world. Why
do you think Google ranks number
one despite the countless search
engines and websites in the internet?

3 Main Reasons why Google is the most

popular Search Engine
• Better Search Experience –The quality of search results is closely
monitored by Google’s search quality team and regular algorithm
updates are being performed to ensure that only high-quality results
are returned in every search query.
• Great Business Exposure – As billions of search queries per day
are being performed in Google, businesses who advertise their
products and services through Google’s AdWords program gain
more visibility and exposure.
• Innovative Products and Services – Aside from Search, Google
has various innovative web-based products and services that are
also popular and widely-used by internet users. The most popular
are Gmail, their free web-based emailing service; G+, their social
networking website build to compete with Facebook; and YouTube,
the most popular video community in the World Wide Web. Other
popular products include Google Maps, Blogger, and Chrome.

3
 10/4/2017

Creating a web page is like

creating a work of art. There
are certain things that you
need to consider in order to
get your message across.

Basic Principles of Graphics and Layout

• Balance
• Contrast
• Emphasis
• Visual Movement
• Pattern
• Rhythm
• Proportion
• Variety

4
 10/4/2017

Balance
A distribution of visual
weight on either side
of the vertical axis.
Symmetrical balance
uses the same
characteristics.
Asymmetrical uses
different but equally
weighted features.

Balance

5
 10/4/2017

Sample Websites that show

Balance/Symmetry in Web Design

• ICORA is a perfect
example of how symmetry
contributes to the vertical
flow of a website.
• Instead of throwing a
bunch of stuff on the page
and letting the user
choose where to go, the
designer encourages the
user to scroll through the
content.
• The designer takes you
on a set journey in what is
essentially a carefully
planned sales pitch.

Sample Websites that show

Balance/Symmetry in Web Design

• In PIXEL BLEED
nothing about it fits the
norm. The logo and
navigation are at the
bottom, which just
feels wrong… and yet
it works!
• The symmetry lends
an interesting balance
to the design. And with
the visually heaviest
elements at the bottom
of the page, the layout
feels grounded.

6
 10/4/2017

Sample Websites that show

Balance/Symmetry in Web Design

• Symmetry can
occasionally play into
the subject of the
website.
• In the case of DUUEL,
the idea of two
designers dueling
makes sense.
• The designers are
evenly skilled and
evenly equipped, and
the symmetry subtly
reinforces this idea.

Sample Websites that show

Balance/Symmetry in Web Design

• Symmetry is also
great when you
simply don’t have
much to say.
• The makers of
CLOCKS don’t need
much to explain their
product. One word
does the job.
• In fact, saying more
would almost defeat
the point.

7
 10/4/2017

Sample Websites that show

Balance/Symmetry in Web Design

• One powerful aspect of symmetry

is its ability to direct the user’s
focus. With everything balanced on
the vertical axis, attention naturally
goes there.
• RYAN M. STRYKER’S name here
is in this pivotal location, ensuring
you don’t miss it.
• The website functions almost like
an elevator pitch, starting with the
name and flowing into a summary
of the designer’s work.
• Critical information is carefully
controlled and powerfully
conveyed.
• The design doesn’t have to be
overbearing either; the symmetry
does most of the work.

Contrast

The arrangement of opposite

elements (light vs. dark, rough
vs. smooth, small vs. large,
etc…) in a composition so as
to create visual interest.

8
 10/4/2017

Contrast

Sample Websites that use

Stunning Color Contrast

• LUSH is a good place

to start because white
space is the hero here.
• It's the delicious
coloring of the
toiletries, contrasted
with large black and
white typography and a
black header that
makes this such an
enjoyable site to
browse.

9
 10/4/2017

Sample Websites that use

Stunning Color Contrast

• ODD PEARS -The sock

retailer (hipsters note, all
designs come in threes) is
another that uses its colorful
stock to full effect.
• One can browse by the socks
themselves or by the patterns
thereon. Though most of the
color is delivered by the
products, this ecommerce site
features a number of fun
photo shoots, previewed
above the fold on the
homepage, which deliver
additional color.
• Note the ever-contrasting
headers displaying shipping
information (in green) and
order incentives (in coral).

Sample Websites that use

Stunning Color Contrast

• Hipster
neighborhood guide
ON THE GRID
employs a strong
blue and white
design that uses
brightly colored tiles
once you drill down
into a category.

10
 10/4/2017

Sample Websites that use

Stunning Color Contrast

• HUGE is an agency in
love with pink, using
the color to highlight
mouse-overs and also
liberally splashing the
stuff on its homepage.
• Once again, contrast is
achieved with text as
well as imagery and
background color.

Sample Websites that use

Stunning Color Contrast

• TRAINLINE APP - It's

the bold coloring of the
booking engine, all
mint and navy blue,
that's so distinctive.
• This color scheme is
used sparingly to
highlight the calls to
action through the
ticket purchase
journey.

11
 10/4/2017

Emphasis

Used to make certain parts of

an Artwork stand out. It creates
the centre of interest or focal
point. It is the place in which
an Artist draws your eyes first.

Emphasis

12
 10/4/2017

Sample Websites that applied Emphasis

• CINCO uses beautiful

images to create a
sense of proportion
that first drives us to
the main image and
later to the rest of the
content.
• With these images
they made pretty clear
what they want to
show first.

Sample Websites that applied Emphasis

• UNLISTED
COLLECTION -
Also a good
example of
proportion.
• The big typography
and the image get
our attention right
away.

13
 10/4/2017

Sample Websites that applied Emphasis

• WAR CHILD -
Beautiful emphasis
created by nice
proportions that get
our attention to what
the site is about and
also to the donate
button.

Sample Websites that applied Emphasis

• GRIND - Different
typography sizes
create a nice
example of contrast
to emphasize
content.

14
 10/4/2017

Sample Websites that applied Emphasis

• GIFTROCKET is
using contrast to get
our attention to the
space ship and the
circular menu.

Visual Movement
How the eye moves through the
composition; leading the
attention of the viewer from
one aspect of the work to
another. Can create the illusion
of action.

15
 10/4/2017

Visual
Movement

Sample Websites that applied

Visual Movement

• MOET - Scarlett is
turned to the right,
both arms are
pointing to the right,
the wine bottle and
its spray are pointed
to the right so
something important
must be happening
over on the right side
of the page.

16
 10/4/2017

Sample Websites that applied

Visual Movement

• NEW DEAL
FESTIVAL - a bright
yellow stripe that
moves you from the
upper left to the
lower right where the
navigation and
sponsors are
located.
• This is a good
example of simple
and bold movement.

Sample Websites that applied

Visual Movement

• STEPHEN CAVER - This site

uses shape, type and cold
contrast to guide you where
you need to go.
• Your eye naturally splits this
site into three areas because
the top layer has very low
contrast, the middle layer
builds a deeper contrast with
type, and the third layer uses
dark boxes for an attention
grabbing contrast.
• You eye can’t help move
directly south to the
navigation once this page
loads.

17
 10/4/2017

Sample Websites that applied

Visual Movement

• TEAM EXCELLENCE -
The charts and graphs of
the main images are
blatant pointers.
• The bright colors and bold
contrast instantly grab
your attention and then
move your eyeballs to the
upper right where the low
contrast navigation, login
and contact buttons are
hiding.

Sample Websites that applied

Visual Movement

• ST. ANDREWS - No
matter where your eye is
when the site loads, it
almost instantly shoots
right to the large brown
center stripe.
• In that stripe are a couple
little hidden arrows that
continue to guide your
eye to the right where
you’ll see the worship with
us message.

18
 10/4/2017

Pattern
The repetition of specific
visual elements such as a
unit of shape or form. A
method to organize surfaces
in a consistent regular
manner.

Pattern

19
 10/4/2017

Sample Websites with

Beautifully Patterned Backgrounds

• CAFÉ FRIDA –
uses lovely
pattern made up
of beautiful white
flowers that
adapt into the
rest of the layout
as you scroll.

Sample Websites with

Beautifully Patterned Backgrounds

• FOR BETTER
COFEE – uses
symmetrical
patterns

20
 10/4/2017

Sample Websites with

Beautifully Patterned Backgrounds

• LETTERS, INC.
– uses simple
line intricate
patterns

Sample Websites with

Beautifully Patterned Backgrounds

• GARBETT – features
a rich blue pattern
made up of transparent
dots.
• Naturally, as you scroll
down, each of the dot’s
content changes.
• It’s a great and simple
approach that can help
spice up an otherwise
bland pattern.

21
 10/4/2017

Sample Websites with

Beautifully Patterned Backgrounds

• MATT LUCKHURST
created a beautiful
pattern using the
letters in his name and
a few different fun
design elements.
• Normally, when we
think of patterns, we
tend to forget how
valuable letterforms
can be and the
different solutions they
might help you create.

Rhythm

Regular repetition of, or

alternation in elements
to create cohesiveness
and interest.

22
 10/4/2017

Rhythm

Rhythm

23
 10/4/2017

Rhythm

Rhythm

24
 10/4/2017

Sample Websites that incorporate

Rhythm in their Design

• HUGS FOR MONSTERS -

The grid of portfolio images
creates a clear and regular
rhythm.
• The pattern of colors at both
the top and bottom of the
page form another.
• These color patterns are both
located on a dark background
that also occurs in the middle
of the page as a horizontal
line.
• Taken together they create a
rhythm down the page.

Sample Websites that incorporate

Rhythm in their Design

• RULE OF THREE-
Regular rhythm can be
found in the 3 circles in
the services section, in
the grid of client logos,
and the circles and
general pattern of posts in
the blog section.
• As you scroll down the
page you encounter a
series of diagonal and
vertical lines that create
additional rhythm.

25
 10/4/2017

Sample Websites that incorporate

Rhythm in their Design

• SOUP AGENCY- displays

each of the 3 types of
rhythm.
• Several sections of the
page make use of regular
repeating circles.
• The Services section
uses different shapes with
regular spacing to create
a rhythm both flowing and
regular.

Proportion

Visual elements create

a sense of unity where
they relate well with
one another.

26
 10/4/2017

Proportion

Sample Websites with Design Proportions

• 404 BLOG - The
design itself is
visually
appealing,
provides calm
and supporting
color scheme and
has a nice
composition.

27
 10/4/2017

Sample Websites with Design Proportions

• The reason why the

layout looks almost
perfect although it
doesn’t stick to the
Divine proportion is the
simple fact that it
is balanced — both the
layout blocks and the
content blocks have the
same proportion.
• Hence the design
provides some sense of
closure and structural
harmony.

Sample Websites with Design Proportions

• DEMAND WARE -
Although the design
uses a number of
vibrant colors, it is
not noisy and seems
to be both simple
and clear.
• The navigation
options are clearly
visible and the
structure of the site
seems to be easy to
scan.

28
 10/4/2017

Sample Websites with Design Proportions

• Rule of Thirds in
use: two out of four
intersections of the
lines (pink blocks)
contain exactly the
information which
the company
wants its visitors to
see.

Variety

This uses several

design elements to
draw a viewer’s
attention.

29
 10/4/2017

Variety

Sample Websites with Beautifully presented

Content Variety

30
 10/4/2017

Sample Websites with Beautifully presented

Content Variety

Sample Websites with Beautifully presented

Content Variety

31
 10/4/2017

Sample Websites with Beautifully presented

Content Variety

Sample Websites with Beautifully presented

Content Variety

32
 10/4/2017

Sources:
• https://www.slideshare.net/richardmeriveles/imaging‐and‐design‐for‐online‐
environment‐73686519
• https://news.oneseocompany.com/2012/07/15/why‐google‐is‐the‐leading‐search‐
engine‐website_20120715740.html
• https://www.webdesignerdepot.com/2011/07/25‐examples‐of‐symmetry‐in‐web‐
design/
• https://econsultancy.com/blog/67155‐10‐eye‐popping‐websites‐that‐use‐stunning‐
colour‐contrast/
• https://tympanus.net/codrops/2011/10/08/25‐examples‐of‐emphasis‐applied‐in‐
web‐design/
• https://tympanus.net/codrops/2011/01/14/visual‐movement‐flow/
• https://designschool.canva.com/blog/website‐background‐pattern/
• http://vanseodesign.com/web‐design/rhythm‐examples/
• https://www.smashingmagazine.com/2008/05/applying‐divine‐proportion‐to‐web‐
design/
• https://www.dtelepathy.com/blog/inspiration/14‐beautiful‐content‐heavy‐websites‐
for‐inspiration

33