iPad (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 retina 2048px by 1536px iPad the grid follows a 12 column layout, each column being 136px in width (landscape) and 93px width (portrait) The margins and gutters vertically and horizontally span a 32px 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 eCommerce channel.

  •   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 Book Italic 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

Copy and paste the styles below into your CSS document to correctly embed the Argos fonts into your page. You can also download the font pack from the button on the right hand side.

Show/hide CSS

@font-face { font-family: argosbook; src: url(../fonts/argos-book-webfont.eot);	src: url(../fonts/argos-book-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-book-webfont.woff) format("woff"), url(../fonts/argos-book-webfont.ttf) format("truetype"), url(../fonts/argos-book-webfont.svg#argosbook) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argosbookitalic; src: url(../fonts/argos-bookitalic-webfont.eot); src: url(../fonts/argos-bookitalic-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-bookitalic-webfont.woff) format("woff"), url(../fonts/argos-bookitalic-webfont.ttf) format("truetype"), url(../fonts/argos-bookitalic-webfont.svg#argosbookitalic) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argoscompressedbold; src: url(../fonts/argos-compressedbold-webfont.eot);	src: url(../fonts/argos-compressedbold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-compressedbold-webfont.woff) format("woff"), url(../fonts/argos-compressedbold-webfont.ttf) format("truetype"), url(../fonts/argos-compressedbold-webfont.svg#argoscompressedbold) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argoscondensedbook; src: url(../fonts/argos-condensedbook-webfont.eot); src: url(../fonts/argos-condensedbook-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-condensedbook-webfont.woff) format("woff"), url(../fonts/argos-condensedbook-webfont.ttf) format("truetype"), url(../fonts/argos-condensedbook-webfont.svg#argoscondensedbook) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: argoscondensedextrabold; src: url(../fonts/argos-condensedextrabold-webfont.eot); src: url(../fonts/argos-condensedextrabold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-condensedextrabold-webfont.woff) format("woff"), url(../fonts/argos-condensedextrabold-webfont.ttf) format("truetype"), url(../fonts/argos-condensedextrabold-webfont.svg#argoscondensedextrabold) format("svg");	font-weight: 400; font-style: normal }
@font-face { font-family: argosbold; src: url(../fonts/argos-bold-webfont.eot); src: url(../fonts/argos-bold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/argos-bold-webfont.woff) format("woff"), url(../fonts/argos-bold-webfont.ttf) format("truetype"), url(../fonts/argos-bold-webfont.svg#argosbold) format("svg");	font-weight: 400; font-style: normal }

Buttons Global eComm mComm iPhone iPad Android Mobile Android Tablet

Outlined below are the different button styles (and associated markup) that we use across the eCommerce platform 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>

As you can see, we use the button class on any element which is to be used as a button, and then add an additional class to adjust it to either a primary or secondary button style.

Below are the CSS styles which show the different classes. Overrides should be used where necessary for positioning.

Show/hide CSS

General button style

.button { 
  background-color: #FFF;
  border: 1px solid #CCC;
  border-bottom: 3px solid #CCC;
  height: 28px;
  display: inline-block;
  float: left;
  font-family: argoscondensedextrabold; 
  color: #333; 
  text-transform: uppercase; 
  padding: 0 10px; 
  font-size: 14px; 
  line-height: 28px; }

Primary style

.primary { 
  height: 40px; 
  font-size: 18px; 
  background-color: #00AA50; 
  color: #FFF; 
  border: none; 
  border-bottom: 3px solid #CCC; 
  line-height: 40px; 
  padding: 0 15px; }

Secondary style

.secondary { 
  color: #F7941D; }

Hover state

.button:hover { 
  margin-top: 1px;
  border-bottom: 2px solid #CCC;
  cursor: pointer; }

Active (hit) style

.button:active { 
  background-color: #F7941D;
  color: #FFF; }

Fields eComm mComm iPhone iPad Android Mobile Android Tablet

Field style and states are demonstrated in this section. As a rule fields should have labels to the left hand side of it, with the entire form centred to the content block it's sitting in.

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


Submit

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

Modal Windows

Modal Windows should be used in instances where the user does not need to load an etirely new page, this will annoy most users. Modal Windows allow us to save space by getting rid of large elements that dont need to be on the main page or provide a space for an action to be completed. Examples like this on the Argos site include sign-in, store locator, quickview, media player.

The eComm modal is 1712px wide in #FFFFFF with a 120px high header in #F1F1F1 and a 2px shadow in #CCCCCC. The overlay over the content is at 60% opactity in #000000

Breadcrumbs

Breadcrumbs provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one

The eComm breadcrumb has the following styling: Font-size: 13px, Font-family: Arial, Colour: #666666