735008 - Work - Windows 8 tile and splashscreen resources

Status: RESOLVED FIXED

(Firefox for Metro Graveyard :: General, defect)

Description

[Brian R. Bondy [:bbondy]]

Attachment: Screenshot, we are currently the top left tile in this screenshot

In Windows 8 we'll need a tile and a splashscreen.

The tile is displayed on the metro start screen.
I'm not sure if it needs to be transparent or not, and what the colors signify.  But I do see some solid color tiles.

The splashcreen is shown after you click a tile and before it actually starts.

Comment 1

[Brian R. Bondy [:bbondy]]

Attachment: Example splashscreen that IE uses

Comment 2

[Brian R. Bondy [:bbondy]]

Attachment: Example tile that IE uses

Comment 3

[Brian R. Bondy [:bbondy]]

Attachment: Screenshot, smaller tiles when zoomed out

Note: Zooming out isn't progressive, it is just 2 states, normal tile size and these small ones.

Comment 4

[Brian R. Bondy [:bbondy]]

Attachment: Example SMALL tile that IE uses

Comment 5

[Brian R. Bondy [:bbondy]]

There is some more info about dimensions in this doc, but I think it should be the same as the IE samples:
http://go.microsoft.com/fwlink/?LinkID=243079

Comment 6

[Brian R. Bondy [:bbondy]]

By the way since the sample images are mostly transparent, I wouldn't rely on the dimensions of the attached IE samples.  Please grab the dimensions either from the mentioned doc in comment 5 or from the screenshots.

Comment 7

[Stephen Horlander [:shorlander]]

Played around with this for a bit and made a dummy application to get a feel for it.

Here are some screenshots of it in action:

- Start Page: http://cl.ly/133w1A3x420H273X3w1I/o
- Search Page: http://cl.ly/1G2C3i3E2D1D272P2n3t/o
- Splashscreen: http://cl.ly/462E0e0N3O1q0S3c0y1y/o


Rationale behind this treatment: Balance Firefox brand, visual style and select Metro style elements. Additionally not using a flat Firefox icon makes it stand out a little among the sea of grid blocks.

We will need to revisit this as the Metro design progresses.

Some additional details for future reference:

• Dimensions
  - Regular Tile Icon: 150px x 150px*
  - Wide Tile Icon: 310px x 150px
  - Store Icon: 50px x 50px
  - Small Icon: 30px x 30px
  - Toast/Notification Icon: 24px x 24px
  - Splash Screen: 620px x 300px

*Note: The actual size of the tile on the Start Page seems to be 120px x 120px so there is some down scaling of the image.

• Colors
  - Background Color for Manifest: #1895f5 (pulled from Firefox globe)
  - Windows adds a 1px, 10% white, edge highlight
  - Also adds a slight dark to transparent gradient over the tile background color


I guess we will also need images for Nightly and Aurora?

I will attach the files.

Comment 8

[Stephen Horlander [:shorlander]]

Attachment: Regular Tile Icon 150x150

Comment 9

[Stephen Horlander [:shorlander]]

Attachment: Store Icon 50x50

Comment 10

[Stephen Horlander [:shorlander]]

Attachment: Small Icon 30x30

Comment 11

[Stephen Horlander [:shorlander]]

Attachment: Splash Screen

Comment 12

[u88484]

So with all the icons here: http://mxr.mozilla.org/mozilla-central/source/browser/branding/official/ windows doesn't have code that will automatically scale a larger image to fit into those areas instead of bloating the size of Firefox with dozens of sizes of the exact same icon?

Comment 13

[Stephen Horlander [:shorlander]]

