Take a look at any CSS-based website design gallery, and you’ll see it’s obvious that beautiful interfaces are being designed and developed in amazing quantities. I frequently look to these sites for inspiration and, beyond a nice design and beautiful code, there’s usually something common about these sites: they’re new.
Unfortunately, it’s also common that beautiful interfaces don’t stay beautiful. An interface’s design disintegration can be frustrating to deal with, especially for the designer and developer of that interface; it can be particularly frustrating for the designer and developer who can no longer access the site to fix the issues.
If you have ever designed a beautiful interface only to find it ugly five months later because gaudy graphics, unpleasant colors, and distasteful fonts appeared over time, then you understand how maddening design disintegration can be. Similarly, if you have ever developed a clean, web standard, and accessible interface but later found the site littered with invalid, inaccessible, and presentational markup, then you understand this frustration as well.
Documentation can help avoid these issues—it provides guidance on how to maintain and update the interface, and keep it beautiful at the same time.
Design and brand standards
Interface design standards enable brand stewardship. Commonly documented in a design “style guide,” these standards inform clients and content editors of branding guidelines for typography, whitespace, color, etc. The design style guide provides a reference in which developers can describe the way the interface is intended to look, and helps designers to be consistent as the interface is updated so that, in turn, the interface continues to feel consistent.
Some design style guides are simple and straightforward, including only basic typography and color styles; others are informative and somewhat complicated, and go into great detail in defining all aspects of brand guidelines. Like the interface itself, a great design style guide should be straightforward, intuitive, and informative. It should provide detailed information, yet be clear and concise. The following are important elements and relevant details to include.
Layout and composition
Define all the layout variations that are used for the interface, and when and how they are used. Show wireframes to illustrate these variations (such as different column configurations and where they are used).
Typography
Explain the guidelines for acceptable use of typography. Use illustrations to show examples for the main text, the headline styles and their hierarchy, list styles, etc. It is also a good idea to define the typography standards in promotional graphics, as well as list the alternate typefaces that can be used for hypertext (in the event that the user does not have the font you have declared).
Color palette
Provide a color palette to illustrate the standard colors that must be used throughout the interface. This reference should include exact color codes (you can list hex color values or RGB values). It is good to show where these colors are used. For example, you can include a screenshot that shows the color used for links.
Images
Define the standard image sizes that may be used throughout the interface. This should include any graphic banners (such as promotional banner advertisements) as well as images that are used within content. Show how they may be styled and aligned, and how captions should appear (if used). You can also include what type of imagery that may be used (such as illustration or photography, as well as allowable styles or “mood”). Finally, if you use any icons in the site, set standards for them, such as how they look, where they are used, how they are styled, etc.
Brand guidelines
Beyond typography and color, brand guidelines can include other standard design elements. These standards might define the amount of space allowed around the logo, how the logo appears depending on the background it sits on, or how the organization’s name should always appear in text.
Some style guides include supplementary information beyond the look and feel (for example, you can include standards for copywriting, advertising, and other elements that influence the interface and user experience). When defining design standards, you can even include the related markup and CSS needed to create the visual appearance expected. However, it might be better to create a separate section or document for these front-end development standards.
Front-end development standards
If there is more than one developer on the interface, it is extremely important that everyone is aware of the development standards. It is likely that each developer has his or her own way of doing things. Getting everyone synced on (X)HTML, CSS, JavaScript, and other aspects of front-end development can help avoid any confusing issues down the road. While a design style guide outlines design and brand standards, a development style guide is important to keep development efficient. This can be a separate document, or included with the design style guide.
(X)HTML, CSS, and JavaScript
Delineate how (X)HTML, CSS, and JavaScript should be used when developing the interface. Address the standards that developers should follow, which DOCTYPE to use, as well as class and ID attribute naming conventions. Include the code used to create certain layouts, forms, widgets, etc. Outline formatting and commenting standards, and define how the framework is set up (if a framework exists). (X)HTML, CSS, and JavaScript standards can be discussed together, as they all play together, but it can be helpful to go in-depth for each one, in their own sections.
Accessibility and usability
Identify the accessibility guidelines that must be followed, and include any usability mandates. Document any localization and internationalization standards that exist.
Files and directories
Define how the directory structure is set up for files (images, style sheets, JavaScript files, etc.), and where these files go (according to their types or purpose). Explain file naming conventions and how they are used.
Quality assurance testing
Walk through the steps that should be taken for quality assurance: validation, link checking, accessibility testing, proofreading, etc. Include a graded support chart for browsers and devices.
When discussing standards in your development style guide, it should be clear that the standards outlined are not only industry-wide standards—they are also organizational standards that all developers should follow. Keeping development consistent goes hand in hand with keeping the design consistent, and should help make work more efficient and improve maintainability.
Keep style guides current and useful
Interface style guides are extremely useful to define best practices for design and development. However, keeping that information updated and functional is imperative. A glossary, an index, references, acknowledgments, etc., are among some of the supplementary details you can add to make the style guide as helpful as possible.
You’ll want to have this style guide easily accessible for designers and developers. While a printed version is great to have on hand, an online version can be easier to access, maintain, and keep current. If you do not wish to keep track of both a printed and online version, you can opt for print style sheets on the online version, so you only have to update the information one time.
Finally, provide information on how someone can get help, in case the style guide is unable to provide certain answers. List contact information for the person or team(s) that manage this documentation.
With proper documentation for clients and content editors to follow, you have a better chance at seeing your interface stay beautiful. Future designers and developers who work on the interface will have an easier time adapting, thus making their lives easier and potentially saving time and money.Article Source: http://www.alistapart.com/articles/writingainterfacestyleguide
