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.

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
22. •  Example #2 Drudge
23. •  Example #4 Google
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…