Web Design Core Concepts
•Download as PPTX, PDF•
0 likes•744 views
The document discusses core concepts of web design including design as problem solving, core design principles, and why studying design is important. It notes that interfaces impact user experience and outlines some principles for thinking like humans, including that people scan pages rather than read them thoroughly and satisfice rather than always making optimal choices. The document then discusses design as a planned process involving discovery, design, development, and deployment phases.
Report
Share
Web Design Core Concepts
- 1. Web Design: Core Concepts Design 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. What is Design? Clutter and confusion are failures of design, not attributes of information” -- Prof. Ed Tufte DON STANLEY | @3rhinomedia | Spring 2013
- 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. 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. 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. Interfaces Impact Experience Interface design refers to what we see and interact with. What we see has a huge influence on our experience (Don Norman, Ph.D.) User Experience Our experience determines if we will interact with a product or tool. And we have choices. Consider these two text blocks … DON STANLEY | @3rhinomedia | Spring 2013
- 7. Interface Design, UX, How We Use
- 8. Interface Design, UX, How We Use Interface design refers to what we see. What we see has a huge influence on our experience (Don Norman, Ph.D.) User Experience: Our experience determines if we will interact with a product or tool. And we have choices
- 9. Think Like a Human Usability 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. Think Like a Human Usability 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. Think Like a Human Usability 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
- 13. Reality
- 14. Design is a Planned Process Web communication involves creating an organized plan to improve a site to better serve customers and drive desired business outcomes.” - Leigh Duncan 4 Phase Plan, the 4Ds: 1. Discovery 2. Design & Dictate 3. Develop 4. Deploy and Determine DON STANLEY | @3rhinomedia | Fall 2012
- 15. Discovery: Most Important D The Law of the Vital Few – aka Pareto’s Principle Why do most organizations fail? Let’s take a look …
- 16. Law of the Unvital Many
- 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?
- 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?
- 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?
- 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.)
- 21. 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?
- 22. Design CRAP: Contrast CONTRAST - Making key elements stand out with color, 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
- 23. Design CRAP: Contrast Clutter and confusion are failures of design, not attributes of information” -- Ed Tufte CONTRAST - Making key elements stand out with color, size, shape, It guides the users eye, swiftly and effortlessly It differentiates elements It brings out dominant elements It mutes lesser elements It creates dynamism Think google.com
- 24. Design CRAP: Contrast Clutter and confusion are failures of design, not attributes of information” -- Ed Tufte CONTRAST - Making key elements stand out with color, size, shape, It guides the users eye, swiftly and effortlessly It differentiates elements It brings out dominant elements It mutes lesser elements It creates dynamism Think google.com
- 25. Design CRAP: Contrast Clutter and confusion are failures of design, not attributes of information” -- Ed Tufte CONTRAST - Making key elements stand out with color, size, shape, It guides the users eye, swiftly and effortlessly It differentiates elements It brings out dominant elements It mutes lesser elements It creates dynamism Think google.com
- 26. Design CRAP: Repetition REPETITION - repeating the use of various elements such as color, size, layout, typefaces, image styles to convey meaning. How does this apply to navigation? Headers? Multiple pages?
- 27. Design CRAP: Contrast Clutter and confusion are failures of design, not attributes of information” -- Ed Tufte CONTRAST - Making key elements stand out with color, size, shape, It guides the users eye, swiftly and effortlessly It differentiates elements It brings out dominant elements It mutes lesser elements It creates dynamism Think google.com
- 28. Design CRAP: Alignment ALIGNMENT - Alignment is another way of creating associations between visual elements, which help users quickly understand the relationships of objects on a page.
- 29. Design CRAP: Contrast Clutter and confusion are failures of design, not attributes of information” -- Ed Tufte CONTRAST - Making key elements stand out with color, size, shape, It guides the users eye, swiftly and effortlessly It differentiates elements It brings out dominant elements It mutes lesser elements It creates dynamism Think google.com
- 31. Design CRAP: Proximity PROXIMITY - Elements that are related should be visually connected. Likewise, elements that are not related should be visually separated. Use whitespace, colors, backgrounds, etc. Let’s look at an example of the principles in action.
- 32. About copy Optimizr analyzes your web page or entire website and then transforms convoluted table structures and tagless content into lightweight, CSS positioned div layouts and semantic markup. It’s 2.0-licious! One-click Optimizing! Optimizr’s functions are automatic and require no knowledge 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 >>
- 38. Action