Metro

From the point of view of a compositional solution in the Metro style, the traditional two- or three-part structure is replaced by the so-called modular grid, in which various modules-blocks are placed, at first glance, in a chaotic order. At the same time, following the principles of usability, the main navigation blocks and the company logo are placed at the top of the page so that the visitor can easily find the information he needs.

The choice of colors in the Metro style palette is amazing and this is its main difference from the minimalist style, which uses the principle of three colors and monochrome gamma. Bright, rich colors and shades, a combination of contrasting colors, the widespread use of various textures – all this makes this style very attractive. On the other hand, unlike Metro-style skeuomorphism, very complex and realistic structures are not used, since pages should load quickly even with poor connection quality.

Particular attention is paid to the style of Metro animation, because it involves a fairly abundant use of it. For example, buttons or active elements can respond to clicks, and switching from one page to another or viewing photos can be done with an animated effect. Nevertheless, do not forget that the animation should be “meaningful.” In other words, excessive flickering and distraction of the visitor’s attention from the necessary information should be avoided. From the point of view of graphics in the style of Metro, one should abandon excessive copying of various objects and effects of the real world and, if possible, replace them with infographic ones. For example, the navigation menu is built on static schematic images that are intuitive to visitors.

In the matter of typography in the Metro style, everything is quite simple, since a whole family of Segoe fonts was developed for this style. The main difference between these fonts is that they remain readable even with small sizes, which means that the text placed on the page can be read even from a mobile device. And at the same time, the fonts of the Segoe family are visually beautiful: they are rounded and devoid of serifs. By the way, these fonts are available in various weights, as well as in italics, which allows you not to search for individual fonts for headings and text content.

Since sites made in the Metro style look great on various devices, it is extremely attractive for representatives of various fields: from private business card pages and personal blogs to corporate websites of large companies and online stores. Due to its simplicity and conciseness, and, at the same time, the widespread use of animation, sites made in this style look relevant and fresh. By the way, the use of various animation effects makes the Metro style unusually attractive also for the design of various landing pages with promotional offers, as well as display windows or galleries.