Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 0 down vote favorite

What are some of the rules and guidelines needed to design a Windows 8 "Metro" style website template?

I notice using blocks is one of these guidelines. I'm also noting something about the colors, but not being a designer myself, I'm not sure what the guidelines for the color scheme usage is.

As per the layout of the content, is there something that is particularly important?

In all, I think the whole Metro approach looks really nice, and I'm hoping to mimic that style in a website template.

share|improve this question

1 Answer

up vote 2 down vote accepted

You will probably find this article quite useful: 5 Things you ought to know when designing metro screens.

In case the link dies:

  1. Color choice is critical: The thing that stands out about most "metro" inspired designs is they pretty much settle on around 2-3 primary colors of choice. They also then rely heavily on either black or white (maybe a shade of gray) for their canvas as well.

  2. Typography consistency is good: FontSizes are not the only issue, UpperCase, Camel Case, Lowercase etc. are all equally important. Do try to keep these consistent to their relative function, in that navigation kept lowercase but headings etc. all uppercase.

  3. Text Chrome vs. Text Content: Balance it out. Would one put heading labels etc. as being the "Chrome" text category? Striking a balance here of too much text is important and again color choice can help you out here.

  4. Element minimization: The metro way of life really does not allow too much in the way of gradients or watermark elements – most of the designs I have seen in this space are clean / white.

  5. (I love this one) Fantasy User Interfaces in movies are your best friend: The main source however for inspiration, is to watch movies that have kickass user interfaces in them and then pick them apart frame by frame.

--

Although I just found this Smashing article that summarizes it quite well. Another interesting resource: Design assets for Windows Store apps (official).

And here are some metro-style websites for inspiration and a Metro UI Template.

The next ones are for mobile, but they might be of help: You can check the User Experience Design Guidelines for Windows Phone, and/or the Windows Phone UI and Design Language. Jeff Wilcox wrote an interesting Metro Design Guide for Developers too.

share|improve this answer
Wow, nice finds. Thanks a lot! Could you expand on Text Chrome vs text Content a bit more? – dab Oct 30 '12 at 22:52
Edited the answer with more info from the article. It's text categories, but not having tried metro too much myself I'm not sure about the specifics. I'll see if I can find some info on that. – Yisela♦ Oct 30 '12 at 23:08
Thanks! Your rock! Do you have any suggestions for fonts to use on a Metro inspired website template? I'll of course provide my own if I find any, but thanks for your time! – dab Oct 30 '12 at 23:15
No idea, but you can find lots of free ones ready to use as font-face in www.fontsquirrel.com – Yisela♦ Oct 31 '12 at 0:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.