To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning to the application. The principles of user interface design are intended to improve the quality of user interface design. Designer should consider following as a base principal for the Zodiac actual UI design screens.
Clarity is the most important principal of user interface design. Indeed, the whole purpose of user interface design is to enable people to interact with system by communicating meaning and function. The interface should be visually, conceptually and linguistically clear, including Visual elements & Functions. So is the reason while creating prototype designs, it is considered: text is legible at every size, icons are precise and lucid, and a sharpened focus on functionality which motivates the design. While creating an actual designs, designer should take care of logical clarity of content and structure as well.
Balance is the concept of visual equilibrium, and relates to our physical sense of balance. As a design principle, balance places the parts of a visual in an aesthetically pleasing arrangement. Considering the same principal designer should take care while placing different elements, so that elements balance each other, like as in form control small elements can balance one large elements.
Consistency is basic principle for any user interface design. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency. they'll learn what the different buttons, tabs, icons and other interface elements look like and will recognize them and realize what they do in different contexts. They'll also learn how certain things work, and will be able to work out how to operate new features quicker, extrapolating from those previous experiences. While creating prototypes, it is considered that the consistency in terms of aesthetic like style and appearance is repeated to enhance recognition. Designer while creating the actual design needs to consider the same in the functional aspect.
3.4 Dominance & Focal Points
The more dominant element will attract the eye and get noticed first. It might even appear to exhibit some sort of control over the less dominant element. The more dominant element likely has greater visual weight than the elements it dominates. One can create dominance through contrast, emphasis and relative visual weight. dominance creates a focal point in a design which brings attention to the element or area that is the most important. Dominance is what catches the eye and makes the viewer stop and look at the image. While creating prototypes for Zodiac, It has been considered i.e. In buttons, the primary and secondary buttons are discovered where visually primary buttons has more weight than secondary buttons to let user know what primary actions needs to be triggered.
One of the main reasons to use contrast in Zodiac user interface designs, is to grab attention, It not only helps in making UI more attractive but also brings clarity. Contrast can be used in many other ways, including: size, space, color etc. During process for writing this guideline, different color combination are discovered to create contrast between element, components &It's different states, which is explained in the subsequent section for the color.
Space provides breathing sense to the user interface. It gives the eye freedom to move through a design and to discover the elements it's looking for. Without space, you don't have design. Space helps in establishing contrast & provides visual rest between groups of elements. One of the more important functions of space is to improve readability and legibility, it also helps in creating qualitative, simple, clean & openness user interface which. While creating prototypes space is considered to be important principal by fixing the space around element, placeholder etc which designer needs to consider while creating actual designs for the Zodiac application.
Color plays a major role when it requires to create contrast in the UI & to bring clarity between the content. Designer should use colors as defined in the color swatch shown in the fig 3.7 below, which is created as per the selected theme.
Blue color is introduced to create contrast & to bring clarity. It can be used in all different state like selected, active, hover & normal except the disable state.
- DarkBlue(#0c79c1) color can be used in the background & as border color to bring the clarity between two section of elements while used with SkypeBlue(#2991d6) color. Mainly used in Button element & in Table component.
- SkypeBlue(#2991d6) color can be used in background, as font & border color to bring clarity and create contrast.
- LightSkyBlue(#e0f3ff) color can be used as a background to create contrast on hover or selected state when element is placed on white background. Mainly used in Dropdown menu element and Table component to show selected row.
color can be used in background & color for the element. Used in the elements like Icon, Scrollbar, Breadcrumb, Header/Footer & Table component.
Gray (#d8d8d8) color is introduced to create contrast in the overall theme by using it in . It can not be used in selected & hover state except the OFF state of selection Switch but can be used in the normal state. Also used to show the disable state of element.
- DarkGray(#5c5c5c) color can be used in selection as background, in label as font color & in icon as an icon color
- DimGray(#c5c5c5) & LightGray(#e6e6e6) , the only use of these colors, is in the disable state. DimGray(#c5c5c5) can be used to display the label color & LightGray(#e6e6e6) as background.
- Gray (#d8d8d8) , the only usage of this color is in the border. Can be used as border in various component and elements. Anywhere, when it requires to use the Gray (#d8d8d8) border, designer should use Gray (#d8d8d8) color.
- LighterGray(#e6e6e6) color can be used only as background. It can be used in panel heading section background, as normal state background for navigation etc.
These colors are introduced to bring clarity between different validations.
Fig 3.7 Color Swatch
- SeaGreen(#45b6b0) can be used to show success.
- Orange(#feaa30) can be used to show warning.
- Red(#ff0000) can be used to show error.
Considering readability as the major factor for any complex user interface from Serif and Sans-Serif typeface, Sans-Serif typeface is discovered. In Sans-Serif typeface, after a deep research considering; narrower body, smaller counters, much tighter & uniform letter spacing, and a more complete Unicode character set, Tahoma font family is discovered as the main and only typeface for the Zodiac user interface design. Different style for the typography is described in show below
The font family which we've selected is Tahoma.
Below is different Typography examples
- Heading title will be in 18PX, 15PX and 14 Px basing on the platform user is using.
- Heading will be always in Bold
- Heading will be in Primary colors only - SkypeBlue(#2991d6) , NavyBlue(#120e5b) and DarkGray(#5c5c5c)
- Normal body (ex: tool tips, messages, Informational content etc.,) will be in 12 PX and 14px
- The primary DarkGray(#5c5c5c) color will be used in a normal style to represent Normal body text
Label/Flat action or text links
Fig 3.8 Typography
- Labels/flat actions (or) text links will be in 12PX or 14PX.
- Labels can be in 2 colors - NavyBlue(#120e5b) only
- Label's can be bold as well
- Flat action will be SkypeBlue(#2991d6)
3.9 Layout structure
Considering above design principals, structure for the User Interface can be discovered. There can be logical structure & visual structure. For the logical structure, one needs to consider ease for the end-user, cardinal principals of elements & components. I.e Considering UI element Navigation, its placement (top/right/bottom/left) should be fixed for the user to identify & content should be grouped logically to make user to understand where to land and from where to start. There are cardinal principals are mentioned below which one needs to consider:
- Primary/Secondary buttons should always be in the center and bottom, flat buttons should always be in the right bottom.
- Icon based actions on the panel heading should always be in the right. Grouped icons action while used in the toolbar should be at the top and while used in sub navigation should be in the left.
- Icons should be in the center to its placeholder.
- Labels used inside the input fields should be left aligned and to the left of element. Labels used in actions should always be in the center of the placeholder, while used in the form component outside element, should be right aligned and to the left of element except Radio & Checkbox, they should be left alight and to the right of element.
- Dropdown menu, while in Select menu element should be open either upwards or downwards and in Navigation element should be open either downwards or right to the element.
- Scrollbars can either be at the bottom or right.
- Pickers should open either upwards or downwards.
- Modal & Non-modal dialog should always open in center, while on minimizing the Non-modal dialog should be in horizontal sequence to the bottom right of window in case of multiple dialog.
- Validations in ToolTip can be positioned in top/right/bottom/left to the element.
- Progress & Loaders should always be in the center.
- Pagination used in the table should always be on top and bottom.
- Breadcrumb should always be on top.
- Site specific main Navigation should always be on top while site specific sub-navigaion should be in the left as sticky to the window.
- Title should always be left aligned and should be position left. Body text should always be left aligned. Header should be on top and footer in bottom.
- All components should be in the center except the tabs, tab should be positioned in left to the panel. Considering Information, elements & components, the whole layout visual structure should be center aligned to the window both in mobile & web, while left in the OPS.
For the visual structure, considering all above cardinal principals, prototypes for UI elements & UI components are discovered and are explained with example in the subsequent sections. Designer should consider the bootstrap grid while creating a layout visual structure as explained in Implementation Guide separately.