Chapter 1: The 7 Components of a Website

Web Design & Development

Last 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 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 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

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 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.

4. Dominance

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

• 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?

6. Balance

Balance

oDistance from axis will determine if design is balanced.

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

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

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 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 Color

a. 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 to evaluate a website of our choosing using all of the techniques we have just reviewed.

End Show