Home > Design - Imagery, Banners & Landers >

The Perfect Mobile Banner Ad. (Template inside) (33)


11-19-2013 01:12 PM #1 Mr Green (Administrator)
The Perfect Mobile Banner Ad. (Template inside)

This is a little document wrote up that I thought I would share with you guys.

I've been getting into outsourcing and documenting my tasks. One of them included creating mobile banner ads.

I did a study of 50 different popular mobile banner ads. I noted down trends I saw between them so my Philipino superstar could use it as a starting point when creating ads.

Here's what I found:


Text:

Body: Question. (Android Speed Slow?) Closely followed my commands (Download Your Android App Now!).

Call to action : "Download" dominates. Followed by "Click Here".

Word Count: 3-5 words.

Color: Black

Colors:

Amount: 4 colors. White, black, red, blue.

Background: White, closely followed by black.

Contrast or complimentary: Contrasting colors.

Imagery:

Type: Icons dominate any other type of imagery (stock photography, product images).

Size of Icon: 50x50

Number: 1

Button:

Size: 100x30px button within the banner.

Color: Red most popular, then green, then orange.

Number: 1

Position: The vast majority of buttons were on the far right. If there are two buttons then they are split down the middle.

Shape: Rounded edges dominate.


Animation: Animation just edges out static banners.

Frequency: 0.3 seconds between frames.

Frames: 2 frames, blinking between each other.

Focus: Most animations are limited to a blinking icon.

Overall:

Border: None.

Tone: OS/Android styled alert.

The Visual:



You can download the PSD file here https://www.dropbox.com/s/f7h3r5qzt2stal9/STM320x50.psd

Obviously this depends, on what OS you are targeting. What niche you are promoting. But if you are new to mobile, this is a perfect place to start!


11-19-2013 01:34 PM #2 fjk87 (Veteran Member)

Beers on me at SkyLounge !


11-19-2013 02:25 PM #3 Mr Green (Administrator)

^^ Best bar everrr.


11-19-2013 03:21 PM #4 reedrothchild (Member)

Amazing post! Thank you very much.


11-19-2013 04:23 PM #5 gettinpie (Member)

Just found this for icons, thought you guys would like it:

https://www.iconfinder.com

Looks like there's a ton of free icons in there.

Cheers


11-19-2013 04:34 PM #6 Mr Green (Administrator)

Quote Originally Posted by gettinpie View Post
Just found this for icons, thought you guys would like it:

https://www.iconfinder.com

Looks like there's a ton of free icons in there.

Cheers
Delicious, just bookmarked.


11-19-2013 06:26 PM #7 2 Live (Senior Member)

this is an excellent post on breaking down the working parts of a mobile banner. pure gold!


11-20-2013 12:35 AM #8 miax (Member)

Thank you, Mr. Green! This is amazing stuff!


11-20-2013 05:10 AM #9 maynzie (Moderator)

DAMN!

This is what we love Mr G!

This is MONEY giving to you guys, act act act.


11-20-2013 11:45 PM #10 mehdi (Member)

Excellent post ! Thanx



Mehdi


11-20-2013 11:59 PM #11 hangman (Member)

This is great information!


05-12-2014 06:21 AM #12 jaime (Member)

You can download the PSD file here https://www.dropbox.com/s/f7h3r5qzt2stal9/STM320x50.psd
When I click on this link, i get this:


Any ideas why?


05-12-2014 07:15 AM #13 Mr Green (Administrator)

Quote Originally Posted by jaime View Post
When I click on this link, i get this:


Any ideas why?
You need to download Photoshop to open PSDs.


05-12-2014 04:23 PM #14 caurmen (Administrator)

If you don't have Photoshop, you can get a 30-day free trial of it at http://creative.adobe.com . It's about $20 per month therafter.


05-15-2014 01:30 AM #15 jaime (Member)

Guys, I'm not actually using this banner. I know I haven't followed exactly Mr. Green's standards, but since it's the first one I created I want hear your opinion.
1. Is this enough? (it was too easy to make )



lol


05-15-2014 10:53 AM #16 caurmen (Administrator)

I'd say that's definitely worth testing!


05-17-2014 04:36 AM #17 iwarrior (Member)

Thanks Lorenzo! What about the Font Style? or it doesn't matter that much?


05-18-2014 10:56 AM #18 Mr Green (Administrator)

Quote Originally Posted by iwarrior View Post
Thanks Lorenzo! What about the Font Style? or it doesn't matter that much?
I haven't split tested much with font styles. I tend to keep to default web fonts. If I am targeting a certain placement I will use their font.


05-19-2014 12:34 AM #19 stackman (Administrator)

Quote Originally Posted by jaime View Post
Guys, I'm not actually using this banner. I know I haven't followed exactly Mr. Green's standards, but since it's the first one I created I want hear your opinion.
1. Is this enough? (it was too easy to make )



lol
Split test with sassier, more interesting images. Weird sex eyes, long tongue, etc.. Won't necessarily be better. Just get some split testing ideas together instead of going in with just 1.


07-04-2014 07:29 PM #20 beenskilled (Member)

Sorry to bumrush this thread. Haven't managed to come across a thread about images. I know where to find just random images that are royalty free, I use CC search. But how about the images of girls (dating images)?
Is there a good place to find those types of images which are royalty free and something we can use for ads?


07-05-2014 04:15 AM #21 zeno (Administrator)

