Join me in a (day)
dreamThis talk is about an idea for a new way of doing things, not a baked &tested solution.Even describing the problem together is worth it. Let’s start the discussion.Imagine a better way of handling the brass tacks of agile design.
Let’s pretend we already agreeDesign
is the diﬀerence between awesome and awesome-sauce.Big Design Upfront just doesnt cut it.Agile Rocks (We believe!)Can’t we get more done, faster, with less drama?
iterating onLook & feelis still
a slow boatWere not so good at iterating when it comes to "big" visual changes.Most of our regular iterations focus on building or improving features or pages,and can’t really encompass global look & feel updates.When this is the case, designers usually choose existing styles (they frequentlyhate and are dying to improve), so as not to "break" the look & feel andconfuse their users.Enough of this and eventually we end up with "redesign" projects. Which suck.
Prototyping is harder than it
should beThe agile manifesto deﬁnes simplicity as:“the art of maximizing the amount of work not done."Either youre (doing some variation of ) linking comps together, or you have demos that workﬁne, but look really rough.In either case, its often hard to be sure of your results.(Maybe the test would have had diﬀerent results if the hover states had worked properly, etc.)By the time you marry the two halves, youre so far along that you might as well justrelease and ﬁgure it out from there.
Scenarios that suck.Hey, I still
Dude, just put it onneed that the “Z” Drive. file... Was the attachment larger than 5mb? Want to What? borrow my I totally emailed thumb drive...? that to you yesterday Developers don’t have access to “z.”
Scenarios that suck. Hey, This
project sounds familiar... Um, Judy worked on that but she’s not here anymore.didn’t we mock this up last year? Word. Where are the comps? UM...Does someone have the password Yeah. The Blue to her mac? team was working on it but it got de-scoped. Where are her files?
Scenarios that suck. Hmm.. let’s
see... Hey team, i know we’re working on “project y”, but OMG, changing Is this even“project y” involves “widget x” “widget x” means going to affect which could really use a new updating 100’s of our KPI’s? design... pages. That would be awesome! That turns our 3 “Widget x” point story into a 20 sucks! point story. But “widget x” is all over the place...if i change it here can we ... so that’s a no.. change it everywhere?
Scenarios that suck.What’s with this
stylesheet? There’s no difference between .grey-text-regular .text-default-grey & .grey-caption-text! ...Dunno, Dude ... That’s what the designers sent. i just copied and pasted...
Okay, what do we want?Global
Incremental Style Change or Continuous Design Deploymentactually Rapid useful PrototypingGood designer ‹—› developer collaboration on markup and cssGood design asset management & collaboration (versioned)Easy Discovery
Continuous Design deploymentIt’s actually agile—smaller
changes globally based on user feedbackRedesigns are expensive, and their value is hard to measure, so they happenvery infrequentlyRedesigns can cause massive user backlashStyle guides aren’t clairvoyantNo one ever reads the @!&*ing manual anyway
designer ‹-› developer collaboration on
markup & cssstay DRY (Don’t Repeat Yourself )Enable & teach designers to write production-ready code(images dont have to get re-pathed, etc.)Share workload for patterns, components & prototypesKnowledge sharingAppropriate medium-to-task matching(no more juggling forms in photoshop)
Better design assetmanagement & collaboration
= version controlThe way most designers store & backup their ﬁles is just plain scaryIt’s central(The whole team gets their stuﬀ from the same source)Get all related project design assets together(Wireframes, comps, copy, etc)Certainty that you are always working with the newest ﬁlePotential for embedded artVersion control is a form of automatic documentation
easy discoveryShared vocabulary(across all teams
& departments)Be able to ﬁnd things quickly, without having to askCentral & AccessibleAbility to guess what something is by the way its namedQuickly learn how things are organized(easy on-boarding)
Patterns“A pattern is a solution
to a recurringdesign problem.”Examples of patterns are: buttons tabs paginationThey are icons, mechanisms, etc., thathave commonly accepted behaviors thatmake up a universally understood visuallanguage for software.Borrowed from “Modular Web Design”by Nathan Curtis
Components“A component is a chunk
of a page design.” A component is a logical grouping of related content & functions that are combined into a meaningful building block used—and reused—in the interface design of a site. Borrowed from “Modular Web Design” by Nathan Curtis
it’s an organizing principleOnce you
start to think of your content in this way, you can set yourself up toevolve the look & feel of these chunks in the same way that we evolve ourfeatures and products.You need the whole team—maybe even the whole department—to help deﬁneand name these chunks, but once you have, you can start organizing your ﬁles,photoshop layers, & css classes, etc. against them.You’ll get consistent names, and a shared vocabulary.That, alone, is worth the price of admission...
Get StartedDeﬁne "component" v "pattern"
that makes sense for your project/teamNaming guidelines (semantic, outsiders should be able to guess what itmeans, hyphens, no scheme/codes, etc.)Setup some minimal infrastructure version control (s) - branch scheme, ﬁle organization scheme, etc. get everyone accounts + training build the component & pattern browserStarter workﬂow — Iterate until it works for your project —