{"id":9097,"date":"2015-09-30T01:27:32","date_gmt":"2015-09-30T01:27:32","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=9097"},"modified":"2024-05-16T06:24:32","modified_gmt":"2024-05-16T13:24:32","slug":"how-to-document-your-designs-for-easier-reuse","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/","title":{"rendered":"How to Document Your Designs for Easier Reuse"},"content":{"rendered":"<p>There are three recurring problems on web design projects that affect your interest and ability to complete them: time, invention, and novelty. I\u2019d like to help you solve all three.<\/p>\n<p>The time problem is one of deadlines. Even when you have months to work out the details of the product, the deadline invariably comes sooner than you\u2019d like it to. Most are far tighter than that. When you have so little, you\u2019d like to spend it on the right things. The <em>important<\/em> things.<\/p>\n<p>That leads you to the invention problem. Whoever it is you work for, your team\u2019s biggest challenge is to build the cool stuff the world has never seen before \u2014 the things that\u2019ll make your product awesome and exciting. This should be your biggest time-suck.<\/p>\n<p>Unfortunately, what is <em>actually<\/em> your biggest time-suck is all the boring stuff you\u2019ve done a million times before and can\u2019t stand to think about. Like search systems. Registration forms. Homepage layouts that communicate the same few things they always do (value proposition, major features and benefits, pricing, how to sign up, etc). These things take up a ton of your time, and are nowhere near as exciting as inventing and dominating a niche industry.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9111\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-29-at-7.54.26-PM.png\" alt=\"photo of a comfortable sofa behind crisp, white text that says \u2018New Collection,\u2019 presumably of trendy furniture\" width=\"720\" height=\"418\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-29-at-7.54.26-PM.png 1906w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-29-at-7.54.26-PM-517x300.png 517w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-29-at-7.54.26-PM-1024x594.png 1024w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>Photo credit:<a href=\"http:\/\/compliments.dk\/\" target=\"_blank\" rel=\"noopener noreferrer\">Compliments DK<\/a><\/p>\n<p>And that leaves us at the wrong end of the novelty problem. What you hoped you\u2019d spend your time on when you started your job is the cool stuff, but what you actually spend your time on is the boring stuff. It\u2019s not challenging. It\u2019s not interesting. It\u2019s barely worth sticking around for. You want to work on something new and interesting for a change.<\/p>\n<p>Dealing with all of these things requires a <em>reuse strategy<\/em>.<\/p>\n<h2>Adopting a Reuse Strategy<\/h2>\n<p>A reuse strategy is a plan for how and when to reuse existing elements from your product or suite of products for any new design. By doing so, you can better focus your time on the tougher and more exciting aspects of the project.<\/p>\n<p>There are three types of reusable elements to know about: design patterns, components, and interaction design frameworks. Back in 2009, I coauthored a book with Jared Spool on the subject called <a href=\"http:\/\/www.amazon.com\/Web-Anatomy-Interaction-Design-Frameworks-ebook\/dp\/B002ZY5FCW\/ref=sr_1_1?ie=UTF8&amp;qid=1443115456&amp;sr=8-1&amp;keywords=web+anatomy\">Web Anatomy (New Riders)<\/a>, wherein we called these three elements the \u201cReuse Trinity.\u201d Each type can be collected into a library. A pattern library, for example, is a collection of documented design patterns.<\/p>\n<p>After that, it\u2019s a matter of putting it all together into a library of solved problems. Below, I\u2019ll describe the 3 levels of the reuse strategy in order of complexity.<\/p>\n<h2>Documenting UI Design Patterns<\/h2>\n<p>As explained in <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-best-practices\/\">Web UI Best Practices<\/a>, design patterns are recurring solutions to common problems. They are the most atomic level in the Reuse Strategy.<\/p>\n<p>A search box, for example, usually looks pretty similar to all the others. It\u2019s a basic input field with some sort of trigger for submitting the query. It\u2019s on your phone. It\u2019s part of your desktop browser. It\u2019s on every content-based website.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9098\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0111.png\" alt=\"A search box with automatic results.\" width=\"317\" height=\"124\" \/><\/p>\n<p><em>Photo credit: <a href=\"http:\/\/www.theatlantic.com\/\">The Atlantic<\/a><\/em><\/p>\n<p>It\u2019s a pattern because of exactly that: a bunch of sites with the same problem solving it in roughly the same way. Patterns make websites and apps more learnable for users. Since they\u2019ve already used the pattern on other sites, users can easily learn how to interact with them on yours.<\/p>\n<p>When developing a pattern library, make sure you document your patterns with the following details:<\/p>\n<ul>\n<li><strong>Name<\/strong> \u2013 The name of the pattern so you can all recognize it and find it within your patterns<\/li>\n<li><strong>Description <\/strong><strong>\u2013 <\/strong>A short summary of its purpose<\/li>\n<li><strong>Context of use<\/strong> \u2013 Where and when you\u2019re most likely to find the pattern put to use (a search box would appear on most pages of a content site, for example, perhaps at the top of the page)<\/li>\n<li><strong>Where used <\/strong><strong>\u2013 <\/strong>This is a list of links to examples of it in action on a live website or app<\/li>\n<li><strong>How it works<\/strong> \u2013 A description of the actions a user takes and what happens as a result<\/li>\n<\/ul>\n<p>It\u2019s pretty common these days for designers to have collections of stencils for Keynote, Photoshop, Illustrator, and other apps that are full of little wireframe versions of these patterns. If you\u2019re using <a href=\"https:\/\/www.uxpin.com\/\">UXPin<\/a>, you can actually use customizable libraries and smart elements to create your own reusable pattern library.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12718\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/1-Adding-a-ghost-button-from-a-team-library.gif\" alt=\"Adding a ghost button from a team library to a web design.\" width=\"700\" height=\"447\" \/><\/p>\n<p><i>Photo credit: Created by <\/i><a href=\"https:\/\/www.uxpin.com\"><i>UXPin<\/i><\/a><i> designers<\/i><\/p>\n<h2>Design Components<\/h2>\n<p>Components are the fully-developed versions of patterns, specific to a company. As in, an insurance company with a lot of forms on its website might build out all of its typical form elements and compile them into a library where they can document how and when they should be used.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9100\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0412.png\" alt=\"Web form that offers to save people money if they enter their ZIP code, type of insurance, etc.\" width=\"485\" height=\"395\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0412.png 485w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0412-368x300.png 368w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><\/p>\n<p>Photo credit: <a href=\"https:\/\/www.progressive.com\/\">Progressive Insurance<\/a><\/p>\n<p>Component documentation typically contains the following pieces of information:<\/p>\n<ul>\n<li><strong>Name<\/strong>: Again, just a recognizable name for the element<\/li>\n<li><strong>Version number<\/strong>: Used so everyone knows which version is most current and whether or not an instance of one on a website is current<\/li>\n<li><strong>Definition\/description<\/strong>: A short summary of its purpose<\/li>\n<li><strong>Usage<\/strong>: User actions and outcomes<\/li>\n<li><strong>Sample<\/strong>: Links to an instance of the pattern in use, or the actual component itself<\/li>\n<li><strong>Code snippets<\/strong>: The code for implementing the component in your new design (this is the most important part)<\/li>\n<\/ul>\n<h2>Interaction Design Frameworks<\/h2>\n<p>The third type of reusable element is the most robust. An interaction design framework is, basically, a collection of patterns that come together to solve a larger problem.<\/p>\n<p>For example, an entire search system. Rather than apply just the search field pattern, you\u2019d apply the search field, the search results, maybe a type-ahead pattern (to speed up searching and to let users know what exists to be searched), pagination at the bottom of the search results pages, and an Advanced Search option with its accompanying page.<\/p>\n<p>IxD Framework Documentation for Site Search:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9101\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0311.png\" alt=\"A complicated search form with instructions. Also the term \u2018search\u2019 with defitions and related links.\" width=\"720\" height=\"588\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0311.png 837w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0311-367x300.png 367w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>Documenting a framework like this is similar in concept to white-labeling a website template. Rather than design any of this boring stuff from scratch, you drop the entire set of IxD framework wireframes into your design and just tweak as needed. If you have each element built out as a component, you can just plug the code for every piece of it into the entire site and move onto the cool stuff.<\/p>\n<p>IxD frameworks typically include:<\/p>\n<ul>\n<li><strong>Name<\/strong>: Need I say more?<\/li>\n<li><strong>Description<\/strong>: You know what this is by now<\/li>\n<li><strong>Context of use<\/strong>: When and why the user would encounter this collection of elements<\/li>\n<li><strong><a href=\"http:\/\/ux.stackexchange.com\/questions\/45405\/what-are-the-differences-between-user-flows-task-flows-and-workflows\" target=\"_blank\" rel=\"noopener noreferrer\">Task flow<\/a><\/strong>: What steps the user will take and what will happen as a result<\/li>\n<li><strong>Elements<\/strong>: This is a list of the design patterns or components used in the framework (as described a moment ago in the search example)<\/li>\n<li><strong>Related frameworks<\/strong>: A list of any other frameworks that go along with this one (an eCommerce catalog framework, for example, should accompany a shopping cart framework for purchasing)<\/li>\n<li><strong>Design criteria<\/strong>: A list of design principles you should consider when tweaking the framework for your own use (these should be specific to your company and help you achieve the overarching strategic goals, like decreasing abandoned shopping carts by making the order cost more visible or something else)<\/li>\n<\/ul>\n<h2>Building the Library<\/h2>\n<p>Developing these reusable elements into a library can be a slow process, but over time, it gets faster, and with every bit of progress, it pays off more.<\/p>\n<p>Here\u2019s how you do it:<\/p>\n<ul>\n<li><strong>Look around:<\/strong> Take some time to audit your entire product catalog or website and put together a list of commonalities. Do you always use the same header layouts? Do you always have an About Us section with basically the same things inside? Are all your search processes designed in a similar way? Anytime you spot something used more than twice, make a note of where you found it. It\u2019s a potential candidate for the library.<\/li>\n<li><strong>Note the exceptions:<\/strong> Also keep your eye out for the <em>exceptions<\/em> to the norm. Add links to those instances to your list so you can document when and why and how to apply the reusable element differently in future designs.<\/li>\n<li><strong>Add it up:<\/strong> Anytime a new recurring design element is established, add it to the list as well.<\/li>\n<\/ul>\n<p>Take a closer look at common UI patterns. To get started, <a href=\"https:\/\/www.uxpin.com\">UXPin<\/a> offers several useful free eBooks on the subject, including <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ultimate-web-ui-design-pattern-workbook\/\">Tactical UI Patterns<\/a>, <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-design-patterns\/\">Web UI Patterns<\/a>, and <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/mobile-design-patterns\/\">Mobile UI Patterns<\/a>.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ultimate-web-ui-design-pattern-workbook\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9104\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/fb-promo4.png\" alt=\"Learn how to use and customize the best web UI patterns. Tips, tutorials and more than 140 example included. Download this e-book for free.\" width=\"720\" height=\"303\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/fb-promo4.png 950w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/fb-promo4-700x295.png 700w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Know the 3 useful types of documentation that help you reuse existing designs. Written by &#8220;Web Anatomy&#8221; author and designer Robert Hoekman Jr.<\/p>\n","protected":false},"author":40,"featured_media":9102,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,18,4,6,7],"tags":[],"class_list":["post-9097","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-documentation","category-process","category-ui-design","category-ux-design","category-web-design"],"yoast_title":"How to Document Your Designs for Easier Reuse | UXPin","yoast_metadesc":"Know the 3 useful types of documentation that help you reuse existing designs. Written by \"Web Anatomy\" author and designer Robert Hoekman Jr.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Document Your Designs for Easier Reuse | UXPin<\/title>\n<meta name=\"description\" content=\"Know the 3 useful types of documentation that help you reuse existing designs. Written by &quot;Web Anatomy&quot; author and designer Robert Hoekman Jr.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Document Your Designs for Easier Reuse\" \/>\n<meta property=\"og:description\" content=\"Know the 3 useful types of documentation that help you reuse existing designs. Written by &quot;Web Anatomy&quot; author and designer Robert Hoekman Jr.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-30T01:27:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-16T13:24:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0211.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Robert Hoekman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Robert Hoekman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/\"},\"author\":{\"name\":\"Robert Hoekman\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/4d572ee55f3f73be022b5b2d52402187\"},\"headline\":\"How to Document Your Designs for Easier Reuse\",\"datePublished\":\"2015-09-30T01:27:32+00:00\",\"dateModified\":\"2024-05-16T13:24:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/\"},\"wordCount\":1405,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/image0211.png\",\"articleSection\":[\"Documentation\",\"Process\",\"UI Design\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/\",\"name\":\"How to Document Your Designs for Easier Reuse | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/image0211.png\",\"datePublished\":\"2015-09-30T01:27:32+00:00\",\"dateModified\":\"2024-05-16T13:24:32+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/4d572ee55f3f73be022b5b2d52402187\"},\"description\":\"Know the 3 useful types of documentation that help you reuse existing designs. Written by \\\"Web Anatomy\\\" author and designer Robert Hoekman Jr.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/image0211.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/image0211.png\",\"width\":1000,\"height\":300,\"caption\":\"image0211\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/ui-design\\\/how-to-document-your-designs-for-easier-reuse\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Document Your Designs for Easier Reuse\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/4d572ee55f3f73be022b5b2d52402187\",\"name\":\"Robert Hoekman\",\"description\":\"Robert Hoekman Jr is a product strategy consultant and author who has spoken to packed rooms all over the world. He has written \\\"Designing the Obvious\\\" as well as other web design books. He is a columnist for the revered motorcycle culture and lifestyle magazine Iron &amp; Air. Learn more about him at www.rhjr.net.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/roberthoekman\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Document Your Designs for Easier Reuse | UXPin","description":"Know the 3 useful types of documentation that help you reuse existing designs. Written by \"Web Anatomy\" author and designer Robert Hoekman Jr.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/","og_locale":"en_US","og_type":"article","og_title":"How to Document Your Designs for Easier Reuse","og_description":"Know the 3 useful types of documentation that help you reuse existing designs. Written by \"Web Anatomy\" author and designer Robert Hoekman Jr.","og_url":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/","og_site_name":"Studio by UXPin","article_published_time":"2015-09-30T01:27:32+00:00","article_modified_time":"2024-05-16T13:24:32+00:00","og_image":[{"width":1000,"height":300,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0211.png","type":"image\/png"}],"author":"Robert Hoekman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Robert Hoekman","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/"},"author":{"name":"Robert Hoekman","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/4d572ee55f3f73be022b5b2d52402187"},"headline":"How to Document Your Designs for Easier Reuse","datePublished":"2015-09-30T01:27:32+00:00","dateModified":"2024-05-16T13:24:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/"},"wordCount":1405,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0211.png","articleSection":["Documentation","Process","UI Design","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/","url":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/","name":"How to Document Your Designs for Easier Reuse | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0211.png","datePublished":"2015-09-30T01:27:32+00:00","dateModified":"2024-05-16T13:24:32+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/4d572ee55f3f73be022b5b2d52402187"},"description":"Know the 3 useful types of documentation that help you reuse existing designs. Written by \"Web Anatomy\" author and designer Robert Hoekman Jr.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0211.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0211.png","width":1000,"height":300,"caption":"image0211"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/ui-design\/how-to-document-your-designs-for-easier-reuse\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Document Your Designs for Easier Reuse"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/4d572ee55f3f73be022b5b2d52402187","name":"Robert Hoekman","description":"Robert Hoekman Jr is a product strategy consultant and author who has spoken to packed rooms all over the world. He has written \"Designing the Obvious\" as well as other web design books. He is a columnist for the revered motorcycle culture and lifestyle magazine Iron &amp; Air. Learn more about him at www.rhjr.net.","url":"https:\/\/www.uxpin.com\/studio\/author\/roberthoekman\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/9097","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=9097"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/9097\/revisions"}],"predecessor-version":[{"id":53019,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/9097\/revisions\/53019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/9102"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=9097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=9097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=9097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}