Web Design Core Concepts

688 views
576 views

Published on

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
688
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Design Core Concepts

  1. 1. Web Design: Core ConceptsDesign as Problem Solving & Core Design Principles Don Stanley 3Rhino Media | UW-Madison www.3rhinomedia.com don@3rhinomedia.com 608 561 7097 DON STANLEY | @3rhinomedia | Spring 2013
  2. 2. What is Design? Clutter and confusion are failures of design, not attributes of information” -- Prof. Ed Tufte DON STANLEY | @3rhinomedia | Spring 2013
  3. 3. What is Design? Clutter and confusion are failures of design, not attributes of information” -- Prof. Ed Tufte Problem Solving/Sense Making DESIGN = Communication DON STANLEY | @3rhinomedia | Spring 2013
  4. 4. What is Design? Clutter and confusion are failures of design, not attributes of information” -- Prof. Ed Tufte Problem Solving/Sense Making DESIGN = Communication DON STANLEY | @3rhinomedia | Spring 2013
  5. 5. Why Study Design? Vision trumps all other senses when it comes to our brain. Our brain is highly attuned to the sense of vision. Recognition and recall soar with pictures. According to John Medina, Ph.D., if we hear a piece of information, three days later we will remember 10% of it. Add a picture and you will remember 65%! DON STANLEY | @3rhinomedia | Spring 2013
  6. 6. Interfaces Impact ExperienceInterface design refers to what we see and interactwith. What we see has a huge influence on ourexperience (Don Norman, Ph.D.)User Experience Our experience determines if wewill interact with a product or tool. And we havechoices.Consider these two text blocks … DON STANLEY | @3rhinomedia | Spring 2013
  7. 7. Interface Design, UX, How We Use
  8. 8. Interface Design, UX, How We UseInterface design refers to what we see. What we see hasa huge influence on our experience (Don Norman, Ph.D.)User Experience: Our experience determines if we willinteract with a product or tool. And we have choices
  9. 9. Think Like a HumanUsability Expert Steve Krug says “Don’t Make Me Think” Fact #1: We don’t read pages, we scan them DON STANLEY | @3rhinomedia | Spring 2013
  10. 10. Think Like a HumanUsability Expert Steve Krug says “Don’t Make Me Think” Fact #1: We don’t read pages, we scan them Fact #2: We don’t make optimal choices, we satisfice DON STANLEY | @3rhinomedia | Spring 2013
  11. 11. Think Like a HumanUsability Expert Steve Krug says “Don’t Make Me Think” Fact #1: We don’t read pages, we scan them Fact #2: We don’t make optimal choices, we satisfice Fact #3: We don’t figure out how things work. We muddle through because it works enough. DON STANLEY | @3rhinomedia | Spring 2013
  12. 12. Reality
  13. 13. Design is a Planned ProcessWeb communication involves creating an organized plan to improve a site to better serve customers and drive desired business outcomes.” - Leigh Duncan4 Phase Plan, the 4Ds: 1. Discovery 2. Design & Dictate 3. Develop 4. Deploy and Determine DON STANLEY | @3rhinomedia | Fall 2012
  14. 14. Discovery: Most Important DThe Law of the Vital Few –aka Pareto’s PrincipleWhy do most organizations fail? Let’s take a look …
  15. 15. Law of the Unvital Many
  16. 16. Discovery: Questions to Consider TARGET/TARGET ACTION: What is your target? Why are you creating this site? Sales? Contacts? Build Audience? Thought Leader? Build Brand?
  17. 17. Discovery: Questions to Consider TARGET/TARGET ACTION: What is your target? Why are you creating this site? Sales? Contacts? Build Audience? Thought Leader? Build Brand? KEY AUDIENCE: Please list your audiences. Who is the most critical audience you need to connect with? Please describe the most important visitors? How often are they online? What do they use the web for? Connections?
  18. 18. Discovery: Questions to Consider TARGET/TARGET ACTION: What is your target? Why are you creating this site? Sales? Contacts? Build Audience? Thought Leader? Build Brand? KEY AUDIENCE: Please list your audiences. Who is the most critical audience you need to connect with? Please describe the most important visitors? How often are they online? What do they use the web for? Connections? PROBLEM SOLVING: What problem does your audience solve by coming to your site? What do they get?
  19. 19. Discovery: Questions to Consider TARGET/TARGET ACTION: What is your target? Why are you creating this site? Sales? Contacts? Build Audience? Thought Leader? Build Brand? KEY AUDIENCE: Please list your audiences. Who is the most critical audience you need to connect with? Please describe the most important visitors? How often are they online? What do they use the web for? Connections? PROBLEM SOLVING: What problem does your audience solve by coming to your site? What do they get? ACTIONS: What activities do they need to need to take to achieve their goals? (watch a video, sign up for email, download something, etc.)
  20. 20. Discovery: Questions to Consider TARGET/TARGET ACTION: What is your target? Why are you creating this site? Sales? Contacts? Build Audience? Thought Leader? Build Brand? KEY AUDIENCE: Please list your audiences. Who is the most critical audience you need to connect with? Please describe the most important visitors? How often are they online? What do they use the web for? Connections? PROBLEM SOLVING: What problem does your audience solve by coming to your site? What do they get? ACTIONS: What activities do they need to need to take to achieve their goals? (watch a video, sign up for email, download something, etc.) BUILD AUDIENCE: What is the best way to share this with your key audience? How do you promote your site?
  21. 21. Design CRAP: ContrastCONTRAST - Making key elements stand out withcolor, size, shape, placement. What does contrast do? • It provides a road map of what’s important • It guides the users eye, swiftly and effortlessly • It differentiates elements so readers know what you think is important • It brings out dominant elements • It mutes lesser elements • It creates dynamism Think google.com
  22. 22. Design CRAP: ContrastClutter and confusion are failures of design, not attributes ofinformation” -- Ed TufteCONTRAST - Making key elements stand out with color, size, shape,It guides the users eye, swiftly and effortlesslyIt differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism Think google.com
  23. 23. Design CRAP: ContrastClutter and confusion are failures of design, not attributes ofinformation” -- Ed TufteCONTRAST - Making key elements stand out with color, size, shape,It guides the users eye, swiftly and effortlesslyIt differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism Think google.com
  24. 24. Design CRAP: ContrastClutter and confusion are failures of design, not attributes ofinformation” -- Ed TufteCONTRAST - Making key elements stand out with color, size, shape,It guides the users eye, swiftly and effortlesslyIt differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism Think google.com
  25. 25. Design CRAP: RepetitionREPETITION - repeating the use of various elements such as color,size, layout, typefaces, image styles to convey meaning. Howdoes this apply to navigation? Headers? Multiple pages?
  26. 26. Design CRAP: ContrastClutter and confusion are failures of design, not attributes ofinformation” -- Ed TufteCONTRAST - Making key elements stand out with color, size, shape,It guides the users eye, swiftly and effortlesslyIt differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism Think google.com
  27. 27. Design CRAP: AlignmentALIGNMENT - Alignment is another way of creating associationsbetween visual elements, which help users quickly understandthe relationships of objects on a page.
  28. 28. Design CRAP: ContrastClutter and confusion are failures of design, not attributes ofinformation” -- Ed TufteCONTRAST - Making key elements stand out with color, size, shape,It guides the users eye, swiftly and effortlesslyIt differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism Think google.com
  29. 29. Design CRAP: Contrast
  30. 30. Design CRAP: ProximityPROXIMITY - Elements that are related should be visuallyconnected. Likewise, elements that are not related should bevisually separated. Use whitespace, colors, backgrounds, etc. Let’s look at an example of the principles in action.
  31. 31. About copyOptimizr analyzes your web page or entire website and then transformsconvoluted table structures and tagless content into lightweight, CSSpositioned div layouts and semantic markup. It’s 2.0-licious!One-click Optimizing! Optimizr’s functions are automatic and require noknowledge of html or css. Registration copy Create an account >> Individual Level For individual users with one static website. Learn more >> Pro Level For individual users with multiple static websites. Learn more >> Enterprise Level For users with CMS-driven websites. Learn more >>
  32. 32. Action

×