Don Stanley's Web Design Course at UW-Madison, Class 2

1. Web Design: Lecture 2
Design as Problem Solving & Core Web Design Principles
Don Stanley
UW-Madison || 3rhinomedia
www.donstanleyteaches.com
dtstanley@wisc.edu
@3rhinomedia
DON STANLEY | @3rhinomedia | #uwlsc532

2. What is Design?
Clutter and confusion are failures of design,
not attributes of information” -- Prof. Ed Tufte
• Problem Solving/Sense Making
• DESIGN = Communication

3. Let’s play
Let’s investigate

4. What is Design?
Clutter and confusion are failures of design,
not attributes of information” -- Prof. Ed Tufte

5. What is Design?
Clutter and confusion are failures of design,
not attributes of information” -- Prof. Ed Tufte
Problem Solving/Sense Making
DESIGN = Communication

6. What is Design?
Clutter and confusion are failures of design,
not attributes of information” -- Prof. Ed Tufte
Problem Solving/Sense Making
DESIGN = Communication

7. What is Design?
Clutter and confusion are failures of design,
not attributes of information” -- Prof. Ed Tufte
Problem Solving/Sense Making
DESIGN = Communication

8. Why Study Design?
Vision trumps all other senses when it comes to our
brain. Our brain is highly attuned to the sense of vision.
Recognition and recall soar with pictures. According to
John Medina, Ph.D., if we hear a piece of
information, three days later we will remember 10% of it.
Add a picture and you will remember 65%!

9. Interfaces Impact Experience
Interface design refers to what we see and interact
with. What we see has a huge influence on our
experience (Don Norman, Ph.D.)
User Experience Our experience determines if we
will interact with a product or tool. And we have
choices.
Consider these two text blocks …

10. Interface Design, UX, How We
Use

12. Thinking Like a Human
Usability Expert Steve Krug says “Don’t Make Me Think”
Fact #1: We don’t read pages, we scan them
DON STANLEY | @3rhinomedia | Spring 2013

13. Thinking Like a Human
Usability Expert Steve Krug says “Don’t Make Me Think”
Fact #1: We don’t read pages, we scan them
Fact #2: We don’t make optimal choices, we
satisfice
DON STANLEY | @3rhinomedia | Spring 2013

14. Thinking Like a Human
Usability Expert Steve Krug says “Don’t Make Me Think”
Fact #1: We don’t read pages, we scan them
Fact #2: We don’t make optimal choices, we
satisfice
Fact #3: We don’t figure out how things work. We
muddle through because it works enough.
DON STANLEY | @3rhinomedia | Spring 2013

16. Think of the Blink Test

17. Reality

18. Design is a Planned Process
4 Phase Plan, the 4Ds:
1. Discovery

19. Design is a Planned Process
4 Phase Plan, the 4Ds:
1. Discovery
2. Design/Dictate

20. Design is a Planned Process
4 Phase Plan, the 4Ds:
1. Discovery
2. Design/Dictate
3. Develop

21. Design is a Planned Process
4 Phase Plan, the 4Ds:
1. Discovery
3. Develop
2. Design/Dictate
4. Deliver

22. Discovery: Most Important D

24. Discovery:
Questions to Consider

25. Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this
site? Sales? Contacts? Build Audience? Thought Leader? Build Brand?

26. Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this
site? Sales? Contacts? Build Audience? Thought Leader? Build Brand?
KEY AUDIENCE: Please list your audiences. Who is the most critical
audience you need to connect with? Please describe the most important
visitors? How often are they online? What do they use the web for?
Connections?

27. Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this
site? Sales? Contacts? Build Audience? Thought Leader? Build Brand?
KEY AUDIENCE: Please list your audiences. Who is the most critical
audience you need to connect with? Please describe the most important
visitors? How often are they online? What do they use the web for?
Connections?
PROBLEM SOLVING: What problem does your audience solve by coming
to your site? What do they get?

28. Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this
site? Sales? Contacts? Build Audience? Thought Leader? Build Brand?
KEY AUDIENCE: Please list your audiences. Who is the most critical
audience you need to connect with? Please describe the most important
visitors? How often are they online? What do they use the web for?
Connections?
PROBLEM SOLVING: What problem does your audience solve by coming
to your site? What do they get?
ACTIONS: What activities do they need to take to achieve their goals?
(watch a video, sign up for email, download something, etc.)

29. Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this
site? Sales? Contacts? Build Audience? Thought Leader? Build Brand?
KEY AUDIENCE: Please list your audiences. Who is the most critical
audience you need to connect with? Please describe the most important
visitors? How often are they online? What do they use the web for?
Connections?
PROBLEM SOLVING: What problem does your audience solve by coming
to your site? What do they get?
ACTIONS: What activities do they need to take to achieve their goals?
(watch a video, sign up for email, download something, etc.)
BUILD AUDIENCE: What is the best way to share this with your key
audience? How do you promote your site?

30. Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size,
shape,
It guides the users eye, swiftly and effortlessly
It differentiates elements
It brings out dominant elements
It mutes lesser elements
It creates dynamism
Think google.com

31. Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size, shape,
It guides the users eye, swiftly and effortlessly
It differentiates elements
It brings out dominant elements
It mutes lesser elements
It creates dynamism
Think google.com

32. Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size, shape,
It guides the users eye, swiftly and effortlessly
It differentiates elements
It brings out dominant elements
It mutes lesser elements
It creates dynamism
Think google.com

33. Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size, shape,
It guides the users eye, swiftly and effortlessly
It differentiates elements
It brings out dominant elements
It mutes lesser elements
It creates dynamism
Think google.com

34. Design CRAP: Repetition
REPETITION - repeating the use of various elements such as color,
size, layout, typefaces, image styles to convey meaning. How
does this apply to navigation? Headers? Multiple pages?

35. Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size, shape,
It guides the users eye, swiftly and effortlessly
It differentiates elements
It brings out dominant elements
It mutes lesser elements
It creates dynamism
Think google.com

36. Design CRAP: Alignment
ALIGNMENT - Alignment is another way of creating associations
between visual elements, which help users quickly understand
the relationships of objects on a page.

37. Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size, shape,
It guides the users eye, swiftly and effortlessly
It differentiates elements
It brings out dominant elements
It mutes lesser elements
It creates dynamism
Think google.com

38. Design CRAP: Contrast

39. Design CRAP: Proximity
PROXIMITY - Elements that are related should be visually
connected. Likewise, elements that are not related should be
visually separated. Use whitespace, colors, backgrounds, etc.
Let’s look at an example of the principles in action.

40. Design CRAP: Proximity
PROXIMITY - Elements that are related should be visually connected.
Likewise, elements that are not related should be visually
separated.Use whitespace, colors, backgrounds, etc.

41. About copy
Optimizr analyzes your web page or entire website and then transforms
convoluted table structures and tagless content into lightweight, CSS
positioned div layouts and semantic markup. It’s 2.0-licious!
One-click Optimizing! Optimizr’s functions are automatic and require no
knowledge of html or css.
Registration copy
Create an account >>
Individual Level
For individual users with one static website.
Learn more >>
Pro Level
For individual users with multiple static websites.
Learn more >>
Enterprise Level
For users with CMS-driven websites.
Learn more >>

46. Homework
Begin thinking like a problem solver. Find an interface to
redesign. Consider the questions we discussed today.
Read Chapter 18 from the course text
Begin sketching out your ideas for the redesign
Next Class, we will talk about Grid Design, the Design Process
and Anatomy of Good Design.
If you’d like, read the “blink test” article by HubSpot