USER INTERFACE DESIGNCHRISTOPHER RITTERCHRISTOPHER RITTER

STYLE GUIDES

SECTION HEADER

TWO LINE LIST

THREE LINE LIST

Lorem ipsum dolor sit ametSecondary line item

Single line item

Lorem ipsum dolor sit ametSecondary line item

Lorem ipsum dolor sit ametSecondary line item

Single line item with button

Single line item with avatar

Normal

Disabled

Focused

Focused disabled

Pressed

ON

OFF

Normal

Disabled

Pressed

SECTION HEADER

Activated

Focused

Disabled focused

1 selected 1 selected

#FFBE00

#FF9600

#F0F0F0

#A0A0A0

#3475CE

#163560

#D0262E

#831418

#649540

#364D25

Roboto, text size micro 12sp

Roboto, text size small -14sp

Roboto, text size medium -18spRoboto, text size large -22sp

TYPOGRAPHY

BASED ON HOLO LIGHT & DARK TEMPLATE

Project MorpheusStyle GuideAll elements are standardized in MDPI and created with vector shapes.Per Googles stencils dated 2012-07-16

CHECKBOX

RADIO BUTTON

SWITCHES

DEFAULT BUTTONS

LIST

COLOR

ACTION BARPORTRAIT HEIGHT

SPLITACTION BAR

CONTEXTUALACTION BAR

CONTEXTUAL SPLITACTION BAR

LANDSCAPE HEIGHT

48dp

40dp

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

DESIGN COMPOSITIONS

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

DESIGN SPECIFICATIONS

1.0 Guidance Bar

The guidance bar is displayed at the bottom of the guidance screen. It displays the guidance settings along with the settings buttons.

BACKGROUND #163561

1.1 Settings Buttons

Both of the settings buttons use a 32x32 DPI icon within a 48x48 button.

BACKGROUND (DEFAULT) #163561, 1 DP

BACKGROUND (SELECTED) #2E74D7

BORDER 1 DP, #767494

1.2 Guidance Settings

Guidance settings should expand and contract along the dimensions. In addition, padding between the dividers and settings may be decreased to 12DP if necessary.

TEXT LABELS (INCLUDING UNITS) #FFFFFF, 14 SP, Align Right (UNITS ONLY), Vertical Align Center

TEXT ITEMS #FFFFFF, 22 SP, Align Right, Vertical Align Center

DIVIDER 1DP, #767494

1.0 Guidance Bar

1.1 Settings Buttons

1.2 Guidance Settings

32 DP

32 DP

32 DP72 DP

48 DP

8 DP

24 DP

30 DP

32 DP

12 DP 24 DP 24 DP 24 DP

8 DP

24 DP 24 DP

8 DP

12 DP

16 DP

8 DP

12 DP

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

3D MODELING

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

APPLICATION ICONS

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

PLAN ICONS

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

SETTINGS ICONS

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

LAUNCHER ICONS

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

USER JOURNIES

Tech

TBC

Super

Foreman

Trailer

Sales

Support

SITECH

Office

Site

Operator Expert

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

GAMESTORMING

DAY 1 DAY 2

FOR MORE INFORMATION VISIT:CHRISTOPHERRITTER.COMCHRISTOPHERRITTER.COM