Sites like TheChive, amateur porn sites and forums, etc. Go where you expect hot girls to be shared. The pinterest of sex is great - sex.com - beat that for a domain name!


07-05-2014 05:13 AM #22 beenskilled (Member)

Really!? Very interesting. So TheChive lets us download pics of girls? Never would have thought


07-05-2014 05:41 AM #23 zeno (Administrator)

They can't stop you, and they don't have copyright authority over any of the images of the girls as they are user submitted.

Taken from their Copyright section:

All images on theCHIVE.com are either submitted to theCHIVE by email or are readily available in various places on the Internet and believed to be in the public domain. theCHIVE respects the intellectual property rights of others and expects its users to do the same. It is theCHIVE’s policy, in appropriate circumstances and at its discretion, to disable and/or terminate the accounts of users who repeatedly infringe or are repeatedly charged with infringing the copyrights or other intellectual property rights of others.


If you are a copyright owner of a photograph or other material that appears on theCHIVE.com, that you claim violates your copyright, please notify us as follows.


If you are unsure whether the content you are reporting is infringing your legal rights, you may wish to seek legal guidance. Keep in mind that submitting intentionally misleading reports of infringement may be punishable under the Digital Millennium Copyright Act, 17 U.S.C. Section 512 (“DMCA”) in the United States or similar laws in other countries.


09-04-2014 12:25 AM #24 afernald (Member)

Quote Originally Posted by Mr Green View Post
This is a little document wrote up that I thought I would share with you guys.

I've been getting into outsourcing and documenting my tasks. One of them included creating mobile banner ads.

I did a study of 50 different popular mobile banner ads. I noted down trends I saw between them so my Philipino superstar could use it as a starting point when creating ads.

Here's what I found:


Text:

Body: Question. (Android Speed Slow?) Closely followed my commands (Download Your Android App Now!).

Call to action : "Download" dominates. Followed by "Click Here".

Word Count: 3-5 words.

Color: Black

Colors:

Amount: 4 colors. White, black, red, blue.

Background: White, closely followed by black.

Contrast or complimentary: Contrasting colors.

Imagery:

Type: Icons dominate any other type of imagery (stock photography, product images).

Size of Icon: 50x50

Number: 1

Button:

Size: 100x30px button within the banner.

Color: Red most popular, then green, then orange.

Number: 1

Position: The vast majority of buttons were on the far right. If there are two buttons then they are split down the middle.

Shape: Rounded edges dominate.


Animation: Animation just edges out static banners.

Frequency: 0.3 seconds between frames.

Frames: 2 frames, blinking between each other.

Focus: Most animations are limited to a blinking icon.

Overall:

Border: None.

Tone: OS/Android styled alert.

The Visual:



You can download the PSD file here https://www.dropbox.com/s/f7h3r5qzt2stal9/STM320x50.psd

Obviously this depends, on what OS you are targeting. What niche you are promoting. But if you are new to mobile, this is a perfect place to start!


This is an awesome guide, thank you! But when I go about following it, it seems like every one of the ads looks noticeably similar -_-


09-04-2014 01:07 AM #25 zeno (Administrator)

Do you mean the banners you make are all quite similar?

Gotta get creative then!

Make stuff ugly.

Think outside the box.

Test things you think are retarded.


09-06-2014 08:35 AM #26 pacman0r (Member)

Thanks for sharing the insights, this will help in my banner creation.


12-30-2014 06:56 PM #27 Mr Yaz (Member)

How can you setup the GIF in PS (photoshop) so that if the end-user's viewing experience doesn't allow for animation it still shows all the image (i.e. the icon in this case)? When it doesn't animate does the gif just load the first frame or show the last frame or do something else? (I know this is more technical but I'm curious for my audience. Right now I've sort of sandwiched it inside as a middle frame b/c I wasn't sure and assumed it would either run the first or last in this case. Thanks for the thoughts here..


12-30-2014 07:22 PM #28 craigm (Veteran Member)

Quote Originally Posted by Mr Yaz View Post
How can you setup the GIF in PS (photoshop) so that if the end-user's viewing experience doesn't allow for animation it still shows all the image (i.e. the icon in this case)? When it doesn't animate does the gif just load the first frame or show the last frame or do something else? (I know this is more technical but I'm curious for my audience. Right now I've sort of sandwiched it inside as a middle frame b/c I wasn't sure and assumed it would either run the first or last in this case. Thanks for the thoughts here..
If you're referring to something like a gif blocking plugin the amount of people that'd be using one is negligible, if you're referring to a traffic source like decisive which only allows 3 loops of the animation just switch the 2 frames around so that the frame with the icon is the last.


03-15-2015 04:57 PM #29 zenith (Member)

Awesome Post!

Question: Above parameters only refer to 320 x 50? Can it be applicable for different sizes banner?


04-16-2015 05:58 AM #30 jthebright (Member)

Thaaaaaannkssss! .


04-21-2015 08:51 PM #31 Tim King (Member)

Was after something just like this as I'm going to have to outsource all my banner creation, cheers


05-20-2015 04:19 PM #32 virginmobile (Member)

I tried to use the template, and translate in local language
..and rejected by decisive.is
reason : misleading content


04-14-2016 08:29 AM #33 vishal100london (Member)

Thanks this is very useful, Is there such a template and guideline for 300 x 250 banners?


Home > Design - Imagery, Banners & Landers >