Naming rules for Web UI design (web design)

I have been busy recently, so I have not updated my blog for a long time. I am sorry for this. Today, I have been idle for half a day, so I would like to share with you a set of web UI design naming rules that I have summarized earlier, that is, the Website user interface design (also known as web design) Naming rules.

This specification is not simply a CSS, HTML, or Javascript naming convention. It involves many naming Rules Used in the web design process using design tools such as Photoshop. (Not written for a long timeArticle~). First of all, I started to consider a set of design source files from several artists in the company that did not name the layers. Another reason is that most naming rules on the Internet are about coding, that is, CSS, HTML, JS, and some server-side languages. There are few naming rules for design. However, after all, designers are also members of the technical team, and front-end development engineers need to use the designer's source files, therefore, unified Naming and Design Specifications are certainly good for team collaboration and work efficiency.

This webui design naming convention summarizes some of my web design experience and recommended naming methods for foreign designers.
 

Naming rules for Web UI design

I. Website Design and basic framework structure:

1. container
"Container" is the part that includes all elements on the page. This part can also be named "wrapper", "Wrap", "page".
2. header
"Header" is the header area of a website page. Generally, it contains the Website Logo and other elements. This part can also be named "Page-header" (or pageheader ).
3. navbar
"navbar" is equivalent to a horizontal navigation bar and is the most typical web page element. This part can also be named "nav", "navigation", and "nav-wrapper ".
4. menu
the "menu" area contains general links and menus, which can also be named "subnav", "Links", "sidebar-Main ".
5. main
"Main" is the main area of the website, if it is a blog, it will contain logs. This part can also be named "content", "Main-content" (or "maincontent ").
6. sidebar
the "sidebar" section contains the secondary content of the website, for example, the list of recently updated content, Introduction to the website, or advertisement elements... This part can also be named "subnav", "Side-panel", "secondary-content".
7. footer
"footer" contains additional information about the website. You can also name it "Copyright".

Ii. Notes:

1. Consider the role or "intention" of naming an element as much as possible to achieve semantics. Do not use surface naming.
For example, red/left/big.

2. Combination naming rules:
[Element type]-[element function/content]
For example, search button: BTN-Search
Logon form: Form-Login
News list: List-news

3. element names involving interactive behaviors:
Elements that involve interaction usually have different styles, such as normal, hover, click, and browsed. for naming rules, refer to the following:
Hover: hover CLICK: Click browsed: visited
Such as: Search button: BTN-search, BTN-search-Hover, BTN-search-visited

3. Photoshop layer structure specifications:

Photoshop layer naming follows the tree structure. When a layer composed of an element is greater than three layers, a group can be formed. Do not use the default name (layer + number) for all layers ).

The first layer structure is as follows:

Level 2 structure (Hospital website ):

Level 3 structure legend and comparison (Hospital News ):

Layer naming structure

Iv. common naming summary:

Header: Header
Logon entry: loginbar
Logo: logo
Sidebar: sidebar
Advertisement bar: banner
Navigation: nav
Subnavigation: subnav
Menu: Menu
Sub menu: submenu
Drop-down menu: dropmenu
Tool bar: Toolbar
Form: Form
Column: Column
Arrow: Arrow
Search: Search
Search button: BTN-Search
Scroll bar: Scroll
Content: Content
Tab: Tab
Article list: List
Message: msg
TIPS: Tips
Topic title: Title
Link: Links
Footer: footer
Service: Service
Hotspot: hot
News: News
Download: Download
Registration: regsiter
Status: Status
Button: BTN
Vote: Vote
Partner: Partner
Copyright: Copyright
Website map: sitemap

The above naming conventions are for reference only.If you have your own opinions on the Web UI design specifications, you are welcome to leave a message to discuss them, learn from each other, and make progress together :)