Design Is Content, Too

  • 1,322 views
Uploaded 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.

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,322
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
75
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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 Forbes.com’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, http://en.wikipedia.org/wiki/Design
  • 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. CareerBuilder.com
    • 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