• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Better. Faster. UXier. — AToMIC Design
 

Better. Faster. UXier. — AToMIC Design

on

  • 7,114 views

 

Statistics

Views

Total Views
7,114
Views on SlideShare
5,122
Embed Views
1,992

Actions

Likes
25
Downloads
68
Comments
2

20 Embeds 1,992

http://agileuxnyc.com 1259
http://www.scoop.it 212
http://designatomic.info 140
http://modalsoul.github.com 98
http://journo-geekery.tumblr.com 95
http://storify.com 81
http://culturelabagency.tumblr.com 28
http://www.twylah.com 26
https://twitter.com 17
http://designatomic.tumblr.com 11
http://www.journogeekery.com 5
http://modalsoul.github.io 5
http://us-w1.rockmelt.com 4
http://safe.tumblr.com 3
http://tumblr.hootsuite.com 2
http://www.linkedin.com 2
http://www.tumblr.com 1
https://si0.twimg.com 1
http://tweetedtimes.com 1
https://www.linkedin.com 1
More...

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

12 of 2 previous next

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

    Better. Faster. UXier. — AToMIC Design Better. Faster. UXier. — AToMIC Design Presentation Transcript

    • Better. Faster. UXIER. Atomic Design Agile UX NYC jennifer gergen February 25th, 2012 @b9punk
    • 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 difference 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?
    • Agile UXcould use another iteration... Prototype iterate
    • 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 defines 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 workfine, but look really rough.In either case, its often hard to be sure of your results.(Maybe the test would have had different 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 figure it out from there.
    • Scenarios that suck
    • 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.What is a“LW_xmod_oxy_1376_final_new.psd?” ?
    • Scenarios that suck.Yay! I’m finished! It looks justlike your design! Oh no! That’s the old version...
    • 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...
    • Seriously,we can do better.
    • 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
    • Rapid Actually Useful PrototypingHigh fidelity / low effortEnable designers & product managers, etc., to create these prototypesAbility to build prototypes instead of mockups for some projects
    • 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 files is just plain scaryIt’s central(The whole team gets their stuff from the same source)Get all related project design assets together(Wireframes, comps, copy, etc)Certainty that you are always working with the newest filePotential for embedded artVersion control is a form of automatic documentation
    • easy discoveryShared vocabulary(across all teams & departments)Be able to find 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)
    • EnterAToMIC Design(just go with me on the awkward backronym...) A ssets To M arkup (for) I terative C ollaboration
    • A new (?)DesignstrategyBrand GuidelineComponent LibraryPattern Library
    • 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 defineand name these chunks, but once you have, you can start organizing your files,photoshop layers, & css classes, etc. against them.You’ll get consistent names, and a shared vocabulary.That, alone, is worth the price of admission...
    • AToMIC Design Versioned Design AssetsOrganize for Lcontinuous idesign bevolution COLLABORATION r(component + apattern scheme) r y organized Markup + CSS
    • show methe money
    • ..App Folder(s)Components SEARCH-RESULT HTML (one file for each state) CSS js (includes a state handler) Data DEMO
    • .PrototypesPatternsApp Folder(s)Components SEARCH-RESULT HTML (one file for each state) CSS js (includes a state handler) Data DEMO
    • Get StartedDefine "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, file organization scheme, etc. get everyone accounts + training build the component & pattern browserStarter workflow — Iterate until it works for your project —
    • Sample Workflow design, Develop, COmponentDiscovery style, definition+ QA, AssembleInitial & [Document] Pagesdesigns naming & Add to library
    • Thanks!Can we please keep talking about this? Please connect with @DesignAtomic jennifer gergen @b9punk —Big ups—Wayne Warner The whole Ladders Team Our Lovely Hosts @wawjr3d @Theladders @agileuxnyc