MotoCMS Blog

Плоский дизайн и материальный дизайн – что между ними общего?

Иван Алексеев

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

Времена меняются быстро… В прошлом году Google представил свою концепцию материального дизайна и объяснил его принципы дизайнерам приложений. Сначала он появился в дизайне Google App Store. А позже и все службы Google стали выглядеть по последнему писку моды. В последнее время все больше и больше сайтов добавляют элементы материального дизайна в свои проекты. Но не кажется ли вам, что они выглядят так же, как и в плоском дизайне? Нет? Что ж, давайте устроим мини-батл между плоским и материальным дизайном.

Раунд первый: плоский дизайн против скевоморфизма

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

А затем появился плоский дизайн. Как раз в тот момент, когда люди начали уставать от чрезмерно декоративного и псевдореалистичного вида скевоморфизма. Количество негативных отзывов стало расти, и люди начали переходить к менее прихотливым, более легким и ориентированным на пользователей дизайнам.

Flat vs. Realism

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

Обычно Плоский дизайн ассоциируется с Metro стилем, впервые использованном в юзер-интерфейсе Windows 8. Он отбрасывает все те украшения, которые сделали скевоморфизм близким к реальности. Данный стиль принес в веб-дизайн простоту и свежесть, чего так не хватало дизайну Apple. Дизайнеры Apple тоже признали, что скевоморфизм устарел. Старший вице-президент по дизайну компании Apple Джони Айв отметил в одном из своих интервью: “Мы поняли, что люди уже привыкли к экрану, который можно использовать вместо кнопок, и они не нуждаются в подсказках, так как осознали преимущества [сенсорных экранов]».

Более того, пользователи быстро привыкают к новым элементам дизайна. Они не нуждаются в изображении трехмерной кнопки, чтобы понять, что это кнопка. Простой цветной прямоугольник с текстом «призыва к действию» понятен для них.

Postbox

Все эти годы плоский дизайн остается популярным благодаря его простоте и вечной элегантности, и для этого не нуждается в тяжелом оформлении и использовании 3D объектов. Данный дизайн отлично выглядит на экранах с низким и высоким разрешением, а также на дисплеях Retina. С ростом популярности мобильного интернета, плоский дизайн сохранил свои позиции благодаря малому весу сайтов, которые не замедляют скорость соединения и позволяют страницам молниеносно загружаться.

Next Match

Шаблон для бизнеса в плоском стиле

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

Раунд второй: плоский дизайн против материального

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

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

Шаблон для онлайн-казино с плоскими иконками

Факт остается фактом: длинные тени были первым шагом от обычного плоского дизайна до чего-то более материального. Они добавили чуточку объема простым элементам и сделали их выделяющимися на поверхности. Появились как сторонники, так и ненавистники этого элемента. Идея была настолько популярна, что длинные тени появились в дизайнах таких IT гигантов, как Google и Apple.

World Sports Food Fight

Наконец, в прошлом году Google пошли гораздо дальше, и продемонстрировали концепцию Материального дизайна. Основные принципы этой концепции были представлены общественности в специальном документе. Сразу после этой публикации на новый концепт обрушилось огромное количество критики. Многие утверждали, что Google просто взял плоский дизайн и добавил тени к его элементам. Другие обвинили Google в возврате к скевоморфизму. Казалось, никто не остался равнодушным к этому новшеству.

Keynote Animation Material Design

Главная инновация, которая отличает Материальный дизайн, это использование Z-оси. Подобная трехмерность добавляет объем плоскому объекту и делает его более “реальным”, таким, чтобы вы могли его почувствовать. Это как плоскость бумаги. Вы когда-нибудь пробовали делать оригами? Именно с ними можно сравнить Материальный дизайн. Многочисленные кусочки бумаги, которые складываются, сжимаются, получают новую форму и располагаются один за другим на экране.

DiskForYou

Google относится к этому принципу как к метафоре. Они рекомендуют увидеть и использовать Материальный дизайн, как реальный объект, но очень упрощенный, и при этом не относиться к нему, как к цифровому эквиваленту реального предмета. Данная идея тесно связана со вторым принципом Материального дизайна: “Иерархия, значение и фокус“.

Каждый элемент материального дизайна несет свою функцию. Благодаря принципам дизайна эти функции четко определяются. Вы можете с легкостью отличить кликабельные элементы от не кликабельных, а кнопки от декоративных приемов. Это часто упускалось или вообще не определялось в плоском дизайне, и наоборот, в скевоморфизме выделялось слишком навязчиво. Человеческий разум хорошо усвоил функционирование многих элементов дизайна в последние годы и не нуждается в гиперреалистических «намеках», чтобы понять, как работает объект.

Преимущества и недостатки двух стилей

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

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

Преимущества:

Do You Buy that Girl a Drink

Недостатки:

Материальный Дизайн – это новая тенденция, которая, кажется, вмещает в себе все особенности плоского дизайна. Однако, не все так просто.

Преимущества:

La Refactoria

Недостатки:

Несмотря на схожесть с плоским дизайном, материальный «играет в свою собственную игру», поэтому надеемся, что он будет продолжать развиваться. Критика только показывает слабые места и заставляет Google улучшать свою концепцию. Изначально он был основан на приложениях дизайнеров, а сейчас появляется и в дизайнах веб-сайтов. Это значит, что материальный дизайн, безусловно, является трендом, который, надеемся, будет популярен и в этом году. Но кто знает, как долго это продлится?