Your SlideShare is downloading. ×
Design Is Content, Too
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design Is Content, Too


Published on

Presented by Ken Walters at Web Content Chicago, June 17-18, 2008. …

Presented by Ken Walters at Web Content Chicago, June 17-18, 2008.

Sometimes the message needs more than just words. Graphic design is about visual communication. From brand identity to usability, good design is design that works.

Published in: Business, Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Transcript

    • 1.  
    • 2. About me?
      • Director of Interaction Design, Duo Consulting
      • Education in Advertising and Fine Arts
      • 13 years of experience in design, development and project management for the web
      • Work featured in Communication Arts, Graphic Design:USA, Graphis, and’s Best of the Web.
    • 3. About you?
      • Designer?
      • Developer?
      • Content contributor or editor?
      • Manager?
      • Marketing?
    • 4. What is the purpose of your site’s content?
      • Communication
    • 5. Hi.
    • 6. Design is about communication as well.
      • Often we’re trying to answer some very important unspoken questions.
    • 7. Where am I? What should I do next? Where can I find my information? What are my options? Did I make the right choice? Can I buy this? Who is this company? Can I trust them? What are their values?
    • 8. Good design anticipates and answers users’ questions.
      • The user may not even realize that they’re asking these questions at all.
    • 9.  
    • 10. Unified Behavior Model
      • These are learned behaviors from the global web that users will try to reapply in similar situations.
    • 11. Don’t reinvent the wheel.
      • “ If 80% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability.” Jacob Neilson
    • 12.  
    • 13.  
    • 14. What should I do next?
    • 15.  
    • 16.  
    • 17.  
    • 18.  
    • 19.  
    • 20.  
    • 21.  
    • 22. Color is the single most powerful design tool available.
      • It can communicate mood, emotion, emphasis, unity, movement, and rhythm. Colors carry physiological, cultural, personal, emotional, and expressive implications.
    • 23. Red
      • Increases pulse rate and breathing and causes blood pressure to rise.
      • The food color. It makes you hungry by increasing your body's metabolism.
      • Hot, passionate, urgent, danger, blood, devil, angry, enraged, amorous, outspoken, optimistic
    • 24. Yellow
      • The color of the sunny disposition, the idealist. Intellectuals love yellow.
      • As you get older you tend to dislike yellow because it can make you feel anxious or angry.
      • Yellow enhances concentration and speeds metabolism.
      • Warm, cowardice, caution, fearful, bright
    • 25. Blue
      • The number one color choice of the introspective and educated.
      • Pumps people up. Proven to increase energy.
      • Responsibility, trustworthiness, compassion, those are the attributes of royal blue.
      • Honest, integrity, righteous, puritanical, moral, severe, prudish, cool, melancholy, sad, glum, downcast, gloomy, unhappy, quality, first place
    • 26. Green
      • A good color for people in transition. Green is Mother Nature's color, lover's of green may be fickle.
      • Universal symbolism: Nature, freshness
      • Contemporary symbolism: Ecologically beneficial
      • Nature, health, regeneration, contentment, harmony, cheerful, lively, friendly, fresh, sickly, unripe, immature, simple, unsophisticated, gullible, new
    • 27.  
    • 28.  
    • 29.  
    • 30.  
    • 31. Good design might never be noticed.
      • Bad design is hard to miss.
    • 32.  
    • 33.  
    • 34.  
    • 35.  
    • 36.  
    • 37.  
    • 38.  
    • 39. An interface that confuses a user can make them feel stupid and in the wrong.
      • Users don’t come back to sites that they don’t understand.
    • 40. A site should be like a good friend.
      • Would you let a friend continue to make mistakes, or would you try to help them through their task?
    • 41. Design as a scientific process.
      • “ Designing requires a designer to consider the aesthetic, functional, and many other aspects of an object or a process, which usually requires considerable research, thought, modeling, interactive adjustment, and re-design.”
      • Wikipedia,
    • 42. Interaction Design tools
      • Creative brief
      • Wireframes
      • User testing and focus groups
      • Personas
      • Best practices
      • Style guides
    • 43. Creative brief
    • 44. Interaction Design tools
      • Creative brief
      • Wireframes
      • User testing and focus groups
      • Personas
      • Best practices
      • Style guides
    • 45. Wireframes
    • 46. Wireframes
    • 47. Wireframes
    • 48. Wireframes
    • 49. Interaction Design tools
      • Creative brief
      • Wireframes
      • User testing and focus groups
      • Personas
      • Best practices
      • Style guides
    • 50. Personas
    • 51. Interaction Design tools
      • Creative brief
      • Wireframes
      • User testing and focus groups
      • Personas
      • Best practices
      • Style guides
    • 52. Measureable results
      • Start with goals and objectives
      • Research the users
      • Define constraints
      • Create a solution
      • Test the solution
      • Refine the solution
    • 53.
      • Search results filtering
    • 54. Goals and objectives
      • Increase the use of filtering tools on search results pages.
    • 55.  
    • 56. Research users
      • Live user observation during real job search situations revealed that users frequently never saw the filtering tools
      • When they did find the tools, they were impressed with the ways they could refine their results
      • Most users seemed to overlook the filtering tools due to “banner blindness”
    • 57. Establish constraints
      • Ad space needed to remain unaffected
      • Page width had to fit within 750px
    • 58. Design a solution
      • Filtering tools were moved to the top of the page in an expandable interface to place them in the flow of information
      • The basic set of filtering tools was narrowed down to include only the most frequently used and other filtering options were moved off to another tab
    • 59.  
    • 60.  
    • 61. Test the solution
      • An HTML only prototype was prepared and presented to real site users
      • While users recognized and responded to exposed filters, few expanded the basic set of filtering tools
      • When they were exposed, the filtering tools were frequently used
    • 62. Refine the solution
      • The designs were slightly updated to expose the basic filtering tools by default
    • 63.  
    • 64. Results?
      • Within the first week of launching the updated designs, the use of the filtering tools doubled
    • 65. So…
      • Your design should engage in a conversation with your users.
      • You have to understand the user and their needs and speak the same language.
      • You need to place yourself in their place and try to help them through your site by anticipating and answering their questions.
    • 66. Questions?
      • Kenneth Walters
      • [email_address]
      • Duo Consulting