Mockups/new design discussions

IMHO there’s something off with the colors. The icon simply doesn’t remind of Firefox. I think it is because in the original logo the “fox” :fox_face: is orange on a blue globe :earth_asia:

image

Often there are very strict rules for logo use (just look at Ubuntu) and it would be good to reach out to trademark-permissions@mozilla.com to make sure we respect their brand.

5 Likes

@eaglers pointed out that the iOS and Android icons use a dark background and suggested trying the same one here with the normal Firefox icon in front of it:

image

5 Likes

Hmm, it’s bugging me a little bit that the iOS/Android background colour doesn’t stand out much on the launcher with the default wallpaper.

Just for discussion - do people feel that sky blue works as a squircle colour?

image

1 Like

One thing I’ve noticed is that the darker version with the brighter highlight looks brilliant when I view the mockups on my phone but not as good when I look on my laptop. I thought the sky blue version looked pretty good on my laptop but a bit naff when I look at this thread in my phone.

I thought the sky blue version looked pretty good on my laptop but a bit naff when I look at this thread in my phone

I had the same impression. Also @madsrh mockup looks good, but less crisp than others, but maybe it is just because it does not have the same fold effect, or because it’s a screenshoot

1 Like

How about the dark shade but with a larger logo, so the icon doesn’t look so dark on the launcher?

image

EDIT: I’ve tried that on my laptop and my phone and I think it looks all right.

I also like the idea of the flat orange glyph on the blue background. I note that the Firefox style guide also describes the glyph as the “one colour icon”, so the danger is they only envisaged it being used in a monochrome design where maximum simplicity is required. When they use it themselves it’s like that. By using both colours we’re arguably inching towards recreating a flat version of the full logo, which is what we’d probably do if we had free rein :slight_smile: To make it crisp we might need a drop shadow and possibly a top edge highlight on the fox to make it stand out on the blue, and I guess then we’re just a small step away from sticking a blue circle behind the fox :slight_smile: That would be lovely if done well (a “paper” version of the full Firefox logo) but Mozilla might say the glyph is for when you can’t have blue and orange, use the normal icon if you want a full colour version that emphasises “this is Firefox”, etc…

2 Likes

The squircle background is so dark that it looks like a normal firefox icon :smiley:

How about a blue that has a bit of a gradient, so it’s darker behind the yellow and lighter behind the red for maximum contrast at all points of the logo:

image

EDIT: Same gradient approach with two shades of Suru grey:

image

1 Like

I’ve tried to do the grey version with crisper edges on the logo:

image

EDIT: Still trying to make the grey version as sharp as possible, the upload degrades the image quality though which affects this icon quite a bit:

image

Okay, I’m still chipping away at the full logo on a squircle. I’m currently using Suru grey but the refinements could be used for any colour.

What I’ve been doing is making very microscopic changes to the svg to optimise it for 48x48. I don’t believe these are trademark violations because they’re sub-pixel, and I think you could introduce equally big changes if you exported the svg from a different app that averaged the pixels out slightly differently. There’s also a slight drop shadow to make the yellow tail more distinct and the opposite on the other side to make the red edge sharper.

image

image

Also, looking at screenshots of 12.04 which inspired the LibreOffice icons, I note that Firefox has an orange squircle:

image

So maybe one of the lighter shades for orange on the Suru palette would work here:

image

3 Likes

Orange with Suru fold:

image

2 Likes

I like Suru yellow behind the logo, but it helps to have a fold to lighten the top right corner so the tail doesn’t melt into it:

image

EDIT: This might look a bit more balanced if the fold cuts the squircle in half:

image

EDIT #2: You know what, lol… I rejected white at the start because it made the scaled logo look ugly (pixellated) around the edges. But when I revisit it now with the newly scaled logo, I think it’s definitely an option:

image

In fact, if someone held a gun to my head and said I had to choose one tonight, I’d say white.

4 Likes

I like this, I only expected to see an horizontal fold, like the libreoffice one, what do you think?

2 Likes

Yes, I’ll try non-diagonal folds tonight in yellow and orange. @madsrh is your preference for the orange glyph on the blue background? If so I can do svgs of that too :slight_smile:

1 Like

Attempts to do yellow and orange with horizontal folds:

image

1 Like

@madsrh’s idea looks great with some edging/gradients to make the glyph stand out:

image

EDIT: We might need to tweak the shade of blue but this one is my favourite, if it’s not a trademark problem!

3 Likes

This very slightly different version uses a Suru blue:

image

EDIT: Bottom half can be darker rather than lighter:

image

3 Likes

It might be helpful to see all the mockup close together to make a choice

2 Likes

I’m travelling tonight/tomorrow day but will put them together either tomorrow night or Thursday night

1 Like