MMSI Style Guidelines
-
Upload
timur-prokopiev -
Category
Documents
-
view
225 -
download
0
Transcript of MMSI Style Guidelines
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 1/78
Style guidelinesMMSI
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 2/78
Table of ContentsIntroductionFoundationsBasic principles
Patterns
2
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 3/78
Introduction
3
This guidelines are a reference point for alldesigners creating applications for MMSI.
The foundations should be used by all. Theyinclude a vertical grid, baseline grid andrecommended templates
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 4/78
FoundationsUniversal GridColumnsGrid Variations
The BaselineThe MastheadMarginsBrandingThe Footer
4
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 5/78
Universal GridFoundations
5
All elements and alignment based on 16 pixel vertical and 8px
horizontal grid
16px unit
8px unit
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 6/78
ColumnsFoundations
6
The sample of how grid allows to divide space on
columns and to define location of elements
Sample of grid (1365)
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 7/78
Foundations
7
Masthead
The global masthead includes the global
navigation links with search entry field anduser avatar panel
30px
60px
32px 8px 16px32px16px
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 8/788
MarginsFoundations
The margins for this type of headers across
all screens of application
Main menuAll Administration Configuration Applications
48px
24px
24px
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 9/78
TilesFoundations
9
Size of tile and margins
40px
Headline
4px
Headline
144px
144px
Headline16px 8px
16px
Headline
8px 11px
1px
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 10/7810
MarginsFoundations
Margins and lining of text block
16px
16px
34px
HEADLINE
Here can be different kind
of text, it can be shorter orlonger and located in two
columns
Here can be different kind
of text, it can be shorter or
longer and located in two
columns
Unit
Now:Material:
Then:
T110
ArriveOre3
Assign
HEADLINE
16px
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 11/7811
Margins in controls
MarginsFoundations
Button Password box30px
30px
30px
Password boxButton
30px 15px
ContextMenu
Item2
Item3
ContextMenu
Item2
Item3
1px
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 12/78
Margins in controls
MarginsFoundations
12
40px
40px
360px
Text of Notification
two lines
12:35PMAction 1 Action 2
90px
Text of Notification
two lines
12:35PMAction 1 Action 2
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 13/78
Location of branding for different type of monitors
BrandingFoundations
13
Main menuAll Administration Configuration Applications
Dark theme
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 14/78
BrandingFoundations
14
Main menuAll Administration Configuration Applications
Light theme
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 15/78
Basic principlesColoursTypographyIconography
15
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 16/78
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 17/78
17
ColorsBasic principles
It is primary palette for Tiles
Colors for titles of Dark and Light themes
DarkBlue Blue LightBlue Aquamarine Bitumen Ashy-grey
Main menu
All Administration Configuration Applications
Main menu
All Administration Configuration Applications
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 18/78
18
It is primary palette for backbround and controls
for Dark theme
ColorsBasic principles
Background colors
Table
WightMiddleGreyDarkGrey Grey LightGrey
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 19/78
19
ColorsBasic principles
It is primary palette for backbround and controls
for Light theme
Background colors
#FFFFFF#999999#1C1F22 #CCCCCC #E6E6E6
Table
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 20/78
20
ColoursBasic principles
Colors used as secondary pallete
for controls, alerts and buttons
FDBC26 FBE8AAED2624C12F2F FF5810
67C5B9 56AF8B0093D4016DBA 11A8F5
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 21/78
21
ColorsBasic principles
The primary and secondary pallete for Buttons
Default button for Dark theme
Button Button
Button_Rest__PC_D Button_Hover_PC_D Button_Pressed_PC_D Button_Disable_PC_D
Provides extra visual weight and identifies the primary action in a set of button
Border for Rest, Hover, Disable - Button_Border_D
Border for state Pressed - Button_Border_Pressed_D
Button Button
Button_Rest_SC_D Button_Hover_SC_D Button_Pressed_SC_D Button_Disable_SC_D
Button
Button
Button
Button
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 22/78
Border for Rest, Hover, Disable - Button_Border_L
Border for state Pressed - Button_Border_Pressed_L 22
ColorsBasic principles
The primary and secondary pallete for Buttons
Default button for Light theme
Button Button Button Button
Button_Rest_PC_L Button_Hover_PC_L Button_Pressed_PC_L Button_Disable_PC_L
Provides extra visual weight and identifies the primary action in a set of button
Button Button Button Button
Button_Rest_SC_L Button_Hover_SC_L Button_Pressed_SC_L Button_Disable_SC_L
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 23/78
23
Basic principles
For Buttons in Notifications it used White color in both fill and stroke.
Rest state is 100% of transparency for Hover state it's 70% of transparency
Buttons for notifications
Butt_Notific_PC_Rest Butt_Notific_SC_Rest Butt_Notific_PC_Hover Butt_Notific_SC_Hower
Action 1 Action 2 Action 1 Action 2
Action 1 Action 2 Action 1 Action 2
Action 1 Action 2 Action 1 Action 2
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 24/78
24
ColorsBasic principles
Forbidden usage of secondary palette ! Don't use the secondary pallete
for such basic elements
as tiles, tabs, etc
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 25/78
25
TypographyBasic principles
Family font Segoe UI for all kinds of text
Segoe UI Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz1234567890!@£$%^&*()_+
Segoe UI Semilight
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz1234567890!@£$%^&*()_+
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 26/78
Segoe UI Regular 36px
Segoe UI Regular 18pxSegoe UI Regular 13px
Segoe UI Regular 18px
Segoe UI Semilight 13px
Segoe UI Semilight 18px
Page headline
TEXT HEADLINEText body
Headlines Tiles
Body Tiles
Filter menu
26
TypographyBasic principles
Recomended size for fonts
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 27/78
27
IconographyBasic principles
We use white icons in a minimalist style.
Two-dimensional characters have the same visualmetaphors as tiles run
! Don't use the
three-dimensional icons
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 28/78
28
! It cannot be significantly less
than the border
IconographyBasic principles
Icons size can varies within 64x64px
64px
64px
120px
Headline longer nameHeadline
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 29/78
PatternsGeneric сomponentsData ManagementNavigation
Data VisualizationLayoutInteractivity
29
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 30/78
30
Generic componentsPatterns
ResizeGrip and selection of next size
Dark theme Light theme
Headline Headline
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 31/78
31
Generic componentsPatterns
Drag and drop tiles Separator
Dark theme
Headline
Headline
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 32/78
32
Generic componentsPatterns
Drag and drop tiles Separator
Light theme
Headline
Headline
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 33/78
33
Generic componentsPatterns
GridSplitter Expander
BulletDecorator
Bullet Decorator1Bullet Decorator2
Bullet Decorator3
Bullet Decorator1Bullet Decorator2
Bullet Decorator3
Dark theme Light theme
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 34/78
34
Generic componentsPatterns
ScrollBar
Dark theme
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 35/78
35
Generic componentsPatterns
ScrollBar
Light theme
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 36/78
36
Generic componentsPatterns
Scrolviewer List Box
List box item 1
List box item Longer name 2
List box item Longer name 3
Selected item
List box item Longer name5
List box item Longer name 6
List box item 7
List box item 8
Dark theme
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 37/78
37
Generic componentsPatterns
List box item 1
List box item Longer name 2
List box item Longer name 3
Selected item
List box item Longer name5
List box item Longer name 6
List box item 7
List box item 8
Scrolviewer List Box
Light theme
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 38/78
38
Generic componentsPatterns
Window
http://mmsi
MMSI MAIN MENU
Dark theme
G i
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 39/78
39
Generic componentsPatterns
Window
http://mmsi
MMSI MAIN MENU
Light theme
G iP
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 40/78
40
Generic componentsPatterns
RadioButton
Rest state
Mouse hover
Chosen
Disabled checked
CheckBox
Rest state
Mouse hover
Chosen
Disabled checked
GroupBox
Group One
Option1
Option2
Option1
Dark theme
G i tP tt
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 41/78
41
Generic componentsPatterns
RadioButton
Rest state
Mouse hover
Chosen
Disabled checked
CheckBox
Rest state
Mouse hover
Chosen
Disabled checked
GroupBox
Group One
Option1
Option2
Option1
Light theme
G i tP tt
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 42/78
42
Generic componentsPatterns
DropDownMenu
ToolTip
An app name is too long to be displayd
on the title but can be displayd in tooltip
Item1
Item2
Item3
Item1
Selected item
Item2
Item1
Item2
Selected item
Dark theme
G i tP tt
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 43/78
43
Generic componentsPatterns
DropDownMenu
ToolTip
An app name is too long to be displayd
on the title but can be displayd in tooltip
Item1
Item2
Item3
Item1
Selected item
Item2
Item1
Item2
Selected item
Light theme
G i tP tt
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 44/78
44
Generic componentsPatterns
ComboBox
Dark theme Light theme
All types
All types
Photoshop EPS
Photoshop DCS 10
Selected format
All types
All types
Photoshop EPS
Photoshop DCS 10
Selected format
G i tP tt
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 45/78
Generic componentsPatterns
Menu
45
Rest state
Mouse hover
Pressed state
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 46/78
Generic componentsPatterns
Tabs
46
Rest state
Mouse hover
Mouse down
Mouse down
Pressed state
Tab name
Longest visible name
Longest visible name
Longest visible name
Shorter
Longest visible name
Longest visible name
Longest visible nameLongest visible name
Longest visible name
Longest visible name
Longest visible name
Shorter
Longest visible name
Longest visible nameLongest visible name
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 47/78
Generic componentsPatterns
Slider
47
Rest state
Disabled
Mouse hover
Pressed
51
70
Dark theme
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 48/78
Generic componentsPatterns
Slider
48
Rest state
Disabled
Mouse hover
Pressed
51
70
Light theme
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 49/78
49
Generic componentsPatterns
TextBox
This is an example of an edit field that
has two line of text.
This is an example of an edit field that
has three line of text. This is an
example of an edit.
This is an example of an edit field thathas three line of text. This is an example of
an edit field that has three line
of text.
Enter sample text
Enter sample text
Sample
Enter sample text for edit
Sample
Dark theme
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 50/78
50
Generic componentsPatterns
TextBox
This is an example of an edit field that
has two line of text.
This is an example of an edit field that
has three line of text. This is an
example of an edit.
This is an example of an edit field that
has three line of text. This is an example of
an edit field that has three line
of text.
Enter sample text
Enter sample text
Sample
Enter sample text for edit
Sample
Light theme
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 51/78
51
Generic componentsPatterns
DataPicker
27 28 29 30 31 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
1 2 3 4 5 6 7
Sun Mon Tue Wed Thu Fri Sat
June 2012
27 28 29 30 31 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
1 2 3 4 5 6 7
Sun Mon Tue Wed Thu Fri Sat
June 2012
Dark theme
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 52/78
52
Generic componentsPatterns
DataPicker
Light theme
27 28 29 30 31 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
1 2 3 4 5 6 7
Sun Mon Tue Wed Thu Fri Sat
June 2012
27 28 29 30 31 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
1 2 3 4 5 6 7
Sun Mon Tue Wed Thu Fri Sat
June 2012
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 53/78
53
Headline
Text block should contain headline, text and proper
leading. Text block should contain headline, text andproper leading. Text block should contain headline,
text and proper leading. Text block should contain
headline, text and proper leading. Text block should
contain headline, text and proper leading.
Text block should contain text appropriate size and
proper leading. Text block should contain text
appropriate size and proper leading. Text blockshould contain text appropriate size and proper
leading.
Headline very long name withTwo lines
Text block can contains Links. In state mouse over-they hilightet with other coloure like this Link.
Generic componentsPatterns
Text block
Dark theme
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 54/78
54
Headline
Text block should contain headline, text and proper
leading. Text block should contain headline, text andproper leading. Text block should contain headline,
text and proper leading. Text block should contain
headline, text and proper leading. Text block should
contain headline, text and proper leading.
Text block should contain text appropriate size and
proper leading. Text block should contain text
appropriate size and proper leading. Text blockshould contain text appropriate size and proper
leading.
Headline very long name withTwo lines
Text block can contains Links. In state mouse over-they hilightet with other coloure like this Link.
Generic componentsPatterns
Text block
Light theme
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 55/78
55
Dark theme
Rest state
Mouse hover
Mouse down
Generic componentsPatterns
Notification
Text of Notification
two lines
12:35PMAction 1 Action 2
Text of Notification
two lines
12:35PMAction 1 Action 2
Text of Notification
two lines
12:35PMAction 1 Action 2
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 56/78
5643
Light theme
Rest state
Mouse hover
Mouse down
Generic componentsPatterns
Notification
Text of Notification
two lines
12:35PMAction 1 Action 2
Text of Notification
two lines
12:35PMAction 1 Action 2
Text of Notification
two lines
12:35PMAction 1 Action 2
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 57/78
57
Light theme
Rest state
Mouse hover
Generic componentsPatterns
Icons for context menu
Add Open Remove Deselect Settings
Add Open Remove Deselect Settings
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 58/78
58
Light theme
Rest state
Mouse hover
Generic componentsPatterns
Icons for context menu
Add Open Remove Deselect Settings
Add Open Remove Deselect Settings
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 59/78
59
Data ManagementFoundations
Table view
Dark theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 60/78
60
ata a age e tou dat o s
Table view
Light theme
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 61/78
61
p
Master-detail view
Dark theme
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 62/78
62
p
Master-detail view
Light theme
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 63/78
63
p
Charts
Dark theme
Generic componentsPatterns
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 64/78
64
p
Charts
Light theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 65/78
g
Main menu
65
Dark theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 66/78
g
Main menu
66
Light theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 67/78
67
g
Add tiles from Main menu to Dashboard
Dark theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 68/78
68
Light theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 69/78
Dashboard with Tiles of different sizes
69
Dark theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 70/78
Light theme
70
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 71/78
Layout Panel
71
Dark theme
Sample
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 72/78
Layout Panel
65
Light theme
Sample
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 73/78
73
Global Search
Dark theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 74/78
74
Light theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 75/78
75
Dark theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 76/78
76
Light theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 77/78
77
Dark theme
Data ManagementFoundations
7/29/2019 MMSI Style Guidelines
http://slidepdf.com/reader/full/mmsi-style-guidelines 78/78
Light theme
Reassign Work Order
Priority
High
Type of BrekDown
None Planed
Location
Equipment Location (GPS 30:60)
Comment
Send a notification
On
Write a comment