0
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 s...
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
...
Two Kinds:
a) Visual Unity: group
of elements all
aligned to a common
axis
b) Conceptual Unity:
objects might be
unified a...
Example of Unity
a) Images, colors, style, etc.
conceptually related to
central idea
b) If theme is “openness”,
placing bo...
2. Gestalt Principles
a) Figure/ground
b) Area
c) Similarity
d) Continuation
e) Closure
f) Law of Focal Point
g) Common Fa...
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, si...
d) Continuation (continuity)
• Lines or curves perceived to be more related than
elements not on line or curve.
• Flow or ...
e) Closure
• When looking at complex arrangement of individual
elements, tend to look 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...
g) Common Fate (Synchrony)
• Elements moving in same direction perceived as
being more related than elements stationary or...
Summary of Gestalt
• Perception
someone gets from
looking at design
is ultimately what
is being
communicated
• Click on li...
3. White Space
• Whitespace or negative space is space between
design elements.
• Macro level : space around design and la...
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 reli...
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 elemen...
4. Dominance
5. Visual hierarchy
• Organization of items into
different levels of relative
importance
 Is what I’m looking
for on this...
• Compare two websites: which has levels of
hierarchies & which does not?
• Image on left has no hierarchy--user needs to ...
• Which of the two designs is more inviting?
Which will more likely be read? Which will more
effectively communicate?
6. Balance
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...
Leonard’s Last Supper—balance
• Leonardo’s Last Supper great example of
symmetrical balance in art.
• For everything on le...
Balance
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. Alp...
Use of Color
a. Black & White:
 For formality and sophistication
 Black: reflects seriousness & authority; also read dar...
Use of Color
a. Red
 Too much red can be a complete disaster
 Small doses, red is a powerful color for web design
 Asso...
Use of Color
a. Blue
 inherent sense of peace and tranquility—appears in
natural settings (sea, sky, etc.)
 has a calmin...
Use of Color
a. Green
 Color is everywhere around us
 Mascot for anything that is environmentally friendly
 Easier on t...
Use of Color
a. Most important
thing for any
designer to
remember is that
each color has an
inherent power that
can be uti...
Where to Begin Critiquing a Website
a. Inductive Reasoning:
we use particular facts
or evidence to infer a
general rule or...
Where to Begin Critiquing a Website
a. Deductive
Reasoning: we start
with a general rule or
principle and from
there we dr...
That’s all folks.
Now its time to
evaluate a website of
our choosing using all
of the techniques we
have just reviewed.
En...
Upcoming SlideShare
Loading in...5
×

Chapter 1 Class PP Notes

808

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
808
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Chapter 1 Class PP Notes"

  1. 1. Chapter 1: The 7 Components of a Website Web Design & Development Last Update: 1/27/12
  2. 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. 3. What do we already know about elements on a webpage?
  4. 4. Identify the 7 Components 1. Unity 2. Gestalt 3. Space 4. Dominance 5. Hierarchy 6. Balance 7. Color Theory To last slide
  5. 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. 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. 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. 8. 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
  9. 9. a) Figure/Ground • What do you see? What is figure (focus point) and what is ground (background)?
  10. 10. b) Area • Smaller of two overlapping objects is seen as figure. Larger is seen as ground
  11. 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. 12. d) Continuation (continuity) • Lines or curves perceived to be more related than elements not on line or curve. • Flow or a continuum
  13. 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. 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. 15. g) Common Fate (Synchrony) • Elements moving in same direction perceived as being more related than elements stationary or move in different directions.
  16. 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. 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. 18. White Space • Good use of whitespace leads to cleaner & more professional design.
  19. 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
  20. 20. 4. Dominance • Object surrounded by whitespace dominates its immediate environment
  21. 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.
  22. 22. 4. Dominance
  23. 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?  How do I complete my task? Most important Least importance Secondary importance
  24. 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. 25. • Which of the two designs is more inviting? Which will more likely be read? Which will more effectively communicate?
  26. 26. 6. Balance
  27. 27. Balance o Distance from axis will determine if design is balanced.
  28. 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. 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
  30. 30. Balance
  31. 31. Balance • Would the home page feel as balanced if the coffee cup image was at the top? the bottom?
  32. 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. 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. 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. 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. 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. 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. 38. 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
  39. 39. 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
  40. 40. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×