Elements and Principles

of Design, as Applied to
Web Design
AKA - How to Design your Web
Pages and Sites in a Way the Eye
Likes to View Them
YES NO
Lines
• Lines should line up common elements, like buttons, pulldown
tabs, menu items, etc.
• Lines can actually form barriers between elements as well, like
the yellow line at the top of the Kodak site.
• They give a backbone and logic to the page. You can see
where to go and how to follow down the lines to get there.

X
YES NO
Shape (2D) vs. Form (3D)
• Most things on a webpage will be in 2d, like text, etc. However,
you can effectively add 3d elements for emphasis and effect.
• Don’t overuse 3D – it can become distracting, and detract from
your actual message.
• Logos, items of importance, etc. can look good in 3D, provided
they are in a colour palette compatible with other items on the
page, and that they are proportionately displayed.
Having just the one green 3D logo on the page draws attention
to it. If the designer uses that logo for something specific
throughout the rest of the page, it will make it a particularly
effective item, as clicking it consistently gets you a response
you need on the website.
If the link doesn’t work, picture the yellow star vibrating, and the heads
you see here coming and going, like the video says, “Like something
from Monty Python!” It’s distracting and doesn’t enhance the
navigation. An attempt at glam that is colour consistent, but that
accomplishes nothing from a design perspective.

X
YES NO
Colour/Tone
• Colour should never be a distraction on your page.
• You can use colour to emphasize something important through intensity or just
by using a stronger colour than the rest of the palette
• All colours should range from a common palette – for instance, the starting
photography, graphics, etc. – to maintain unity in the look.
• When in doubt, defaulting more into tones of the existing colours rather than
branching into entirely new and different colours will create a more unified
palette.
Contains the Red KODAK with the yellow underline to make the
name brand stand out. All other colours are a basic black,
white, with some shades of grey and blue to blend with the
majority of the photos and images posted on the site. Nice and
neutral to highlight the information and the photography.
Contains so many colours and highlighted textboxes that it’s
difficult to know where to even focus. Should I read the blue or
the yellow stuff first? Who owns this website? Why are there
shadows of images in the background instead of it being solid
black, especially with all those other colours? Overwhelming, and
the colours hinder the viewer deciding what gets priority.

X
YES NO
Texture
• Using a background or other items with texture can be effective,
if not overdone.
• Gradients and other backgrounds like you would find in
PowerPoint should be used like you’d use them well in
PowerPoint to display other items.
• The background should never become the focus.

Notice the soft gradient pattern that does bring some soft
texture to the page. It’s consistent with the colour palette, and
is no distraction. It enhances the logo at the top, as it stands
out better on the black background. Are all of the photographs
going to match this grey to black perfectly? Probably not, but at
least it won’t ever distract you from them.
Yes, this is available in PowerPoint. When would you ever use
it? When you want to completely distract your viewer from the
fact that your photos are bad and you have nothing worthwhile to
say. All it does is make the text disappear, along with the
photograph. I can’t even focus on the photo long enough to even
tell if it’s any good.

X
YES NO
Depth/Perspective and
Direction/Motion
• Is there some way to take your viewer “into” places in your webpage that you want
them to go? Depth or Motion can do that for you, if used correctly and if not
overused.
• Backgrounds that use perspective and depth are not necessarily good, especially if
they make it difficult to read your text or to follow your navigation.
• Just adding motion for the sake of there being action on the page doesn’t take you
anywhere productive.

We’ve already established that we don’t like the background 3D
effect. However, imagine a plain black background where you
could actually see that you are looking up his guitar to him…..
Suddenly the perspective and depth to that icon will lead you
into his main site, just like the text suggests to you. It creates
motion with the view it takes.
When you open this page, there’s a plane that is 2D that actually
flies across that sky, in addition to the two in the logos. It doesn’t
work because of that 2D/3D clash, plus it just looks like there is
all this stuff floating on a repeating “off into forever” sky. The
attempt to make you feel like you’re flying into that sky just fails
badly.

X
YES NO
Light
• Use light to highlight what’s important
• Use dark to recede into the background with more information, but it’s only
there if you want it
• Definitely draws the eye to the brightness
• Allows the viewer to focus on one thing at a time – very good for important
information
Once you go to this actual web site, clicking on an icon that isn’t
highlighted makes it bright so you can read its material and go
to its link. This makes it easy to focus on just what you’re
reading at the time. You can see other things in the
background, but they aren’t distracting you until you are ready
to look at them consciously.
Shiny light in the middle accomplishes nothing and looks like an
overexposed picture. It even makes it tough to read the text in
front of it because it is so close in intensity of colour.

X
YES NO
Mass
• Putting “weight” where you want it
• Packs the punch in the area you want emphasized.
• Decide on your intention, and your heaviest items should fulfill that intention. If it’s to advertise,
the ads should be the focus. If it’s to highlight your photos, they should be “weighty” and stand
out.
• Colour, proportion and intensity will help emphasize or deemphasize mass.


