Your SlideShare is downloading. ×
A New Toolbox: Artifact Providence 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

A New Toolbox: Artifact Providence 2013

149
views

Published on

Kevin and Sophie reveal Happy Cog’s design process through their experience building a responsive site from beginning to end, including: kicking off the project, the collaborative design process, and …

Kevin and Sophie reveal Happy Cog’s design process through their experience building a responsive site from beginning to end, including: kicking off the project, the collaborative design process, and the tools they tweaked along the way. Find out what worked and what they learned. In the end, it should be clear that this is a time for experimentation and finding new approaches for new tasks.

Published in: Design, Business, Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
149
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
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. A NEW TOOLBOX S OPH I E SH E PH E R D & K E V I N SH A RON
  • 2. Howdy
  • 3. ATX
  • 4. Disclaimer We don’t know what we’re doing.
  • 5. Artifact: A New Toolbox
  • 6. A New Toolbox Research
  • 7. A New Toolbox Communication
  • 8. A New Toolbox Design
  • 9. Research: Why before what
  • 10. Research “ …for design to truly be great, [research] needs to be built into your projects from the very beginning.” —Mike Montiero
  • 11. “How do you make a chair?”
  • 12. “Go make mistakes”
  • 13. This sucks.
  • 14. We built it, launched it, it sucks, and no one cares. Fix it?
  • 15. Rush to MVP
  • 16. That’s a whole ‘nuther talk.
  • 17. Design Research is easy.
  • 18. Interviews
  • 19. Interviews Stakeholders
  • 20. Interviews Users
  • 21. Ethnio ethn.io/
  • 22. Design Values Survey
  • 23. The Design Values Survey Start a conversation
  • 24. The Design Values Survey Ask dumb questions
  • 25. The Design Values Survey Reveal your preconceptions
  • 26. The Design Values Survey Not everyone will agree
  • 27. The Design Values Survey “Should the new site look like a magazine or a newspaper?”
  • 28. The Design Values Survey “Should the new look reflect the aesthetics of [ ]?”
  • 29. 10 Second Gut Check
  • 30. 10 Second Gut Check Benchmark
  • 31. 10 Second Gut Check
  • 32. 10 Second Gut Check Define taste
  • 33. 10 Second Gut Check Generate content ideas
  • 34. Personality Test
  • 35. Personality Test “ Finding out who your customers are is only half the question. You also have to understand who you are.” —Aarron Walter
  • 36. What is the personality of a site? Voice
  • 37. What is the personality of a site? Tone
  • 38. What is the personality of a site? Feel /Mood
  • 39. Communication: Playing nice with others
  • 40. Design is a service
  • 41. Service Business Goals User Needs
  • 42. Business Needs Project goals
  • 43. Business Needs Requirements
  • 44. Business Needs Technology
  • 45. User needs Who is the audience?
  • 46. User needs Is there a new audience?
  • 47. User needs How do other people reach this audience?
  • 48. Client Capabilities Client design team
  • 49. Client Capabilities Photography, Video, Infographics
  • 50. Oh no, a dirty word: Clients
  • 51. You get the clients you deserve
  • 52. Client Communication “You can’t use that shade of blue… “
  • 53. Client Communication “Let’s make the logo bigger“
  • 54. Client Communication “Our CEO’s favorite font is Arial“
  • 55. The Elusive “Fold” ✄
  • 56. weenudge.com/thefold/
  • 57. This sucks.
  • 58. It’s not a collaboration if you don’t say “no.”
  • 59. “When are you going to show me something to look at?”
  • 60. Early Design
  • 61. Client Feedback Restate the goals.
  • 62. Client Feedback What answers to you need to move to the next step?
  • 63. A Designer’s Job
  • 64. Responsive Web Design
  • 65. Traditional Process Research UX Graphic Design Concept Board Designer Front-End Dev Sub Pages QA
  • 66. Updated Process Research UX Graphic Design QA Style Guide Front-End Dev Designer
  • 67. Most of what I do doesn’t look like a website.
  • 68. Atomic Design
  • 69. Atomic Design
  • 70. Start With Content • What did we learn from the research? • Define Content Needs
  • 71. Start With Content • Sketch • Collaborate • Tool to prompt conversation amongst teams
  • 72. Content as Modules
  • 73. Modules as Hierarchy 0 Delete 3 Nice to Have 1 Not needed/ Can’t Maintain 4 Requested 2 Maybe, but not important 5 Utmost Importance
  • 74. Modules as Hierarchy 0 5 1 4 3 2 2 3 5
  • 75. Modules as Prototypes
  • 76. Modules as Requirements • Functional Requirements • Technical Requirements • Content Requirements
  • 77. Modules as Design Plan • Which pages have unique layouts? • Which modules can be designed independent of layout?
  • 78. Graphic Design Style Boards Full Page Comps Big Screen Small Screen PSD vs. Browser
  • 79. “ You Can’t Have Happy Accidents in the Browser — Mark Boulton
  • 80. Design Tipping Point When is it more efficient to move over to working in the browser?
  • 81. QA Designer finds bug ➔ Files bug in Sifter ➔ Developer has question ➔ developer fixes bug ➔ assign back to designer ➔ designer looks at page to confirm ➔ designer closes ticket Designer Finds Bug ➔ Designer Fixes Bug
  • 82. Style Guide Design System Front-End Code
  • 83. Style Guide Allows designer to see design system through the lens of front end code.
  • 84. Tool for Clients • Module Guide • Visual Reference • Technical Reference • Content Guide
  • 85. Experiment
  • 86. April 1st, 2012
  • 87. “ You’re going to design this site using Keynote.” —Kevin Sharon
  • 88. “ “ “ Like, Keynote Keynote?” Is this an April Fool’s joke?” He’s serious. Deep breathes.” —Sophie Shepherd (in her head)
  • 89. Photoshop ≠ Browser • Wrapping Text • Multiple Widths • Rounded Corners • Consistent Type
  • 90. Tools ≠ Precious There is no “right” way of doing this stuff.
  • 91. Design: The details matter
  • 92. “Designers”
  • 93. Don’t be the “designer (who codes).” Be a designer with a bigger toolbox.
  • 94. This stuff ain’t easy
  • 95. The one truth “ FAIL. You’re doing it wrong… “ —the twitters #jerks
  • 96. That’s Bullshit
  • 97. No one knows what they’re doing.
  • 98. Empathy
  • 99. UX is everyone’s job.
  • 100. The one true process is…
  • 101. It all depends.
  • 102. Process is decided by • The required deliverables • The expected outcomes • The client’s needs • The client’s personality • Audience needs • Budget • Timeline • Project teams • Time zones • Hurricanes • The moon and tides
  • 103. Wireframes
  • 104. Wireframes whiteboard
  • 105. Wireframes
  • 106. Designer = Communicator
  • 107. Don’t make easy the goal.
  • 108. How do you scramble an egg? + +
  • 109. youtu.be/PUP7U5vTMM0
  • 110. Thanks! Kevin Sharon @kevinsharon Sophie Shepherd @sophshepherd