Metro style in web design is a website design based on interactive cards containing images, content, hyperlinks. The Metro style was first used by Microsoft in 2010 in the design of its product interfaces. The advantages of this style, according to the company’s developers, were its stylish and modern look, as well as functionality. The user was not distracted by extraneous elements, and all attention was focused on the indicator cards that provided the desired content. This design was considered intuitive and made the user’s work easier.
Today, card design can be found on well-known resources such as Twitter, Pinterest, Google, and others.
Features of Card Style
Metro style in design is very popular and is widely used to improve usability and ease of perception of large amounts of content. Card style has distinctive features:
- Adaptability. The design is displayed correctly on any device.
- Minimalism, absence of distracting elements. All attention is on the functional cards.
- Modern and aesthetic appearance, wide palette of colors used.
- Use of easy-to-read fonts (Segoe), clear thematic images.
- Accessibility, intuitive understanding of functionality for the user.
- Dynamics. Use of animation effects.
- Presence of drawn elements: icons, volumetric buttons, infographics that facilitate perception and stimulate target actions.
What Sites Is Metro Style Suitable For
Concise and modern card design is used on websites of various themes: portfolios, blogs, corporate websites, business card websites, online stores, and even landing pages. For example, the Microsoft website still looks in metro style (https://www.microsoft.com/uk-ua): the main page features large tabs with the company’s products and links to pages with detailed information about them. Between them are standard-looking cards with brief descriptions and hyperlinks to content. Animation effects are present – when the cursor is hovered over, images and buttons are highlighted, and links are underlined. There are no extraneous elements.
Rate the article:
