1. Designers and CodeDesigners and CodeDesigners and CodeJennifer Robbins@jenvilleand workﬂows and stuﬀlinks: artfactconf.com/robbins
2. me, 1993
3. In June 1993 there 130 websites in the world.The World Wide Web in 1993
4. Global Network Navigator (GNN)1993
5. me, 5 years oldHair style hasn’tchanged.
7. Change is hard.
8. TRENTWALTONI hear ya, Jen!
9. My wish...
10. • What does the web design process look like now?• How is HTML/CSS being used as a design tool?• What deliverables make sense?• What tools are available?• What do we tell our clients and bosses?
12. Product Developmentidea launch
13. research maintenanceidea launchProduct Development
14. idea launchUser Experience (UX)user interviewspersonasdesign strategiesscenariosuser stories
15. idea launchInformation Architecture& Content Strategycard sortscontent audittaxonomiessite maps
16. idea launchInteraction and UI Designwireframesuser journeysprototypesﬂow diagrams
17. idea launchVisual Designtypographylayoutcomps/mockupsmood/atmospherecolorsimagery
19. idea launchBackend & ServerPHPRubyPythonJava
20. idea launchWhere I work...strategysite mapswireframesuser journeysﬂow diagramstypographylayoutcomps/mockupsmood/atmosphereHTMLCSS
21. idea launch
22. idea launch
23. idea launchIn the past, the need for coding skillsincreased as you got closer to launch
24. idea launchHTML wireframesHTML prototypesI’m seeing code move back into the design process
25. “Here, code this for me.”FROM
26. Code as a design toolGit’s not so bad.CHRISTOPHER SCHMITTTO
27. plan design develop deploy
28. plan design develop deploywireframes PSD comps codeWaterfall development
30. Agile development
31. • 2001 Agile Manifesto• Iterative & incremental• Teams are integrated, not silo’d• Working software trumpsstatic documents about software(“Just start building.”)Agile development
32. “Over the wall” handoﬀsFROM
35. • A ﬂuid layout• Flexible images• CSS media queriesComponents of Responsive Design
36. [courtesy of Brad Frost (bradfrostweb.com)]
37. [courtesy of Brad Frost (bradfrostweb.com)]
38. The Web is 960 pixels wide.FROM
39. The Web is all sizes.TO
40. The Web is all sizes.It’s at my desk and on the bus andon my couch and in my bed and...It’s keyboard and touch.It’s slow and fast.
41. Toward a newWorkflowToward a newworkflowToward a newWORKFLOW
42. Responsive SummitLondon • February 2012responsivesummit.com
43. 1. Plan2. Sketch3. Lo-ﬁ HTML Prototype4. Increase Fidelity5. Iterate/Talkwww.markboulton.co.uk/journal/responsive-summit-workﬂow
44. “Responsive Workﬂow,” by Viljami Salminenviljamis.com/blog/2012/responsive-workﬂow/
45. “Web Design Process in a Responsive World,” by Ben Callahanspeakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
46. “Web Design Process in a Responsive World,” by Ben Callahanplanvisual designHTML prototypeincreased ﬁdelityspeakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
47. “Responsive Design Workﬂow,” by Stephen HayplanHTML prototypingincrease ﬁdelityclient deliverablesdeveloperdeliverablespeakerdeck.com/u/stephenhay/p/responsive-design-workﬂow-webshaped-2012
48. by Stephen Hay
49. 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
50. A website is made of pages.FROM
51. A website is a system.TO
52. • Start with content, real or representative• Identify all content types and components• Treat content as modules• Assign priority to every content typePlan (Content First)
53. • Content type inventory• Content priority documentContent deliverables
54. 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
55. “Ideas want to be ugly.”—Jason Santa Maria
57. Normally, you’d whip up some wireframesright about now, but...
58. Wireframe diagramsFROM
59. HTML prototypesTO
60. 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
61. • Prioritized content• Minimally styled• NOT necessarily production quality• Shows basic layout, navigation, andinteractivityHTML PrototypesLet’s talk layout.JEN SIMMONS
62. • Can begin testing on various devices• Gives the client a more realistic experience• Saves time overall• May provide a head-start on productionAdvantages over wireframes
63. GridpakGridsetProtyping ToolsGrid Systems
64. Protyping ToolsResponsive Frameworks• Foundation• Bootstrap• Proty• Skeleton• 320 and UpLet’s take ‘em for a spin.JARED PONCHOT
65. 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
66. • Color and texture• Imagery• White space• Typographic treatmentsVisual DesignGive web fonts a try!JASON PAMENTAL
74. “Work in Photoshop and Fireworks, by allmeans (I do). Make static visuals as richand as detailed as you want them to be.Just don’t set the wrong expectations byshowing them to your clients.”—Andy Clarke
75. Visual Design approaches• “Design in Browser” w/ CSS• Photoshop/Fireworks/Illustratorthen move to browser a.s.a.p.• Visual responsive layout tool
79. “Design” begins and endsin PhotoshopFROM
80. Designing with CSS.TO
81. Let’s talk deliverables...
82. Static mockups don’tcut it anymore.
83. —Andy Clarkehttps://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunﬁght“Like bringing a knife to a gunﬁght.”
84. • Don’t display web fonts accurately• Can’t show ﬂexible/responsive layouts• Don’t show interactions and transitions• Set wrong expectations• Design changes are time-consumingStatic mockup drawbacks
105. JEN SIMMONSMATT GRIFFINDREW CLEMENSKRISTIN ELLINGTON
107. Key characteristics of new workﬂow
108. Key characteristics of new workﬂow• From waterfall to agile process• From silo’d departments to integrated teams• From pages to systems (content modules)• From static deliverables to working prototypes• From “Big Reveal” to clients as collaborators
109. KEVIN SHARON SOPHIE SHEPARDTry something new!
110. WHAT S NEXT?’WHAT S NEXT?WHAT S NEXT?BRAD FROSTDiamonds!!