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.

Sixty Design Tools

853 views

Published on

An inventory of ~60 design tools, organized by JJGs Elements of Design. Includes types of feedback appropriate at each level, and for each tool the input and capabilities necessary and the output you can expect. Kind of a lego kit for designers!

Published in: Design
  • This is Service Design Thinking: Basics, Tools, Cases --- http://amzn.to/1TYWxQ0
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Alvin Interior Design Template (TD7161) --- http://amzn.to/1UdV6O2
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Spacer Embossing System Net Leather Design Tool Leathercraft Tandy 8091-00 --- http://amzn.to/1RuZrp5
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • What's missing? Style tiles, to start...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Sixty Design Tools

  1. 1. Design Tools September 29, 2011 This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
  2. 2. Tool Categories
  3. 3. JJG’s Elements text text text text text text
  4. 4. Tool Format
  5. 5. element level Tool Name What I need… The information or decisions (output) I need to move to the next step. What I have… What I have for input, from a previous tool or somewhere else. What I can do… My skills and available tools, and the time I have available.
  6. 6. (Process)
  7. 7. (A Note About Process) There are literally 100’s of design processes. [12] None of them are “right”.
  8. 8. (A Note About Process) A sure fire way to fail at a process is to work too hard to follow it. Even worse is forcing people to follow it. Judging a process based on how well people comply is like judging a product based on whether all the features were delivered on time—it misses the point. -Jeff Patton …in product software teams, we generally work on all types of software efforts, from very small fixes, performance improvements, and minor features, up to large projects and company-wide initiatives. It makes no sense to treat these all the same. The level of investment is totally different, the risks are totally different, and the techniques we use to ensure success are different. - Marty Cagan [11]
  9. 9. Strategy text
  10. 10. strategy Strategy Strategy is where it all begins: What do we want to get out of the product? What do our users want?
  11. 11. Strategy Feedback •broad direction •alignment with: •the market •company culture •other products & direction •other opportunities strategy
  12. 12. Strategy IxD Tools •ad-hoc personas •provisional personas •formal personas •competitive analysis •experience map •concept map * •"unsliced" story map •"visiontype” •stakeholder interviews •product manifesto strategy •design studio •SWOT analysis •heuristic review * * exercise
  13. 13. Description Ad-Hoc Personas Need Have Can strategy ...collaborators to stop being self-referential, or to think more empathetically about real-world people with goals as input to real-world situations, and if it's ok if they're temporal. ...an imagination, the ability to describe the value of personas, and a team that would be accepting of this kind of tool. ...use any word processing or layout application, use a photo search site and write a tiny bit, and have one day available.
  14. 14. Ad-Hoc Personas strategy Example
  15. 15. Ad-Hoc Personas strategy Example
  16. 16. Description Provisional Personas Need Have Can strategy ...collaborators to stop being self-referential, or to think more specifically about real-world people with goals as input to real-world situations, with more basis in reality than ad-hoc personas, and it's ok if they're temporal. ...access to product managers, support, or training staff who have some primary contact with users and you can get half a day with them, plus a few days or a week to put them together. ...run an affinity diagramming exercise and use any word processing or layout application, use a photo search site and write a tiny bit, and you have a few days available.
  17. 17. Provisional Personas strategy Example Rigorous
  18. 18. Description Formal Personas Need Have Can strategy ...information to make decisions about product direction, collaborators to stop being self-referential, or to think more empathetically, as input to real-world situations, with a solid basis in reality, and you need them to hold up over time. ...time to do primary research, access to users or potential users, access to collaborators for one or two days to workshop the results, and a budget for stipends. ...do recruiting, screening and scheduling participants, do the research, provide a record of those conversations, run a persona workshop, use a photo search site and write a tiny bit, and you have several weeks to a few months available.
  19. 19. Formal Personas strategy Example
  20. 20. Description Competitive Analysis Need Have Can strategy ... clear thematic direction for your product, to avoid or address competitors early. ...a clear and agreed-upon list of competitors. ...find or create an appropriate framework for conducting competitive analysis, write or diagram clearly, use a word processing or layout application, and have a week or two available.
  21. 21. Competitive Analysis strategy Example
  22. 22. Competitive Analysis strategy Example
  23. 23. Competitive Analysis strategy Example
  24. 24. Competitive Analysis strategy Example
  25. 25. Competitive Analysis strategy Example
  26. 26. Competitive Analysis strategy Example
  27. 27. Competitive Analysis strategy Example
  28. 28. Description Experience Map Need Have Can strategy ...a collaboratively-developed, shared, and organized vision of the information gathered from research and a good jumping-off point for a story map. ...qualitative research. ...lead a workshop including all the people who conducted, saw or read about the research, and you have a few days.
  29. 29. Experience Map Choose a few models Decide which he wants Buy the car Make a list of stuff he wants Search based on his criteria Check best-looking cars Check Consumer Reports Test drive all of them Ask his friend Rent one Find the cars locally Physically visit the dealer Search dealer reviews Negotiate the cost Get KBB and Edmunds prices time strategy Example
  30. 30. Description Concept Map Need Have Can strategy ...a collaboratively-developed, shared, and organized vision of the information gathered from research and a good jumping-off point for a story map. ...qualitative research. ...lead a workshop including all the people who conducted, saw or read about the research, and you have a few days.
  31. 31. Concept Map strategy Example
  32. 32. Concept Map strategy Example
  33. 33. Concept Map strategy Example
  34. 34. Concept Map strategy Example
  35. 35. Description ‘Unsliced’ Story Map Need Have Can strategy ... move the team into more tangible territory with some agreement on stories around how a user would interact with the product. ...a group of people with some ideas about what the product might do or an experience map; representatives from product, engineering and design with the time and interest to participate. ...lead a storymapping workshop, and have a few days or a week available.
  36. 36. ‘Unsliced’ Story Map Choose a few models Decide which he wants Buy the car Make a list of stuff he wants Search based on his criteria Check best-looking cars Check Consumer Reports Test drive all of them Ask his friend Rent one Find the cars locally Physically visit the dealer Search dealer reviews Negotiate the cost Get KBB and Edmunds prices time strategy Example
  37. 37. Description Visiontype Need Have Can strategy ...a tangible representation of big concepts to help generate focus and movement, something executives can understand and buy-in on, or a way to build key customer excitement. ...one or more big ideas, some ideas about personas, and agreement on some relatively specific stories or scenarios. ...create professional-looking mockups that you can make appear interactive through HTML, clickable PDFs or images, Flash, etc., and have one to several weeks.
  38. 38. Visiontype strategy Example
  39. 39. Description Stakeholder Interviews Need Have Can strategy ...to capture the input of any stakeholders, official or not, to get a sense for how they should be involved in the product going forward, ...stakeholders who care deeply about the outcome of the project. ...identify all the stakeholders(!), interview, distill and play back the results of the interviews, and have a few days or weeks.
  40. 40. Stakeholder Interviews strategy Example
  41. 41. Description Product Manifesto Need Have Can strategy ...a clear statement of the priorities, beliefs and principles that guide the product team to provide focus and more easily resolve questions later. ...the big idea, reasonably focused. ...collaborate with Product Management and ideally engineering to write, and get buy-in from your team on a short product manifesto.
  42. 42. Product Manifesto strategy Example
  43. 43. Product Manifesto strategy Example
  44. 44. Product Manifesto strategy Example
  45. 45. Product Manifesto strategy Example
  46. 46. Product Brief strategy Product Manifesto – Orthogonal Tool
  47. 47. Elevator Pitch strategy Product Manifesto – Orthogonal Tool
  48. 48. Opportunity Assessment strategy Product Manifesto – Orthogonal Tool 1. Exactly what problem will this solve? (value proposition) 2. For whom do we solve that problem? (target market) 3. How big is the opportunity? (market size) 4. What alternatives are out there? (competitive landscape) 5. Why are we best suited to pursue this? (our differentiator 6. Why now? (market window) 7. How will we get this product to market? (go-to-market strategy) 8. How will we measure success/make money from this product? (metrics/revenue strategy) 9. What factors are critical to success? (solution requirements 10. Given the above, what’s the recommendation? (go or no-go)
  49. 49. Description Design Studio Need Have Can strategy ...to involve many stakeholders or collaborative team members, and to move very quickly from one big idea to one or several ideas developed to structure or skeleton. ...some idea of a new product, target market, or opportunity. ...lead a large group of people in an intensive workshop setting, and have several days to a few weeks to plan, run, and then synthesize the output.
  50. 50. Design Studio strategy Example
  51. 51. Description SWOT Analysis Need Have Can strategy ...to understand why an existing product isn't doing what the business needs it to, or to provide clear thematic direction for a new product. ...an existing product. ...find or create an appropriate framework for conducting a SWOT analysis, write or diagram clearly, use a word processing or layout application, and a week available.
  52. 52. SWOT Analysis strategy Example
  53. 53. Description Heuristic Review Need Have Can strategy ...a prioritized list of ways to improve an existing product. ...an existing product. ...write and use any word processing or layout application, and have a few days or weeks, depending on the size of the product.
  54. 54. Heuristic Review strategy Example
  55. 55. A cognitive walkthrough starts with a task analysis that specifies the sequence of steps or actions required by a user to accomplish a task, and the system responses to those actions. The reviewer then walks through the steps asking themselves a set of questions at each step. Data is gathered during the walkthrough, and afterwards a report of potential issues is compiled. - Wikipedia Heuristic Review strategy Example
  56. 56. Example Heuristic Review strategy A pluralistic walkthrough uses group meetings where users, developers, and human factors people step through a scenario, discussing each dialogue element. [9]
  57. 57. Other Places to Look •backlog •customer feedback •traffic •research / data from existing products strategy
  58. 58. Scope text
  59. 59. Scope Scope transforms strategy into requirements: What features will the product need to include? scope
  60. 60. scope Scope Feedback • focus: • big ideas • themes • primary user or market targets • generally what we're doing, for whom, and why
  61. 61. Scope IxD Tools •"sliced" story map •prioritized personas •goal venn * •product models •illustrated storyboards •written scenarios * •feature prioritization matrix scope * exercise
  62. 62. Description ‘Sliced’ Story Map Need Have Can scope ...ideas and features sorted into priorities, including MVP to move forward on next steps, and agreed to by the larger team. ...an "unsliced" story map and any idea about how to prioritize (manifesto, prioritized personas, etc.), plus team members with availability and interest. ...get the core team in a room for a day or two, lead the slicing, and get a final thumbs-up / thumbs-down.
  63. 63. Example ‘Sliced’ Story Map Choose a few models Decide which he wants Buy the car Make a list of stuff he wants Search based on his criteria Check best-looking cars Check Consumer Reports Test drive all of them Ask his friend Rent one Find the cars locally Physically visit the dealer Search dealer reviews Negotiate the cost Get KBB and Edmunds prices time necessity release #1 release #2 release #3 scope
  64. 64. Description Prioritized Personas Need Have Can ...direction and focus to limit scope. ...any kind of personas. scope ...lead a heated session to drive agreement around the prioritization and document that agreement.
  65. 65. Example Prioritized Personas scope
  66. 66. Example Prioritized Personas scope
  67. 67. Description Goal Venn Need Have Can scope ...a way to take into account and reconcile multiple sets of goals, especially to identify opportunities where they overlap. ...multiple sets of goals. ...work alone or with collaborator(s) over a few hours or days.
  68. 68. Example Goal Venn scope
  69. 69. Example Goal Venn (with tasks) scope
  70. 70. Description Product Model Need Have Can scope ...more clarification or agreement from the team on what the product will and will not do, or inspiration or clarity from underlying objective truths. ...an at least general understanding of what the product will and will not do. ...use any kind of mapping tool (or pencil and paper) and have a few days to a few weeks.
  71. 71. Example Product Model scope
  72. 72. Example Product Model scope
  73. 73. Description Illustrated Storyboards Need Have Can scope ...a tangible representation of big concepts to help generate focus and movement, something executives can understand and buy-in on, and you need it quickly. ...one or more big ideas, some ideas about personas, and agreement on some relatively specific stories or scenarios. ...create professional-looking stories, through sketching or illustration, and have a few days.
  74. 74. Example Illustrated Storyboards scope
  75. 75. Description Written Scenarios Need Have Can ...detailed real-world stories to bridge the gap between concept and implementation, strategy and scope, to be reviewed, collaborated on and approved by teams who prefer solo work and reading. ...personas with goals, and an understanding of strategy. ...write, and have a few days to a week. scope
  76. 76. Example Written Scenarios scope
  77. 77. Example Written Scenarios scope
  78. 78. Written Scenarios scope Exercise Try it!
  79. 79. Description Feature Prioritization Matrix Need Have Can scope ...some way of sorting through and agreeing on prioritization of an overwhelming number of requests to be able to move forward. ...one or several big lists of features, requirements or stories (as in a backlog, PRD, help desk logs, etc.). ...get buy-in from product and engineering, do this kind of very focused and detailed work, use Excel, and have a few days or weeks.
  80. 80. [3] Example Feature Matrix 1. Start with a list of features scope
  81. 81. 2. Take a stab at how much you think the personas care. [3] scope Example Feature Matrix
  82. 82. 3. Add biz priority and guess at technical effort. [3] scope Example Feature Matrix
  83. 83. This will give you a rough number to use for prioritizing [3] scope Example Feature Matrix
  84. 84. Example (remember to set up your scales so that a high number = good and a low number = bad or vice-versa) scope Feature Matrix
  85. 85. Other Places to Look •resource availability •technical feasibility scope
  86. 86. Structure text
  87. 87. structure Structure Structure gives shape to scope: How will the pieces of the product fit together and behave?
  88. 88. structure Structure Feedback • structural intent (utilitarian, entertaining, focuses, etc.) • structural objects • priorities of structural objects • relationships between structural objects
  89. 89. Structure IxD Tools •sketched flows * •user flows / storyboards •functional diagrams •navigation model •information architecture •product maps structure
  90. 90. Description Sketched Flows Need Have Can ...detailed stories to bridge the gap between scope and structure, to be created and approved by teams who prefer collaborating or visual representations, or to get an early sense of technical feasibility. ...personas of any kind, and a good understanding of strategy and scope. ...draw, and have a few days. structure
  91. 91. Example Sketched Flows structure
  92. 92. Description User Flows Need Have Can structure ...detailed stories from the user perspective that take into account offline activities, more refined and "final" than sketched flows, to be created and approved by teams who prefer collaborating or visual representations, to share with stakeholders, or to get an early sense of technical feasibility. ...personas of any kind, possibly sketched flows, and a good understanding of strategy and scope. ...use an illustration tool and have one to several weeks.
  93. 93. Example User Flows structure
  94. 94. Example User Flows structure
  95. 95. Example User Flows structure
  96. 96. Description Functional Diagrams Need Have Can structure ...to understand or get agreement on a detailed map of how a system or set of systems work, and/or to check technical feasibility, to be reviewed, collaborated on and approved by teams who prefer visual representations. ...some understanding of strategy, scope, and any relevant business or engineering requirements. ...use an illustration tool and have one to several weeks.
  97. 97. Example Functional Diagrams structure
  98. 98. Description Navigation Model Need Have Can structure ...the relationship between the content and objects, agreement on organizational strategy, a sense of depth vs. breadth and how much each page must do. ...a broad idea (or several) of the content and objects and their priorities. ...use some kind of mapping tool (including pencil and paper) to map out options.
  99. 99. Example Navigation Model structure
  100. 100. Example Navigation Model structure
  101. 101. Example Navigation Model structure
  102. 102. Example Navigation Model structure
  103. 103. Description Information Architecture Need Have Can ...to see whether the navigation model will hold up, to account for every page, and to see what the navigation elements will need to support (usually for a content-based site). ...a fairly detailed idea of the content and objects and agreement on their relationships and priorities (as from a navigation model). ...use some kind of mapping tool to map out options. structure
  104. 104. Example Information Architecture structure
  105. 105. Example Information Architecture structure
  106. 106. Example Information Architecture structure
  107. 107. Description Product Map Need Have Can structure ...to see what the areas of the site will be, to account for every page, to be able to see and rationalize systems across the site, and to see what each page will need to accommodate (usually for an app). ...a solid understanding of strategy and scope, and a good sense of what the objects are you'll be dealing with from workflows or similar. ...use a mapping tool and have one to several weeks.
  108. 108. Example Product Map structure
  109. 109. Skeleton text
  110. 110. skeleton Skeleton Skeleton makes structure concrete: What components will enable people to use the product?
  111. 111. skeleton Skeleton Feedback • general mood (powerful, simple, etc.) • specific elements and information • hierarchy of elements • relationship between the elements
  112. 112. Skeleton IxD Tools •concept sketches * •page framework •concept wireframes •page type wireframes •annotated wireframes (functional specifications) •basic prototype •component library skeleton * exercise
  113. 113. Description Concept Sketches Need Have Can skeleton …specific early reactions to my ideas from the Product Manager and engineering, a start on how key ideas might be instantiated in this project very quickly and without too much effort or time invested. …an idea of what the product does and its scope, plus a few ideas about how that might play out. …quickly draw broad areas of a screen, but only have a few hours.
  114. 114. Example Concept Sketches skeleton
  115. 115. Description Page Framework Need Have Can skeleton ...to get agreement on the relationship between broad page areas, and the focus of the site. ...a solid sense of strategy, scope and structure — you know what the big pieces are. Sometimes some wireframes have been completed. …quickly draw broad areas of a screen, and have a few hours to days.
  116. 116. Example Page Framework skeleton
  117. 117. Example Page Framework skeleton
  118. 118. Example Page Framework skeleton
  119. 119. Description Concept Wireframes Need Have Can skeleton …specific reactions to my ideas from the Product Manager, a start on how key ideas might be instantiated in this project. …an idea of what the product does and its scope, plus a few ideas about how that might play out. …quickly draw broad areas of a screen, and I have a few days to work out some ideas.
  120. 120. Example Concept Wireframes skeleton
  121. 121. Example Concept Wireframes skeleton
  122. 122. Description Page Type Wireframes Need Have Can skeleton ...to get agreement on the elements of the page, their relationship to one another and functionality, as well as technical feasibility, without worrying about visual appearance. ...a solid sense of strategy, scope and structure — you know what the big pieces are and how they'll fit together. Often the next stage after workflows, maps or concept wireframes. ...use some kind of wireframing tool and have a week to several weeks available.
  123. 123. Example Page Type Wireframes skeleton
  124. 124. Example Page Type Wireframes skeleton
  125. 125. Example Page Type Wireframes skeleton
  126. 126. Example Page Type Wireframes skeleton
  127. 127. Example Page Type Wireframes skeleton
  128. 128. Example Page Type Wireframes skeleton
  129. 129. Description Basic Prototype Need Have Can ...to develop a feeling of what it will be like to use the product, either for team or stakeholder buy-in, or for usability research. ...team agreement on detailed real world stories. skeleton ...create a rough prototype using paper, prototyping or illustration tools, and have one to several weeks.
  130. 130. Example Basic Prototype skeleton
  131. 131. Example Basic Prototype skeleton
  132. 132. Example Basic Prototype skeleton
  133. 133. Example Basic Prototype skeleton
  134. 134. Description Component Library Need Have Can skeleton ...to reuse elements as part of a system to avoid complexity for you, the engineers and the users, and to simplify documentation going forward. ...a good understanding of several page elements. ...create and maintain detailed specifications of behavior, and use the system appropriately going forward.
  135. 135. Example Component Library skeleton
  136. 136. Example Component Library skeleton
  137. 137. Surface text
  138. 138. surface Surface Surface brings everything together visually: What will the finished product look like?
  139. 139. Surface Feedback • visual appearance and mood: colors, fonts, spacing, etc. • all graphics: buttons, logos, icons, etc. • possibly copy and typos surface
  140. 140. Surface D Tools •annotated wireframes / mockups •mood boards •visual direction comps •final mockups •detailed prototype •production artwork •visual specification •design library •bugs surface
  141. 141. Description surface Annotated Wireframes / Mockups Need Have Can ...to deliver a detailed description to engineering and QA so that it can be built as you've designed it. ...an agreed-upon set of objects, wireframes and elements. …can write, diagram or animate a detailed description of how the states, functionality and element actions, including all possible cases.
  142. 142. Example surface Annotated Wireframes / Mockups
  143. 143. Example surface Annotated Wireframes / Mockups
  144. 144. Example skeleton surface Annotated Wireframes / Mockups
  145. 145. Example skeleton surface Annotated Wireframes / Mockups
  146. 146. Example skeleton surface Annotated Wireframes / Mockups
  147. 147. Example skeleton surface Annotated Wireframes / Mockups
  148. 148. Description Mood Board Need Have Can surface ...to quickly narrow in on a visual direction with the core team and stakeholders. ...a good sense of your audience, but little other precedence. ...collect examples of images, objects, text, and sites into collections, and have a few days.
  149. 149. Example Mood Board skeleton surface
  150. 150. Description Visual Direction Comps Need Have Can surface ...to narrow in on a specific visual design direction with the team. ...a solid sense of your audience, a general sense of visual direction from existing products or mood boards, and what one or several pages must accomplish from maps or wireframes. ...create a variety of polished mockups and have one to several weeks.
  151. 151. Example Visual Direction Comps skeleton surface
  152. 152. Example Visual Direction Comps skeleton surface
  153. 153. Example Visual Direction Comps skeleton surface
  154. 154. Example Visual Direction Comps skeleton surface
  155. 155. Description Final Mockups Need Have Can ...to finalize visual design with the team, and to provide engineering with mockups of each page type. ...accounted for all page types with wireframes or maps and agreed on visual direction. ...create polished mockups and have one to several weeks. surface
  156. 156. Example Final Mockups skeleton surface
  157. 157. Example Final Mockups skeleton surface
  158. 158. Description Detailed Prototype Need Have Can surface ...to show exactly what it will be like to use the product, either for team or stakeholder buy-in, for usability research, or as a specification for engineering and QA. ...team agreement on detailed real world stories, in the form of user flows or maps or a basic prototype. ...create a realistic-seeming prototype using paper, prototyping or illustration tools, and have one to several weeks.
  159. 159. Example Detailed Prototype skeleton surface
  160. 160. Example Detailed Prototype skeleton surface
  161. 161. Description Production Artwork Need Have Can surface ...to deliver final, production-ready artwork to engineering. ...final page type mockups and an understanding of necessary variations. ...create production-ready artwork based on an understanding of how the page will be built, and have one to several days.
  162. 162. Example Production Artwork skeleton surface
  163. 163. Description Visual Specification Need Have Can surface ...to deliver a detailed description to engineering and QA so that it can be built as you've designed it. ...final page type mockups and an understanding of necessary variations. ...create a detailed specification based on an understanding of how the page will be built, and have one to several days.
  164. 164. Example Visual Specification skeleton surface
  165. 165. Example Visual Specification skeleton surface
  166. 166. Description Design Library Need Have Can ...to reuse elements as part of a system to avoid complexity for you, the engineers and the users, and to simplify documentation going forward. ...agreed-upon final design for several page types and a set of elements that are reused from page to page. ...create and maintain detailed specifications of appearance, and use the system appropriately going forward. surface
  167. 167. Example Design Library skeleton surface
  168. 168. Example Design Library skeleton surface
  169. 169. Description Bugs Need Have Can surface ...to respond to a product in development, to ensure it’s released as designed. ...access to the bug database engineering and QA are using, access to the product in development, and existing documentation. ...follow proper QA processes, file a clear bug and have a few hours to a few days or a week.
  170. 170. Example Design Library skeleton surface
  171. 171. Other Places to Look •competitors •styles / trends surface
  172. 172. That’s It for Tools!
  173. 173. Nota Bene • For all of these, garbage in, garbage out. • Agreements must be documented somewhere. • These are some tools, not THE tools.
  174. 174. (We Didn’t Cover Research) • “Back-Pocket” Research • Guerilla2 Research (airports) • Guerilla Research • Five for Fridays • Formal Usability • In-Home Visits usability ethnographic
  175. 175. Example Processes 1. Design studio 2. Concept wireframes 3.Visual direction comps 4. Prototype
  176. 176. Example Processes 1. Formal personas 2. Competitive analysis 3. Unsliced story map 4. Prioritized personas 5. Sliced story map 6. Written scenarios 7. Storyboards 8. Product map 9. Concept wireframes 10. Page framework 11. Page type wireframes 12. Basic prototype 13. Mood boards 14. Visual direction comps 15. Final mockups 16. Detailed prototype 17. Production artwork 18. Visual spec 19. Widget library
  177. 177. More Reading Much, much more to add here 1. Don’t Make Me Think, Steve Krug 2. The Inmates are Running the Asylum, Alan Cooper 3. The User is Always Right, Steve Mulder and Ziv Yaar 4. The Elements of User Experience, Jesse James Garrett 5. About Face: The Essentials of Interaction Design, Alan Cooper 6. “From Use to User Interface”, Jeff Patton http://www.slideshare.net/abcd82/from-use-to-user-interface-presentation 7. “Personas for Product Management”, Marty Cagan http://www.svpg.com/personas-for-product-management/ 8. “Death to Personas! Long Live Personas!”, Elizabeth Bacon & Steve Calde http://www.slideshare.net/ebacon/death-to-personas-long-live-personas-presentation 9. “Summary of Usability Inspection Methods”, Jakob Nielsen http://www.useit.com/papers/heuristic/inspection_summary.html 10. Usability Inspection Methods, Jakob Nielsen 11. “SVPG Newsletter: Process Police”, Marty Cagan http://www.svpg.com/process-police/ 12. “How Do You Design”, Hugh Dubberly http://www.dubberly.com/articles/how-do-you-design.html 13. Writing Effective Use Cases, Alistair Cockburn 14. “Rapid Prototyping Tools”, Dan Harrelson http://www.adaptivepath.com/blog/2009/03/24/rapid-prototyping- tools/ 15. Inspired: How To Create Products Customers Love, Marty Cagan 16. Ad Hoc Personas: http://www.uie.com/events/virtual_seminars/ad_hoc_personas/ (she describes a pretty difficult technique) 17. Designing for Interaction: Creating Innovative Applications and Devices, EPub 18. By Dan Saffer
  178. 178. Good Luck! Call us if you need anything else, and thank you! Audrey Crane 415.868.4369 audrey@designmap.com Nathan Kendrick nathan@designmap.com This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

×