chapter 1 class pp notes
DESCRIPTION
TRANSCRIPT
![Page 1: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/1.jpg)
Chapter 1: The 7 Components of a Website
Web Design & Development
Last Update: 1/27/12
![Page 2: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/2.jpg)
ESSENTIAL OUTCOMES1. 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
![Page 3: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/3.jpg)
What do we already know about elements on a webpage?
![Page 4: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/4.jpg)
Identify the 7 Components
1. Unity
2. Gestalt
3. Space
4. Dominance
5. Hierarchy
6. Balance
7. Color Theory
To last slide
![Page 5: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/5.jpg)
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
![Page 6: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/6.jpg)
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
![Page 7: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/7.jpg)
Example of Unitya) 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
![Page 8: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/8.jpg)
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
![Page 9: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/9.jpg)
a) Figure/Ground
• What do you see? What is figure (focus point) and what is ground (background)?
![Page 10: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/10.jpg)
b) Area
• Smaller of two overlapping objects is seen as figure. Larger is seen as ground
![Page 11: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/11.jpg)
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.
![Page 12: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/12.jpg)
d) Continuation (continuity)
• Lines or curves perceived to be more related than elements not on line or curve.
• Flow or a continuum
![Page 13: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/13.jpg)
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.
![Page 14: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/14.jpg)
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?
![Page 15: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/15.jpg)
g) Common Fate (Synchrony)
• Elements moving in same direction perceived as being more related than elements stationary or move in different directions.
![Page 16: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/16.jpg)
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
![Page 17: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/17.jpg)
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.
![Page 18: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/18.jpg)
White Space
• Good use of whitespace leads to cleaner & more professional design.
![Page 19: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/19.jpg)
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
![Page 20: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/20.jpg)
4. Dominance
• Object surrounded by whitespace dominates its immediate environment
![Page 21: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/21.jpg)
4. Dominance
• More visual weight = more dominance in element. • Add more visual weight to elements:
Size – larger elements carry more weightColor – 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.
![Page 22: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/22.jpg)
4. Dominance
![Page 23: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/23.jpg)
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
Secondary importance
Least importance
![Page 24: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/24.jpg)
• 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.
![Page 25: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/25.jpg)
• Which of the two designs is more inviting? Which will more likely be read? Which will more effectively communicate?
![Page 26: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/26.jpg)
6. Balance
![Page 27: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/27.jpg)
Balance
oDistance from axis will determine if design is balanced.
![Page 28: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/28.jpg)
BalanceoVisual weight affects balance:
Size –larger elements carry more weightColor: 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 spaceValue – Darker object more weight than lighter
objectWhitespace – Positive space weighs more than
negative space or whitespace
![Page 29: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/29.jpg)
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
![Page 30: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/30.jpg)
Balance
![Page 31: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/31.jpg)
Balance
• Would the home page feel as balanced if the coffee cup image was at the top? the bottom?
![Page 32: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/32.jpg)
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
![Page 33: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/33.jpg)
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.
![Page 34: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/34.jpg)
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
![Page 35: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/35.jpg)
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
![Page 36: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/36.jpg)
Use of Colora. 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
![Page 37: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/37.jpg)
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
![Page 38: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/38.jpg)
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
![Page 39: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/39.jpg)
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
![Page 40: Chapter 1 Class PP Notes](https://reader035.vdocuments.net/reader035/viewer/2022081414/54c7519a4a7959ce1a8b45a4/html5/thumbnails/40.jpg)
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