Stop Making Things Pretty And Start Designing

Stop Making Things Pretty And Start Designing

Design is not just about themes, graphics, or the look-and-feel of a website. We will discuss "design thinking" as a problem solving strategy, including why the most beautiful sites are not always the most successful. We will end with some ways for you to start applying "design thinking" principles to your own projects.

E195ae45320d9202eaa01c9f1d31a416?s=128

Michelle Schulp

April 16, 2013
Tweet

Transcript

  1. MAKING THINGS PRETTY AND START DESIGNING STOP Flickr: m-s-y

  2. HI, I’M MICHELLE @marktimemedia i do design for print&web&wordpress

  3. WHAT IS DESIGN? Flickr: Haags Uitburo @marktimemedia

  4. Design both TRANSFORMS INSPIRES BLUEPRINT and an idea into a

    for something that ADDS VALUE @marktimemedia
  5. Design both TRANSFORMS INSPIRES BLUEPRINT and an idea into a

    for something that ADDS VALUE @marktimemedia
  6. DESIGN IS… ATTENTION TO DETAIL Flickr: Nick Sherman @marktimemedia

  7. FUNDAMENTALS OF COMPOSITION LINE COLOR SHAPE TEXTURE SPACE HIERARCHY SCALE

    CONTRAST UNITY GESTALT TYPOGRAPHY BALANCE PATTERN { } A! C M e & @marktimemedia
  8. DESIGN IS… FUNDAMENTAL Flickr: Nick Sherman @marktimemedia

  9. DESIGN IS… THE BIG PICTURE Flickr: SpaceShoe @marktimemedia

  10. INTERIOR DECORATING Flickr: Mirage Floors @marktimemedia

  11. INTERIOR DESIGN Flickr: Stuck In Customs @marktimemedia

  12. Design is Multidisciplinary @marktimemedia

  13. USABILITY User Experience Marketing Psychology Accessibility AESTHETIC FACTORS WEB DESIGN

    AESTHETICS STRUCTURE Illustration Photography Art Branding Development Content Strategy @marktimemedia
  14. Flickr: .sarahwynne The Most Important Question IS NOT HOW but

    @marktimemedia
  15. BE DELIBERATE. @marktimemedia

  16. Flickr: ebayink “MOBILE FIRST” @marktimemedia

  17. Flickr: ebayink BE DELIBERATE. @marktimemedia “What are the most important

    elements, messages, actions, and content of your site?”
  18. BUT I THOUGHT DESIGN WAS ABOUT MAKING THINGS Flickr: Stephen

    Geyer LOOK GOOD? Isn’t that why you paid all that money to go to design school? @marktimemedia
  19. I LIKE ATTRACTIVE THINGS. Obviously, Adobe Creative Suite @marktimemedia

  20. Flickr: thelearningcurvedotca But things do not always need to be

    attractive to SOLVE A PROBLEM @marktimemedia
  21. None
  22. •  Example #2 Drudge

  23. •  Example #4 Google

  24. None
  25. •  Example #3 Lings

  26. •  Example #3 Lings

  27. DESIGN IS… PROBLEM SOLVING @marktimemedia

  28. DESIGN IS NOT FOR YOU OR FOR YOUR CLIENT DESIGN

    IS… NOT FOR YOU …OR YOUR CLIENT Flickr: h.koppdelaney @marktimemedia
  29. ALL DECISIONS NEED TO MAKE SENSE IN CONTEXT @marktimemedia

  30. Source: xkcd

  31. DESIGN IS… UNDERSTANDING & INTERPRETING Flickr: stephenjohnbryde @marktimemedia

  32. Design both TRANSFORMS INSPIRES BLUEPRINT and an idea into a

    for something that ADDS VALUE @marktimemedia
  33. FEELINGS GOALS STRATEGY @marktimemedia

  34. “Our logo is ugly.” “The current website is not working

    for us.” “We want to do something di erent.” FEELINGS @marktimemedia
  35. GOALS “We need to update our brand to reflect our

    new company values.” “We need to o er the online services our clients expect from our business.” “We need to distinguish ourselves in the marketplace from our competitors.” @marktimemedia
  36. Current Successes Established Brand Existing Problems Customer Needs Emerging Ideas

    Competitive Landscape Budget Constraints Opportunity to Di erentiate DESIGN STRATEGY @marktimemedia
  37. DESIGN IS… A PROCESS DESIGN IS… A PROCESS Flickr: wineandcheese

    @marktimemedia
  38. Design both TRANSFORMS INSPIRES BLUEPRINT and an idea into a

    for something that ADDS VALUE @marktimemedia
  39. SCIENTIFIC METHOD @marktimemedia

  40. RESEARCH HYPOTHESIS EXPERIMENT ANALYZE REPORT @marktimemedia

  41. RESEARCH STRATEGY IMPLEMENT EVALUATE ADJUST @marktimemedia

  42. RESEARCH STRATEGY IMPLEMENT EVALUATE ADJUST DESIGN STRATEGY DEVELOPMENT TESTING &

    ANALYTICS CONTENT & RESEARCH @marktimemedia
  43. WATERFALL MODEL Flickr: Stuck In Customs @marktimemedia

  44. Source: Web Designer Depot LINEAR DESIGN @marktimemedia

  45. Flickr: Stuck In Customs IS THIS THE BEST PROCESS FOR

    WEB DESIGN? @marktimemedia
  46. PRINT DESIGN IS LIKE A SYMPHONY Flickr: Alsal Photography @marktimemedia

  47. WEB DESIGN IS LIKE JAZZ Flickr: Tom Marcello @marktimemedia

  48. •  Additional process method (book p. 29) •  Iterations, dynamic,

    overlap DESIGN FEEDBACK @marktimemedia
  49. AGILE MODEL Flickr: only alice @marktimemedia

  50. •  Additional process method (book p. 29) •  Iterations, dynamic,

    overlap PROTOTYPING PROGRAMMING STYLE APPLICATION QA LAUNCH CONTENT CREATION CONTENT ENTRY DESIGN from The Strategic Web Designer by Christopher Butler @marktimemedia
  51. COMMUNICATE COLLABORATE ITERATE @marktimemedia

  52. •  Additional process method (book p. 29) •  Iterations, dynamic,

    overlap PROTOTYPING PROGRAMMING STYLE APPLICATION QA LAUNCH CONTENT CREATION CONTENT ENTRY DESIGN ITERATION @marktimemedia
  53. •  Additional process method (book p. 29) •  Iterations, dynamic,

    overlap GRAYSCREEN PROTOTYPE WHITESCREEN PROTOTYPE CONTENT CREATION MOOD BOARDS STYLE GUIDES SPECIFIC GRAPHICS @marktimemedia
  54. Source: HOW Interactive Design COLLABORATION: GRAYSCREEN PROTOTYPE @marktimemedia

  55. DESIGN: STYLE TILES @marktimemedia

  56. DESIGN: STYLE GUIDES Source: Smashing Magazine @marktimemedia

  57. DESIGN: SPECIFIC GRAPHICS Source: dribbble @marktimemedia

  58. DEVELOPMENT: WHITESCREEN PROTOTYPE Source: Newfangled @marktimemedia

  59. •  Additional process method (book p. 29) •  Iterations, dynamic,

    overlap PROTOTYPING PROGRAMMING STYLE APPLICATION QA LAUNCH CONTENT CREATION CONTENT ENTRY DESIGN “SIGNOFF” @marktimemedia
  60. •  Additional process method (book p. 29) •  Iterations, dynamic,

    overlap PROTOTYPING PROGRAMMING STYLE APPLICATION QA LAUNCH CONTENT CREATION CONTENT ENTRY DESIGN EXECUTION @marktimemedia
  61. •  Additional process method (book p. 29) •  Iterations, dynamic,

    overlap PROTOTYPING PROGRAMMING STYLE APPLICATION QA LAUNCH CONTENT CREATION CONTENT ENTRY DESIGN @marktimemedia
  62. •  Additional process method (book p. 29) •  Iterations, dynamic,

    overlap TESTING & ANALYTICS PROTOTYPING Site Analytics A/B Testing UX Testing Surveys & Feedback Integrated Marketing Goal Evaluation @marktimemedia
  63. WHAT IS THIS ALL FOR? @marktimemedia

  64. Design both TRANSFORMS INSPIRES BLUEPRINT and an idea into a

    for something that ADDS VALUE @marktimemedia
  65. DESIGN ADDS VALUE Flickr: Stuck In Customs @marktimemedia

  66. NOT A PIXEL- PUSHING MONKEY Flickr: Masashi Mochida @marktimemedia

  67. TRUSTED PARTNER Flickr: Eyesplash – The thing about spring @marktimemedia

  68. HOW DO I START? @marktimemedia

  69. BE A DESIGNER See the Big Picture & the Details

    Question, Understand, and Interpret Be Deliberate and always ask Why Solve The Problem (it’s not about you) Be Agile: communicate, collaborate, iterate @marktimemedia
  70. KEEP CALM AND LEARN MORE @marktimemedia

  71. A NON-EXHAUSTIVE LIST OF COOL RESOURCES Actual Books •  Don’t

    Make Me Think by Steve Krug •  The Strategic Web Designer by Christopher Butler •  Launching The Imagination by Mary Stewart •  The Visual Display of Quantitative Information by Edward Tufte •  A Type Primer by John Kane •  The Non-Designers series by Robin Williams •  A Website That Works by Mark O’Brien Blogs & Online Resources •  HOW Design •  UX Magazine •  A List Apart •  Smashing Magazine •  Fast Co.Design •  Web Design Ledger •  Web Designer Depot •  Noupe •  You The Designer @marktimemedia
  72. Flickr: Pete Fletch NOW START DESIGNING! Michelle Schulp michelle@marktimemedia.com @marktimemedia

    Slides: bit.ly/start-designing SO STOP MAKING THINGS PRETTY…