Design Style Guide

Disclaimer

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:

General Guide

Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.

Component

Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.

Resource

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

Disclaimer

Change Log         

List of   Contents         

Introduction         

Design Disciplines         

Prerequisite         

Design Principles         

Design Patterns         

Common Functionality         

General Screenflow         

Other functions         

Components         

Customization / Skinning         

Appendix         

        

| Introduction

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.

DOs

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)
  • Hyphenation
  • 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

DON’Ts

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.

Consistency

  • 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.

Interaction

  • 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.

Efficiency

  • 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.

Controllability

  • Decision making:  giving advices about operations is acceptable, but do not make decisions for the developers.
  • Controlled consequences:  developers should be granted the freedom to operate, including canceling, aborting or terminating current operation.

| Prerequisite

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.  

Proximity

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

Alignment

Text Alignment

If the paragraphs or the length of the words are too short or too loose, then a unified visual starting point is

Needed.

Form Alignment

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.

Numbers Alignment

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

  • Contrast
  • Repetition
  • Make it Direct
  • Keep it Lightweight
  • Stay on the page
  • Provide an Invitation
  • Use transition
  • React Immediately
  • Usage of colors
  • Icons
  • Font
  • Layout

| Design Patterns

  • Navigation
  • Form
  • List
  • Table
  • Complex Table
  • Advance Search
  • Data Entry
  • Data Display
  • Feedback
  • Motion

| Common Functionality

  • Search
  • Standard search
  • Dynamic search
  • Scoped search
  • Search form
  • Search results
  • Sort
  • Onscreen Sort
  • Sort Order Selector
  • Filter
  • 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
  1. Logo, always align to the left.
  2. Current Business Day
  3. Message Center
  4. Username
  5. Help and Support icon
  6. Chat collapse icon (coming soon)
  7. Top Navigation
  8. Breadcrumb
  9. Main content
  10. Footer. Copyright and version number.
  11. Move to Top.

Dashboard

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 page

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 page

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:

Detail page

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

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 Entry .

  • Page Flow
  • Layout
  • RFQ
  • Order Entry

Data/Table based functions

  • Page Flow
  • Layout
  • View

                                

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
  • Create/publish

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.

  • Layout
  • View, Edit
  • Create
  • Delete
  • Authorize
  • Configuration
  • Report

Upload / Download based functions

  • Attachment/content Upload
  • File upload
  • Download
  • Single file download
  • Multiple download
  • Import
  • Export

System Message

Standard Message

Pop-up window message

Input Error

In-line error

Login error

Loading

Timeout

Password Expired

| Other functions

Login/Logout

Help

Support and About

User manual

Components

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.

Basic

Layout

Grid Options

Basic layout

Vertical Row spacing

Horizontal Column spacing

Hybrid layout

Alignment


Responsive layout

Color
Typography
Icon
Buttons

Form

Radio

Checkbox

Input

InputNumber

Select

Dropdowns

Switch

Slider

TimePicker

DatePicker

Upload

Rate

Form

Upload

Data

Table

Tag

Progress Bar

Tree

Pagination

Badge and Label

Notice

Alert

Loading

MessageBox /Message

Notification

Navigations

NavMenu

Tabs

Breadcrumb

Dropdown

Steps

Treeview

Others

Dialog

Tooltip

Popover

Card

Caroused

Collapse

Pulsate

Well

Media Objects

Panels

Pop-up

Portlet

Charts

Image

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 .

Appendix

  • Installation
  • Screen Previews