The new Metro style interface is a key feature of Windows Phone 7 mobile OS. But no the only one: it is already clear that this user interface arrangement will be used by Microsoft in all products, including the flagship Windows 8. So, the Metro interface will anyways exist for a long time, and it is worth getting acquainted with it more closely.

In this article, we will focus on the objective characteristics of the interface: principles of its work, construction, structure, and basic elements.

It’s not surprising that.NET for Metro style apps is much smaller than the full.NET Framework, and similar in size to the profile for Windows Phone.NET for Metro style apps is even smaller than the Windows Phone profile, because we removed functionality such as the UI stack and sensors, which is exposed by the Windows Runtime. Since the release of the latest windows that brings the principles of simple and modern UI design, the number of metro template for website is getting a.

What is Metro, what it is used for, etc.

Metro is a new “design language” of Microsoft. A new concept aimed at changing the logic of construction and work of the operating system and applications, as well as the scheme of interaction between the user and the electronic device.

The basic principles of construction and appearance were largely borrowed from the information systems of transport nodes. The inscriptions and graphical elements in these systems are subject to quite specific requirements: very high readability and visual perceptibility of information, absence of unnecessary distractions, clean and clear view of all external elements.

Ideally, a person must quickly and clearly percept all the information provided on them, and get clear and unambiguous indications of the necessary actions. But not only that: the appearance should be pleasant, neat and leave a good impression to the user.

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

For over a year, representatives of Microsoft have been actively telling about the concept and particularities of the new interface. Judging by the fact that the sets of slides and the texts of presentations of a variety of specialists are very similar, the information has been carefully prepared and verified by the PR departments. On the one hand, in the modern world, it is quite natural. On the other hand, the listeners lose vital connection and emotional contact with the authors, with the designers. They see a copy, but not the original. People try to struggle against it with live speeches of the authors.

So, the Metro style. Microsoft calls it “our new design language”.

For the Metro style, proprietary principles have been developed, used by Microsoft to create its own operating system and applications. The company recommends the designers of third-party applications to use the same principles.

The main principle of the system is its focus on the content of the user. After all, when working with an electronic device, the user wants either to access his data, or solve some of his tasks quickly, conveniently and being minimally distracted by other things. Bg and soulja slim album. Therefore, the role of the interface is to quickly and conveniently guide the user there, where he will be able do what he wants. The interface loses its own value of the “face” of the device, turning just into a pointer to the path to the function requested by the user. Following this logic, Microsoft calls to “clean out” the interface: remove all background and decorative elements, which only distract the user, leaving only the most important things. This should make it easier for the user to navigate and percept the information.

Of course, the interface should have a pleasant appearance and leave a good impression. However, its beauty cannot be to the detriment of simplicity, speed, and information capacity. Therefore, not so many visual tools for work are left to the designers. However, Microsoft believes that the available means make it possible to achieve the desired results. First, we must pay particular attention to fonts and font attributes. Size, style and location of the inscription itself can tell about many things. Sometimes, the visual impression from an inscription can be even stronger than the informational component – and this should be used.

For Windows Phone 7, Microsoft has designed a special Segoe family font.

With Startup you can build a website online using the Bootstrap builder with ready-made designed and coded templates and themes.

During the development of the font, a special attention has been paid to its readability. As a result, the user can recognize the inscription, even at a glance, there is no need to grasp the meaning of the letters. In addition, the font remains legible even at very small inscriptions. Finally, and this is especially emphasized by Microsoft, the font is just visually beautiful.

Another important priority: the interface needs to be dynamic and focused on movement. It is quite difficult to be explained in words, but the idea is that the construction itself and the appearance of the interface should encourage the user to move forward, show him that, further, there are even more possibilities and additional information. As an example, a well-known (and having caused a lot of disputes at the time) feature of the interface, when a piece of the title of the next screen appears on the right side of the screen.

