The document summarizes key points from a lecture on web design: - It discusses the 4 D's of the design process - Define, Discover, Develop, Deliver. - Web designers must design for different browsers, devices, and screen sizes. Systems like responsive grids can help make a design flexible for different formats. - The "fold" refers to what users initially see without scrolling. Designers must consider strategies like prioritizing key content above the fold. - Homework involves redesigning an interface called Prevention Speaks, considering questions from class and design concepts around using grids.

1. Web Design: Lecture 3
The Design Process Demystified
Don Stanley
3Rhino Media | UW-Madison
www.3rhinomedia.com
www.lsc.wisc.edu
don@3rhinomedia.com
608 561 7097
DON STANLEY | @3rhinomedia | Spring 2013

2. Homework Review
Begin thinking like a problem solver. What are the problems
with the Prevention Speaks Interface? Consider the questions
we discussed today.
Begin sketching out your ideas for the redesign
If you’d like, read the “blink test” article by HubSpot
DON STANLEY | @3rhinomedia | Spring 2013

4. What did we learn last time?
Defined Design. Design is _________________________
Started discussing the design process
What are the 4Ds of the design process?
We talked about how people use the web. How do we use it?
We spoke about design CRAP
C= and it does …
R= and it does …
A= and it does …
P= and it does …
DON STANLEY | @3rhinomedia | Spring 2013

5. Web Designers
Must Use
Why?
Image: from Picture Perfect Post via Flicker

6. Users
Can Control
Some of the Experience
DON STANLEY | @3rhinomedia | Spring 2013

7. Browser Displays
Higher
1024 x 768
800 x 600
Source: w3school.org
DON STANLEY | @3rhinomedia | Spring 2013

8. The Challenge of Browsers

9. Browser usage Stats
Opera, 2.1% Internet
Safari, 4.2% Explorer, 14.7
%
Chrome, 46.9 Firefox, 31.1%
%
Source: w3school.org

10. The Challenge of Devices

11. What can we do?
DON STANLEY | @3rhinomedia | Spring 2013

12. What can we do?
Use Systems
DON STANLEY | @3rhinomedia | Spring 2013

13. DON STANLEY | @3rhinomedia | Spring 2013

16. Working with Grids 960px
As pointed out on WebDesign.TutsPlus.Com, a grid helps because it:
• Provides a “framework” that’s designed to look good on all
monitors.
• Streamlines the design process by defining exact measurements.
• Reduces development time by providing pre-coded HTML/CSS.
• In a perfect world, it helps designers and developers
communicate better – smoothing out the process of moving from
Design to Coding
DON STANLEY | @3rhinomedia | Spring 2013

17. DON STANLEY | @3rhinomedia | Spring 2013

18. Working with Grids 960px
DON STANLEY | @3rhinomedia | Spring 2013

19. Viewport
DON STANLEY | @3rhinomedia | Spring 2013

20. Viewport

21. The Fold In Action

22. Strategies for the New Fold

23. Strategies for the New Fold

24. Strategies for the New Fold

25. Strategies for the New Fold

37. Homework for 1/31
Work on Prevention Speaks interface redesign
• Remember the questions
• Remember the design concepts (use the grid articles for tips)
• You can download paper templates here
http://www.raincreativelab.com/paperbrowser/
AN EXERCISE YOU CAN DO ON YOUR OWN
• List the key information points that visitors are likely seeking.Assign
values (1-10) according to their importance to the average visitor.
• Now, look at the actual design again.
• Assign values (1-10) according to the actual visual importance as
you see it in the live design.
• Consider: Does the expected importance match up with the actual
designed importance?