Recomendados
Más contenido relacionado
Destacado
Destacado (12)
Similar a Jennifer Robbins: ARTIFACT Conference Keynote
Similar a Jennifer Robbins: ARTIFACT Conference Keynote (20)
Último
Último (20)
Jennifer Robbins: ARTIFACT Conference Keynote
- 1. Designers and CodeDesigners and CodeDesigners and Code Jennifer Robbins @jenville and workflows and stuff 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 old Hair style hasn’t changed.
- 10. Change is hard.
- 11. TRENT WALTON I hear ya, Jen!
- 12. My wish...
- 15. • 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?
- 18. research maintenance idea launch Product Development
- 19. idea launch User Experience (UX) user interviews personas design strategies scenarios user stories
- 20. idea launch Information Architecture & Content Strategy card sorts content audit taxonomies site maps
- 21. idea launch Interaction and UI Design wireframes user journeys prototypes flow diagrams
- 24. idea launch Backend & Server PHP Ruby Python Java
- 25. idea launch Where I work... strategy site maps wireframes user journeys flow diagrams typography layout comps/mockups mood/atmosphere HTML CSS
- 26. idea launch
- 27. idea launch
- 28. idea launch In the past, the need for coding skills increased as you got closer to launch
- 29. idea launch HTML wireframes HTML prototypes I’m seeing code move back into the design process
- 30. “Here, code this for me.” FROM
- 31. Code as a design tool Git’s not so bad. CHRISTOPHER SCHMITT TO
- 32. plan design develop deploy
- 33. plan design develop deploy wireframes PSD comps code Waterfall development
- 34. design develop
- 36. • 2001 Agile Manifesto • Iterative & incremental • Teams are integrated, not silo’d • Working software trumps static documents about software (“Just start building.”) Agile development
- 37. “Over the wall” handoffs FROM
- 38. Frequent iterations by integrated teams TO
- 40. • A fluid layout • Flexible images • CSS media queries Components of Responsive Design
- 41. [courtesy of Brad Frost (bradfrostweb.com)]
- 42. [courtesy of Brad Frost (bradfrostweb.com)]
- 43. The Web is 960 pixels wide. FROM
- 44. The Web is all sizes. TO
- 45. The Web is all sizes. It’s at my desk and on the bus and on my couch and in my bed and... It’s keyboard and touch. It’s slow and fast.
- 46. Toward a new Workflow Toward a new workflow Toward a new WORKFLOW
- 47. Responsive Summit London • February 2012 responsivesummit.com
- 48. 1. Plan 2. Sketch 3. Lo-fi HTML Prototype 4. Increase Fidelity 5. Iterate/Talk www.markboulton.co.uk/journal/responsive-summit-workflow
- 49. “Responsive Workflow,” by Viljami Salminen viljamis.com/blog/2012/responsive-workflow/
- 50. “Web Design Process in a Responsive World,” by Ben Callahan speakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
- 51. “Web Design Process in a Responsive World,” by Ben Callahan plan visual design HTML prototype increased fidelity speakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
- 52. “Responsive Design Workflow,” by Stephen Hay plan HTML prototyping increase fidelity client deliverables developer deliverable speakerdeck.com/u/stephenhay/p/responsive-design-workflow-webshaped-2012
- 53. by Stephen Hay
- 54. 1. Plan 2. Sketch 3. HTML Prototype 4. Increase Fidelity 5. Iterate/Talk
- 55. A website is made of pages. FROM
- 56. A website is a system. TO
- 57. • Start with content, real or representative • Identify all content types and components • Treat content as modules • Assign priority to every content type Plan (Content First)
- 58. • Content type inventory • Content priority document Content deliverables
- 59. 1. Plan 2. Sketch 3. HTML Prototype 4. Increase Fidelity 5. Iterate/Talk
- 60. “Ideas want to be ugly.” —Jason Santa Maria
- 63. Normally, you’d whip up some wireframes right about now, but...
- 66. 1. Plan 2. Sketch 3. HTML Prototype 4. Increase Fidelity 5. Iterate/Talk
- 67. • Prioritized content • Minimally styled • NOT necessarily production quality • Shows basic layout, navigation, and interactivity HTML Prototypes Let’s talk layout. JEN SIMMONS
- 68. • Can begin testing on various devices • Gives the client a more realistic experience • Saves time overall • May provide a head-start on production Advantages over wireframes
- 70. Protyping Tools Responsive Frameworks • Foundation • Bootstrap • Proty • Skeleton • 320 and Up Let’s take ‘em for a spin. JARED PONCHOT
- 71. 1. Plan 2. Sketch 3. HTML Prototype 4. Increase Fidelity 5. Iterate/Talk
- 72. • Color and texture • Imagery • White space • Typographic treatments Visual Design Give web fonts a try! JASON PAMENTAL
- 73. create vs. communicate create vs. communicate create vs. communicate
- 74. “You suck if you use Photoshop.” Nobody panic. DAN ROSE
- 75. Visual Design approaches • “Design in Browser”
- 76. www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/ —Sarah Parmenter ...my designs end up suffering, looking boxy, bland and uninspiring.
- 77. Visual Design approaches • “Design in Browser” w/ CSS • Photoshop/Fireworks/Illustrator then move to browser a.s.a.p.
- 78. “Let’s change the phrase ‘designing in the browser’ to ‘deciding in the browser.’” —Dan Mall
- 80. “Work in Photoshop and Fireworks, by all means (I do). Make static visuals as rich and as detailed as you want them to be. Just don’t set the wrong expectations by showing them to your clients.” —Andy Clarke
- 81. Visual Design approaches • “Design in Browser” w/ CSS • Photoshop/Fireworks/Illustrator then move to browser a.s.a.p. • Visual responsive layout tool
- 85. “Design” begins and ends in Photoshop FROM
- 88. Static mockups don’t cut it anymore.
- 89. —Andy Clarke https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight “Like bringing a knife to a gunfight.”
- 90. • Don’t display web fonts accurately • Can’t show flexible/responsive layouts • Don’t show interactions and transitions • Set wrong expectations • Design changes are time-consuming Static mockup drawbacks
- 92. ?
- 93. Design deliverables •Visual style exploration
- 94. style tiles style prototypes element collage
- 95. style tiles style prototypes element collage BEN CALLAHAN DAN MALLYESENIA PEREZ-CRUZ
- 96. Design deliverables • Visual style exploration (independent of layout) •High-fidelity prototype
- 97. not necessarily this Photo by Brad Frost
- 98. Design deliverables • Visual style exploration (independent of layout) • High-fidelity prototype (for testing) •Image assets
- 99. DAVE RUPERT Mo pixels? No problem!
- 100. Design deliverables • Visual style exploration (independent of layout) • High-fidelity prototype (for testing) • Image assets (think of performance) •Style guides!
- 101. Style Guides/Pattern Libraries • Documents every content component • Describes how they are used • HTML markup, CSS styles, scripts • Describes what happens on resizing
- 102. BBC Global Experience Language (GEL) www.bbc.co.uk/gel/mobile/device-considerations/philosophy
- 105. gim.ie/fZyK Compiled by Anna Debenham
- 106. ANDY PRATT Let’s not stop there.
- 107. 1. Plan 2. Sketch 3. HTML Prototype 4. Increase Fidelity 5. Iterate/Talk
- 108. “TA DA!” FROM
- 112. JEN SIMMONS MATT GRIFFIN DREW CLEMENS KRISTIN ELLINGTON
- 113. So...So...So...
- 114. Key characteristics of new workflow
- 115. Key characteristics of new workflow • 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
- 116. KEVIN SHARON SOPHIE SHEPARD Try something new!
- 117. WHAT S NEXT?’WHAT S NEXT?WHAT S NEXT? BRAD FROST Diamonds!!
- 118. Keep trying things. Keep sharing. Enjoy ARTIFACT!
- 119. I’m ready are You? thanks for listening! Jennifer Robbins @jenville Excerpt from “Boys Are Sexxy”