| Table of Contents | ||||
|---|---|---|---|---|
|
Introduction
The design guidelines used for Common Workplace UI is targeted at administrativ users and administration self-service solutions.
Above all, the visual expressions main goal is to support ease of use in self-service solutions.
The design adheres to general design guidelines, which are derived from Google https://material.io/
Furthermore implementation is done through https://material.angular.io/ component libraries that support Material design guidelines.
Color & Contrast
Theme was chosen on the following criteria: Simple, neutral and Flexsible
Furthermore it is imperative that the theme supports high contrast for maximum readability.
Overall Color Scheme is as follows
...
Grayscale
...
Messages and Alerts
...
| Info |
|---|
Color contrast analysis |
...
Typography And Fonts
The chosen font type in the material design guidelines is Roboto
Furthermore, fonts are chosen on the following criteria: readability, contrast, clear huarache.
Only parts of the full Font spec have been chosen for Common Workplace UI specifically
Used Font Types
...
| Info |
|---|
See google fonts for further information on typography and fonts |
...
Icons
General icon resources used are google icons
In Common Workplace UI Icons are used to “support” the user's understanding of what is being communicated through call to actions.
Rule of thumb is that a label (usually a CTA) is always displayed with a visible label. There are exceptions though.
Generally already established conventions can sometimes be displayed without a clear call to action if a mouseover caption is provided.
General icons for confirm, copy, delete, search
navigation: Home, back arrows.
Generally Icons used are never displayed alone, as this usually leads to unnecessary cognitive overload .
The are specific areas i Common Workplace UI, where icons are a little more freely interpriable. These are generally never left without a clear label.
...
Content and layout
General layout considerations are based on what type of content is to be displayed and edited i Common Workplace UI.
Most parts are of type or derived from the following
Navigable Data tables
Forms w./ formfields
Buttons
Most of these components are implemented through https://material.angular.io/
UI components: HTML + CSS. This could be a button, a radio-button or an input-field or anything else consisting of just HTML and CSS.
Functional components: HTML + CSS + JS. This could be an accordion, a carousel or a modal.
Most components are used “out of the box“. But there are exceptions.
Specific in Common Workplace is the Plan editor and Questionnaire editor, which includes fully drag & drop elements.
This is a custom solution and the feature is not part of the Angular material spec.
Smaller Screens And Responsiveness
The https://material.angular.io/ spec fully supports responsive layout. And most components are laid out in a flexible gridmodel.
That said, we do NOT officially support screen widths below 1400px. Everything under will introduce inconsistencies in navigation and is therefore not recommended.