These 20 design code selection cases are an eye-opener for you.

As a dry sticker, you must come to the town building. The following is the specification Summary page, which contains many well-known brand norms, the full text of a total of four parts, divided into brand norms, design language specifications, product specifications, front-end specifications, each part has a corresponding typical case for learning, absolutely worth collecting!

　1.Brand Style Guide Examples

Brand Style Guide examples, hand-picked by Saijo George

The classification of the specifications can be summed up roughly:

Brand category (VI) generally in the form of product brochures to help shape the corporate image.

Platform, System class for Third-party developers, introduction platform, System Ecology Design Guide, to explain the platform concept, what the developer to follow, and follow this set of specifications what benefits.

Product Business class-oriented products, the specification focuses on product design and implementation level, the need to comb the content clearly, practicality first, design documents and labeling are all good, designers or engineers can directly refer to and use.

According to these three categories, the following selected a variety of other normative cases.

　　First, Brandguidelines brand norms

　2. Nintendo character design specification (1993)

Press the Buttons:mario, Kirby, and Samus Aran Shine in the Nintendo Character

This is a very early design specifications, for each persona and the use of the scene are described, which for today's animation image design has a very important reference significance.

3. Dropbox

Https://www.dropbox.com/branding

Dropbox This specification is the most basic brand specification, its application of the logo on the occasion to explain. If the brand image extended to envelopes, tooling, cups, etc., is more complete VI (Visual identity system) design.

　4. Airbnb

Inside our Brand Evolution

Airbnb brand evolution allows us to feel more open brand culture, it even welcomes all people to create their own logo, together to create Airbnb.

　5. Uber

Uber Brand Guide

In addition to the standard content of clear carding, Uber delicate dynamic effect really touched me, this is absolutely exquisite.

　II. Designlanguage Platform Specification

Apple and Google guidelines must be the most familiar platform specification. For Third-party developers, such specifications not only deliver the platform's design and development philosophy, but also tell developers what to follow and select cases for developers ' reference.

　　Apple

In addition to iOS and OS X Humaninterfaceguidelines, a platform specification that is well known to every developer, this is also a recommended example of how Apple works with the general UI design and the specifications for Apple Watch and Apple TV.

　　6. IOS Human Interface Guidelines

iOS Human Interface guidelines:designing for iOS

　7. OS X Human Interface guidelines

OS X Human Interface guidelines:designing for Yosemite

　8. Uidesign do ' sand Don ' ts

UI design do ' s and Don ' TS

9. Apple Watch

Apple Watch Human Interface Guidelines

　　Apple TV

Apple TV Human Interface Guidelines

Google

Google's specifications are a very good case. Since the Google proposed material design, the specification of the Materialdesign interpretation is very detailed. Whether the specification of the framework of carding, or specific each module of the presentation and description are commendable.

　　Material Design

Http://www.google.com/design/spec/material-design/introduction.html

　　IBM

IBM Design Language

Many large companies, such as Apple, Google, domestic such as Tencent, Ali and so on, each company has its own design style. The IBM Spec library tells you how IBM's design style is defined.

The specification also includes the following figure and a number of selected graphic design cases.

　　Third, Productguidelines product specification

　13.MIKADO

Infojobs Design Styleguides

This is a very complete, clear product specification, not only for the Web, iOS, andriod platform has a corresponding specification, but also provides a UI style sheet, which is very useful for designers to reuse UI elements (recommend).

Product specifications In addition to the size of each element specification, in the basic norms have been based on some special products or functions can be described. As described in the following MailChimp email specification, in MailChimp product specifications, based on some special circumstances of the email description.

　　MailChimp

Email Design Guide

　　Four, frontend guidelines front end specification

The bootstrap and semantic UI are very useful front-end open source tools, which can also be seen as a rich front-end specification case.

　Bootstrap

Components Bootstrap

　16.Semantic UI

Integrations

In addition, there are some complex structure, a wide range of external products will also comb the front-end specifications, such as the following homify, FontShop, MailChimp, lonelyplanet.

　　17.Homify

Homify Living Style guide:components

　　FontShop

Https://www.fontshop.com/styleguide/modules

　MailChimp

Grid System | MailChimp

Lonelyplanet

Lonely Planet Travel Guides and Travel information

Choose a Web or pdf/ppt version?

The above design specifications mainly to the web version of the main, compared to pdf/ppt and other static text formats, the web version of the advantages:

More flexible, can be modified and updated in real time;

Scalability is strong, you can continue to add modules as needed;

Reduce browsing costs, open the Web site can see the specification details, eliminating the trouble of downloading files.

Have to say

The specification is likely to be born only after the 1.0 version of the product. For designers, the importance of norms is to solve the problem of efficiency, but also to some extent, to stifle the creativity of the designer. After you have written the design code experience, you will be able to better grasp the norms of the degree, but also to find the most effective way to write design specifications.

Reference

How to Create a Web design Style Guide

Inspirational examples of UI Style guides

Author Micro-letter public: Yoyofootprint