![Page 1: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/1.jpg)
Web Design: Lecture 3
Design as Problem Solving & Designing with Grids
Don Stanley UW-Madison || 3rhinomedia
www.donstanleyteaches.com
@3rhinomedia
DON STANLEY | @3rhinomedia | #uwlsc532
![Page 2: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/2.jpg)
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
![Page 4: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/4.jpg)
What did we learn last time?
Defined Design. Design is _________________________
Started discussing the design processWhat are the 4Ds of the design process?
We talked about how people use the web. How do we use it?
We spoke about design CRAPC= and it does …R= and it does …A= and it does …P= and it does …
DON STANLEY | @3rhinomedia | uwLSC532
![Page 5: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/5.jpg)
Web Designers Must Use
Image: from Picture Perfect Post via Flicker
Why?
![Page 6: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/6.jpg)
Users Can ControlSome of the Experiencewww.wisc.edu/
DON STANLEY | @3rhinomedia | uwLSC532
![Page 7: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/7.jpg)
Browser Displays
Higher1024 x 768800 x 600
DON STANLEY | @3rhinomedia | uwLSC532
Source: w3school.org
![Page 8: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/8.jpg)
The Challenge of Browsers
![Page 9: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/9.jpg)
Browser usage StatsIn-ter-net Ex-plorer,
14.7%
Firefox, 31.1%Chrome, 46.9%
Safari, 4.2% Opera, 2.1%
Source: w3school.org
![Page 10: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/10.jpg)
The Challenge of Devices
![Page 11: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/11.jpg)
What can we do?
DON STANLEY | @3rhinomedia | uwLSC532
![Page 12: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/12.jpg)
What can we do?
Use Systems
DON STANLEY | @3rhinomedia | uwLSC532
![Page 13: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/13.jpg)
DON STANLEY | @3rhinomedia | uwLSC532
![Page 14: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/14.jpg)
![Page 15: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/15.jpg)
![Page 16: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/16.jpg)
Working with Grids 960px
DON STANLEY | @3rhinomedia | uwLSC532
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
![Page 17: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/17.jpg)
DON STANLEY | @3rhinomedia | uwLSC532
![Page 18: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/18.jpg)
Working with Grids 960px
DON STANLEY | @3rhinomedia | uwLSC532
![Page 19: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/19.jpg)
Viewport
DON STANLEY | @3rhinomedia | uwLSC532
![Page 20: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/20.jpg)
Viewport
![Page 21: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/21.jpg)
The Fold In Action
![Page 22: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/22.jpg)
Strategies for the New Fold
![Page 23: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/23.jpg)
Strategies for the New Fold
![Page 24: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/24.jpg)
Strategies for the New Fold
![Page 25: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/25.jpg)
Strategies for the New Fold
![Page 26: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/26.jpg)
![Page 27: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/27.jpg)
![Page 28: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/28.jpg)
![Page 29: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/29.jpg)
![Page 30: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/30.jpg)
![Page 31: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/31.jpg)
![Page 32: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/32.jpg)
![Page 33: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/33.jpg)
![Page 34: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/34.jpg)
![Page 35: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/35.jpg)
![Page 36: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/36.jpg)
![Page 37: Don Stanley's Web Design 101 LSC 532 lecture 3](https://reader036.vdocument.in/reader036/viewer/2022070303/54b627334a7959b92e8b4689/html5/thumbnails/37.jpg)
Homework for next classWork 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?