1136423 - iOS app icon - Design

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

>>Project/Request Title:
iOS Brand ID - Logo design

>>Project Overview:
Develop a Mozilla logo for iOS. The logo will be featured on the iOS product page and other properties.

Wiki: https://wiki.mozilla.org/Firefox_Growth_Campaign_2015

>> Creative Help Needed:
Copy:    No 
Design:  Yes 
Video:   No 
Other:  No

>>Creative Specs:
Full specs/direction TBD

>>CTA and Design:
Full specs/direction TBD

>>Creative Due Date:
2015-04-03

>>Launch Date:
2015-05-12

>>Mozilla Goal:
Org Support

>>Mozilla Creative Collective:
No

>>Points of Contact:
[e-mail], [e-mail]

Comment 1

[Matej Novak [:matej]]

Are we looking for the icon that will go on the device here? Or something else? Because this should just use the standard Firefox logo, the same way that Android does.

Comment 2

[Darrin Henein [:darrin]]

(In reply to Matej Novak [:matej] from comment #1)
> Are we looking for the icon that will go on the device here? Or something
> else? Because this should just use the standard Firefox logo, the same way
> that Android does.

That will be part of it I assume, yes. One difference will be the square nature of iOS icons – if we are to use the standard logo (which I'm 100% on board with), we'll need some background to go behind it. Also placing the logo within the rounded square with the right padding, etc. should be a branding decision (we are here to help wherever need of course!)

Comment 3

[Matej Novak [:matej]]

(In reply to Darrin Henein [:darrin] from comment #2)
> (In reply to Matej Novak [:matej] from comment #1)
> > Are we looking for the icon that will go on the device here? Or something
> > else? Because this should just use the standard Firefox logo, the same way
> > that Android does.
> 
> That will be part of it I assume, yes. One difference will be the square
> nature of iOS icons – if we are to use the standard logo (which I'm 100% on
> board with), we'll need some background to go behind it. Also placing the
> logo within the rounded square with the right padding, etc. should be a
> branding decision (we are here to help wherever need of course!)

Yup, makes sense. My comment was based on the old description of this bug. Let's touch base soon.

Comment 4

[Ty Flanagan]

Attachment: iOS_Firefox-App-Icon_White.jpg

Came up with a few color options for the logo. Heres the Firefox logo on white.

Comment 5

[Ty Flanagan]

Attachment: iOS_Firefox-App-Icon_Yellow.jpg

Yellow

Comment 6

[Ty Flanagan]

Attachment: iOS_Firefox-App-Icon_GradientYellow.jpg

Yellow gradient

Comment 7

[Ty Flanagan]

Attachment: iOS_Firefox-App-Icon_Blue.jpg

Solid Blue

Comment 8

[Ty Flanagan]

Attachment: iOS_Firefox-App-Icon_GradientBlue.jpg

Blue gradient

Comment 9

[Matej Novak [:matej]]

These are awesome. Thanks, Ty.

Sounds like we're leaning towards the white in Creative. It really makes the logo pop.

Comment 10

[Darrin Henein [:darrin]]

Personally, I like the blue. Looks a little more intentional than the white (and may contrast better for people with light wallpaper)?

Comment 11

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Ty - per our discussion please add a gray/white gradient version.

Comment 12

[Ty Flanagan]

Attachment: iOS_Firefox-App-Icon_GradientGrey.jpg

Cory, here is the Grey Gradient version of the icon

Comment 13

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Hi all, we have 3 finalists:

white - attachment 8572806 [details] 
blue - attachment 8572809 [details]
white/grey - attachment 8575685 [details]

Thanks Ty!

Comment 14

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

:darrin, are you good with these options? We'd like to begin circulating through brand/product marketing.

Comment 15

[Matej Novak [:matej]]

(In reply to Cory Price [:ckprice] from comment #14)
> :darrin, are you good with these options? We'd like to begin circulating
> through brand/product marketing.

Also, is there anyone else from your team who should review/approve these?

Comment 16

[Matej Novak [:matej]]

Sean, are you good to present the three options in comment 13 up the chain?

Comment 17

[Darrin Henein [:darrin]]

I think these look great! The white one is pretty much in line with every other browser icon on iOS (logo on flat white) which has pros and cons. 

I like the grey gradient one too :) Thanks!

Comment 18

[Sean Martell]

Personally not a fan of the blue and gradient options. White seems to nail the cleanliness of iOS.

I find the logo gets lost on the blue due to the tight constraints around the blue globe - it's different when it rests on a larger blue field. Even on a light background, having the logo on pure white would make it stand out unconstrained.

To me, the light grey gradient just looks slightly less refined compared to the white. Perhaps a more subtle gradient? 

We can show the options, but I'm most comfortable with the white icon. Bold and clean would be my choice.

Comment 19

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Per a convo with :darrin, let's move forward with White and White/Grey to shop around.

:matej - are you good to begin circulation of these two options?

Comment 20

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

2 finalists:

white - attachment 8572806 [details] 
white/grey - attachment 8575685 [details]

Comment 21

[Matej Novak [:matej]]

(In reply to Cory Price [:ckprice] from comment #19)
> Per a convo with :darrin, let's move forward with White and White/Grey to
> shop around.
> 
> :matej - are you good to begin circulation of these two options?

I shared both of these options with Mary Ellen yesterday and our recommendation is to go with the white. Both look good, but as Sean says in comment 18, the grey is a little muddier and the white allows the logo to pop the most.

Comment 22

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

white - attachment 8572806 [details] approved by PMM, creative, brand and FF UX. Closing bug.

Comment 23

[Darrin Henein [:darrin]]

Can we get assets for the icon? Would love to get them into the build as soon as possible.

Comment 24

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Ty - will you please attach the PSD to this bug? Thanks.

Comment 25

[Ty Flanagan]

Hey Cory and Darrin,

Here is the PSD:

https://www.dropbox.com/s/ue7rmah05rb2jc8/Firefox-iOS-App-Icon.psd.zip?dl=0

Simple SAVE FOR WEB will export all the icon sizes needed. There is one layer that needs to be enabled prior to export though.