Web Design: Lecture 2
Design as Problem Solving & Core Web Design Principles

Don Stanley
UW-Madison || 3rhinomedia
www.do...
What is Design?
Clutter and confusion are failures of design,
not attributes of information” -- Prof. Ed Tufte
• Problem S...
Let’s play

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

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

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

Problem So...
Why Study Design?
Vision trumps all other senses when it comes to our
brain. Our brain is highly attuned to the sense of v...
Interfaces Impact Experience
Interface design refers to what we see and interact
with. What we see has a huge influence on...
Interface Design, UX, How We
Use
Thinking Like a Human

Usability Expert Steve Krug says “Don’t Make Me Think”

Fact #1: We don’t read pages, we scan them
...
Thinking Like a Human

Usability Expert Steve Krug says “Don’t Make Me Think”

Fact #1: We don’t read pages, we scan them
...
Thinking Like a Human

Usability Expert Steve Krug says “Don’t Make Me Think”

Fact #1: We don’t read pages, we scan them
...
Think of the Blink Test
Reality
Design is a Planned Process
4 Phase Plan, the 4Ds:
1. Discovery
Design is a Planned Process
4 Phase Plan, the 4Ds:
1. Discovery

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

2. Design/Dictate

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

3. Develop

2. Design/Dictate

4. Deliver
Discovery: Most Important D
Discovery:

Questions to Consider
Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this
site? Sales? Contact...
Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this
site? Sales? Contact...
Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this
site? Sales? Contact...
Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this
site? Sales? Contact...
Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this
site? Sales? Contact...
Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte
CONTRAST - ...
Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte

CONTRAST -...
Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte

CONTRAST -...
Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte

CONTRAST -...
Design CRAP: Repetition
REPETITION - repeating the use of various elements such as color,
size, layout, typefaces, image s...
Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte

CONTRAST -...
Design CRAP: Alignment
ALIGNMENT - Alignment is another way of creating associations
between visual elements, which help u...
Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of
information” -- Ed Tufte

CONTRAST -...
Design CRAP: Contrast
Design CRAP: Proximity
PROXIMITY - Elements that are related should be visually
connected. Likewise, elements that are not...
Design CRAP: Proximity
PROXIMITY - Elements that are related should be visually connected.
Likewise, elements that are not...
About copy
Optimizr analyzes your web page or entire website and then transforms
convoluted table structures and tagless c...
Homework
Begin thinking like a problem solver. Find an interface to
redesign. Consider the questions we discussed today.
R...
Class 2: Setting the foundation for a successful website design
Class 2: Setting the foundation for a successful website design
Class 2: Setting the foundation for a successful website design
Class 2: Setting the foundation for a successful website design
Class 2: Setting the foundation for a successful website design
Class 2: Setting the foundation for a successful website design
Class 2: Setting the foundation for a successful website design
Upcoming SlideShare
Loading in...5
×

Class 2: Setting the foundation for a successful website design

742

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total Views
742
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Class 2: Setting the foundation for a successful website design"

  1. 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. 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. 3. Let’s play Let’s investigate
  4. 4. What is Design? Clutter and confusion are failures of design, not attributes of information” -- Prof. Ed Tufte
  5. 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. 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. 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. 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. 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. 10. Interface Design, UX, How We Use
  11. 11. 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
  12. 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 Fact #2: We don’t make optimal choices, we satisfice DON STANLEY | @3rhinomedia | Spring 2013
  13. 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 Fact #3: We don’t figure out how things work. We muddle through because it works enough. DON STANLEY | @3rhinomedia | Spring 2013
  14. 14. Think of the Blink Test
  15. 15. Reality
  16. 16. Design is a Planned Process 4 Phase Plan, the 4Ds: 1. Discovery
  17. 17. Design is a Planned Process 4 Phase Plan, the 4Ds: 1. Discovery 2. Design/Dictate
  18. 18. Design is a Planned Process 4 Phase Plan, the 4Ds: 1. Discovery 2. Design/Dictate 3. Develop
  19. 19. Design is a Planned Process 4 Phase Plan, the 4Ds: 1. Discovery 3. Develop 2. Design/Dictate 4. Deliver
  20. 20. Discovery: Most Important D
  21. 21. Discovery: Questions to Consider
  22. 22. 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?
  23. 23. 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?
  24. 24. 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?
  25. 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? 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.)
  26. 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? 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?
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 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. 31. 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?
  32. 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. 33. 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.
  34. 34. 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
  35. 35. Design CRAP: Contrast
  36. 36. 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.
  37. 37. 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.
  38. 38. 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 >>
  39. 39. 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
  1. A particular slide catching your eye?

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

×