Kodak emphasizes photography and their brand name. The photos
are large and colourful, and the background is unimportant – kind of
like a mat within a good picture frame that is meant to emphasize the
photography or whatever information is on the page. Easy to see
what’s important and what’s not. Tough to miss that it’s Kodak’s
page, despite the lack of glam. Nicely understated.
Again, can you possibly pack any more material into one page?
Because there is so much “stuff”, it’s difficult to see where the
important information is. Weight would imply the upper bars because
of colour intensity and compactness, but really it’s just a bunch of
pictures. Tough to know what’s more important because it’s all so
equally proportionate in its “heaviness”.

X
YES NO
Use of Space
• Leaving a little space between sections is as good as using a line to show a division.
• Leaving no white space means there aren’t divisions, and the only way you know how to
navigate is with the lines.
• White space implies you have lots of room for everything you need to include, rather than
implying that you just can’t pack it all onto a page.
• More pages would serve a situation where you have too much to fit into one space.
Categorizing on the main page, linking to subsequent subheadings and leaving some space on
each to navigate clearly will help things feel less crowded.


Note the natural breaks. Even without the lines, you’d know
where each section begins and ends. It keeps things from
looking busy and crowded. You feel at ease looking around
because it is obvious where sections begin and end. You can
easily see titles and know categories.
Can you possibly pack any more material into one page? Is
there any breather here? You feel overwhelmed as to where to
even begin. Is every one of these a link? How can I tell which
category is which without reading reams and reams of small
print.

X
YES NO
Balance
• Looking for 50/50 division on the page, approximately
• Not all pages will use this – it’s just one tactic
• Can be used in just portions of the page, like in the banners at the top, etc.


Except for the navigation bar being heavier on the top left, this
is almost 50/50 balance. Nothing would be gained by text on
the right, as that isn’t really standard at most websites unless
it’s ads, which would detract in this case from the photography.
Doesn’t use balance of its columns. That alone might have
helped this page a bit, that and some actual white space and a
navigation that isn’t so packed. The banners do extend all the
way across, so that portion is balanced.

X
YES NO
Emphasis
• If you want something to stand out as being more
important, you can use one of the elements to do so
• Colour, intensity of tone, light, the mass of the item,
etc. can all bring attention to it and emphasize it.
The lightness of the item (light), it being slightly bigger (mass), it
moving towards you (direction) and it being in colour rather than
grey tones emphasizes what you are currently reading here.
This is an excellent use of several elements to keep you
focused on what’s important at the time at this site.
The emphasis of the colours here is misleading and doesn’t
direct you to the most important things quickly. The
inconsistency of the text fonts and sizes and bold vs. regular is
very misleading. It’s hard to see what’s really important here.

X
YES NO
Proportion
• Size is important in font, in graphics, etc.
• Proportion can apply to colour intensity as well as actual physical size of
items
• Things like bold colours or bolded font, underlines, italics, etc. should raise
the proportion of an item to upgrade its importance.
The size of the picture draws your eye first. The brightness and
size of the Kodak name gets second rate. After that is the black
bolded texts. Then the smaller texts and finally the blue texts.
The proportionate decrease in size and colour intensity is
relative to their importance in navigating the entire site.
The inconsistency of the text fonts and sizes and bold vs. regular
is very misleading. It’s hard to see what’s really important here.
There is random underlining, random bolding, and random
selection in italics, etc. Those are all font tactics that should
proportionately draw your attention more, but when you use them
all together, which is actually MOST important?

X
YES NO
Repetition
• Creates consistency in the website and even within individual pages
• That’s usually accomplished with CSS (Cascading Style Sheets) which is
the overall template that you apply to keep that consistent look to the site. It
puts banner and links and menus and other “constants” all into consistent
areas, and establishes default fonts in terms of colour, size, etc. to ensure
consistency.
When you navigate around the Kodak website, almost all of the
pages look the same in their basic outline and formatting. The
repetition means that as you are going from page to page, you
know what to do next.
Notice that even the icons for the menu navigation aren’t a
consistent colour, they don’t line up, and it’s just really
haphazard. The font styles and colours are different, and wow is
this baffling on what’s important, what you should do, etc. It’s
actually a site selling a website “builder”. I wouldn’t have bought
it!

X
YES NO
Unity
• Again, creates consistency in the website and even within individual pages
• That’s usually accomplished with CSS (Cascading Style Sheets) which is the overall
template that you apply to keep that consistent look to the site. It puts banner and
links and menus and other “constants” all into consistent areas, and establishes
default fonts in terms of colour, size, etc. to ensure consistency.
• The overall look says that it’s all one nice package with lots of pieces that logically fit.
When you navigate around the Kodak website, almost all of the
pages look the same in their basic outline and formatting. The
repetition means that it also has unity. You’d know if you has hit
a link that took you off this site, as it just wouldn’t look the
same.
There is not one thing I can see here that is unified, except that
the font for the main text is Times New Roman and it looks like
Arial for the icons on the left. The colours clash, the fonts clash,
the images are irrelevant and nothing even lines up nicely.
Again, this is selling something to build a webpage that looks like
this? No thank you!

