iPhone (Retina) Design Guidelines

Last updated 14/10/14

Download Grids Designing within a grid space is an old tradition that finds its roots in the need for structure and balance. Users should be left with the impression that things are easy to handle if the order employed at crafting them suggests so. The grid makes it possible to bring all the elements of design — type characters, imagery, icons and colour — into a formal relationship with each other.

Based on a 640px wide mobile the grid follows a 12 column layout, each column being 36px in width. The margins and gutters vertically and horizontally span a 16px width.

Typography Global eComm mComm iPhone iPad Android Mobile Android Tablet

Below you can find different examples of how we use the Argos typeface across the iPhone channel. Note that all sizes are in Retina resolution and should be halved for non-Retina.

  •   Font Size Colour Usage
  • Main Heading Argos Book 40pt #040404 Main page titles
  • Product titles Argos Book 40pt #040404 Product titles
  • Browse Argos Book 48pt #040404 Browse headings
  • £999.99 Argos Compressed Bold 60pt #040404 Main PDP price
  • £999.99 Argos Compressed Bold 45pt #040404 Product lister pricing
  • was £999.99 Argos Book Italic 30pt #777777 Was pricing across app
  • SAVE £999.99 Argos Condensed Extra Bold 40pt #EE3124Saving messaging
  • Home block text Argos Book 32pt #FFFFFF Home promo block text
  • Home block titles Argos Condensed Extra Bold 40pt #FFFFFF Titles for home promo blocks
  • Trolley titles Argos Book 35pt #040404 Titles in trolley list page
  • Trolley Product Titles Argos Book 40pt #040404 Product titles in trolley list page
  • 337/0989 Argos Book 30pt #777777 Catalogue numbers
  • Body text Helvetica / Arial 35pt #333333 General body text across app
Download fonts

The font pack is available for download from the button on the right hand side.

Buttons Global eComm mComm iPhone iPad Android Mobile Android Tablet

Outlined below are the different button styles that we use across the iPhone app channel as well as rules for using them.

Primary Button
<a class="button primary">Primary Button</a>
Secondary Button
<a class="button secondary">Secondary Button</a>
Tertiary Button
<a class="button">Tertiary Button</a>
Turn on 1 Click Reserve
<a class="button">Tertiary Button</a>
1 Click Reserve
<a class="button">Tertiary Button</a>

Fields eComm mComm iPhone iPad Android Mobile Android Tablet

Field style and states are demonstrated in this section. As a rule all fields and their supporting calls-to-action buttons should fill the width of the device, allowing for a content margin on either side.

52dp height
3dp bottom shadow #CCC
1dp stroke #CCC
#FFF background colour
Argos Book, 15sp #333


Submit

Inline error message for the form field.

Please enter a valid email address
<div class="formErrorText">Please enter a valid email address</div>
<input type="text" value="Email address" onfocus="this.value = this.value=='Email address'?'':this.value;" onblur="this.value = this.value==''?'Email address':this.value;" class="formError">

Style for dropdown (select) lists below. Note that the width should vary as per the design.

Show/hide code

...

Radio Buttons eComm mComm iPhone iPad Android Mobile Android Tablet

Radio button styles and markup can be found below.


Show/hide code

...

Checkboxes eComm mComm iPhone iPad Android Mobile Android Tablet

Checkbox styles and markup can be found below.


Show/hide code

...

Iconography Global eComm mComm iPhone iPad Android Mobile Android Tablet

Download icons

In this section we have included all the icons used across the site. You can also download a pack of these from the button on the right hand side.

Generic Icons

Location Close Refine Refresh Sort by... Reset Search Send Share Trolley Home Delivery Store Collection Zoom Add to Wishlist Remove from Wishlist Select chevron Cross Tick Delivery Slot Settings / Options Delivery Instructions Home Delivery Two-man Delivery Order Summary Details


App-only Icons

Menu Back Edit More... Accept Trash / Delete Share Add to Wishlist Remove from Wishlist Browse Saved Cards One-man Delivery Terms Your Details


App sliding tray icons

Less More Account Account
(Signed in)
Argos Scan Feedback Home Information More... Pricecuts Reservations Settings Shortlist Sign out Store Location
Download icons

The download pack (see button on right hand side) contains assets at four densities which covers desktop, iOS and Android apps. For desktop, generally use @1x sizes.

Loading Wheel Global eComm mComm iPhone iPad Android Mobile Android Tablet

New loading wheel replaces all instances of old blue version and should spin once per 1.5 seconds. Size should be set on a case by case basis to best fit the space available.

Tabs Global eComm mComm iPhone iPad Android Mobile Android Tablet

New tabs style in green and white colour.

  • Available in 3 days at Bletchley store
  • Order now for delivery to MK92NW within 2 days

Generic tabs

Segmented tabs

Rating stars Global eComm mComm iPhone iPad Android Mobile Android Tablet

Rating stars for PLP / PDP and any other areas across the channel