A New Toolbox: Artifact Conference, Austin 2013

Defining Happy Cog's evolving process as it addresses the shifting landscape of a multi-device world.

Transcript

1. A NEW TOOLBOX S E C R E T S F R O M H A P P Y C O G T E X A S S T A T E U N I V E R S I T Y / S A N M A R C O S , T X K E V I N S H A R O N S O P H I E S H E P H E R D
2. Howd
3. Tonight: • Happy what? • Secrets: Shortcuts, corner cutting tricks and tips, & jk lol. • Case Study
4. Austin, TX New York City, NY Philadelphia, PA Happy Cog
5. Secret #1 Jeffrey Zeldman
7. Education
8. Education: • A List Apart • A Book Apart • An Event Apart • Girl Develop It • Ladies in Tech
9. Happy Cog: • We share with the Community. • Educate our clients. • Mentor young designers.
10. Secret #2 “Go make some mistakes”
11. I wish.
13. Best Practices.
15. Web Standards: “By releasing browsers which do not uniformly support those standards, browser makers are injuring Web developers, businesses and users alike. —http://archive.webstandards.org/mission.html
18. Fluid Grids: “But given all that we’ve achieved over the past few years—moving past tables, evangelizing standards… I do wish we’d bend some of that ingenuity to break out of our reliance on “minimum screen resolution.” —http://alistapart.com/article/fluidgrids
20. Best Practices • Collaboration. • Give ideas time to develop. • Learn to separate evolution from broken process.
21. Secret #3 All the details
22. HTML Wireframes vs. Prototypes
23. HTML Wireframes Twitter Bootstrap Hand-rolled HTML Twitter Bootstrap Custom RAILS framework Foundation Yay!
24. Style Tiles, Element Collages Concept Boards
25. Oh no, a dirty word: Clients
26. business goals user needs process
27. You get the clients you deserve.
28. Secret #4 Who are the UX designers?
29. Everyone
30. Audience
31. Empath
32. “Designers”
33. “Visual Designer”
34. “Graphic Designer”
35. “Pretender”
36. “Camera guy”
37. Graphic Designer: Paul Rand
38. Graphic Designer: Paula Scher
39. she was a great “visual designer” 1982–2013
40. Don’t be the “designer (who codes).” Become a designer with a bigger toolbox.
41. Secret #5 Responsive Web Design
42. Responsive Web Design
43. Screens Everywhere
45. The Pencil
46. Hashtag R-W-D, you guys.
47. Secret #6 The Secret Sauce
48. This stuff ain’t easy
49. Waterfall-ish
50. IA/UX Template Development Timeline Discovery IA/UX Graphic Design CMS
51. It all depends.
52. Typical Projects
53. The Big Brand
54. Universities
55. Atypical
56. Discovery.
57. The Kickoff
60. UX
61. Content strategy is…
62. Content Strategy: “…content strategy is to copywriting as information architecture is to design.” —Rachel Lovinger, interesting person
63. Wireframes
64. UX: • Create content collaboratively. • Validate content. • User testing.
65. Graphic Design.
66. You’re doing it wrong… “ “ —the twitters Graphic Design:
67. Graphic Design: • Textures, fonts, colors. • Content. • Solving problems on the front end and the back end.
68. It’s not a collaboration if you don’t say “no.”
69. Atypical
70. Atypical: • No branding. • No work. • No location. • No identity. • Oh crap…
71. Atypical Project Process
72. Met Him Yesterday My Dan Mall Moment Seems like a Good Guy To Be Continued...
73. Previous Client + App Developer The Client
74. HTML Wireframes
75. HTML Wireframes
80. Design
81. HTML Wireframes Concept Board Timeline
83. Personality
88. “You Can’t Have Happy Accidents in the Browser — Mark Boulton
90. HTML Wireframes Concept Board Home Page Timeline
91. HTML Wireframes Concept Board Home Page Template Development Timeline
92. HTML Wireframes Concept Board Home Page Template Development Sub Pages Timeline
93. In Photoshop Home Case Study Blog Post About Team Services
94. In Photoshop In Photoshop
95. In Photoshop In Photoshop
96. In Photoshop In Photoshop
97. In Photoshop In Photoshop
98. In Photoshop In Photoshop
100. 11 6 Home Case Study Blog Post About Team Services Jobs Job Listings Blog Landing Blog Archive Work Listing App Listing App Case Study App Variation 404 Contact “How We Work”
101. Sketching whiteboard
102. Designe Developer Makes Design Decisions in Browser Makes Design Decisions in Browser Learned SASS Extensible Code Team
103. 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 Q.A.
105. HTML Wireframes Concept Board Home Page Sub Pages Timeline Template Development
106. Remaining 11 pages x 4hrs = 44hrs + Tablet Design, 17 pages x 4hrs = 68hrs + Mobile Design, 17 pages x 4hrs = 68hrs 180 Hours (4.5 weeks) Timeline
107. Early Design Collaboration QA the Whole Time Using Sketches as Deliverable What We Took Away
108. Thanks! Kevin Sharon @kevinsharon Sophie Shepherd @sophshepherd