Tuesday, 10 December 2013

Metro UI Tiles

I was asked to design a mock-up of a 'Metro' style interface similar to the Windows 8 start screen. Having barely used Windows 8 all I could remember was that it was very flat looking. I use Windows 7 and Linux generally so I had to go searching for various things like colors, sizes, and fonts used.

Now completed I thought I'd put those findings all in one place just to make it easier should anyone go looking for the same information or should I need to refer to it at a later time.

Tile Colors

I only needed to worry about the actual tiles utilized by the Metro UI. And these were found over at Creepy Ed's website:

Color Name Dark Color (Hex) Light Color (Hex)
Teal 008299 00A0B1
Blue 2672EC 2E8DEF
Purple 8C0095 A700AE
Dark Purple 5133AB 643EBF
Red AC193D BF1E4B
Orange D24726 DC572E
Green 008A00 00A600
Sky Blue 094AB2 0A5BC4
Light Blue 0CA6DC 0ABCE2

I added the Light Blue color codes myself. I got the values by color-picking from a Windows 8 screenshot.

Tile Sizes

I got the Metro UI tile sizes from the Microsoft Developer Network:

Scale Wide (Pixels) Medium (Pixels)
80% 248 x 120 120 x 120
100% 310 x 150 150 x 150
140% 434 x 210 210 x 210
180% 558 x 270 270 x 270


The information for the fonts used in the Metro UI also came from the Microsoft Developer Network:

Font Use
Segoe UI UI elements such as buttons and date pickers
Calibri Text that the user both reads and writes such as email and chat
Cambria Larger blocks of text such as for a magazine or RSS reader

The only one I actually needed to use was the Segoe UI font. If you don't have any of the Microsoft products that the Segoe UI font comes with there is a free alternative font called Homizio which was created by Álvaro Thomáz and can be downloaded at DaFont.

An example of the tiles.
The gradients I created for Photoshop can be downloaded via SendSpace.

Thanks to Creepy Ed and Microsoft for making the information available. Visit their pages for more details on colors, sizes, and fonts.

No comments:

Post a Comment

Thank you for your comment. Please note that all comments are not moderated and as such are not the responsibility of this blog; or its author.