Last Comment Bug 735008 - Work - Windows 8 tile and splashscreen resources
: Work - Windows 8 tile and splashscreen resources
Status: RESOLVED FIXED
feature=work
:
Product: Firefox for Metro
Classification: Client Software
Component: General (show other bugs)
: Trunk
: x86_64 Windows 8.1
: -- normal with 4 votes (vote)
: ---
Assigned To: Stephen Horlander [:shorlander]
:
Mentors:
http://msdn.microsoft.com/library/win...
Depends on:
Blocks: 686839 831889 Backlog-MetroDesign
  Show dependency treegraph
 
Reported: 2012-03-12 13:16 PDT by Brian R. Bondy [:bbondy]
Modified: 2014-07-24 11:06 PDT (History)
19 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
Screenshot, we are currently the top left tile in this screenshot (152.60 KB, image/png)
2012-03-12 13:16 PDT, Brian R. Bondy [:bbondy]
no flags Details
Example splashscreen that IE uses (3.75 KB, image/png)
2012-03-12 13:16 PDT, Brian R. Bondy [:bbondy]
no flags Details
Example tile that IE uses (1.13 KB, image/png)
2012-03-12 13:16 PDT, Brian R. Bondy [:bbondy]
no flags Details
Screenshot, smaller tiles when zoomed out (103.99 KB, image/png)
2012-03-12 15:03 PDT, Brian R. Bondy [:bbondy]
no flags Details
Example SMALL tile that IE uses (421 bytes, image/png)
2012-03-12 15:04 PDT, Brian R. Bondy [:bbondy]
no flags Details
Regular Tile Icon 150x150 (47.06 KB, image/png)
2012-03-14 08:13 PDT, Stephen Horlander [:shorlander]
no flags Details
Store Icon 50x50 (2.74 KB, image/png)
2012-03-14 08:16 PDT, Stephen Horlander [:shorlander]
no flags Details
Small Icon 30x30 (2.55 KB, image/png)
2012-03-14 08:17 PDT, Stephen Horlander [:shorlander]
no flags Details
Splash Screen (69.31 KB, image/png)
2012-03-14 08:17 PDT, Stephen Horlander [:shorlander]
no flags Details
current images (345.35 KB, image/png)
2012-03-22 17:14 PDT, Jim Mathies [:jimm]
no flags Details
current tile (324.87 KB, image/png)
2012-03-26 10:10 PDT, Jim Mathies [:jimm]
no flags Details
Modded Screenshot (220.89 KB, image/png)
2012-04-11 09:10 PDT, Avi Kohn
no flags Details
Better icon (there IS a difference) (220.67 KB, image/png)
2012-04-11 11:13 PDT, Avi Kohn
no flags Details
nightly tile (156.80 KB, image/png)
2012-08-03 04:39 PDT, Jim Mathies [:jimm]
no flags Details
Preview Tile Icon 150x150 (26.22 KB, image/png)
2012-10-01 10:52 PDT, Stephen Horlander [:shorlander]
no flags Details
Tile Icon - Official (19.51 KB, image/png)
2013-02-21 09:04 PST, Stephen Horlander [:shorlander]
no flags Details
Splash Screen - Official (66.95 KB, image/png)
2013-02-21 09:05 PST, Stephen Horlander [:shorlander]
no flags Details
Tile Icon - Nightly (28.95 KB, image/png)
2013-02-21 09:05 PST, Stephen Horlander [:shorlander]
no flags Details
Splash Screen - Nightly (75.37 KB, image/png)
2013-02-21 09:06 PST, Stephen Horlander [:shorlander]
no flags Details
Small Icon - Nightly (2.54 KB, image/png)
2013-02-21 09:08 PST, Stephen Horlander [:shorlander]
no flags Details
Tile Icon - Aurora (30.60 KB, image/png)
2013-02-21 09:08 PST, Stephen Horlander [:shorlander]
no flags Details
Splash Screen - Aurora (74.39 KB, image/png)
2013-02-21 09:09 PST, Stephen Horlander [:shorlander]
no flags Details
Small Icon - Aurora (2.52 KB, image/png)
2013-02-21 09:10 PST, Stephen Horlander [:shorlander]
no flags Details

