Metro UI & web design guidelines for Metro UI interface

Metro UI & web design guidelines for Metro UI interface

This post will guide you how to design an interface with Metro style UI.

1. The Metro UI is what?

Metro UI is an interface type based on the arrangement of fonts and square arrays developed by Microsoft. It began to be used to design for Windows Phone 7 and now Windows 8.

Indeed Metro UI design is inspired from the tables of the subway station (hence the name Metro).The tables have contrasting colors, big clear font and visual symbols. Actually we have ever seen it before in Windows Media Center, you can use any player, the Zune is also known Metro UI interface of Zune.

Metro UI Microsoft very seriously, it is not a style but a new design philosophy: simple, modern, pure technology. It's completely antithetical to Apple's style: refined, polished, classy.

Do you want to learn more about the history of Metro Ui can read the article Why Metro style interface becomes important to Microsoft?

2. Principle of Metro UI design

Metro UI interface design without disturbing eye images that only the actual information flow optimization is presented. The information provided on large tables with small buttons and effects move smoother. Microsoft has described the design philosophy Metro style UI with a simple table like this.

1. Simple and modern: the first principle of the Metro UI is simple and modern, eliminating all superfluous elements not convey information. These things are removed, including the beautiful graphics, borders, shadows or 3D effects ...

2. Moves and Smooth: The motion should not so fast that there should be smoother and depth to help users feel it vividly. Moving the same pace with the movement of life.

3. Typography Inspired design based on the placement of an artistic font. Use a calligraphy font size and different densities like those icons. Characteristics of this type of design to ensure it has recently secured the art convey information effectively.

4. Focusing on content: It is the result of first principles and tenets 3rd. Removing the intermediate steps and what not to bring practical value. Help for users to communicate directly with content.

5. Purely technical: An interface is generated from the simple charts pixels. Without complicated patterns picky, no shadows and no attempt to simulate life. It gives a very good definition technology.

3. Designed web pages inspired Metro UI interface.

You should consult the site before embarking on the design of their own website.

(This page on the Blogger)

4. Attention points when designing your blog Metro style UI

1. Notice to font. Though not mandatory, but you should use the Segoe UI font (the font of this blog). This font is very nice, modern and slim ... that's the beauty of digital is that Microsoft tries to emphasize.

2. Attention to colors. To get playful tone colors and beautiful as the brother of the windows8 should copy its color code. If you are knowledgeable about dithering and dithering principle, there is nothing to say, if you do not use the palette screen capture of window8 and refines the tone that I like.

3. Attention to important factors and not important. The key component highlights need to put in the big hub striking colors, large fonts and vice versa.

4.: Less is more., Simple design and minimalist, making a few key statistics and should set the widget's really important for the reader needs to have. Removing the animated gif file, the colorful images heterogeneity.

5. Attention to the space: The space between the plates and blocks important pieces than we think it makes a lot of aspects of the site. You put it note pads aligned arrays, or otherwise be subjected to a control order can be. Do not place objects monotonous regularity or too close together, making the reader breathless.

7. Icons. If they look closely you will see the image icon in the Metro interface is different, the symbol of social network services, the left and right arrow buttons up and down. (See the Resources section to download Metro-style icon set for use Ui)

8. Attention to these effects. Effects Using a smart way to create smoother in motion. Do not use the shadow technique, 3d, Border or other complex effects for decoration. To finally create pure beauty of modern digital technology

5. Resources

1. Ministry Metro UI style icon

This is a very beautiful icon set includes 3 sets each have more than 400 Metro UI style icon. It includes icons for office applications, social network services, equipment, web browser ... This is the indispensable icon if you want cahs web design Metro style UI. (Click on image for download link)

2. Flash icon and font

Icon collection and dozens of font (or free of charge) in accordance with the interface Metro UI style.You should download to use it very useful for the design process.

3. Slide and fade effect smoother.

3 jquery tips are very basic and simple, you should not have too much knowledge of application code to it if you know how to coordinate this procedure will create lightness feeling smooth and professional blog.