Chapter 1: The 7 Components of a WebsiteWeb Design & DevelopmentLast Update: 1/27/12
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
What do we already knowabout elements on awebpage?
Identify the 7 Components1. Unity2. Gestalt3. Space4. Dominance5. Hierarchy6. Balance7. Color Theory To last slide
1. Unitya) Elements work together toward a common goal.b) Communicate single message or perhaps a primary and secondary messagec) Everything complements key theme & concept & serve functional purpose
Two Kinds:a) Visual Unity: group of elements all aligned to a common axisb) Conceptual Unity: objects might be unified around the concept of wealth
Example of Unitya) Images, colors, style, etc. conceptually related to central ideab) If theme is “openness”, placing borders on web page defeats the messagec) Relationship between elements so strong that to change anything would hurt design.d) Link to website & analyze based on unity principlee) Click here for next component
2. Gestalt Principlesa) Figure/ground Idea of seeingb) Area whole before partsc) Similarity & even more thed) Continuation whole becominge) Closure more than the sumf) Law of Focal Point of its partsg) Common Fate 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? Most important How do I complete my task? Secondary importance Least 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?
Balanceo Distance from axis will determine if design is balanced.
Balanceo 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 Colora. 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 Colora. 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 Colora. 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 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
Use of Colora. Most important thing for any designer to remember is that each color has an inherent power that can be utilized wisely
That’s all folks. Now its time toevaluate a website ofour choosing using all of the techniques we have just reviewed. End Show
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.