Метро стиль у веб-дизайні – це дизайн сайту на основі інтерактивних карток, які містять зображення, контент, гіперпосилання. Вперше стиль Metro використала Microsoft у 2010 році у дизайні інтерфейсу своїх продуктів. Перевагами цього стилю, на думку розробників компанії, були стильний і сучасний вигляд, а також функціональність. Користувач не відволікався на сторонні елементи, вся його увага була зосереджена на картках-вказівниках, які надають йому потрібний контент. Такий дизайн вважався інтуїтивно зрозумілим та спрощував роботу користувача.
Сьогодні картковий дизайн можна зустріти на таких відомих ресурсах, як Twitter, Pinterest, Google та інших.
Особливості карткового стилю
Метро стиль у дизайні дуже популярний, його широко використовують для покращення юзабіліті та полегшення сприйняття великої кількості контенту. Картковий стиль має характерні особливості:
- Адаптивність. Дизайн коректно відображається на будь-яких пристроях.
- Мінімалістичність, відсутність відволікаючих елементів. Вся увага – функціональним карткам.
- Сучасний і естетичний зовнішній вигляд, широка палітра використовуваних кольорів.
- Застосування легкочитних шрифтів (Segoe), чітких тематичних зображень.
- Доступність, інтуїтивне розуміння функціоналу для користувача.
- Динамічність. Використання анімаційних ефектів.
- Присутність намальованих елементів: іконок, об’ємних кнопок, інфографіки, які полегшують сприйняття і стимулюють до цільових дій.
Для яких сайтів підходить Metro стиль у дизайні
Лаконічний і сучасний картковий дизайн використовується на сайтах різної тематики: портфоліо, блоги, корпоративні сайти, сайти-візитки, інтернет-магазини, і навіть лендинг пейдж. Наприклад, сайт Microsoft досі виглядає саме у стилі метро (https://www.microsoft.com/uk-ua): на головній сторінці розташовані великі таби з продуктами компанії та посиланням на сторінки з детальною інформацією про них. Між ними розташовані картки стандартного вигляду з коротким описом та гіперпосиланнями на контент. Присутні ефекти анімації – при наведенні курсора підсвічуються зображення, кнопки, підкреслюються посилання. Відсутні сторонні елементи.
Оцініть статтю:
