Web/Digital Design LSC 532 with Don Stanley

789 views
716 views

Published on

Today we talk about using frameworks for design and review how communicators need to approach web and digital marketing projects

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
789
On SlideShare
0
From Embeds
0
Number of Embeds
446
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web/Digital Design LSC 532 with Don Stanley

  1. 1. Web Design: Lecture 3The Design Process Demystified Don Stanley 3Rhino Media | UW-Madison www.3rhinomedia.com www.lsc.wisc.edu don@3rhinomedia.com 608 561 7097 DON STANLEY | @3rhinomedia | Spring 2013
  2. 2. 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
  3. 3. 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
  4. 4. Web DesignersMust Use Why? Image: from Picture Perfect Post via Flicker
  5. 5. UsersCan ControlSome of the Experience DON STANLEY | @3rhinomedia | Spring 2013
  6. 6. Browser Displays Higher 1024 x 768 800 x 600 Source: w3school.org DON STANLEY | @3rhinomedia | Spring 2013
  7. 7. The Challenge of Browsers
  8. 8. Browser usage Stats Opera, 2.1% Internet Safari, 4.2% Explorer, 14.7 % Chrome, 46.9 Firefox, 31.1% % Source: w3school.org
  9. 9. The Challenge of Devices
  10. 10. What can we do? DON STANLEY | @3rhinomedia | Spring 2013
  11. 11. What can we do?Use Systems DON STANLEY | @3rhinomedia | Spring 2013
  12. 12. DON STANLEY | @3rhinomedia | Spring 2013
  13. 13. 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
  14. 14. DON STANLEY | @3rhinomedia | Spring 2013
  15. 15. Working with Grids 960px DON STANLEY | @3rhinomedia | Spring 2013
  16. 16. Viewport DON STANLEY | @3rhinomedia | Spring 2013
  17. 17. Viewport
  18. 18. The Fold In Action
  19. 19. Strategies for the New Fold
  20. 20. Strategies for the New Fold
  21. 21. Strategies for the New Fold
  22. 22. Strategies for the New Fold
  23. 23. 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?

×