Products are made to be used. There is no reason to add effort to develop, test, and document a product that won’t be used as much as expected. In software products the user experience is provided mainly through the user interface, and how a user interface is developed is guided by a UI style guide.
-
The purpose of this UI Style guide is to create a basis to have a consistent look and feel of the complete Evergreen web staff client.
-
The guide always emphasizes user-centered design.
-
It will be mainly used by developers without limiting anyone who needs to consult it.
Notice: Every image in this UI style guide is tentative.
1. Design Principles
-
1.1 Be Simple
-
1.2 Be Concise
-
1.3 Be Consistent
-
1.4 Give permanent Feedback
-
1.5 Being friendly always works
2. Page Layout and Structure
-
2.1 Metrics
-
2.1.1 Ranges
-
-
2.2 Page General Structure
-
2.2.1 Without Context
-
2.2.2 With Context
-
-
2.3 Layout template or grid
-
2.3.1 Metrics
-
-
2.4 Popups and Dialogues
-
2.4.1 Types
-
3. Visual Design
-
3.1 Color
-
3.1.1 Color Palette
-
3.1.2 Color Layers (Structure)
-
3.1.3 Color Meaning (Popups)
-
-
3.2 Typography
-
3.2.1 Type Color
-
-
3.3 Iconography
4. UI Elements
-
4.1 Input Controls
-
4.1.1 Buttons
-
4.1.2 Checkboxes
-
4.1.3 Expand/collapse
-
4.1.4 Dropdown Menu
-
4.1.5 Date Pickers
-
4.1.6 Toggles
-
4.1.7 Text fields
-
4.1.8 Forms
-
4.1.9 Radio Buttons
-
-
4.2 Navigational Components
-
4.2.1 Network Indicator Activity
-
4.2.2 Menu Selector
-
-
4.3 Informational Components
-
4.3.1 Tool Tips
-
4.3.2 Dividers
-
4.3.3 Subheaders
-
4.3.4 Tables
-