Description Brian R. Bondy [:bbondy] 2012-03-12 13:16:05 PDT
Created attachment 605074 [details]
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] 2012-03-12 13:16:32 PDT
Created attachment 605075 [details]
Example splashscreen that IE uses
Comment 2 Brian R. Bondy [:bbondy] 2012-03-12 13:16:57 PDT
Created attachment 605076 [details]
Example tile that IE uses
Comment 3 Brian R. Bondy [:bbondy] 2012-03-12 15:03:42 PDT
Created attachment 605147 [details]
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] 2012-03-12 15:04:18 PDT
Created attachment 605148 [details]
Example SMALL tile that IE uses
Comment 5 Brian R. Bondy [:bbondy] 2012-03-12 15:07:00 PDT
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] 2012-03-12 16:00:20 PDT
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] 2012-03-14 07:33:23 PDT
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] 2012-03-14 08:13:36 PDT
Created attachment 605756 [details]
Regular Tile Icon 150x150
Comment 9 Stephen Horlander [:shorlander] 2012-03-14 08:16:59 PDT
Created attachment 605759 [details]
Store Icon 50x50
Comment 10 Stephen Horlander [:shorlander] 2012-03-14 08:17:20 PDT
Created attachment 605760 [details]
Small Icon 30x30
Comment 11 Stephen Horlander [:shorlander] 2012-03-14 08:17:40 PDT
Created attachment 605761 [details]
Splash Screen
Comment 12 u88484 2012-03-14 08:26:39 PDT
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] 2012-03-14 08:34:55 PDT
(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] 2012-03-16 09:30:38 PDT
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] 2012-03-17 06:54:04 PDT
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] 2012-03-17 06:55:07 PDT
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 2012-03-17 07:12:05 PDT
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] 2012-03-17 07:30:02 PDT
(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] 2012-03-17 07:37:20 PDT
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] 2012-03-17 07:47:33 PDT
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 2012-03-17 07:49:26 PDT
The image cannot be localised but the text can
Comment 22 Dão Gottwald [:dao] 2012-03-17 07:52:01 PDT
(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 2012-03-17 07:55:49 PDT
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] 2012-03-17 07:58:30 PDT
I don't understand your reasoning.
Comment 25 Martin Anderson 2012-03-17 08:01:54 PDT
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] 2012-03-17 08:16:03 PDT
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 2012-03-17 08:22:54 PDT
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] 2012-03-17 08:25:15 PDT
(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 2012-03-17 08:35:02 PDT
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] 2012-03-17 08:45:17 PDT
(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] 2012-03-17 08:51:50 PDT
(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 2012-03-20 14:02:59 PDT
(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] 2012-03-21 18:12:15 PDT
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] 2012-03-22 17:14:57 PDT
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.
Comment 35 Martin Anderson 2012-03-22 17:55:54 PDT
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] 2012-03-22 18:44:52 PDT
(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] 2012-03-26 09:29:28 PDT
(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] 2012-03-26 10:03:52 PDT
(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] 2012-03-26 10:10:32 PDT
Created attachment 609361 [details]
current tile
Comment 40 Henri Sivonen (:hsivonen) (Not reading bugmail or doing reviews until 2016-09-26) 2012-04-03 02:37:19 PDT
(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 2012-04-03 15:27:48 PDT
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 2012-04-11 09:10:55 PDT
Created attachment 614025 [details]
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 2012-04-11 09:27:49 PDT
Does anyone know if/where there is a PSD of the Firefox logo (layered)?
Comment 44 Avi Kohn 2012-04-11 11:13:39 PDT
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.
Comment 45 bogas04 2012-04-20 08:03:26 PDT
(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] 2012-08-03 04:39:18 PDT
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?
Comment 47 Stephen Horlander [:shorlander] 2012-08-09 13:53:28 PDT
(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] 2012-09-08 12:43:51 PDT
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] 2012-09-08 12:46:19 PDT
(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] 2012-09-29 06:33:26 PDT
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] 2012-10-01 10:52:50 PDT
Created attachment 666614 [details]
Preview Tile Icon 150x150

Metro Fox on a blueprint background to indicate the previewishness of the preview.
Comment 52 Stephen Horlander [:shorlander] 2013-02-21 09:04:48 PST
Created attachment 716594 [details]
Tile Icon - Official
Comment 53 Stephen Horlander [:shorlander] 2013-02-21 09:05:24 PST
Created attachment 716595 [details]
Splash Screen - Official
Comment 54 Stephen Horlander [:shorlander] 2013-02-21 09:05:58 PST
Created attachment 716596 [details]
Tile Icon - Nightly
Comment 55 Stephen Horlander [:shorlander] 2013-02-21 09:06:57 PST
Created attachment 716597 [details]
Splash Screen - Nightly

Needs background-color #001226
Comment 56 Stephen Horlander [:shorlander] 2013-02-21 09:08:07 PST
Created attachment 716601 [details]
Small Icon - Nightly
Comment 57 Stephen Horlander [:shorlander] 2013-02-21 09:08:42 PST
Created attachment 716603 [details]
Tile Icon - Aurora
Comment 58 Stephen Horlander [:shorlander] 2013-02-21 09:09:38 PST
Created attachment 716605 [details]
Splash Screen - Aurora

Needs background-color #1c112e
Comment 59 Stephen Horlander [:shorlander] 2013-02-21 09:10:03 PST
Created attachment 716608 [details]
Small Icon - Aurora
Comment 60 Jim Mathies [:jimm] 2013-02-21 10:48:16 PST
https://hg.mozilla.org/mozilla-central/rev/201b64ad48d8

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

Note You need to log in before you can comment on or make changes to this bug.