Статьи

Эволюция революции плоского дизайна

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

Но с чем связана его столько длительная популярность? Что из себя представляет плоский дизайн, привлекающий дизайнеров и разработчиков? И как ему удалось занять доминирующие позиции за столь короткое время.

Привлекательность плоского дизайна

Преимущества плоского дизайна лежат прямо на поверхности. Посмотрите внимательно на плоский интерфейс, и вы начнете ценить то, что вы видите и есть то, что вы получаете.

Helbak

Например, как показано датским ритейлером кухонных принадлежностей Helbak (см. рисунок выше), плоский дизайн дает возможность пользователю увидеть то, что ему нужно — содержание. В данном случае можно использовать навигацию, чтобы посмотреть продукцию, а остальная часть интерфейса посвящена изображению продукции в высоком разрешении. Настроенная сетка из приглушенных цветов, интерфейс тщательно организован, но визуально интересен.

А вот 3 истинные причины процветания плоского дизайна сегодня:

  • Он простой и интуитивно понятный. Поскольку современные технологии (как программные, так и аппаратные) стремятся к более простым кривым обучения, простые интерфейсы для этого очень естественны. Как мы описали в Web Design for the Human Eye, устранение ненужного беспорядка и соблюдение основ позволяет пользователям сосредоточиться на своих задачах и опытах, которые сами становятся более активными.
  • Он идеально подходит для адаптивного дизайна. Поскольку плоский дизайн изначально минималистичен и основан на сетке, содержание легко смещается, если вы работаете на разных устройствах. Меньшее число элементов на экране соответствует меньшему числу данных для обработки, что ускоряет время загрузки для всех устройств.
  • Самоувековечивающаяся популярность. Мало кто признается в следовании за большинством, но когда все крупные игроки веб-дизайна делают что-то подобное, то более мелкие принимают сигнал и начинают делать то же самое. И когда эта волна достигнет пика, плоский дизайн, построенный на достаточно твердых принципах юзабилити, безусловно, переродится (в определенной степени) в любую новую философию дизайна.

Итак, это объясняет, почему плоский дизайн успешен, но как мы ответим на вопрос как?

Эволюция плоского дизайна

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

Введите «Почти плоский» или «Flat 2.0», как придумал дизайнер Райан Аллен.

Flat 2.0 по словам ее дизайнера-разработчика Райна Аллена, «это эволюция, не революция». «Там, где плоский дизайн был радикальным отходом от необузданного скевоморфизма прошедших дней, Flat 2.0 — игривая ветка от плоского дерева. Плоский дизайн — рождественская елка, Flat 2.0 — это украшения и конфеты. И подарки. Хотя и не без мишуры, но это то, что нужно чистить».

Изображение слева — iPhone iOS 6. Manesh Mohan. Creative Commons. Поворот и обрезка с оригинала. Изображение справа — Приложения iPhone 6. Microservios Geek Crew. Creative Commons. Поворот и обрезка с оригинала. 

Также вы можете увидеть эволюцию и в ряде других примеров.

Когда Apple применила плоский дизайн, начиная с iOS7, интерфейс выглядел не совсем так, как можно было этого ожидать. Так как перед релизом плоский дизайн и минимализм находились в стадии возрождения, многие говорили о том, что интерфейс будет плоскостным. Как можно видеть из приведенного выше сравнения, не смотря на отсутствие тяжелого скевоморфизма характерного для старой версии iOS, появившиеся в новой версии намеки на тени и другие элементы, не были восприняты как полностью плоские. Это и зародило идею «почти плоского» дизайна.

Так, большинство интерфейсов, создаваемых сегодня, относятся именно к такому стилю. Есть намеки на тени, цвета, не соответствующие правилам плоского дизайна и типографики — все эти элементы нарушают идеалы совершенно плоской конструкции. Эта эволюция — это то, почему плоский дизайн по-прежнему используется сообществом веб-дизайнеров: он хорошо развивается и имеет ряд различных шаблонов дизайна.

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

Фото: http://hlkagency.com/

 

Фото: http://agencysurvivalkit.com/

 

Фото: http://www.forestapp.cc/

Первая (HLK Agency) — четкая, модульная и чистая. На второй (Agency Survival Kit) видны небольшие затемнения и даже текстура, опоясывающая изображение. Третье изображение (сайт Forest App) включает полностью плоские элементы с некоторыми частичками реализма (особенно фоновая фотография).

По сравнению с повальным увлечением скевоморфизмом в 2010–2011 годах, Flat 2.0 имеет гораздо более сдержанный и эстетический дизайн. Философия дизайна включает достаточно минимализма, но при этом не боится наслоений на различные реалистичные эффекты, чтобы улучшить возможности интерфейса.

Безусловно, проблема скевоморфизма не лежала в самой философии дизайна, а в исполнении (на самом деле, мы считаем, что небольшие штрихи реальности улучшают юзабилити). Большинство сайтов в начале 2010-х пытались отражать реальный мир, как можно лучше, потому что это было популярно. Таким образом, плоский дизайн оказался сам виноват в занятом им положении (помните, насколько сильно пострадали сайты с сеткой в 2012 году?), но теперь он развивается в гораздо более зрелом виде.

Material Design: обратная сторона Flat 2.0?

Material Design — это, пожалуй, наиболее интересное воплощение Flat 2.0.

Все, что вам нужно сделать, это просто взглянуть на тщательно прописанные принципы проектирования.

Material Design от Google обладает 3 достоинствами с точки зрения дизайна:

  • Визуальные подсказки основаны на реальности
  • Основа теории дизайна преобладает в визуализации
  • Все движения должны иметь смысл

Эти идеи очень похожи на идеи, лежащие в основе Flat Design, но с двумя отличиями: больше внимания на движения/анимацию и слоев элементов дизайна. Поэтому в целом Material Design воспринимается, как очень похожий на Flat 2.0.

Фото: Google Material Design Principles

Довольно легко доказать то, что Material и Flat Design невероятно похожи или совершенно разные (корни проблемы лежат в спорах между Apple и Android).

Мы знаем, что оба концепта обладают схожими чертами: цвета, формы и общая структура. Некоторые различия заложены в основе самих понятий (особенно система слоев Material Design). Material Design четко задокументирован и сосредоточен, а Flat Design развивается, будучи ориентированным на себя. Безусловно, нет сомнений, что Flat Design влияет на Material Design, когда вы обдумываете детали, характерные для обоих методов: рельефные образы, четкие края, яркость впечатления.

Material Design, во всяком случае, занимает более практическую позицию, чем традиционный плоский дизайн. Благодаря возможности расслоения элементов вдоль оси Z, он сохраняет визуальную зрелость плоского дизайна, будучи достаточно скевоморфным, чтобы сообщать пользователю о доступности.

Flat Design возник как противоположная реакция против скевоморфизма. С другой стороны, Material Design возник как экосистема, состоящая из лучших частей плоского дизайна с добавлением физического измерения. Мы углубимся в разработку материалов в бесплатной электронной книге, Elegant Web UI Design Techniques: Flat Design and Color.

Заключение

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

Material Design, безусловно, является эволюцией плоского дизайна, но философия дизайна до сих пор в основном отражается через свойства Google и приложения Android. Если Flat Design вдохновил на появление Material Design, то особенно интересно будет посмотреть, как Material Design повлияет на будущие языки дизайна.