Tuba rabbit website visual design specification template reference case

Good things must not be missed, today’s 25 school Xiaobian help you continue to share a good website visual design specifications.

This is the usual naming tool used by web designers in the process of web page design using PhotoShop. This is a summary of website visual design, not only to facilitate subsequent designers to quick start work, also can let the front-end development engineer is to use the designer’s source files, so a unified naming specification and design specification for team cooperation and work efficiency will be good.

Because the content of the website display range is small, you can click on the picture to see the big picture. Of course, you can also collect oh!

A web page specification

Here, 25 schools would also like to thank the APP design group of Chengdu -UI- share 5 mo, for Tuba rabbit original designer summarizes the design.

Note that the website named:

1, try to consider the naming of the element itself or ” intention ” to achieve semantic.

Do not use the surface form of the named such as red/left/big.

2, a combination of naming rules: [element type – element / content]
Such as: the search button: btn-search
Login form: form-login
News list: list-news

3. Naming the elements involved in interactive behavior:
The elements involved in interactive behavior usually have different styles such as normal, hover, click and browse. Naming can refer to the following rules:
Hover::hover Click: click has been browsed: visited
Such as: Search button: btn-search, btn-search-hover, btn-search-visited

Leave a Reply