: Metro Website Template Guidlines 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

@Samaraweera207

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

In case the link dies:


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.
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.
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.
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.
(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.

Vote Up Vote Down