unify design & deliverables

Download Unify Design & Deliverables

Post on 27-Jan-2015




0 download

Embed Size (px)




    • DC REFRESH - JUNE 2009

Prepared by Nathan CurtisEightShapes LLC 2. Thinking Systematically

    • We use and teach teams better ways to create user experience documentation.
      • On the face of it, the doc system is a set of templates. But its actually much more than that.

3. Process RESET!

          • 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
          • IT gets wireframes; deep analysis reveals many components w/o HTML/CSS/codeGroup scrambles to reconcile design ideas vs whats actually possibleDesigner continues to revise wireframes
          • IT creates new but realistic HTML & CSS

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $

          • MORE PORTABILITY: Group not constrained to use same designer for updates since source files are reusableLESS REINVENTION: Other designers dont reinvent nearly so many new components due to the common approach
          • Group trains designer on doc system (once)
          • Designer starts project, finishes analysisDesigner uses clients doc system
          • Group reviews wireframes, fewer comments
          • Designer reworks wireframes faster
          • Group approves design
          • Designer delivers PDF AND source files
          • IT assesses familiar systems faster
          • IT extends component HTML/CSS

$ $ $ $ $ $ $ $ $ $ $ $ $ $ Courtesy Martin Hardee, Cisco Systems 4.

    • Creates formulaicdesign andremovescreativepotential by reusing existing elements.


    • Creates formulaicstarting pointsandfocusescreativeattention by reusing existing elements.


    • Deliverables are not be a place tostand out from the crowd .Be creative with your designs.

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. DELIVERABLE

  • Creating artifacts to communicate user experience, from concepts to comps

9. Deliverables

  • http://semanticstudios.com/publications/semantics/000228.php

Plus: Contracts Proposals Placards Tri-folds Offers House Rules 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. Starting a Deliverable

      • Choose your page size & orientation (order by frequency of use):

1 Letter Landscape 2 Legal Portrait 3 Letter Portrait 4 Tabloid Landscape 20. The Blank Canvas

      • Every deliverable is born with two measly pages.

Page 1: Cover Page 2: Interior 21. Whats In A Template?

      • In the Template:
      • Metadata as Variables
      • Grids
      • Chapter divider
      • Color palette
      • Styles (type, object, tables, TOC)
    • NOT In the Template:
    • Sample content
    • Symbols (like markers)
    • Sample page layouts
    • Template moral: Keep it light, Keep it flexible

22. Getting the Basics Right DOCUMENT METADATA PAGE TITLES 23. Getting The Basics Right Cover Chunking Chapters TOC Change History Clear Objectives Briefs Wireflows Specs Plans 24. Symbols

      • Do you get the standard symbol stuff? Absolutely.
      • Markers
      • Callouts
      • Frames
      • Site Maps
      • People
      • Flows (thanks JJG!)
      • Project Plans
      • Reviews

25. Speed Up with Dynamic Markers 26. Deliverable Reuse: Page Layouts Coming Soon: Isometric Site Maps Sketching & Design Studios 27. Panacea Deliverables Are Not

          • Assignment:
      • Annotate three screenshots provided, using 1-2 deliverable pages.
          • Results:
      • Wildly different layouts, editorial style, details, and assumed audiences.
      • For our unfortunate readers, its empathy time.
      • But theres hope!

Massive frame? A table! A table! Art in middle? Specs by element 28. WIREFRAME

  • Standardizing user interface design to be more efficient, consistent, and founded on patterns & components

29. Design Deliverable Units / Size Typography Grid Purpose Depict what a screen looks like Combine pictures & words to document a design 30. Lightweight Template Setup Styles Layers Layout Grids 1 Page 31. Layers :: Grid Descriptions 32. Layers :: Fold

          • A band from 590px to 610px down...

33. Layers :: Component Markers

          • Markers automatically added to layer you can hide but trace reusable bits back to the library.

34. Element Libraries 35. Yahoo Patterns 36. iPhone Symbols 37. Wireframe Components

      • A component is a reusable page chunk.

38. Pages

      • Some teams even have
      • standard page types.
      • They are built from components, of course.

39. Wireframing Conventions

      • Cmon, who wants to fight?
      • A wireframing system must have a consistent visual language, so you have to make decisions like:
      • Long live gray scale. But minimize or remove gray.
      • Use Arial. Only Arial!
      • Blue for interactivity. Orange for annotation.Red for errors. No more color.
      • X for images.
      • No visual embellishments.Rounded corners, gradients, stroke weights only if it conveys meaningful structure.


  • Piecing together modular bits to tell a story, or lots of different stories

41. Components in a Page 42. A Component Across Pages 43. A Component in Deliverable 44. Wireflows 45. Copy in Wireframes? 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. Reuse All Over the Place! 48. If Adobe Isnt Your Thing 49. TOOL

  • Why is the first question always What tool do you use?


    • @mckayp says:
  • Does Nathan Curtis get a kickback from Adobe?


    • @carlrice says:
  • indesign is an entirely unacceptable [tool] to present interactive content.

@nathanacurtis response? yeah, sometimes, you are absolutely right