Что такое плоский дизайн, история, примеры и принципы.

Многие начинающие вебмастера и дизайнеры, задаются вопросом - что же такое плоский дизайн? В данной статье, мы постараемся дать максимально исчерпывающую информацию c примерами плоского дизайна.

Что такое плоский дизайн

Итак, плоский дизайн (flat design) - это дизайн интерфейсов программ, операционных систем и веб сайтов, выдержанный в общей концепции минимализма, где главенствующую роль занимает суть, а не форма.
Что такое плоский дизайн

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

Рассказывая о плоском дизайне веб сайтов и интерфейсов, нельзя не упомянуть о скевоморфизме в дизайне (skeuomorph), который в отличии от плоского дизайна изобилует избыточными элементами графики, не несущими сути, и призванными создать лишь иллюзию реальности объектов на плоскости экрана.

Простейший пример скевоморфизма в дизайне сайтов - это выпуклые кнопки, которые визуально имитируют реальные (выпуклость, тени, блеск, эффект нажатия и т.д.).

Сравните, как изображена кнопка добавления в корзину товара в стиле плоского дизайна и при скевоморфизме:
Плоский дизайн и скевоморфизм в дизайне кнопок

Как видно, в первом случае (плоский дизайн), кнопка выполнена без лишних эффектов и теней, а во втором случае кнопка перегружена не только выпуклостями и тенями, но еще и зеркальным отражением, от виртуальной плоской поверхности, на которой как будто стоит кнопка. Ярые приверженцы плоского дизайна, назвали бы второе решение “эпическим скевоморфизмом”.

История плоского дизайна

Люди старших поколений помнят, как на заре появления компьютеров, а позднее интернета и первых веб сайтов, в дизайне использовалась графика, имитирующая предметы реальной жизни. Такой подход в дизайне был необходим, для того, чтобы неискушенный пользователь смог быстрее понять куда “кликнуть”. Более молодые, уже выросли с компьютерами и интернетом, в то же время, интернет технологии стремительно ворвались в нашу обыденную жизнь. К настоящему времени, люди уже успели получить достаточно цифрового опыта, чтобы отказаться от лишних графических элементов утяжеляющих восприятие информации и отвлекающих внимание.

Уже в начале 2000 годов, начали предприниматься попытки облегчения графического оформления в угоду восприятия основному контента сайтов и интерфейсов.
В 2006 году компания Microsoft выпустила MP3 Плеер Zune, интерфейс которого содержал в себе элементы плоского дизайна. В операционных системах Microsoft также, была первой компанией применившей плоский дизайн, выпустив операционную систему Windows Phone 7 в 2010 году. Затем последовала Windows 8. На изображении ниже, вы можете увидеть плоский дизайн интерфейса Windows.
Плоский дизайн интерфейса windows 8

Конкуренты из Apple выпустили в 2013 году операционную систему iOS 7, в дизайне интерфейса которой также был виден отказ от скевоморфизма в пользу плоского дизайна. На изображении ниже, вы можете увидеть плоский дизайн интерфейса iOS 7 в сравнении c iOS 6.
Плоский дизайн иконок в iOS 7 в сравнении с скевоморфизмом в iOS 6

Плоский дизайн сайтов, стал активно набирать популярность лишь в 2013 году, от части, это можно связать с началом активного использования HTML 5 и CSS3. Плоский дизайн очень быстро полюбился не только в среде веб дизайнеров, но и среди разработчиков Landing page и конечно же среди специалистов по usability.
Пример сайта с плоским дизайном

Если же копнуть глубже, то истоки плоского дизайна можно найти в минимализме, баухаусе и швейцарском стиле (Международный типографический стиль).
Листовка выполненная в швейцарском стиле

Принципы плоского дизайна

  • Минимализм
  • Двухмерные элементы
  • Односложные фигуры с чёткими контурами
  • Типографика
  • Цветовые акценты

Плоский дизайн сайта

Прежде, чем говорить о плоском дизайне сайтов, стоит ответить на популярный вопрос: Минималистский дизайн сайта и плоский - в чем отличия?
Многие путают минималистичный дизайн сайта и плоский дизайн сайта, при внешней схожести, отличия кроются в деталях. Вернемся к примеру с кнопками или иконками.
Сравнение минимализма и плоского дизайна иконки
Казалось бы, почти одинаково, но отсутствие “тенюшечек” и наличие четких контуров - отличает иконку, выполненную в плоском дизайне.

Ниже, вы можете увидеть плоский дизайн сайта, а именно примеры:
Плоский дизайн сайта пример
Как видно, в первом экране сайта, с точки зрения графики все минималистично, нет ничего лишнего и соответствует принципам плоского дизайна, несмотря на “объемный” и реалистичный элемент в виде фото - телефона. Конечно, можно было преобразовать фото в плоский графический элемент, но в данном случае, с точки зрения восприятия и акцентов все сделано правильно. Есть текст с левой стороны, и есть иллюстрация с правой. С точки зрения юзабилити, в случае “продажи” данной услуги, фото можно было легко заменить на плоский элемент, т.к. изображение телефона является не первостепенной идеей, а скорее средством представления.

Для примера других сайтов с плоским дизайном, посмотрим на первый экран интернет магазина:
Плоский дизайн интернет магазина пример
В данном примере плоский дизайн интернет магазина включает в себя все пространство, за исключением фото товара. В данном случае, заменить фото товара на плоские элементы не представляется возможным, т.к. фото являются основным продуктом.

Вот, пожалуй, и все, что можно было рассказать интересного о плоском дизайне. Наше мнение относительно плоского дизайна и так называемого смешанного - плоский дизайн на долгие годы закрепиться в качестве одного из главных направлений веб-дизайна.

ДИЗАЙН:

© 2010-2016 Gege.su | Карта сайта | Канал RSS | XML Карта сайта
Студия Веб-дизайна gege.su
Внимание! Все материалы сайта являются объектами авторского права.
Запрещается копирование, распространение или любое иное использование информации и объектов сайта без указания активной ссылки на http://gege.su/