mmsi style guidelines

7/29/2019 MMSI Style Guidelines

http://slidepdf.com/reader/full/mmsi-style-guidelines 1/78

Style guidelinesMMSI



Table of ContentsIntroductionFoundationsBasic principles

Patterns

2



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



FoundationsUniversal GridColumnsGrid Variations

The BaselineThe MastheadMarginsBrandingThe Footer

4



Universal GridFoundations

5

All elements and alignment based on 16 pixel vertical and 8px

horizontal grid

16px unit

8px unit



ColumnsFoundations

6

The sample of how grid allows to divide space on

columns and to define location of elements

Sample of grid (1365)



Foundations

7

Masthead

The global masthead includes the global

navigation links with search entry field anduser avatar panel

30px

60px

32px 8px 16px32px16px



MarginsFoundations

The margins for this type of headers across

all screens of application

Main menuAll Administration Configuration Applications

48px

24px

24px



TilesFoundations

9

Size of tile and margins

40px

Headline

4px

Headline

144px

144px

Headline16px 8px

16px

Headline

8px 11px

1px



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



Margins in controls

MarginsFoundations

Button Password box30px

30px

30px

Password boxButton

30px 15px

ContextMenu

Item2

Item3

ContextMenu

Item2

Item3

1px



Margins in controls

MarginsFoundations

12

40px

40px

360px

Text of Notification

two lines

12:35PMAction 1 Action 2

90px


two lines




Location of branding for different type of monitors

BrandingFoundations

13


Dark theme



BrandingFoundations

14


Light theme



Basic principlesColoursTypographyIconography

15



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



18

It is primary palette for backbround and controls

for Dark theme


Background colors

Table

WightMiddleGreyDarkGrey Grey LightGrey



19


It is primary palette for backbround and controls

for Light theme

Background colors

#FFFFFF#999999#1C1F22 #CCCCCC #E6E6E6

Table



20

ColoursBasic principles

Colors used as secondary pallete

for controls, alerts and buttons

FDBC26 FBE8AAED2624C12F2F FF5810

67C5B9 56AF8B0093D4016DBA 11A8F5



21


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



Border for Rest, Hover, Disable - Button_Border_L

Border for state Pressed - Button_Border_Pressed_L 22


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



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





24


Forbidden usage of secondary palette ! Don't use the secondary pallete

for such basic elements

as tiles, tabs, etc



25

TypographyBasic principles

Family font Segoe UI for all kinds of text

Segoe UI Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890!@£$%^&*()_+

Segoe UI Semilight

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890!@£$%^&*()_+



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



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



28

! It cannot be significantly less

than the border

IconographyBasic principles

Icons size can varies within 64x64px

64px

64px

120px

Headline longer nameHeadline



PatternsGeneric сomponentsData ManagementNavigation

Data VisualizationLayoutInteractivity

29



30

Generic componentsPatterns

ResizeGrip and selection of next size

Dark theme Light theme

Headline Headline



31


Drag and drop tiles Separator

Dark theme

Headline

Headline



32


Drag and drop tiles Separator

Light theme

Headline

Headline



33


GridSplitter Expander

BulletDecorator

Bullet Decorator1Bullet Decorator2

Bullet Decorator3

Bullet Decorator1Bullet Decorator2

Bullet Decorator3




34


ScrollBar

Dark theme



35


ScrollBar

Light theme



36


Scrolviewer List Box

List box item 1

List box item Longer name 2


Selected item

List box item Longer name5


List box item 7

List box item 8

Dark theme



37


List box item 1



Selected item

List box item Longer name5


List box item 7

List box item 8

Scrolviewer List Box

Light theme



38


Window

http://mmsi

MMSI MAIN MENU

Dark theme

G i



39


Window

http://mmsi

MMSI MAIN MENU

Light theme

G iP



40


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



41


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



42


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



43


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



44


ComboBox


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




Menu

45

Rest state

Mouse hover

Pressed state





Tabs

46

Rest state

Mouse hover

Mouse down

Mouse down

Pressed state

Tab name

Longest visible name



Shorter



Longest visible nameLongest visible name




Shorter


Longest visible nameLongest visible name





Slider

47

Rest state

Disabled

Mouse hover

Pressed

51

70

Dark theme





Slider

48

Rest state

Disabled

Mouse hover

Pressed

51

70

Light theme




49


TextBox

This is an example of an edit field that

has two line of text.


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




50


TextBox


has two line of text.


has three line of text. This is an

example of an edit.


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




51


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


June 2012

Dark theme




52


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


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


June 2012




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.


Text block

Dark theme




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.


Text block

Light theme




55

Dark theme

Rest state

Mouse hover

Mouse down


Notification


two lines



two lines



two lines





5643

Light theme

Rest state

Mouse hover

Mouse down


Notification


two lines



two lines



two lines





57

Light theme

Rest state

Mouse hover


Icons for context menu

Add Open Remove Deselect Settings





58

Light theme

Rest state

Mouse hover


Icons for context menu



Data ManagementFoundations



59


Table view

Dark theme




60

ata a age e tou dat o s

Table view

Light theme




61

p

Master-detail view

Dark theme




62

p

Master-detail view

Light theme




63

p

Charts

Dark theme




64

p

Charts

Light theme




g

Main menu

65

Dark theme




g

Main menu

66

Light theme




67

g

Add tiles from Main menu to Dashboard

Dark theme




68

Light theme




Dashboard with Tiles of different sizes

69

Dark theme




Light theme

70




Layout Panel

71

Dark theme

Sample




Layout Panel

65

Light theme

Sample




73

Global Search

Dark theme




74

Light theme




75

Dark theme




76

Light theme




77

Dark theme




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

mmsi style guidelines

Documents