Common UI
proposed Master Layout
Home
Proposed Master Layout Structure
1 Primary navigation, 260PX expanded, collapsed 60PX.
2Global area (links, search, application title etc) 80PX high.
3Master page wrapper, max width 1200PX.
4Workspace component cards borders and padding.
5Application 100% of the viewport area.
6Application workspace expands to fill the viewport.
Draft Master Wrapper Template (HTML/CSS)
master-full.html + styles-full.css
Includes a working navigation menu and button to open/close the sidebar with associated scripts.
Please note: every <div> is highlighted with a pink border, for definition, to avoid colours or styling in the CSS (99% structural only) – borders as an indication only and can be removed/deleted from the css easily.
Download master wrapper template
Styled Examples
Dashboard
Grid
Form
White Labelling
Proposed Master Layout Structure
For general white labelling where a client specific brand is required an Angular variable for the navigation sidebar colour, the primary links text colour, and the navigation icons is available.
1 Logo or brand element.
2Primary link text colour and icon colour.
3Navigation sidebar colour.
Angular Theming
Angular Material's theming system enabled will allow for customised colour and typography styles for components in the application. The theming system based on Google's Material Design specification.
Dark Mode
The Angular theming proposed will allow us to include switches for client specific branding as well as options for dark mode, accessibility, and highlights for specific emphasis, essentially colour and emphasis changes and views that the client/user can control.
Colour
Primary Colours
Proposed global application primary colours.
Typography
Aa
“Dm Sans”, sans-serif
Aa
“Dm Sans”, sans-serif
Aa
“Dm Sans”, sans-serif
Aa
“Dm Sans”, sans-serif
HTML5 Headings
h1 - HTML5 heading 2em/32px
h2 - HTML5 heading 1.5em/24px
h3 - HTML5 heading 1.17em/18.72px
h4 - HTML5 heading 1em/16px
h5 - HTML5 heading 0.83em/13.28px
h6 - HTML5 heading 0.67em/10.72px
Blockquotes
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
Text Types
Text Type 1em/14px -
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum
Text Type 0.85em/12px -
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum
Components
Card Layouts
Proposed grid for card components with 30PX gutters.
4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
Controls
Buttons
Proposed global button styling and colours.
Transaction Elements
Proposed global user indicators.
Out
In
Distribute
Success
Failure
Alert
Query
Tabs
Proposed global tab component with icon.
Table Grid
Proposed global grid components.
Grid Header
Grid Row
Progress Bar
Proposed progress bar component.
No Progress
Progress
Completed
Progress Alert
Alternative
Form Elements
Proposed global form elements and controls.
Icons
Icon Set
Proposed global icon style.
Process, Guides, and Methodologies
Proposed Design Process And Tools
Proposed Angular Landscape
Research/Investigation
UI Integration Investigation
UI Integration Proposal.
Angular Data Grid Component Comparison
Grid Proposal.
Angular Component Library
Storybook Angular Library.
UI/UX Guides
Design System
Design Elements.
UX Research Guide
Nielson Norman Group, research archive for User Experience.
Design Thinking Process
Stanford Design Thinking Guide.