Лучшие статьи категории «Веб-сайты»

Подписка

Плоский дизайн. Примеры сайтов и интерфейсов

С выходом Windows 8 и Metro UI все больше дизайнеров и разработчиков интерфейсов стали создавать сайты в дизайне которых используются только плоские элементы. И если пол года назад такие сайты воспринимались как что-то необычное, особенно в сравнении с другими интернет ресурсами, то сегодня их можно увидеть гораздо чаще и такого восторга они уже не вызывают. Развитие этого направления привело к появлению нового стиля — плоский дизайн (на английском он называется flat-design). О нем мы подробно рассказываем в нашей постоянной рубрике «Плоский дизайн».

Главное отличие плоских сайтов — использование минималистического подхода, при котором из интерфейса и дизайна в целом, удаляются все 3D-элементы, градиенты, тени и другие украшательства. На передний план выходят простые, строгие и понятные формы, но не в ущерб дизайну. Больший акцент уделяется тексту, меньший — графике. Такой подход позволяет устранить лишние шумы на странице, которые могут отвлекать пользователей. Главную же роль в плоском дизайне играет цвет. Его используют без боязни, выбирая по пять, шесть или более основных цветов, без учета дополнительных (например, для показа таких состояний как hover, focus, active и других). Этот выбор сделан намеренно, чтобы сайт не казался скучным.

Ниже мы собрали более 20 примеров наиболее точно представляющих и характеризующих этот стиль.

Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов
Плоский дизайн, примеры сайтов и интерфейсов


Комментарии (7)

Igor / 30 Март 2013 в 12:36

Если честно, то не очень впечатляет. Обилие цветов сглаживает эффект минимализма на нет. Все таки стандатрный подход, когда в дизайне используется не более 3 основных цветов, выглядит в глазах намного приятнее. Но концепция плоского дизайна может для людей со временем измениться, повлияет та же 8-ка со своим метро.

Warior / 31 Март 2013 в 12:20

Как же мне нравится этот Metro UI и все сопутствующие стили. Гораздо красивее, чем все эти web 2.0 сайты.

Девушка / 2 Апрель 2013 в 12:43

Метро-стиль — яркий представитель красивых плоских дизайнов.

Вздоров / 3 Апрель 2013 в 15:55

Да, неплохие примеры. Microsoft диктует моду (:

Jeanne / 13 Апрель 2013 в 00:36

Мне очень такой дизайн нравится.

Designers / 17 Апрель 2013 в 22:54

Отличная статья.

Alexander Samokhin / 3 Июнь 2013 в 11:51

Отличная подборка, этот стиль сейчас очень популярен. Через годик другой, будет уже не так (:

Добавить новый комментарий

* — поля обязательные для заполнения XHTML: Вы также можете использовать эти тэги: <a href="" title=""> <pre lang=""> <blockquote> Перейти наверх

Поиск

Популярные статьи

Комментарии

  • Fotografas: Отличная фотография.
  • Тимофей: Хрень полная. А если у меня данных, ну штук 50-70, в...
  • Irmaseo: Время решает все.
  • Дмитрий: Есть еще один вариант – заказать у друга-дизайнер...
  • Sindor: Полезная статья, спасибо автору!
  • Ganesa: Клипарты очень и очень выручают, даже те сервисы, которые с...
  • Елена Калинина: Атомарный дизайн пригодится очень при...
  • Елена Калинина: Логотип того или иного города легко найти в...

Друзья

Нашли ошибку?

Если вы нашли грамматическую ошибку на сайте, выделите ее и нажмите сочетание клавиш Ctrl+Enter.

Система Orphus