Chapter 1 Class PP Notes

Chapter 1: The 7
Components of a Website
Web Design & Development
Last Update: 1/27/12

ESSENTIAL OUTCOMES
1. Compare and Contrast the Seven Components of a website
by being able to:
 Identify and define the seven components
 Use the seven components when analyzing
websites
 Implement the concepts of the seven components
when creating their own websites
 Use inductive and deductive reasoning when
categorizing the seven components
 Create and write code using hexadecimal numbers
 Use the key terms in this chapter

What do we already know
about elements on a
webpage?

Identify the 7 Components
1. Unity
2. Gestalt
3. Space
4. Dominance
5. Hierarchy
6. Balance
7. Color Theory
To last slide

1. Unity
a) Elements work together
toward a common goal.
b) Communicate single
message or perhaps a
primary and secondary
message
c) Everything complements
key theme & concept &
serve functional purpose

Two Kinds:
a) Visual Unity: group
of elements all
aligned to a common
axis
b) Conceptual Unity:
objects might be
unified around the
concept of wealth

Example of Unity
a) Images, colors, style, etc.
conceptually related to
central idea
b) If theme is “openness”,
placing borders on web
page defeats the message
c) Relationship between
elements so strong that to
change anything would
hurt design.
d) Link to website & analyze based on
unity principle
e) Click here for next component

2. Gestalt Principles
a) Figure/ground
b) Area
c) Similarity
d) Continuation
e) Closure
f) Law of Focal Point
g) Common Fate
Idea of seeing
whole before parts
& even more the
whole becoming
more than the sum
of its parts
Back to
components

a) Figure/Ground
• What do you see? What is figure (focus point)
and what is ground (background)?

b) Area
• Smaller of two overlapping objects is seen as figure.
Larger is seen as ground

c) Similarity
• Things similar are perceived to be more related
than things that are dissimilar.
• Repetition of color, size, orientation, texture, font,
shape, etc. changes design elements so appear
more related.

d) Continuation (continuity)
• Lines or curves perceived to be more related than
elements not on line or curve.
• Flow or a continuum

e) Closure
• When looking at complex arrangement of individual
elements, tend to look for a single, recognizable pattern
• Fill in missing information to make for a single
recognizable pattern.

f) Law of Focal Point
• A point of interest, emphasis, or difference will
capture and hold viewer’s attention
• In picture below what do you notice first?

g) Common Fate (Synchrony)
• Elements moving in same direction perceived as
being more related than elements stationary or
move in different directions.

Summary of Gestalt
• Perception
someone gets from
looking at design
is ultimately what
is being
communicated
• Click on link to analyze
website & use Gestalt
principles
• Back to 3rd component

3. White Space
• Whitespace or negative space is space between
design elements.
• Macro level : space around design and large blocks
of empty space between elements.
• Micro level : space between two lines of text or
space between an image & its caption.

White Space
• Good use of whitespace leads to cleaner & more
professional design.

3. White Space
• Leave space around your design elements.
• Rule: Don’t’ jam or cram!
• Provide the user with “visual relief”
• Click image to go to website

4. Dominance
• Object surrounded by whitespace dominates its
immediate environment

4. Dominance
• More visual weight = more dominance in element.
• Add more visual weight to elements:
Size – larger elements carry more weight
Color – some colors weighing more than others. Red
seems to be heaviest while yellow seems to be lightest.
Density – Packing more elements into a given space,
gives more weight to that space.
Value – A darker object will have more weight than a
lighter object.
Whitespace – Positive space weighs more than
negative space or whitespace.

5. Visual hierarchy
• Organization of items into
different levels of relative
importance
 Is what I’m looking
for on this page?
 Where is it?
 How do I complete
my task?
Most important
Least
importance
Secondary
importance

• Compare two websites: which has levels of
hierarchies & which does not?
• Image on left has no hierarchy--user needs to do a
lot of work to determine if page is what they want.

• Which of the two designs is more inviting?
Which will more likely be read? Which will more
effectively communicate?

Balance
o Distance from axis will determine if design is
balanced.

Balance
o Visual weight affects balance:
Size –larger elements carry more weight
Color: some colors appear to weigh more than
others--red is heaviest while yellow seems is lightest.
Density – Packing more into given space gives more
weight to that space
Value – Darker object more weight than lighter
object
Whitespace – Positive space weighs more than
negative space or whitespace

Leonard’s Last Supper—balance
• Leonardo’s Last Supper great example of
symmetrical balance in art.
• For everything on left side of painting
there’s something of equal weight on right.
• Entire painting is balanced around central
figure of Jesus Christ, which makes perfect
sense given what the painting is about.
• See next slide for picture

Balance
• Would the
home page
feel as
balanced if the
coffee cup
image was at
the top? the
bottom?

7. Color & the Color Wheel
• In regards to hexadecimal colors:
a. #000000=black
b. #FFFFFF=white
c. #s run from 0-7
d. Alphabet runs from A-F
e. Instead of a 10 base, web colors
are 16 based
(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)
f. Makes a variety of color
combinations

Use of Color
a. Black & White:
 For formality and sophistication
 Black: reflects seriousness & authority; also read dark
and depressing--association with death by most
cultures.
 White: beacon of innocence and purity
 Black and white pairing is balanced and almost
universally aesthetically pleasing.
 Injected with a bit of another color it can create a
clean and effective color scheme for any website.

Use of Color
a. Red
 Too much red can be a complete disaster
 Small doses, red is a powerful color for web design
 Associated with blood, danger and sexuality
 Color can actually increase blood pressure and
stimulate users
 Use of good when there is a sense of urgency; eyes are
drawn to color
 Highlighting important titles, keywords, offers or
links
 Also associated with errors

Use of Color
a. Blue
 inherent sense of peace and tranquility—appears in
natural settings (sea, sky, etc.)
 has a calming effect on humans
 For web designers, bring a sense of comfort to a –
considered a “smart color”
 create a sense of trust and credibility
 often used for “Buy Now” and “Pay Here” action
buttons.
Next slide

Use of Color
a. Green
 Color is everywhere around us
 Mascot for anything that is environmentally friendly
 Easier on the eyes than other colors; may even have a
positive effect on vision
 Use for some things which could be harder to see
 Like blue, relaxing effect on people
 Common color for financial institutions--good color
for websites that seek to help others make money
 Effective color for relieving stress, and can be used in
calls-to-action, to prevent users from feeling any
decision-related anxiety

Use of Color
a. Most important
thing for any
designer to
remember is that
each color has an
inherent power that
can be utilized
wisely

Where to Begin Critiquing a Website
a. Inductive Reasoning:
we use particular facts
or evidence to infer a
general rule or
principle
b. In other words, we look
at individual pieces and
pulled them together to
make a inference or a
reasonable guess based
on these pieces

Where to Begin Critiquing a Website
a. Deductive
Reasoning: we start
with a general rule or
principle and from
there we draw our
conclusions
b. In other words, we
look at the whole and
then make a inference
or a reasonable guess
based on the breaking
down of the whole

That’s all folks.
Now its time to
evaluate a website of
our choosing using all
of the techniques we
have just reviewed.
End Show

Chapter 1 Class PP Notes

More Related Content

Viewers also liked

Similar to Chapter 1 Class PP Notes

More from cmurphysvhs

Recently uploaded

Chapter 1 Class PP Notes