How do I set up a set of UI design specifications?

The most memorable UI design dry Goods! Today this article from the concept, inspiration, methods and tools 3 to help students clarify UI design specifications, while there is a large wave of artifact recommendation >>>

Author's chasing Wave: Https://dribbble.com/fiohistory

Concepts, inspirations, methods and tools.

Concept:

The design of Internet products, Style Guide/pattern Library and Pure specification each have different functions and functions, but all contain the concept of "design norms."

　　1. Style Guide/pattern Library:

Emphasis on visual concepts, generally in document or image format rendering (not qualified).

Content: The design works of the font (typeface), font (font), color Board, brand identity specification (Brand guideline), Icon and other elements to show and explain.

The main role in the design team or between the designers, show the visual design of the product style. Facilitates style reuse, standardizing third party branding (branding) and access.

Instance reference (more on "inspiration" below):

Brand Assets | Kickstarter

Logos & Branding | Dropbox (over Wall)

　　2. Style Guide/pattern Library:

Emphasis on (Web front-end) development concept, basically as a Web page document form presentation.

Content: Explains the style of the interface element (UI Elements) and the Code fragment (HTML, CSS) corresponding to its effect, including interactive and dynamic design (primarily JavaScript). Examples include common infrastructure layouts (Grid System), font typesetting (typography), buttons, menus, lists, dialog boxes (Dialog), Tooltip, and so on.

For team WEB Design and development collaboration, unified product style. Reuse improves work efficiency while also ensuring user experience quality.

Instance reference (more on "inspiration" below):

Pattern Library | MailChimp (over Wall)

Mapbox Styleguide | Mapbox

Concepts 1 and 2 combine examples (more on "inspiration" below):

Product Style Guide, Visual guidelines | Salesforce

Style Guide | Lonely Planet

　　3. Specification (SPEC):

Between design and development, created by the designer directly in the visual manuscript (mockup).

Content: Mainly by Annotation (annotation, the domestic commonly known as "annotation") and measurement (measurement) constitute. Annotation annotation Design Draft in the interface elements used font style, color values, etc., measurement indicate the dimensions of each element and their margins, white and so on.

For designers and developers to communicate and work handover, to ensure that the development of the Product interface and visual manuscript highly unified.

　　Inspiration:

Some commonly used projects and documents use the above "concepts", such as the concept of 1:

IOS Human Interface Guidelines

Material guidelines (over wall)

Using concept 2:

Skeleton

Pure

Bootstrap

Concept 3 is often used only within a company or team (see "Tools" below).

Inspiration and instance resources:

Website Style Guide Resources | Included a large number of cases, the project also included related articles, tools, books, podcasts and so on.

Find Guidelines | An intuitive guideline official chain receives the set list.

Brand Style Guide Examples | Ditto

All the Style guides | Ibid., hosted in Tumblr, presented in blog form.

　　Methods and tools:

　　1. Style Guide/pattern Library:

method is not limited, to be able to accurately show the visual design style and brand recognition (identity) of the norms as a standard. Because of its partial visualization, writing documents is not necessary, and can directly use graphics to edit the software output. For example:

Airbnb UI Toolkit Web

Salesforce1 UI Kit

Housing UI Style Guide

You can also use tools:

Style Inventory for Sketch | Sketch plug-in to generate "Style Guide" based on visual manuscript.

Style Tiles | A PSD stencil for quick "Style Guide",

Frontify Style Guide | Frontify is a collaborative platform for design teams that provides "Style Guide" Generation and "Spec" tools.

CSS Stats | Parse the URl corresponding to the Web site's Style (mainly rely on the analysis of CSS files), display relevant information, such as font size (font-size), color swatch, float (float) The number of uses.

Stylify Me | Fill in the site URL, automatically generate the corresponding page "Style Guide". Provide PDF file save.

　　2. Style Guide/pattern Library:

By making a Web page document, which contains a large number of Web Components (code snippets) and elements (visual), you can use the front-end framework for efficient output, such as the bootstrap,semantic UI for the masses. In a large number of free and open source front-end framework projects, choose to have maintenance support, you like or familiar with it.

Available tools:

Designer Brad Frost has a set of web design theories called Atomic Design (Atomic) that have some impact in this area, with the core concept of reusing "pattern Library", high rate production Web pages:

Atomic Design | Brad Frost (over the wall)

He created an Open-source project for the theory, based on Php:pattern Lab | Build Atomic Design Systems

Web Starter Kit (HTML, CSS, JS) | The web production model provided by Google Web Fundamentals supports the creation of "pattern Library" documents. (Over the wall)

Style Guide boilerplate (PHP) | "Pattern Library" model, similar to patterns Lab.

More Method-class articles and tools list can be referenced:

Website Style Guide Resources

Style Guide Tools, articles, books and resources | tuts+

　　3. Specification (SPEC):

"Spec" should be used to minimize the energy consumption of designers and enable developers to clearly understand the standards. The basis for improving efficiency and ensuring quality is to choose the right tools.

Enable extensions and Plug-ins in the graphical editing software used to draw the artwork, direct production of "Spec" and efficient direct-hit topics:

specking | Photoshop ($19, recommended, in use)

specctr | Photoshop, Illustrator ($49, PS and AI sold separately)

Markly App | Photoshop, Sketch ($39.99,ps and Sketch sold separately)

Sketch Measure | Sketch (free)

Some other plug-ins also provide "Spec" features, such as:

PNG EXPRESS | Automated design Delivery for Photoshop ($29)

Ink | A Photoshop documentor Plugin (free)

Team collaboration platform and other tools:

Avocode | Simplify collaboration between designers and developers (Web products), provide Slice (cut), Spec, CSS, and other features of the layer.

Zeplin | The same is a quality design collaboration software. Currently only supports Sketch design drafts, PS support is still under development. The product is in the inner stage of the invitation.

frontify | The "Style Guide tool" mentioned above, is a collaboration platform, supporting the design of the "Spec".

Assistor PS | The PS assistance software that can be run independently in the system, but need to borrow PS to load the design document. Provide Slice,spec and other functions.