LivingSocial iPhone App Style Guide

20px Use for medium headers and the nav bar title

24px Use for large headers

28px Use for large buttons

16px Use for any text the user is likely to read.

14px Use for less important, supplimental text.

12px Use very sparingly for slugs, dates, etc.

10PX ALL CAPS (TO BE DEPRECATED)

#e9ba26

#262626

#f0812b

#5fb8dd

#ea0b8c

#0899bc (Links)

#dddddd

#999999

#666666

Note: All measurements listed in density-independent-pixels, but assets are created at 2x resolution.

Typography

Colors

The app uses Proxima Nova Soft Regular and Bold. There are no italics.

The app follows a flexible type scale, including the following font sizes:

The app also occasionally uses colors from the LivingSocial secondary color palette.

Grid

Use 16px padding on the left and right.

iOS generally uses a 44px vertical rhythm.

HomeHome

Use 44px vertical height for small list items.

Use 44px vertical height for toolbars.

GridiOS generally uses a 44px vertical rhythm.

Use 44px vertical height for small list items.

Use 92px vertical height for large list items.

Use 16 padding on the left and right of views and around UI elements and blocks of content.

Use 16px padding between elements within the content.

Visuallization of 44px rhythm

24px and 92px are other sizes commonly used in many iOS apps.

GridHomeHome

Use 92px vertical height for large list items, such as lists of deals, merchants, or vouchers.

Use 24px vertical height for category bars

GridHomeHome

Use 16px between elements within the view.

16px

16px

16px

16px

SportationsOne Tandem Skydiving Experience

$15055%

SAVINGS PURCHASED REMAINING1,033 2 days

Want it for free? Buy first, then share a special link. If three friends buy, yours is free! Or, share now...

Calling all adrenaline junkies, daredevils, and thrill-seekers: Here's a deal that's perfect for your crazy side. Spend just $150 and you'll receive one tandem skydive jump from Sportations -- a $330 value. After just 30 minutes of on-the-ground prep, you'll head

Share Tweet More

NavigationThe title in the nav bar should tell the user exactly where they are, much like the title of a web page. The nav bar is a bare-bones breadcrumb pattern for small screens.

Label back buttons according to the content that it points to. The back button label should match the nav bar title of the view it links to. Be sure to take this into consideration when creating titles for the nav bar to avoid truncation when possible.

The app follows a strict spatial relationship to hierarchy, where scrolling up and down reveals content at the same hierarchical level, right moves down the hierarchy, and left moves back up. Apple refers to this navigation scheme as Table Views, which work similarly to Miller Columns.

For modal views, the app uses the standard iOS modal that slides in from the bottom of the screen. The Back button is replaced with a Cancel button that dismisses the modal. A Submit button may appear in the right side of the nav bar and should use a verb that clearly describes the action that the user can take.

With the exception of the back button, segmented controls, and some nav bar buttons, try to avoid using buttons for navigation. For example, the Deals list view has no buttons. iOS users are trained to tap on content to navigate. This helps keep focus on important information within the limited screen real estate and aids in scannability. Use buttons when they envoke an action that the user can take.

Avoid desktop-like pagination. Scrolling is much easier to navigate with on the iPhone. If there are loading concerns, use the Show More… link pattern.

For really long scrollable lists, try to utilize the iOS alphanumeric scrubber, like in the Contacts app.

When there is secondary information that is less relevant to the user, use progressive disclosure to put the information another level down in the hierarchy.

Modal Nav BarCancelCancel DoneDone

HomeHome Nav Bar

LocationLocation United States CountriesCountries

Akron/Canton

Albany/Capital Region

A

Search by City, State, or Zip

Albuquerque

Ann Arbor

Annapolis

Atlanta

Austin

Baltimore

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

Example of the iOS alphanumeric scrubber.

Buttons & ActionsThe app uses big, locked call-to-action buttons when there are clear actions that the user can take to proceed through a flow. For example, a ‘buy now’ button is always visible on deal detail views.

