Don Stanley's Web Design 101 LSC 532 lecture 3

731 views

Published on

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.

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

  • Be the first to like this

No Downloads
Views
Total views
731
On SlideShare
0
From Embeds
0
Number of Embeds
397
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Don Stanley's Web Design 101 LSC 532 lecture 3

  1. 1. 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
  2. 2. 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
  3. 3. Websites that stink
  4. 4. 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= R= A= P= and it does … and it does … and it does … and it does … DON STANLEY | @3rhinomedia | uwLSC532
  5. 5. Web Designers Must Use Why? Image: from Picture Perfect Post via Flicker
  6. 6. Users Can Control Some of the Experience www.wisc.edu/ DON STANLEY | @3rhinomedia | uwLSC532
  7. 7. Browser Displays Higher 1024 x 768 800 x 600 Source: w3school.org DON STANLEY | @3rhinomedia | uwLSC532
  8. 8. The Challenge of Browsers
  9. 9. Browser usage Stats Opera, 2.1% Safari, 4.2% Chrome, 46.9 % Internet Explorer, 14.7 % Firefox, 31.1% Source: w3school.org
  10. 10. The Challenge of Devices
  11. 11. What can we do? DON STANLEY | @3rhinomedia | uwLSC532
  12. 12. What can we do? Use Systems DON STANLEY | @3rhinomedia | uwLSC532
  13. 13. DON STANLEY | @3rhinomedia | uwLSC532
  14. 14. Working with Grids 960px 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
  15. 15. DON STANLEY | @3rhinomedia | uwLSC532
  16. 16. Working with Grids 960px DON STANLEY | @3rhinomedia | uwLSC532
  17. 17. Viewport DON STANLEY | @3rhinomedia | uwLSC532
  18. 18. Viewport
  19. 19. The Fold In Action
  20. 20. Strategies for the New Fold
  21. 21. Strategies for the New Fold
  22. 22. Strategies for the New Fold
  23. 23. Strategies for the New Fold
  24. 24. Homework for next class Work 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?

×