Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A New Toolbox: Artifact Conference, Austin 2013

A New Toolbox: Artifact Conference, Austin 2013

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


Kevin Sharon

May 14, 2013



    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

  6. None
  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.

  12. None
  13. Best Practices.

  14. None
  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
  16. None
  17. None
  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
  19. None
  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

  44. None
  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

  58. None
  59. None
  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

  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

  76. None
  77. None
  78. None
  79. None
  80. Design

  81. HTML Wireframes Concept Board Timeline

  82. None
  83. Personality

  84. None
  85. None
  86. None
  87. None
  88. “You Can’t Have Happy Accidents in the Browser — Mark

  89. None
  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

  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

  99. None
  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.
  104. None
  105. HTML Wireframes Concept Board Home Page Sub Pages Timeline Template

  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