Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Unify Design & Deliverables


Published on

Published in: Technology, Business
  • Be the first to comment

Unify Design & Deliverables

  1. 1. UNIFY DESIGN & DELIVERABLES <ul><li>DC REFRESH - JUNE 2009 </li></ul>Prepared by Nathan Curtis © EightShapes LLC
  2. 2. Thinking Systematically <ul><ul><li>We use and teach teams better ways to create user experience documentation. </li></ul></ul><ul><ul><ul><li>On the face of it, the “doc system” is a set of templates. But it’s actually much more than that. </li></ul></ul></ul>
  3. 3. Process RESET! <ul><ul><ul><li>BEFORE SYSTEM </li></ul></ul></ul><ul><ul><ul><ul><ul><li>Designer starts project, finishes analysisDesigner authors wireframes from scratch, reinventing already existing componentsGroup reviews design, extensive commentsDesigner reworks wireframes, gradually narrowing to existing design systemGroup approves design (finally)Designer delivers wireframes in PDF; retains source files in proprietary format </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>IT gets wireframes; deep analysis reveals many components w/o HTML/CSS/codeGroup scrambles to reconcile design ideas vs what’s actually possibleDesigner continues to revise wireframes </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>IT creates new but realistic HTML & CSS </li></ul></ul></ul></ul></ul>$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ <ul><ul><ul><ul><ul><li>DON’T FORGET THESE BENEFITS TOO! </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>MORE PORTABILITY: Group not constrained to use same designer for updates since source files are reusableLESS REINVENTION: Other designers don’t reinvent nearly so many new components due to the common approach </li></ul></ul></ul></ul></ul><ul><ul><ul><li>WITH SYSTEM </li></ul></ul></ul><ul><ul><ul><ul><ul><li>Group trains designer on doc system (once) </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Designer starts project, finishes analysisDesigner uses client’s doc system </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Group reviews wireframes, fewer comments </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Designer reworks wireframes faster </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Group approves design </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Designer delivers PDF AND source files </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>IT assesses familiar systems faster </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>IT extends component HTML/CSS </li></ul></ul></ul></ul></ul>$ $ $ $ $ $ $ $ $ $ $ $ $ $ Courtesy Martin Hardee, Cisco Systems
  4. 4. <ul><ul><li>“ Creates formulaic design and removes creative potential by reusing existing elements.” </li></ul></ul>
  5. 5. <ul><ul><li>“ Creates formulaic starting points and focuses creative attention by reusing existing elements.” </li></ul></ul>
  6. 6. <ul><ul><li>“ Deliverables are not be a place to stand out from the crowd . Be creative with your designs.” </li></ul></ul>
  7. 7. Creating a System for Teams 1 2 3 Interviews Survey Doc Reviews Planning Discovery Analyze Templates Assets Samples Packaging Pilot Assemble Documentation Training Demos Coaching Reviews Adopt
  8. 8. DELIVERABLE <ul><li>Creating artifacts to communicate user experience, from concepts to comps </li></ul>
  9. 9. Deliverables <ul><li> </li></ul>Plus: Contracts Proposals Placards Tri-folds Offers House Rules
  10. 10.
  11. 11.
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19. Starting a Deliverable <ul><ul><ul><li>Choose your page size & orientation (order by frequency of use): </li></ul></ul></ul>1 Letter Landscape 2 Legal Portrait 3 Letter Portrait 4 Tabloid Landscape
  20. 20. The “Blank Canvas” <ul><ul><ul><li>Every deliverable is born with two measly pages. </li></ul></ul></ul>Page 1: Cover Page 2: Interior
  21. 21. What’s In A Template? <ul><ul><ul><li>In the Template: </li></ul></ul></ul><ul><ul><ul><li>Metadata as Variables </li></ul></ul></ul><ul><ul><ul><li>Grids </li></ul></ul></ul><ul><ul><ul><li>Chapter divider </li></ul></ul></ul><ul><ul><ul><li>Color palette </li></ul></ul></ul><ul><ul><ul><li>Styles (type, object, tables, TOC) </li></ul></ul></ul><ul><ul><li>NOT In the Template: </li></ul></ul><ul><ul><li>Sample content </li></ul></ul><ul><ul><li>Symbols (like markers) </li></ul></ul><ul><ul><li>Sample page layouts </li></ul></ul><ul><ul><li>Template moral: Keep it light, Keep it flexible </li></ul></ul>
  22. 22. Getting the Basics Right DOCUMENT METADATA PAGE TITLES
  23. 23. Getting The Basics Right Cover Chunking Chapters TOC Change History Clear Objectives Briefs Wireflows Specs Plans
  24. 24. Symbols <ul><ul><ul><li>Do you get the standard symbol stuff? Absolutely. </li></ul></ul></ul><ul><ul><ul><li>Markers </li></ul></ul></ul><ul><ul><ul><li>Callouts </li></ul></ul></ul><ul><ul><ul><li>Frames </li></ul></ul></ul><ul><ul><ul><li>Site Maps </li></ul></ul></ul><ul><ul><ul><li>People </li></ul></ul></ul><ul><ul><ul><li>Flows (thanks JJG!) </li></ul></ul></ul><ul><ul><ul><li>Project Plans </li></ul></ul></ul><ul><ul><ul><li>Reviews </li></ul></ul></ul>
  25. 25. Speed Up with Dynamic Markers
  26. 26. Deliverable Reuse: Page Layouts Coming Soon: Isometric Site Maps Sketching & “Design Studios”
  27. 27. Panacea Deliverables Are Not <ul><ul><ul><ul><ul><li>Assignment: </li></ul></ul></ul></ul></ul><ul><ul><ul><li>Annotate three screenshots provided, using 1-2 deliverable pages. </li></ul></ul></ul><ul><ul><ul><ul><ul><li>Results: </li></ul></ul></ul></ul></ul><ul><ul><ul><li>Wildly different layouts, editorial style, details, and assumed audiences. </li></ul></ul></ul><ul><ul><ul><li>For our unfortunate readers, it’s empathy time. </li></ul></ul></ul><ul><ul><ul><li>But there’s hope! </li></ul></ul></ul>Massive frame? A table! A table! Art in middle? Specs by element
  28. 28. WIREFRAME <ul><li>Standardizing user interface design to be more efficient, consistent, and founded on patterns & components </li></ul>
  29. 29. Design ≠ Deliverable Units / Size Typography Grid Purpose Depict what a screen looks like Combine pictures & words to document a design
  30. 30. Lightweight Template Setup Styles Layers Layout Grids 1 Page
  31. 31. Layers :: Grid Descriptions
  32. 32. Layers :: Fold <ul><ul><ul><ul><ul><li>A band from 590px to 610px down... </li></ul></ul></ul></ul></ul>
  33. 33. Layers :: Component Markers <ul><ul><ul><ul><ul><li>Markers automatically added to layer you can hide but trace reusable bits back to the library. </li></ul></ul></ul></ul></ul>
  34. 34. Element Libraries
  35. 35. Yahoo Patterns
  36. 36. iPhone Symbols
  37. 37. Wireframe Components <ul><ul><ul><li>A component is a reusable page chunk. </li></ul></ul></ul>
  38. 38. Pages <ul><ul><ul><li>Some teams even have </li></ul></ul></ul><ul><ul><ul><li>standard page types. </li></ul></ul></ul><ul><ul><ul><li>They are built from components, of course. </li></ul></ul></ul>
  39. 39. Wireframing Conventions <ul><ul><ul><li>C’mon, who wants to fight? </li></ul></ul></ul><ul><ul><ul><li>A wireframing system must have a consistent visual language, so you have to make decisions like: </li></ul></ul></ul><ul><ul><ul><li>Long live gray scale. But minimize or remove gray. </li></ul></ul></ul><ul><ul><ul><li>Use Arial. Only Arial! </li></ul></ul></ul><ul><ul><ul><li>Blue for interactivity. Orange for annotation. Red for errors. No more color. </li></ul></ul></ul><ul><ul><ul><li>X for images. </li></ul></ul></ul><ul><ul><ul><li>No visual embellishments. Rounded corners, gradients, stroke weights only if it conveys meaningful structure. </li></ul></ul></ul>
  40. 40. PUTTING IT ALL TOGETHER <ul><li>Piecing together modular bits to tell a story, or lots of different stories </li></ul>
  41. 41. Components in a Page
  42. 42. A Component Across Pages
  43. 43. A Component in Deliverable
  44. 44. Wireflows
  45. 45. Copy in Wireframes?
  46. 46. Target your audience Design Strategy Editorial Guidelines Design Spec Product Manager Site Strategist Publisher Engineer QA AUDIENCES DESIGN DELIVERABLE What do they need?
  47. 47. Reuse All Over the Place!
  48. 48. If Adobe Isn’t Your Thing
  49. 49. TOOL <ul><li>Why is the first question always “What tool do you use?” </li></ul>
  50. 50. <ul><ul><li>@mckayp says: </li></ul></ul><ul><li>Does Nathan Curtis get a kickback from Adobe? </li></ul>
  51. 51. <ul><ul><li>@carlrice says: </li></ul></ul><ul><li>indesign is an entirely unacceptable [tool] to present interactive content. </li></ul>@nathanacurtis response? yeah, sometimes, you are absolutely right
  52. 52. Sometimes You Get Real...
  53. 53. ...Other Times You Don’t
  54. 54. What do I design? Visual Designer Content Strategist Information Architect
  55. 55. So, Why InDesign? <ul><ul><ul><li>Our surveys reveal that Visio and Omnigraffle are the two most popular tools in the IA community. We work in InDesign because: </li></ul></ul></ul><ul><ul><ul><li>Cross platform (think: big teams, vendors, etc) </li></ul></ul></ul><ul><ul><ul><li>More than sufficient for vector-based drawing </li></ul></ul></ul><ul><ul><ul><li>Most modular (snippets, linked files like PDFs) </li></ul></ul></ul><ul><ul><ul><li>Style dominance (type, objects, tables, TOC, etc) </li></ul></ul></ul><ul><ul><ul><li>UX “designers” include more than just IAs! </li></ul></ul></ul>
  56. 56. Combining Tools WIREFRAMES Illustrator WIREFRAMES InDesign DELIVERABLES InDesign COMPS Photoshop PROTOTYPES Fireworks Or WIREFRAMES & COMPS Fireworks COPY InCopy
  57. 57. Tools by Discipline Visual Designer Information Architect “ Design” Content Strategist (Wireframes) (Comps) (Copy) Deliverables Same Templates! Same Styles, Grids, etc..
  58. 58. EIGHTSHAPES UNIFY <ul><li>What you can download from </li></ul><ul><li> </li></ul>
  59. 59. Deliverables and Wireframes Deliverables Templates Elements Pages Pages Elements Templates Components Wireframes
  60. 60. Deliverables and Comps Elements Pages Comps Components Deliverables Pages Elements Templates Templates
  61. 61. So, if you are interested...
  62. 62. Monthly 1/2 Day Workshops DELIVERABLES WIREFRAMES Friday June 26, 2009 August 2009 Register for $188 at ...
  63. 63. The Book <ul><ul><ul><li>For designers thinking about reuse in design and deliverables using components (or patterns) during projects or for building a design library. </li></ul></ul></ul><ul><ul><li>Due July 2009 </li></ul></ul><ul><ul><ul><li>(hint: you can pre-order) </li></ul></ul></ul>
  64. 64. <ul><li>Thanks! </li></ul><ul><ul><li>Nathan Curtis </li></ul></ul><ul><ul><ul><li>EightShapes LLC </li></ul></ul></ul><ul><ul><ul><li>[email_address] </li></ul></ul></ul><ul><ul><ul><li>@nathanacurtis | nathanacurtis on most networks </li></ul></ul></ul><ul><ul><ul><ul><ul><li>This presentation on </li></ul></ul></ul></ul></ul>