Android (MDPI) Tablet 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 MDPI screen at 1024dp by 768dp the grid follows a 12 column layout, each column being 68dp in width (landscape) and 47px width (portrait) The margins and gutters vertically and horizontally span a 16dp 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
  • Action Bar Argos Book 22sp #333333 Main page titles
  • Product Titles Argos Book 18sp #333333 In-page product titles
  • Browse Titles Argos Book 20sp #333333 Titles within Browse pages
  • £999.99 Argos Compressed Bold 30sp #333333 Main PDP price
  • was £999.99 Argos Book Italic 15sp #8A8A8A Was pricing across app
  • SAVE £999.99 Argos Condensed Extra Bold 18sp #EE3124 Saving messaging
  • Field Labels Argos Book 22sp #333333 Labels for fields
  • Footnotes Argos Book 12sp #333333 Small text for bottom of pages such as T&C's
  • Tabs Argos Book 18sp #333333 Tab font
  • Fulfilment Tabs Argos Condensed Extra Bold 22sp #333333 Font for fulfilment tabs within PDP
  • Body text Roboto 12sp #333333 General body text across app
Download fonts

You can download the font pack 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 (and associated code) that we use across the Android platform as well as rules for using them.

Primary Button
52dp height
3dp bottom shadow #CCC
#00B5A3 background colour
Argos Compressed Bold, 22sp #FFF
Turn on 1 Click Reserve
52dp height
3dp bottom shadow #CCC
1dp stroke #CCC
#FFF background colour
Argos Compressed Bold, 22sp #AA4E9E
1 Click Reserve
52dp height
3dp bottom shadow #CCC
#AA4E9E background colour
Argos Compressed Bold, 22sp #FFF
Secondary Button
33dp height
3dp bottom shadow #CCC
1dp stroke #CCC
#FFF background colour
Argos Compressed Bold, 15sp #F7941D
Tertiary Button
33dp height
3dp bottom shadow #CCC
1dp stroke #CCC
#FFF background colour
Argos Compressed Bold, 15sp #333

Show/hide code

<style name="button">
  <item name="android:paddingLeft">5dp</item>
  <item name="android:paddingTop">5dp</item>
  <item name="android:paddingRight">5dp</item>
  <item name="android:paddingBottom">5dp</item>
  <item name="android:minHeight">52dp </item>
  <item name="android:minWidth">52dp</item>
  <item name="android:gravity">center</item>
  <item name="android:textSize">22sp</item>
  <item name="android:textAllCaps">true</item>
  <item name="customFont">argos_condensed_extra_bold</item>
  <item name="android:background">#00AA50</item>
  <item name="android:textColor">#ffffffff</item>
</style>

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.

Radio Buttons eComm mComm iPhone iPad Android Mobile Android Tablet

Radio button styles and markup can be found below.


Checkboxes eComm mComm iPhone iPad Android Mobile Android Tablet

Checkbox styles and markup can be found below.


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.

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 857dp wide in #FFFFFF with a 60dp high header in #F1F1F1 and a 2dp shadow in #CCCCCC. The overlay over the content is at 60% opactity in #000000