X
YES NO
Contrast
• If you want something to stand out as being more important, you can use
one of the elements to do so
• The difference in the colour, intensity of tone, light vs. dark, the mass of one
item compared to another, etc. can all bring attention to it and emphasize it
by making that one important thing look different from the others.
The lightness of the item (light), it being slightly bigger (mass), it
moving towards you (direction) and it being in colour rather than
grey tones are all contrasting techniques that make the one
item you are reading stand out.
The contrast of the blue and of the yellow on the black should
draw attention to them, but it only does so for a second because
of all the other jarring colour clashes. It’s so overused here that
it loses its effect entirely.

X
YES NO
Harmony
• There should be an overall harmonious feel to a web page and site, and
colour and consistency of items will really help with this.
• Selecting colours and tones from a specific palette will keep you consistent
so that all graphics and images and text meshes together. Contrasting
items will then stand out, as they should, if overall harmony is strong.
Note that the background colours are all in the same colour
palette but just in greyer tones than the one being emphasized.
Each screen will feel like it fits with the strength and intensity,
and the fonts, etc. will match, making it all feel like someone
thought things through before they put it onto the page. If it’s
highlighted somehow with contrast, I will know it’s important.
Nothing harmonious anywhere here. Enough said.

X
YES NO
Proximity
• Web sites are great places for placing like objects together. Menus should
always go in consistent spots so your viewers can get around your site
easily.
• Links should always be in consistent areas and look consistent in font size,
shape, etc. so that they fit with each other and are easy to find as a group.
There are groupings of icons in several places, making it easy
for a viewer to find their way around and to get where they want
to quickly. Like items go with like items, but away from ones
where they don’t have anything in common.
Nothing that belongs together is placed together. I wouldn’t
know where to start for finding my way around and would
probably leave before I got bored trying to figure out what is
where.

X
There are groupings of icons in several places, making it easy
for a viewer to find their way around and to get where they want
to quickly. Like items go with like items, but away from ones
where they don’t have anything in common.
YES NO
Variety
• The variety in a website will emphasize differences, provided you’ve kept the rest of
the site navigation, etc. consistent.
• Start with consistency in the important items that you want to have recede into the
background. Things like navigation, menus, pulldowns, etc. should all be
painstakingly consistent. Then the contrast between them and the variety of your
interesting items (your actual details and information) will make them stand out
sharply.
Every picture and screen you go to in this site has one item
different in this area. Because all other details are consistent,
this one difference is really the important detail! The rest fades
into the background, making you focus on the details of the
photography. As you should, at the Kodak site. They’ve placed
their consistency and variety in perfect balance.
Start with the consistency and then consciously introduce variety
only where you need to for emphasize. It’s easy to overuse, as
is done here, so don’t get carried away with it or it loses its
impact.

X
And all of the best web
sites…..
Combine more than one
element and principle so
well, you would have a
hard time saying if they
are a better example of
either……
Which Elements and
Principles are applied here?
Elements:
• Line (outlines + straight lines down and across
columns)
• Shape (rectangles and the polygon hanging tabs)
• Colour (contrasting orange and blue)
• Mass (font size and bolding)
• Tone and value (using the paler vs. darker tones and
different values within orange and blue to make
some things recede and others stand out)
• Space (use of white space between boxes and
effective use within boxes)
Principles:
• Balance (about 50/50 on the page divided with a
vertical line)
• Emphasis (bold vs. regular font)
• Repetition (all tabs are similar)
• Unity (within individual boxes, there is high colour
and font unity)
• Contrast (orange and blue are on opposite sides of
the colour wheel, so they are pitted against each
others here)
• Proximity(like items are with like items)
• Variety (in the ads on the right. Definitely draws the
eye so you would probably pay for their advertising
space well)
Which Elements and Principles are
applied in our own web site for
MHHS?
Elements:
• Line (outlines + straight lines down and across
columns)
• Shape (rectangles and the news squares)
• Colour (many banners colour matched to green of
page)
• Mass (images for new items stand out because of size)
• Space (use of white space between boxes and
effective use within boxes)
Principles:
• Balance (about 50/50 on the page divided with a
vertical line)
• Emphasis (bold vs. underlined font for links)
• Repetition (all tabs are similar, and that’s consistent
with many in the entire district)
• Unity (within individual boxes, there is high colour and
font unity)
• Contrast (the big difference between the news items
and the rest makes them stand out)
• Proximity(like items are with like items)
Other Resources?
• Visit the following websites that discuss these design tips and
others to help you to visualize how to best create your website:
– http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-
for-good-web-design/