In the concept of Metro, a very important role is assigned to the animation of the interface. It should “distract and entertain the user”. A beautifully animated interface with interesting transitions and effects itself forms a very good experience from working with it. Animation makes the interface vivid. Microsoft strongly encourages to reinforce this impression. For example, the active elements and buttons should respond when pressed: they should oscillate or be pressed down. The transition from one screen to another must be carried out with an animated effect (by the way, software designers, even those working with major software, often ignore it).

The system provides many different, sometimes very interesting kinds of animation. For example, in the e-mail client, when the transition from the “Inbox” folder to a specific message is made, the name of the sender and the subject of the message do not disappear from the screen, they seem to “fly” on the new screen. When you click on the “Send” button, the message is reduced and flies over the top limit of the screen. By the way, the animation is implemented with system means, that is, before, the developers had to invent and create all the effects manually, but now it is enough to tell the system what type of animation you would like to see. This makes the developers’ life several times easier, even though it makes custom working scenarios almost impossible.

Animation has other tasks as well. Animated transitions mask the time the system needs to process user commands. Ideally, if a well-designed animation is provided, the user won’t notice at all that the application is “thinking”. Thanks to a beautiful animation, he won’t notice at all that the transition from one page to another takes some time.

Microsoft advises against copying of objects and effects of the real world in virtual interfaces, but instead recommends a more active use of opportunities granted by the virtual space. Therefore, the transition to iconographics and infographics is promoted for the Metro interface. Today’s menus are almost always built on icons, that is, static images, which allow not only finding, but also running an application. Of course, a “notification” can be stuck on the icon, but you won’t judge a refrigerator by the magnets. In general, an icon is a kind of application ID, but it is static. Therefore, developers are committed to create the most attractive icon for an application, typically button-styled (three-dimensional simulation, etc.) The visual component is essential for them.

The approach of infographics is that an element of the menu should not only ensure the start of the application, but also provide the necessary information related to this application itself: current status, new notifications, other information. Thus, for the user, the main menu is not only a launcher, but a complete information board, where he can snatch new system events at a glance, and respond quickly.

In this brief description of the ideology of the Metro interface, we’ve used the advice of Microsoft, having dropped all secondary elements, and having focused on the essentials.

The Metro UI concept is patented

On August 18, 2011, USPTO agency approved the patent under an application made by Microsoft, which sounds rather abstract: “Visual motion for user interface feedback”. An excerpt from the document, which is an abstract description of the interface, points directly at the peculiarities of MetroUI.

“An aspect of the user interface, which provides visual feedback in response to the input of data made by the user. For instance, the edges of the screen can be used to create effects of visual hints for the user, indicating that he has reached the end of the scroll list, for example. Another example of such feedback is that some parallel interface elements can be moved separately and with different speed in response to user actions. Another example is the simulation of inertia during the movement of elements of the user interface, used to provide a more natural look for touch input. Various combinations of these features have been described.”

The confirmation of the patent is very important and pleasant to Microsoft. Indeed, in the near future, interfaces of all major products of this company will be in some way based on this concept. Those are Windows Phone, Xbox and Windows 8. In addition, it provides additional protection against the elements of MetroUI being used by the competitors. For example, Google has already many times copied various elements of MetroUI.

Examples of Metro UI Style in Web Design

We’ve gathered a few sites having a Metro Style design for your inspiration. For most of them, metro features can be identified in the grid of tiles, but we look at the sites of inspiration at other important aspects, such as type, choice of images and iconography.

Windows UI Concept

Metro Dashboard

Windows 8 Day Mode

Windows 8 Night Mode

Zepppelin

Metro Dribbble

Metro web

Metro Style Form

Experiment with Metro UI

Portfolio

Windows Phone UK

WinRumors

The Verge

Conclusion

In my opinion, Microsoft has created a very interesting design. We can argue about the many pros, and about not less numerous cons, but it at least has an interesting concept. And most importantly, Microsoft operating system has its own face, which marks it out on the market.

It should also be borne in mind that the system is very young and actively growing. Vba serial communications. So, now, it is not worth discussing small details of the interface, they may be well modified in the future.