This link has been bookmarked by 167 people . It was first bookmarked on 03 Jun 2008, by Art Krivtsov.
-
07 May 12
-
19 Apr 12
-
04 Feb 12
-
24 Oct 11
-
28 Jan 11
-
27 Dec 10
-
15 Nov 10
-
10 Oct 10
-
07 Aug 10
-
04 Aug 10
-
16 Jul 10
-
08 Jul 10
-
25 Mar 10
-
09 Mar 10
-
03 Dec 09
-
03 Nov 09
Jason MarottiInterface 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 referen
-
26 Oct 09
-
23 Sep 09
-
25 Aug 09
Ricardo SatoTake 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 cod
-
17 Jul 09
-
24 Jun 09
-
23 May 09
-
17 Apr 09
-
12 Mar 09
-
04 Feb 09
-
01 Dec 08
-
21 Nov 08
-
26 Sep 08
-
13 Aug 08
-
04 Aug 08
-
23 Jul 08
-
22 Jul 08
-
12 Jul 08
-
09 Jul 08
-
08 Jul 08
-
26 Jun 08
-
23 Jun 08
-
20 Jun 08
-
17 Jun 08
-
16 Jun 08
-
15 Jun 08
-
13 Jun 08
-
12 Jun 08
-
11 Jun 08
-
10 Jun 08
-
07 Jun 08
-
06 Jun 08
-
Carolina VelisThe 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
-
05 Jun 08
Ludo VangilbergenIf 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 website administration documentation management 2read article
-
Guy CarberryJina Bolton A List Apart: Article on the style guide documentation process.
-
04 Jun 08
-
Andrea ArbogastVery good list of what to include. I see this being used in my near future.
-
-
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.
-
-
-
03 Jun 08
-
Tip NgThe 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.
-
Lars UdsenThe 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.
-
-
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.
-
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.
-
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.
-
Identify the accessibility guidelines that must be followed, and include any usability mandates. Document any localization and internationalization standards that exist.
-
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.
-
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.
-
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.