Today we cover how to plan out visual designs for the web and how to think about the challenges of all the devices users can access the web with.

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

2. Homework Review
Begin thinking like a problem solver. What are the problems
with the website you are doing to redesigned? Consider the
questions we discussed last class.
Begin sketching out your ideas for the redesign
If you’d like, read the “blink test” article by HubSpot
DON STANLEY | @3rhinomedia | uwLSC532

3. Websites that stink

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=
R=
A=
P=
and it does …
and it does …
and it does …
and it does …
DON STANLEY | @3rhinomedia | uwLSC532

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

6. Users
Can Control
Some of the Experience
www.wisc.edu/
DON STANLEY | @3rhinomedia | uwLSC532

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

8. The Challenge of Browsers

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

10. The Challenge of Devices

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

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

13. DON STANLEY | @3rhinomedia | uwLSC532

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

17. DON STANLEY | @3rhinomedia | uwLSC532

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

19. Viewport
DON STANLEY | @3rhinomedia | uwLSC532

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 next class
Work on your design 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/
http://sneakpeekit.com/browser-sketchsheets/
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?