Jennifer Robbins: ARTIFACT Conference Keynote
Upcoming SlideShare
Loading in...5
×
 

Jennifer Robbins: ARTIFACT Conference Keynote

on

  • 1,885 views

This presentation was given as the opening keynote at the inaugural ARTIFACT conference in Austin, TX, May 13, 2013.

This presentation was given as the opening keynote at the inaugural ARTIFACT conference in Austin, TX, May 13, 2013.

Statistics

Views

Total Views
1,885
Views on SlideShare
1,459
Embed Views
426

Actions

Likes
5
Downloads
15
Comments
0

6 Embeds 426

http://nerds.texastribune.org 397
http://techintranslation.com 17
https://twitter.com 6
http://www.google.com 3
http://librosweb.es 2
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jennifer Robbins: ARTIFACT Conference Keynote Jennifer Robbins: ARTIFACT Conference Keynote Presentation Transcript

  • Designers and CodeDesigners and CodeDesigners and CodeJennifer Robbins@jenvilleand workflows and stufflinks: artfactconf.com/robbins
  • me, 1993
  • In June 1993 there 130 websites in the world.The World Wide Web in 1993
  • Global Network Navigator (GNN)1993
  • me, 5 years oldHair style hasn’tchanged.
  • Head-DESKHEAD-DESKHEAD-DESK
  • Change is hard.
  • TRENTWALTONI hear ya, Jen!
  • My wish...
  • • 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?
  • PROCESSPROCESSPROCESS
  • Product Developmentidea launch
  • research maintenanceidea launchProduct Development
  • idea launchUser Experience (UX)user interviewspersonasdesign strategiesscenariosuser stories
  • idea launchInformation Architecture& Content Strategycard sortscontent audittaxonomiessite maps
  • idea launchInteraction and UI Designwireframesuser journeysprototypesflow diagrams
  • idea launchVisual Designtypographylayoutcomps/mockupsmood/atmospherecolorsimagery
  • idea launchFrontend DevelopmentHTMLCSSJavaScriptperformanceoptimizationaccessibility
  • idea launchBackend & ServerPHPRubyPythonJava
  • idea launchWhere I work...strategysite mapswireframesuser journeysflow diagramstypographylayoutcomps/mockupsmood/atmosphereHTMLCSS
  • idea launch
  • idea launch
  • idea launchIn the past, the need for coding skillsincreased as you got closer to launch
  • idea launchHTML wireframesHTML prototypesI’m seeing code move back into the design process
  • “Here, code this for me.”FROM
  • Code as a design toolGit’s not so bad.CHRISTOPHER SCHMITTTO
  • plan design develop deploy
  • plan design develop deploywireframes PSD comps codeWaterfall development
  • designdevelop
  • Agile development
  • • 2001 Agile Manifesto• Iterative & incremental• Teams are integrated, not silo’d• Working software trumpsstatic documents about software(“Just start building.”)Agile development
  • “Over the wall” handoffsFROM
  • Frequent iterations byintegrated teamsTO
  • RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!RESPONSIVE!
  • • A fluid layout• Flexible images• CSS media queriesComponents of Responsive Design
  • [courtesy of Brad Frost (bradfrostweb.com)]
  • [courtesy of Brad Frost (bradfrostweb.com)]
  • The Web is 960 pixels wide.FROM
  • The Web is all sizes.TO
  • 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.
  • Toward a newWorkflowToward a newworkflowToward a newWORKFLOW
  • Responsive SummitLondon • February 2012responsivesummit.com
  • 1. Plan2. Sketch3. Lo-fi HTML Prototype4. Increase Fidelity5. Iterate/Talkwww.markboulton.co.uk/journal/responsive-summit-workflow
  • “Responsive Workflow,” by Viljami Salminenviljamis.com/blog/2012/responsive-workflow/
  • “Web Design Process in a Responsive World,” by Ben Callahanspeakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
  • “Web Design Process in a Responsive World,” by Ben Callahanplanvisual designHTML prototypeincreased fidelityspeakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
  • “Responsive Design Workflow,” by Stephen HayplanHTML prototypingincrease fidelityclient deliverablesdeveloperdeliverablespeakerdeck.com/u/stephenhay/p/responsive-design-workflow-webshaped-2012
  • by Stephen Hay
  • 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
  • A website is made of pages.FROM
  • A website is a system.TO
  • • Start with content, real or representative• Identify all content types and components• Treat content as modules• Assign priority to every content typePlan (Content First)
  • • Content type inventory• Content priority documentContent deliverables
  • 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
  • “Ideas want to be ugly.”—Jason Santa Maria
  • http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
  • Normally, you’d whip up some wireframesright about now, but...
  • Wireframe diagramsFROM
  • HTML prototypesTO
  • 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
  • • Prioritized content• Minimally styled• NOT necessarily production quality• Shows basic layout, navigation, andinteractivityHTML PrototypesLet’s talk layout.JEN SIMMONS
  • • 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
  • GridpakGridsetProtyping ToolsGrid Systems
  • Protyping ToolsResponsive Frameworks• Foundation• Bootstrap• Proty• Skeleton• 320 and UpLet’s take ‘em for a spin.JARED PONCHOT
  • 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
  • • Color and texture• Imagery• White space• Typographic treatmentsVisual DesignGive web fonts a try!JASON PAMENTAL
  • create vs.communicatecreate vs.communicatecreate vs.communicate
  • “You suck if you use Photoshop.”Nobody panic.DAN ROSE
  • Visual Design approaches• “Design in Browser”
  • 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.
  • Visual Design approaches• “Design in Browser” w/ CSS• Photoshop/Fireworks/Illustratorthen move to browser a.s.a.p.
  • “Let’s change the phrase‘designing in the browser’ to‘deciding in the browser.’”—Dan Mall
  • css-tricks.com/conferences/BDConf2012-Workflow.pdfChris Coyier does...
  • “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
  • Visual Design approaches• “Design in Browser” w/ CSS• Photoshop/Fireworks/Illustratorthen move to browser a.s.a.p.• Visual responsive layout tool
  • Adobe Edge Reflowhtml.adobe.com/edge/reflow
  • froont.comFroont
  • (webflow.com)Webflow
  • “Design” begins and endsin PhotoshopFROM
  • Designing with CSS.TO
  • Let’s talk deliverables...
  • Static mockups don’tcut it anymore.
  • —Andy Clarkehttps://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight“Like bringing a knife to a gunfight.”
  • • 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-consumingStatic mockup drawbacks
  • ?
  • Design deliverables•Visual style exploration
  • style tiles style prototypes element collage
  • style tiles style prototypes element collageBEN CALLAHAN DAN MALLYESENIAPEREZ-CRUZ
  • Design deliverables• Visual style exploration (independent of layout)•High-fidelity prototype
  • notnecessarilythisPhoto by Brad Frost
  • Design deliverables• Visual style exploration (independent of layout)• High-fidelity prototype (for testing)•Image assets
  • DAVE RUPERTMo pixels?No problem!
  • Design deliverables• Visual style exploration (independent of layout)• High-fidelity prototype (for testing)• Image assets (think of performance)•Style guides!
  • Style Guides/Pattern Libraries• Documents every content component• Describes how they are used• HTML markup, CSS styles, scripts• Describes what happens on resizing
  • BBC Global Experience Language (GEL)www.bbc.co.uk/gel/mobile/device-considerations/philosophy
  • Starbucks style guidewww.starbucks.com/static/reference/styleguide/
  • South Tees Hospitalwww.southtees.nhs.uk/style-guide/
  • gim.ie/fZyKCompiled by Anna Debenham
  • ANDY PRATTLet’s notstop there.
  • 1. Plan2. Sketch3. HTML Prototype4. Increase Fidelity5. Iterate/Talk
  • “TA DA!”FROM
  • Clients as collaborators.TO
  • www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects
  • alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/
  • JEN SIMMONSMATT GRIFFINDREW CLEMENSKRISTIN ELLINGTON
  • So...So...So...
  • Key characteristics of new workflow
  • 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
  • KEVIN SHARON SOPHIE SHEPARDTry something new!
  • WHAT S NEXT?’WHAT S NEXT?WHAT S NEXT?BRAD FROSTDiamonds!!
  • Keep trying things.Keep sharing.Enjoy ARTIFACT!
  • I’m readyare You?thanks for listening!Jennifer Robbins@jenvilleExcerpt from “Boys Are Sexxy”