Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
WDD Chapter 1 class pp notes
1. Chapter 1: The 7
Components of a Website
Web Design & Development
Last Update: 1/27/12
2. 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
3. What do we already know
about elements on a
webpage?
4. Identify the 7 Components
1. Unity
2. Gestalt
3. Space
4. Dominance
5. Hierarchy
6. Balance
7. Color Theory
To last slide
5. 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
6. 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
7. 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
8. 2. Gestalt Principles
a) Figure/ground Idea of seeing
b) Area whole before parts
c) Similarity & even more the
d) Continuation whole becoming
e) Closure more than the sum
f) Law of Focal Point of its parts
g) Common Fate
Back to
components
9. a) Figure/Ground
• What do you see? What is figure (focus point)
and what is ground (background)?
10. b) Area
• Smaller of two overlapping objects is seen as figure.
Larger is seen as ground
11. 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.
12. d) Continuation (continuity)
• Lines or curves perceived to be more related than
elements not on line or curve.
• Flow or a continuum
13. 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.
14. 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?
15. g) Common Fate (Synchrony)
• Elements moving in same direction perceived as
being more related than elements stationary or
move in different directions.
16. 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
17. 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.
18. White Space
• Good use of whitespace leads to cleaner & more
professional design.
19. 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
21. 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.
23. 5. Visual hierarchy
• Organization of items into
different levels of relative
importance
Is what I’m looking
for on this page?
Where is it? Most important
How do I complete
my task? Secondary
importance
Least
importance
24. • 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.
25. • Which of the two designs is more inviting?
Which will more likely be read? Which will more
effectively communicate?
28. 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
29. 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
31. Balance
• Would the
home page
feel as
balanced if the
coffee cup
image was at
the top? the
bottom?
32. 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
33. 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.
34. 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
35. 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
36. 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
37. 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
38. 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