View
468
Download
2
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
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
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
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
Web Designers Must Use
Image: from Picture Perfect Post via Flicker
Why?
Users Can ControlSome of the Experiencewww.wisc.edu/
DON STANLEY | @3rhinomedia | uwLSC532
Browser Displays
Higher1024 x 768800 x 600
DON STANLEY | @3rhinomedia | uwLSC532
Source: w3school.org
The Challenge of Browsers
Browser usage StatsIn-ter-net Ex-plorer,
14.7%
Firefox, 31.1%Chrome, 46.9%
Safari, 4.2% Opera, 2.1%
Source: w3school.org
The Challenge of Devices
What can we do?
DON STANLEY | @3rhinomedia | uwLSC532
What can we do?
Use Systems
DON STANLEY | @3rhinomedia | uwLSC532
DON STANLEY | @3rhinomedia | uwLSC532
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
DON STANLEY | @3rhinomedia | uwLSC532
Working with Grids 960px
DON STANLEY | @3rhinomedia | uwLSC532
Viewport
DON STANLEY | @3rhinomedia | uwLSC532
Viewport
The Fold In Action
Strategies for the New Fold
Strategies for the New Fold
Strategies for the New Fold
Strategies for the New Fold
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?
Recommended