Web UI site user interface design naming conventions

Web UI site user interface design naming conventions

The Web UI design naming convention, which is the site user interface design (web design) naming convention. This set of specifications is not purely CSS, HTML, or JavaScript naming conventions, it involves a lot of design tools such as Photoshop used in the design of the Web page naming conventions. Many art design source files do not have the habit of naming layers, and most of the online naming conventions are about CSS, HTML, JS, and some server-side languages, with few design naming conventions. The designer is also a member of the technical team, and the front-end development engineer needs to use the designer's source files, so the unified naming specification and design specifications are certainly good for team collaboration and productivity. WEB UI Design Naming conventions I. Website design and basic framework structure: 1. Container "Container" is the part where all the elements of a page are wrapped together, and this section can also be named: "Wrapper", "Wrap", "page". 2. Header "Header" is the head area of the site page, generally, it contains the website logo and some other elements. This section can also be named: "Page-header" (or PageHeader). 3. Navbar "NavBar" is equivalent to the horizontal navigation bar, which is the most typical page element. This section can also be named: "Nav", "Navigation", "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 site and, if it is a blog, it will contain the logs. This section can also be named: "Content", "main-content" (or "maincontent"). 6. Sidebar The "Sidebar" section can contain minor content from the site, such as a list of recently updated content, an introduction to the site, or an ad element ... This section can also be named: "Subnav", "Side-panel", "secondary-content". 7. Footer "Footer" contains some additional information about the site, which can also be named: "Copyright." Two. Points to note: 1. Consider the role or "intention" of the element by naming itself as a semantic. Do not use surface-style naming. such as: Red/left/big and so on. 2. Combining naming conventions: [Element type]-[element action/content] Such as: Search button: Btn-search Login form: Form-login News list: List-news 3. Names of elements that involve interactive behavior: All elements that involve interactive behavior typically have different styles, such as normal, hover, click, and browse, and the naming can refer to the following rules: Hover:: Hover Click: Click Browse: Visited Such as: Search button: Btn-search, Btn-search-hover, btn-search-visited Three. Photoshop Layer Structure Specification: Photoshop layer naming follows the tree structure, where an element consists of layers larger than 3 layers to form groups, and all layers try to avoid using default naming (layer + number). The first level layer structure is as follows: Second level structure Legend (hospital site): The third level structure legend and contrast (Hospital news column): Layer naming structure Four Common naming summaries: Page Header: Header Login Strip: Loginbar Logo: Logo Sidebar: Sidebar AD strip: Banner Navigation: Nav Sub-navigation: Subnav Menus: Menu Sub-menu: submenu Drop-down menu: Dropmenu Tool bar: Toolbar Forms: Form Column: Column Arrows: Arrow Searches: Search Search button: Btn-search Scroll bar: Scroll Contents: Content Tabs page: Tab Article List: List Hint Message: MSG Tip: Tips Column Title: Title Link: Links Footer: Footer Services: Service Hotspot: Hot Press: News Download: Download Registration: Regsiter State: Status Button: BTN Vote: Vote PARTNER: Partner Copyrights: Copyright Site Map: Sitemap

Web UI site user interface design naming conventions