(In reply to Kurt Schultz (supernova_00) from comment #12)
> So with all the icons here:
> http://mxr.mozilla.org/mozilla-central/source/browser/branding/official/
> windows doesn't have code that will automatically scale a larger image to
> fit into those areas instead of bloating the size of Firefox with dozens of
> sizes of the exact same icon?

AFAICT, no. The icons need to be provided with your app package.

They are actually scaling the provided icons now, which is unfortunate because relying on automatic scaling for the right result rarely works out. It also kind of defeats the point of having a fixed size for the icons to begin with.

Comment 14

[Madhava Enros [:madhava]]

On this subject - autoscaling doesn't even really work with vectors:
http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html

Comment 15

[Brian R. Bondy [:bbondy]]

Relating to the tile, the text of the tile is added in by Windows.  We could have no text there but this text might be used for other things as well.  I don't know if this will need to be fixed or not in the long run just wanted to comment on it.

Comment 16

[Brian R. Bondy [:bbondy]]

The tile and splashscreen looks really cool by the way, I just tried them in my metro enabled desktop app project.

Comment 17

[Martin Anderson]

I am wondering if a single colour logo is being considered in order to fit with the Metro aesthetic?

Also could you consider some alternative colours for the tile and splashscreen?  Orange or darker colours may make it stand out better, and would prevent the logo from "blending" with the logo colours.

Comment 18

[Stephen Horlander [:shorlander]]

(In reply to Brian R. Bondy [:bbondy] from comment #15)
> Relating to the tile, the text of the tile is added in by Windows.  We could
> have no text there but this text might be used for other things as well.  I
> don't know if this will need to be fixed or not in the long run just wanted
> to comment on it.

From what I could see you can put your text in the manifest and then select to not show it. Which is what I did.

Comment 19

[Brian R. Bondy [:bbondy]]

OK nice, I didn't know about that option. I haven't looked at the manifest options much yet.

Comment 20

[Dão Gottwald [:dao]]

The custom "Firefox" label in http://cl.ly/133w1A3x420H273X3w1I/o looks rather alien, and I don't think the brand depends on it...

Comment 21

[Martin Anderson]

The image cannot be localised but the text can

Comment 22

[Dão Gottwald [:dao]]

(In reply to Martin Anderson from comment #21)
> The image cannot be localised but the text can

We usually don't translate "Firefox", so I'm not sure what you mean.

Comment 23

[Martin Anderson]

There was some discussion about hiding the text, and the manifest, so I just mentioned that to provide some reasoning about whether or not to include the text caption.

Comment 24

[Dão Gottwald [:dao]]

I don't understand your reasoning.

Comment 25

[Martin Anderson]

Well it is possible to not display the text and just use a logo image or a text based logo, but if you then have to translate that for other languages, you are not able to use different images for different cultures.

So if you need to display a localised app name, like in Japanese etc.  You will need to use an image that is the same all over the world, and then use the text caption, on the tile to display the localised text/app name.

With Firefox this is obviously not an issue, but this is a reason a developer may need to include the caption on the tile.

Comment 26

[Dão Gottwald [:dao]]

This bug is about Firefox.

I think we should use the built-in caption facility regardless of hypothetical l10n issues. Those labels have a common size, are left aligned, and each logo is vertically centered within its tile independently from the text -- the Firefox tile in http://cl.ly/133w1A3x420H273X3w1I/o departs from all these rules, making it look off and unbalanced.

Comment 27

[Martin Anderson]

However, look at Kobo, Wordpress, USA Today...

These tiles break away from the established to highlight their brand logo.  I don't think the centred firefox text looks good, but you could have the logo without the wordmark.  Or the wordmark without the logo (not the best idea).

It may be an idea to use an image that fills the whole tile, so you don't see the tile's background colour.  Or perhaps make a version of the logo that is single coloured and use the text caption, to really make it fit in.

Either way it should be the decision of someone who focuses on the design, and something that looks good.  Not the decision of someone who's focus is programming.  They should implement whatever the design contributor believes is best.

Comment 28

[Stephen Horlander [:shorlander]]

(In reply to Dão Gottwald [:dao] from comment #26)
> This bug is about Firefox.
> 
> I think we should use the built-in caption facility regardless of
> hypothetical l10n issues. Those labels have a common size, are left aligned,
> and each logo is vertically centered within its tile independently from the
> text -- the Firefox tile in http://cl.ly/133w1A3x420H273X3w1I/o departs from
> all these rules, making it look off and unbalanced.

Or it makes it stand out a little with out feeling completely out of place ;)

If you notice most of the 3rd party apps have custom non-captioned tiles. Which isn't necessarily an argument for doing this, however I do think in practice most Start pages are going to end up all over the place. So I am not entirely worried about deviating here.

But I agree this ultimately might not be the best approach. For reference here was my first pass: http://cl.ly/2R2c450f1U1g2O3a2i1h

This is a good place to start though and we can evolve over time.

Comment 29

[Martin Anderson]

The single coloured firefox logo could use some work, but that is the ultimate way to make it fit in.

However when I think of the firefox brand, I think of Orange, Red, Very Dark Grey, and Blue colours.  Just using a flat backing colour (I know Windows adds a subtle gradient) and the logo, just don't feel right for the brand.  And maybe a full tile image is needed?

Fitting in with Windows 8 features is important, and making that tile live and having pinned sites are also important.  But the Tile is a powerful branding tool, more so than an icon, so making best use of it, where other apps will be trying to establish their brands also, is important.

You should also consider the wide tile options.  This will provide more possibilities for live tile templates, but also, you could have just the icon, when small, and the icon and text logo when wide.

Comment 30

[Dão Gottwald [:dao]]

(In reply to Stephen Horlander from comment #28)
> (In reply to Dão Gottwald [:dao] from comment #26)
> > This bug is about Firefox.
> > 
> > I think we should use the built-in caption facility regardless of
> > hypothetical l10n issues. Those labels have a common size, are left aligned,
> > and each logo is vertically centered within its tile independently from the
> > text -- the Firefox tile in http://cl.ly/133w1A3x420H273X3w1I/o departs from
> > all these rules, making it look off and unbalanced.
> 
> Or it makes it stand out a little with out feeling completely out of place ;)

It feels out of place to me, that's really what I'm trying to say. I'm not against making the tile stand out, see below.

> If you notice most of the 3rd party apps have custom non-captioned tiles.

Yes, but the proposed tile isn't captionless, visually. It has a caption that looks like it tries and fails to imitate the native captions.

> But I agree this ultimately might not be the best approach. For reference
> here was my first pass: http://cl.ly/2R2c450f1U1g2O3a2i1h

How about using the real Firefox globe (no silhouette) with a native caption? I think this might be a good brand/metro-integration compromise.

Comment 31

[Stephen Horlander [:shorlander]]

(In reply to Dão Gottwald [:dao] from comment #30)
> Yes, but the proposed tile isn't captionless, visually. It has a caption
> that looks like it tries and fails to imitate the native captions.

That wasn't really the intent, it just happens to be the best orientation that would fit the icon and the wordmark into a square.


> > But I agree this ultimately might not be the best approach. For reference
> > here was my first pass: http://cl.ly/2R2c450f1U1g2O3a2i1h
> 
> How about using the real Firefox globe (no silhouette) with a native
> caption? I think this might be a good brand/metro-integration compromise.

I will try a few with that in addition to some other options.

Thanks! :)

Comment 32

[Josh Tumath]

(In reply to Stephen Horlander from comment #28)
> But I agree this ultimately might not be the best approach. For reference
> here was my first pass: http://cl.ly/2R2c450f1U1g2O3a2i1h
> 
> This is a good place to start though and we can evolve over time.

If it's OK, I'd like to give my opinion as a Firefox user running Windows 8. The simple tile with the word "Firefox" in the bottom left corner with the silhouette logo would make the most sense, to me. As the default browser tile is going to be in a prominent place on my Start screen, it'll be used frequently, so I don't want it to stand out; I want it to match the style of the other tiles surrounding it.

As for the orange background, it's the colour I'd expect from the Firefox brand, rather than blue. I don't think I or many other users associate Firefox with the colour blue, except as a secondary colour to be used for "decoration" (as with the Firefox website and the chrome pages on Firefox for Android).

I hope that helps you decide which design to use.

Comment 33

[Brian R. Bondy [:bbondy]]

This may be of interest:
http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx

Comment 34

[Jim Mathies [:jimm]]

Attachment: current images

I think we need to scrap the Firefox text, I haven't found a way to get the app name removed from the tile. Also we need to pick a background color.

Comment 35

[Martin Anderson]

You could go with this red colour (taken from the wordmark colour)
#cf3208


or this more lighter orange (taken from the fox in the logo)
#df7417

Comment 36

[Jim Mathies [:jimm]]

(In reply to Jim Mathies [:jimm] from comment #34)
> Created attachment 608542 [details]
> current images
> 
> I think we need to scrap the Firefox text, I haven't found a way to get the
> app name removed from the tile. Also we need to pick a background color.

I tracked down the text drawn by metro, it's the name of the link we place on the start menu.

If anyone would like to take the current images for a spin, I've checked in some tools that make getting things up and running quicker. Build docs @

https://wiki.mozilla.org/Firefox/Windows_8_Integration#Metro_Builds

Comment 37

[Stephen Horlander [:shorlander]]

(In reply to Jim Mathies [:jimm] from comment #36)
> > I think we need to scrap the Firefox text, I haven't found a way to get the
> > app name removed from the tile. Also we need to pick a background color.
> 
> I tracked down the text drawn by metro, it's the name of the link we place
> on the start menu.

I am not sure how our implementation is different than a normal app but in the package manifest you can set the display name for the tile e.g.:

<DefaultTile ShowName="noLogos" ShortName="Firefox" />

Hides it for all types of tiles.


>Also we need to pick a background color.

The background color for those images is #1895f5

Comment 38

[Jim Mathies [:jimm]]

(In reply to Stephen Horlander from comment #37)
> (In reply to Jim Mathies [:jimm] from comment #36)
> > > I think we need to scrap the Firefox text, I haven't found a way to get the
> > > app name removed from the tile. Also we need to pick a background color.
> > 
> > I tracked down the text drawn by metro, it's the name of the link we place
> > on the start menu.
> 
> I am not sure how our implementation is different than a normal app but in
> the package manifest you can set the display name for the tile e.g.:
> 
> <DefaultTile ShowName="noLogos" ShortName="Firefox" />
> 
> Hides it for all types of tiles.
> 
> 
> >Also we need to pick a background color.
> 
> The background color for those images is #1895f5

Thanks! I've updated elm to use these settings.

Comment 39

[Jim Mathies [:jimm]]

Attachment: current tile

Comment 40

[Henri Sivonen (:hsivonen)]

(In reply to Stephen Horlander from comment #28)
> But I agree this ultimately might not be the best approach. For reference
> here was my first pass: http://cl.ly/2R2c450f1U1g2O3a2i1h

This looks more Metroesque to me than the full-color icon.

Comment 41

[Ryan Spooner]

For me, the full coloured icon on the tile is fine, other apps have full colour icons after all, and Metro doesn't dictate that your program icon has to be white on a coloured background. But if you're going to have white text at the bottom, it really must conform with all the other tiles and be at the bottom left in the same font.

I agree with others that the text makes it look out of place at the moment.

Comment 42

[Avi Kohn]

Attachment: Modded Screenshot

I modded Stephen Horlander's screenshot (because it was the lazy way :) ) with a slightly different icon, if anyone wants, then I can upload a full-sized one.

Comment 43

[Avi Kohn]

Does anyone know if/where there is a PSD of the Firefox logo (layered)?

Comment 44

[Avi Kohn]

Attachment: Better icon (there IS a difference)

This is a slightly different icon that I think is better.

And never-mind on the layered icon, I just found one.

Comment 45

[bogas04]

(In reply to Avi Kohn from comment #44)
> Created attachment 614069 [details]
> Better icon (there IS a difference)
> 
> This is a slightly different icon that I think is better.
> 
> And never-mind on the layered icon, I just found one.

Yes its in fact better and simpler , following metro UI approach.

Comment 46

[Jim Mathies [:jimm]]

Attachment: nightly tile

Stephen, how should we handle nightly/aurora branding? Currently we're using a stock brand icon with metro placed text label. Should we always use the Firefox tile you worked up with the official branding, or would you like to use a release specific branded tile with the centered Firefox text image?

Comment 47

[Stephen Horlander [:shorlander]]

(In reply to Jim Mathies [:jimm] from comment #46)
> Created attachment 648665 [details]
> nightly tile
> 
> Stephen, how should we handle nightly/aurora branding? Currently we're using
> a stock brand icon with metro placed text label. Should we always use the
> Firefox tile you worked up with the official branding, or would you like to
> use a release specific branded tile with the centered Firefox text image?

I will make a new tile for Nightly and Aurora branded builds.

Comment 48

[Jim Mathies [:jimm]]

It'd be great if we can get the nightly tile in for the preview at the end of the month.

Comment 49

[Jim Mathies [:jimm]]

(In reply to Jim Mathies [:jimm] from comment #48)
> It'd be great if we can get the nightly tile in for the preview at the end
> of the month.

Actually, since this technically isn't going to be an mc nightly, can we design a unique elm build tile icon?

Comment 50

[Brian R. Bondy [:bbondy]]

Is there preview specific resources coming? Should we untrack this? I think we're finalizing on changesets very soon for the initial preview.

Comment 51

[Stephen Horlander [:shorlander]]

Attachment: Preview Tile Icon 150x150

Metro Fox on a blueprint background to indicate the previewishness of the preview.

Comment 52

[Stephen Horlander [:shorlander]]

Attachment: Tile Icon - Official

Comment 53

[Stephen Horlander [:shorlander]]

Attachment: Splash Screen - Official

Comment 54

[Stephen Horlander [:shorlander]]

Attachment: Tile Icon - Nightly

Comment 55

[Stephen Horlander [:shorlander]]

Attachment: Splash Screen - Nightly

Needs background-color #001226

Comment 56

[Stephen Horlander [:shorlander]]

Attachment: Small Icon - Nightly

Comment 57

[Stephen Horlander [:shorlander]]

Attachment: Tile Icon - Aurora

Comment 58

[Stephen Horlander [:shorlander]]

Attachment: Splash Screen - Aurora

Needs background-color #1c112e

Comment 59

[Stephen Horlander [:shorlander]]

Attachment: Small Icon - Aurora

Comment 60

[Jim Mathies [:jimm]]

https://hg.mozilla.org/mozilla-central/rev/201b64ad48d8

If we want to make more changes, lets file follow ups.