Segmented controls can be used to sort and filter lists or other content. The concepts of sorting and filtering do not need to be treated separately in the UI.

Share Tweet More

NearbyNearby ExpiringExpiring AllAllUnusedUnused

By purchasing, you agreeto the Terms & Conditions

MasterCard ***1234total: $25

buy now

purchase deal

mark as used

disabled

Example of locked call-to-action buttons.

Example of segmented controls.

Share buttons.

Example of content teasers.

ContentWhere appropriate, list items should tease the content that it points to. For example, showing the number of restaurants in the list one level down.

All tap targets, including links should be a minimum of 44px by 44px even if the tap target has no visual container.

takeout &deliveryfrom your favorite restaurants

order takeout45 restaurants

68 restaurants

26 restaurants

dine-in specials

order delivery

Messaging & InformationSmall bits of information that cannot be clicked on can be housed in 24px tall bars – the same size as category labels in lists.

Washington, DC

– $5deal bucks

Example of 24px tall messaging.

iOS in-line form field labels.

FormsForms use the iOS standard of placing labels directly in the form field. The benefits of saving screen real estate outweigh the disadvantage of the user potentially forgetting what the label is after beginning to type.

The submit button in forms should use a verb that clearly describes the action that the user can take. Include a submit button in the right side of the nav bar where appropriate.

Other ConsiderationsAs much as possible, try to avoid making the user enter data via keyboard. iOS provides alternatives to many typical desktop keyboard tasks, such as the date picker. Use these alternatives when possible.

Consider the capabilities of the hardware & software, such as using geolocation to know where the user is, or using the contacts list to fill in addresses.

Try to keep locked chrome to a minimum. The Table View requires 44px for the nav bar at top at all times. Try to avoid adding locked chrome below the nav bar. Similarly, avoid locked chrome at the bottom of the screen that is taller that 44px. The exception to this in the LivingSocial app is the locked action button, which is used to encourage purchases and continuing through flows.

Email Address

Password

Don’t have an account? Sign up now.

Sign InCancelCancel Sign InSign In

sign in

log in with Facebook

Or, have a Facebook account?

Delive...dressDelive...dress Add New Address

Street Address

Street Address 2 (Optional)

ZIP Code

Import from Contacts

Consider using features such as the contacts list to prevent the user from having to use the on-screen keyboard.

Climbing + Pub PartyWashington, DC

Wine and Brew on the Napa RiverCalistoga, CA

The user can see nearby deals based on geolocation. The pull-down-to-refresh pattern is used to reduce the amount of visual noise on-screen.

Example of tiles for Escapes and Adventures. Example of an image carousel.

Visual Health Doctors...

$20Eyeglass Exam and $225 to...

Policy

$20Two Brunch Plates and Drinks

Noah’s Ark Animal W...

$20Party Package for Up to Ten Kids

FAMILIES

The Six O’Clock Scra...

$20Six Months of Meal-Planning...

FAMILIES

Washington, DC

Northern Virginia

HomeHome Today’s Deals

Pull Down to Update...CURRENTLY VIEWING:

washington, dc

LocationCancelCancel

Recent

My Cities

Northern Virginia

Current Location

Montgomery County

Baltimore

Richmond

All Cities...

June 12 • June 25 • July 10 • Aug 7

included: Round trip transportation on a deluxe coach bus, shotgun rental (12 or 20 gauge), ear and eye protection, 25 shotgun shells and 25 clay targets, instruction from a qualified instructor, souvenir pint glass, beer tasting, brewery tour, light appetizers, discounted food at 5 Seasons

bring: comfortable clothing, closed-toe shoes, government issued ID, $$ for the restaurant afterward

Shootin’ + Drinkin’Washington, DC

$49

AdventuresAdventures Shootin’ + Drinkin’

book now

PURCHASED478