Wallpapers

This is a guide on how to create mobile wallpapers and its requirements for iOS and Android.

Design Requirements

  1. The design must work with both Light and Dark theme
  2. The design must work across various device sizes in Portrait and Landscape view for iOS and Android. Use the smallest and largest device sizes of each platform for reference - see table below for device specs
  3. The design must be accessible and complement our existing UI components – e.g.: If you are designing a wallpaper to be placed on the Homepage, take into consideration all the Homepage components such as the cards, text headings, buttons, links, logos, etc. and how the wallpaper will appear behind these elements
  4. The elements in the design should either be really small (such as a pattern), or really big so it doesn't contradict with our components
  5. If the client requires a disclaimer to be visible on the wallpaper, such as a trademark, ensure the placement of it will not be cut off by any of our UI elements
    1. Try to find out if this is a requirement in advance
  6. Vector-based files are preferred as final deliverables from the artist (in case a mobile designer needs to make any changes or resize things)
  7. Depending on what the final design is, a gradient overlay may potentially be applied on top of the wallpaper to improve accessibility
    1. For iOS - the gradient will be applied via code (see details below for specs)
    2. For Android - the gradient will be applied manually by the designer (see details below for specs)

Device Specs

Design for the following screen sizes:

Platform

iOS

Android

Smallest Phone

iPhone SE (1st Gen)
P: 320px x 568px
L: 568px x 320px

P: 320dp x 480dp
L: 480dp x 320dp

 

Largest Phone

iPhone 17 Pro Max
P: 440px x 956px
L: 956px x 440px

P: 480dp x 800dp
L: 800dp x 480dp

 

Smallest Tablet

iPad Mini (6th Gen)
P: 744px x 1133px
L: 1133px x 744px

P: 600dp x 1024dp
L: 1024dp x 600dp

Largest Tablet

iPad Pro 13" (7th Gen)
P: 1032px x 1376px
L: 1376px x 1032px

P: 800dp x 1280dp
L: 1280dp x 800dp

*P - Portrait
*L - Landscape

iOS Requirements

  • iOS requires final wallpaper files in PNG format
  • Files should be optimized as small as possible (without compromising the quality)
  • A PNG export is required for phone portrait and landscape, and tablet portrait and landscape. There are a total of 4 files:

Portrait (Phone)

  • 1320px x 2868px

Landscape (Phone)

  • 2868px x 1320px

Portrait (Tablet)

  • 2064px x 2752px

Landscape (Tablet)

  • 2752px x 2064px

Gradient Overlay

If the wallpaper requires a gradient overlay, the iOS team will apply these settings via code on top of the wallpaper:

Theme

Light Theme

Dark Theme

Hex

#FFFFFF

#32113C

Fill

28%

35%

Android Requirements

  • Android requires final wallpaper files in PNG at 1.5x format
  • Files should be optimized as small as possible (without compromising the quality)
  • A PNG export is required for both portrait and landscape views, plus a thumbnail. There are a total of 3 files:

Thumbnail

  • 300×300

Portrait

  • 1080x1920

Landscape

  • 1920x1080

Gradient Overlay

If the wallpaper requires a gradient overlay, either the mobile designer or wallpaper designer can apply these settings within their design tool:

Theme

Light Theme

Dark Theme

Hex

#FFFFFF

#32113C

Fill

28%

35%