Chaz.K designs

Adrenaline Fitness App

Style Guide Version 1.0

Charmaine Kelly

4/1/2014

General

TypographyROBOTO – LIGHT & MED

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

1234567890!”£$%^&*()_+-=’#@~<>?,./\|

Lrg: 22pt (Headers) Lrg: 18pt (General text) Med: 14pt (Default type boxes) Sml: 12pt (%)

InactiveInactive links or input methods should be faded out to 50% opacity.

Input Methods

TypeAll type is 14pt by default until information is added then it becomes 18pt.

Radio Buttons2Options is presented as radio horizontal radio buttons.

Size: 18 x 18px

Stroke: 2pt

Dropdown SelectionsBy default the selection highlight is on the 3rd option.

The width of the dropdown is determined by the length of the text, a margin of 5px should be left either side.

Length: 185px

Mini Double Selections: 85px space 15px

Double Dropdown

Max Height: 205px (10 options visible without scrolling) Min Height: 67px (3 options available)

Text BoxesText boxes open keyboard on selection.

Length: 185px

Mini Double Selections: 85px space 15px

Login

Navigation Tabs

HeaderProfile Photo: 85 x 85px

Setting Icon: 24 x 24px

Username etc : ROBOTO MED 14PT #FFFFFF

Tabs: 120 x 68px / #ffffff / Active Opacity: 50% / Inactive Opacity: 30% / Divider Stroke: 20pt

Profile Stats: 160 x 63px

ProfileContent Title: Lrg 18pt Main Content: Med 14pt

Space from title to Content: 40px

Space between content: 80px

Dividers Stroke: 1pt (Colour Matches Input Methods)

Margin to content: 50px

Margin to Divider Line: 20px

Progress

Awards

FriendsPost Box: Width: 440px Height: 94px

Comment Box: Height: 64px

WorkoutsWorkout are colour coded to allow the user to also know which module they are in.

Strength

Endurance

Power

Challenges

Dialogs

General Dimensions - Height: 245px Width: 380px Margins: 20px (centre text inside margin, icons & header top right and left) Rounded corners: 8px Text: 18pt

Waiver Dimensions 380 x 490px Next button should be inactive until the terms are accepted. Text that is off screen shall

scroll within the text are of the dialog. This is a unavoidable screen, once create is selected the user must select ‘Accept terms’ to

proceed.

Mini DialogsText: 16pt

Android back button or touching the screen will close these. They can be viewed by touching the icon.

InfoPresents the user with useful information, like loading so they know what the app is doing.

WarningPresents the user with a warning that information is invalid, these always start with woops!

Help

IconsGoogle and Launcher icon. 32 tp 512px

Action Icons 24x24px

Visual Icons 24x 24px

12 x 12px

48 x 48 px