Web Design: Lecture 3The Design Process Demystified Don Stanley 3Rhino Media | UW-Madison www.3rhinomedia.com www.lsc.wisc.edu email@example.com 608 561 7097 DON STANLEY | @3rhinomedia | Spring 2013
Homework ReviewBegin thinking like a problem solver. What are the problemswith the Prevention Speaks Interface? Consider the questionswe discussed today.Begin sketching out your ideas for the redesignIf 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 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
Web DesignersMust Use Why? Image: from Picture Perfect Post via Flicker
UsersCan ControlSome of the Experience DON STANLEY | @3rhinomedia | Spring 2013
Browser Displays Higher 1024 x 768 800 x 600 Source: w3school.org DON STANLEY | @3rhinomedia | Spring 2013
Working with Grids 960pxAs 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
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?