iAd Specs for Designers

Posted: November 23rd, 2010 | Author: Liza | Filed under: Uncategorized | Tags: Design, GUI, iAd, Specs |

I’ve just finished my first iAd Design (I will post a link when live), and getting my head around the specs was quite tricky.  I haven’t seen the finished ad yet (I think apple dev time at the moment is 4 weeks), but these are the spec’s I used to create it.  I designed the 2D interface, and the 3D Video Intro was developed separately.

You will get a spec from Apple when you are working with them, this is a summary of that with some extra stuff I discovered along the way.

Here’s a Iphone 4 GUI to get you started.

Provide developers with Photoshop files

• 1 for iPhone retina screen (200%) - 640 x 960 (72 ppi) screen size.
• 1 for older iPhone screen (100%) - 320 x 480 (72 ppi) - 50% of above mentioned size.
• Provide them with jpg previews (or layer comps) of each screen
• I put everything in 1 PSD while I was developing the design, but later I was asked to separate them into separate PSD files (i.e. Banners, Preloader/Reveal Graphic, Navigation and Core Ad Unit - 3D intro was separate).

If you have to slice the file:

• provide the images as either gif/Jpg/PNG (preferably 80% quality)
• Try not to use too much transparency as it will increase the file size.

Banner Ads, you MUST provide both landscape and portrait sizes

• (Portrait) 640 x 100 (and 50% of this size for older screen)
• (Landscape) 960 x 64 (and 50% of this size for older screen)
• the size of each banner must be NO MORE than 20kb (so depending on size for this you may need to cut down animations/effects).
• the banner can be a static graphic or a web page
• you can animate the arrival of the banner ad - fade in, wipe etc (see Safari Visual Effects Guide).

iAd Unit Transition

• Pay attention to the iAd unit transition - this is how the banner changes to reveal the iAd.
• Reveal Graphic size - 640 x 960 pixel (or 50% for older screen) max size 50KB

Loader/Preloader

• You can use a default (see example of Apple blue bar loader in Dove men care) or custom loader.

Splash Page

• this is the first piece of content that includes the “X” close button (which allows you to exit the iAd and return to your app)
• you can use webkit animations and transforms here (see Safari Visual Effects Guide)

Video after splash page

• Immediately following the splash page, the video should last no longer than 15 sec
• On any other part of the iAd, the video should not last longer than 60 sec.
• Duration for video in total is 2 minutes.

Buttons for usability

• You can have a “DONE” button that acts as a “skip intro” element to the video intro.  See the Nissan Leaf video intro, there is a “MENU” button similar to this.

Video formats

• should be MPG4 (exported H.264 codec)

iAd Animation/effects

• Based on Safari Visual Effects Guide.

Testing

• You should provide the dev team with the files as scamps early on for animation/usability testing if possible.

Other Issues

• Consider whether the ad needs to be designed for Portrait, landscape or both as it will restrict the Apps you can advertise in.
• I would have little or no scrolling content/copy on iAds, because it really is an ad at the end of the day, and people aren’t inclined to read to much copy when viewing an ad.

Downloads available to use within iAds

• aps
• music
• tv shows or
• movies

Examples:

• Target
• Dove men
• Nissan Ieaf
• Toy Story
• Nike ID

Thanks to Ben Dodson and Teehan + Lax.

---