This can include a style guide but also includes documentation for written copy, branding, and essential UX components that ultimately make up the user experience.<\/p>\n\n\n\n
- Great docs Speak To Everyone<\/a><\/li>
- Starting With Style Tiles<\/a><\/li>
- Deliverable Style Guides<\/a><\/li>
- Capturing The User Experience<\/a><\/li>
- Further Resources<\/a><\/li><\/ol>\n\n\n\n
Feel free to skip to the section that interests you most, or simply read on:<\/p>\n\n\n\n
Great Docs Speak To Everyone<\/h2>\n\n\n\n
Documentation should be easy to consume yet detailed enough to follow without any prior knowledge. Great design documentation should care about the miniscule details like pixel widths and RGB\/Hex color values.<\/p>\n\n\n\n
But it should also portray a broad picture<\/a> of the overall design. It needs to communicate how the design should look, feel, behave, and ultimately be composed on the screen.<\/p>\n\n\n\n
You can use design documentation as both a selling point and a communication tool for your vision. This is incredibly useful when you work in a team but it\u2019s just as useful on your own projects.<\/p>\n\n\n\n
You can always come back to design documentation to refresh your memory about the goals & objectives of a certain project. It\u2019s also great for new designers who join a team and need design guidelines to add new widgets or new pages into a site.<\/p>\n\n\n\n
Think about Google\u2019s material design project<\/a> and how far it has come over just a few years. This is a powerful example of design documentation at work.<\/p>\n\n\n\n
![\"Material](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/01-material-design-documentation.jpg\")
<\/figure>\n\n\n\nAnyone from around the world can look over these docs and mimic the Google design strategy. It applies to all interfaces from websites to mobile apps.<\/p>\n\n\n\n
But this documentation is more than just a set of rules. According to Wikipedia<\/a> it\u2019s really a design language<\/strong> used to express ideas visually. Great documentation should aim to create a design language.<\/p>\n\n\n\n
It should be able to express any idea visually and cover enough depth so that nobody is left guessing how to design a new icon or custom UI element.<\/p>\n\n\n\n
If you\u2019re looking for examples check out DesignGuidelines<\/a>, a new site dedicated to curating online design guides.<\/p>\n\n\n\n
![\"DesignGuidelines,](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/02-design-guidelines-webapp-homepage-1.jpg\")
<\/figure>\n\n\n\nBut it doesn\u2019t take many examples to pick up the basics. Any great design documentation should be intuitive, easy to read, and simple to understand.<\/p>\n\n\n\n
Everyone from the creative team to the higher-level executives should be able to understand the creative direction just from looking over a project\u2019s design documentation.<\/p>\n\n\n\n
Starting With Style Tiles<\/h2>\n\n\n\n
When you\u2019re in the early phases of a creative project you need to get ideas down and see how they fit. Style tiles<\/a> are the perfect resource for designers to organize a series of colors, patterns, logos, and UI elements together into one place.<\/p>\n\n\n\n
![\"Style](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/03-style-tiles-website.jpg\")
<\/figure>\n\n\n\nThis may be considered a type of design documentation but it\u2019s also a powerful resource in the early stages of a new site(or a site redesign).<\/p>\n\n\n\n
Check out this guide<\/a> explaining the basics of style tiles and how they apply to the web.<\/p>\n\n\n\n
There are no specific rules and the ultimate goal is to share an overall vision<\/strong> of the design including typography, colors, patterns, and maybe sample widgets like a navigation menu.<\/p>\n\n\n\n
This may seem like extra work but there are plenty of reasons to start with style tiles.<\/p>\n\n\n\n
- Quicker & easier to create from scratch<\/li>
- A visual form of rapid prototyping<\/a><\/li>
- Demonstrates the \u201cbig picture\u201d of the design<\/li><\/ul>\n\n\n\n
Also remember that a web project may have different phases of the design. The first phase might be identity & branding followed by the interface.<\/p>\n\n\n\n
In this case you might create different style tiles for different phases, then expand the tiles into detailed documentation once you pick one.<\/p>\n\n\n\n
For example Foursquare has an entire brand book<\/a> just for their logo and icon.<\/p>\n\n\n\n
![\"Foursquare](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/04-foursquare-brand-book-screenshot.jpg\")
<\/figure>\n\n\n\nThis PDF includes design guidelines for the logo, the icon, and some of the badges created for Foursquare users.<\/p>\n\n\n\n
Style tiles should be much lighter than a brand book. However the inspiration for a style tile can ultimately funnel into a detailed brand book or UI design document.<\/p>\n\n\n\n
Use these to your advantage during the early phase of a creative project. Once you know which design style is a winner you can flesh out more detailed ideas.<\/p>\n\n\n\n
And to learn more about style tiles check out some of these related posts.<\/p>\n\n\n\n
- Style Tiles: An Alternative to Full Design Comps<\/a><\/li>
- Style Tiles and How They Work<\/a><\/li>
- Free Style Tiles Template<\/a><\/li><\/ul>\n\n\n\n
Deliverable Style Guides<\/h2>\n\n\n\n
Web projects rely on style guides just as much as any other design project. These guides are the final \u201cpolished\u201d documentation for UI designers to study and replicate.<\/p>\n\n\n\n
Google\u2019s material design is one example of a free open source design doc. It tells designers how to style buttons, tabs, and other widgets. It also delves into animation effects and how a material layout should \u201cfeel\u201d when the user interacts with the page.<\/p>\n\n\n\n
![\"Deliverable](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/05-style-guides-dark-samples.jpg\")
<\/figure>\n\n\n\nBefore you start a new style guide you should consider what you need to cover.<\/p>\n\n\n\n
There are no specific limits but you should consider a variety of topics:<\/p>\n\n\n\n
- Primary\/secondary\/tertiary colors<\/li>
- Typographic styles and font choices<\/li>
- Background patterns<\/li>
- Button designs<\/li>
- Photography<\/li>
- Icon styles with examples<\/li>
- Forms & input fields<\/li>
- Wireframe flows<\/li><\/ul>\n\n\n\n
Remember you want to capture the big picture<\/strong> of the design while also documenting all the little details<\/strong> from button sizes to font styles.<\/p>\n\n\n\n
This guide will become the design documentation for whatever site you\u2019re designing. As you craft the design try to break up elements into sections that you can use for a table of contents.<\/p>\n\n\n\n
![\"Adobe](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/06-adobe-style-guide-sample.jpg\")
<\/figure>\n\n\n\nFor example, you might have one section on typography and another on buttons or form inputs. A designer should be able to skim through your documentation and quickly find whatever they need.<\/p>\n\n\n\n
In many cases it\u2019ll be better to create design documentation as a PDF along with a webpage. This page can be private for internal use only, or it can be public and shared freely.<\/p>\n\n\n\n
Take for example Mozilla’s style guide<\/a> webpage.<\/p>\n\n\n\n
![\"Mozilla's](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/07-mozilla-style-guide.jpg\")
<\/figure>\n\n\n\nThis certainly isn\u2019t the most detailed style guide but it does cover a lot. You could use this as a basis for starting your own documentation while adding sections as needed.<\/p>\n\n\n\n
Keep in mind that mobile is on the rise so you should document any specific details for the responsive layout. Do headers need to be resized? How much padding do you need on buttons?<\/p>\n\n\n\n
It may seem annoying to get into this much detail but designers who pick up your documentation will be forever grateful.<\/p>\n\n\n\n
Capturing The User Experience<\/h2>\n\n\n\n
Style guides are basically the de facto solution for design documentation. They can cover an entire interface full of elements, colors, and basic style choices.<\/p>\n\n\n\n
But a much newer aspect of design documentation is user experience<\/strong>, and I think this will become even more important as time goes on.<\/p>\n\n\n\n
The normal design docs include colors, spacing, fonts and icons. But you also need to consider how the interface behaves and how it should operate.<\/p>\n\n\n\n
Do you have any CSS\/JS animation? And how are those interface animations<\/a> created? What sort of easing and timing should be used? What about page flows & interactive elements like forms?<\/p>\n\n\n\n
![\"page](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/08-wireflow-website-design.jpg\")
<\/figure>\n\n\n\nDon\u2019t be afraid to add far more detail than you might think would be useful. This extra layer of info can be an asset to future designers.<\/p>\n\n\n\n
For example, adding a wireframe that displays the user flow between pages can help creative directors explain the \u201cbig picture\u201d of the project. Executives can determine if they have all the necessary pages on the site while designers can plan where other pages should go.<\/p>\n\n\n\n
If possible you should always provide a top-down view before getting into the nitty-gritty detail. If you can learn to make documentation for everyone you\u2019ll realize the importance of all the big picture stuff.<\/p>\n\n\n\n
Val Head<\/a> is an expert in UI effects and she talks about animation in style guides<\/a> by stating bluntly:<\/p>\n\n\n\n
“Animation absolutely belongs in your style guides<\/strong>. It\u2019s the perfect place to document what animation decisions have been made, and to lay a foundation for making cohesive animation design choices in the future.”<\/p>Val Head<\/cite><\/blockquote>\n\n\n\n
Val mentions the example of IBM’s documentation<\/a> which has a separate page for animation.<\/p>\n\n\n\n
![\"IBM's](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/09-ibm-design-guidelines-animation.jpg\")
<\/figure>\n\n\n\nCompanies big and small can benefit greatly from adding user experience concepts into design documentation.<\/p>\n\n\n\n
Interfaces are built to be touched and clicked. So it could be argued that the experience<\/a> actually matters more<\/strong> than colors or font choices.<\/p>\n\n\n\n
But if you\u2019re able to work with both then pad out your docs and go for detail. There doesn\u2019t seem to be any limit of \u201ctoo much\u201d information with a style guide.<\/p>\n\n\n\n
If it\u2019ll help future designers understand and expand upon an existing design then it probably belongs in the documentation.<\/p>\n\n\n\n
Further Resources<\/h4>\n\n\n\n
The first time you create design documentation it\u2019ll feel awkward. You basically know what to do, but the actual structure can be overwhelming.<\/p>\n\n\n\n
I find it\u2019s best to create and finalize the design irst. Once it\u2019s signed off you can take notes on paper(or digitally) listing ideas for documentation chapters and important sections. Break this down further until you have a sturdy outline for the documentation, then start chipping away!<\/p>\n\n\n\n
If you\u2019re looking for more live examples check out this site<\/a> full of style guide samples from real brands. You can also find more on the Web Field Manual<\/a> webpage.<\/p>\n\n\n\n
Design documentation isn\u2019t perfected the first time around. You have to practice to fully understand what your clients need and what you should deliver.<\/p>\n\n\n\n
Try practicing with existing websites first just to build up your skillset. From there you\u2019ll learn what works, what doesn\u2019t, and how to craft a completed design doc from scratch.<\/p>\n\n\n\n
If you\u2019re looking for more detailed information about creating design documentation then you might enjoy these related blog posts:<\/p>\n\n\n\n
- How to create a web design style guide<\/a><\/li>
- Brand Style Guide Examples<\/a><\/li>
- Front-end Style Guides<\/a><\/li>
- How to write the perfect Website Specification Template<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
Digital projects thrive in the chaos of creativity. But they can only survive with clean documentation and rigid maintenance.<\/p>\n","protected":false},"author":11,"featured_media":77610,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[157,207],"tags":[],"class_list":["post-69912","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts\/69912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/comments?post=69912"}],"version-history":[{"count":0,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts\/69912\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/media\/77610"}],"wp:attachment":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/media?parent=69912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/categories?post=69912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/tags?post=69912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Brand Style Guide Examples<\/a><\/li>
- How to create a web design style guide<\/a><\/li>
- Style Tiles and How They Work<\/a><\/li>
- Demonstrates the \u201cbig picture\u201d of the design<\/li><\/ul>\n\n\n\n
- Starting With Style Tiles<\/a><\/li>