Design Style Guide
To comply with my non-disclosure agreement, I have omitted and obfuscated the confidential information. For most of the content I provide the outline only due to confidential consideration.
In this Style Guide, I covered 3 main topics:
Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.
Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.
Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.
| Change Log
It’s very important to clearly record the changelog for version control propose. Each designer/contributor should record your name and update details for developers to refer to .
| List of Contents
Describe your product vision and mission here.
The goal of create this Style Guide is to set a precedent, demonstrating developer / designer / BA to understand
how should pages construct our product. Whenever a new module is going to develop, the screen
architecture and behavior should dictate by this guide.
With our empirical study of industry business knowledge and professional User Center Design methodology, our design has set a balance between vivid screen and reusability, at the same time we also maintain flexibility and creativity.
1.For all description, the language pattern should be short, simple, clear and professional in common understandable pattern. The Style Guide should make clear how authors present:
- Rules for chapter, figure and table headings (and how they are capitalized)
- Spelling and grammar
- List punctuation (whether they are capitalized and how they are punctuated)
- Numbers (when they should be spelled in full)
- Singular and plural
- Less color, neutral color
2.There will be UI evolution from time to time, whenever there is an update or modification of the style guide, make sure all related designers / developers should be informed immediately. All amendment should be record clearly each time.
3.Each style guide must be considered the following state where applicable:
- Blank State
- Loading state
- Partial State
- Error State
- Ideal State
- Maximum State
1.Style guide should act as a screen design Guide / cookbook, not a screen functional spec. Don't put any detailed function description on the screens. Supportive screen previews can be added as Appendix where necessary.
2.Don't leave a lot of undetermined design in this document, lot of design doubt, thoughts should be answered / well documented in here.
3.Good industry-wide style guides are often hundreds of pages long. So the easiest way to write our style guide is to select one that covers the sector and then do not repeat anything that is in the guide .
| Design Disciplines
A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.No matter how good looking the UI is, the mindset is always the most valuable part.
- Consistent with real life/market: in line with the process and logic of real life, and comply with languages and habits that the developers are used to.
- Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
- Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects.
- Visual feedback : reflect current state by updating or rearranging elements of the page.
- Simplify the process : keep operating process simple and intuitive.
- Definite and clear: enunciate the intentions clearly so that the developers can quickly understand and make decisions.
- Easy to identify: the interface should be straightforward, which helps the developers to identify and frees them from memorizing and recalling.
- Decision making: giving advices about operations is acceptable, but do not make decisions for the developers.
developers should be granted the freedom to operate, including canceling, aborting or terminating current operation.
Declare the platforms that this style guide can be developed.
- Target Browser / Platform
- Native App / Hybrid App
End User screen resolution, responsive design
| Design Principles
Define the UX pattern/framework. Make it easy and intuitive for developers and designers to understand.
The relation of vertical spacing
Divide the hierarchy of information through three formats: small spacing , middle spacing and large spacing, extra small spacing . Detailed space size please refer to the Layout Component .
Relationship of horizontal spacing
To adapt to screens of different sizes, in the horizontal direction, use grid layout to arrange the components to ensure the flexibility of the layout.
Example of combination and configuration
If the paragraphs or the length of the words are too short or too loose, then a unified visual starting point is
Due to international language typography consideration, colon alignment( left-align ) can encircle the content into a certain range. Input groups may align to the left. Users can infer where the chart is through the regular arranged colon so that the speed of filling in the chart can be speeded up.
To compare the numbers faster, we suggest that all numbers should keep the same digit numbers after decimal
point; meanwhile all numbers should be right-aligned .
*Note: Numbers in form please follow the form alignment
- Make it Direct
- Keep it Lightweight
- Stay on the page
- Provide an Invitation
- Use transition
- React Immediately
- Usage of colors
| Design Patterns
- Complex Table
- Advance Search
- Data Entry
- Data Display
| Common Functionality
- Standard search
- Dynamic search
- Scoped search
- Search form
- Search results
- Onscreen Sort
- Sort Order Selector
- Onscreen filter
- Filter Form / Conditional filters
| General Screenflow
We would promote a consistent UI, so we don’t create surprise to users. Common patterns like page flow, error handling, pop-up box, confirmation and acknowledgement could be transformed into shared code, which promote reusability.
We will cover this chapter in the following sequence:
General Page Layout
Layout is the prerequisite for a web application. It's also the foundation of follow-up interactive and visual design. In order to guarantee consistency among similar products, we have some common layout templates.
Before choosing one of these templates, you need to have a clear mind about:
- The main tasks that a user needs to accomplish and all necessary information for making such decisions.
- The priorities and features of those tasks and information, so as to select a reasonable layout.The essential skeleton are as followed
- Logo, always align to the left.
- Current Business Day
- Message Center
- Help and Support icon
- Chat collapse icon (coming soon)
- Top Navigation
- Main content
- Footer. Copyright and version number.
- Move to Top.
Dashboard should be the landing page after user login regardless the persona (if there is). Dashboard collects a variety of information, such as digitals, graphics, copywriting, etc. Key information should be clearly represented and easily understood. Thus, displaying the complex information in a clear way is important in the design. Behaviour of chart, graphic and diagrams please inherit from detailed components.
List is a way to display information in parallel. A well designed list can be helpful for users to read basic information and perform corresponding operations quickly. Therefore, the "readability" and "operability" of a list are the keys to the design. For this propose, we recommend you to:
Table is a carrier for multi-dimensional information. It can make complex information to be read and understood easily. Its readability, convenience and operability play an essential role in the user experience. Therefore, we should pay attention to the following points in the design:
Details page usually carries a large amount of basic information, extended information as well as status information. It's important to identify priorities of the information. A clear layout can be helpful for a user to get key information at a glance and make decisions efficiently. Reading pattern should apply Z and F carefully. Please pay attention to the Visual Hierarchy.
Form page is often used for tasks such as login, register, booking, etc. Form page is indispensable when you need to record the user information. Therefore, a well designed form page can guide the user to complete the data recording workflow behind the form efficiently. We recommended you to:
Form based functions
Form based functions are one of the essential functions in our system. We use frequently in execution modules such as RFQ and Order
- Page Flow
Data/Table based functions
- Page Flow
Content Based Functions
Content functions mainly used in Digital Advisory modules, basic screen function flow is:
- Landing Page
- Detail Page
- Content Management
- Content Publish
- Download Full Article
- Client Opportunities and Suitability Check
- Content Management
Configuration / Admin functions
System administration are primarily run the bank team concern. This group of functions should be consistent and the different among functions are only minimal. If we could define general pattern and click flow, the development could be highly condensed.
- View, Edit
Upload / Download based functions
- Attachment/content Upload
- File upload
- Single file download
- Multiple download
Pop-up window message
| Other functions
Support and About
Components serve as the fundamental atomic building block for all pages. The behavior and configurability for each component is defined and reused among ALL functions. The component design includes three categories.
Vertical Row spacing
Horizontal Column spacing
Badge and Label
Customization / Skinning
A s a product, we have designed our system to support limited level of customization. The customization includes wallpapers, logos and system name. It is configured via per-customized config files.
- Third Party Libraries
UI Design Documents
Latest Sketch file download URL .
- Screen Previews