web/digital design lsc 532 with don stanley
DESCRIPTION
Today we talk about using frameworks for design and review how communicators need to approach web and digital marketing projectsTRANSCRIPT
Web Design: Lecture 3The Design Process Demystified
Don Stanley 3Rhino Media | UW-Madison [email protected] 561 7097
DON STANLEY | @3rhinomedia | Spring 2013
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
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 | Spring 2013
Web Designers Must Use
Image: from Picture Perfect Post via Flicker
Why?
Users Can ControlSome of the Experience
DON STANLEY | @3rhinomedia | Spring 2013
Browser Displays
Higher1024 x 768800 x 600
DON STANLEY | @3rhinomedia | Spring 2013
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 | Spring 2013
What can we do?
Use Systems
DON STANLEY | @3rhinomedia | Spring 2013
DON STANLEY | @3rhinomedia | Spring 2013
Working with Grids 960px
DON STANLEY | @3rhinomedia | Spring 2013
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
Working with Grids 960px
DON STANLEY | @3rhinomedia | Spring 2013
Viewport
DON STANLEY | @3rhinomedia | Spring 2013
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 1/31Work 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?