00 : 00 : 00

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

Иван Алексеев 8 Декабря, 2015
2,939
0

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

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

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

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

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

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

Flat vs. Realism

Материальный дизайн - flat vs realism

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

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

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

Postbox

Материальный дизайн - postbox

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

Next Match

Материальный дизайн - nextmatch

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

Материальный дизайн - 53625

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

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

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

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

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

Материальный дизайн - 52789

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

World Sports Food Fight

Материальный дизайн - sports food fight

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

Keynote Animation Material Design

Материальный дизайн - dribble

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

DiskForYou

Материальный дизайн - diskforyou

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

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

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

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

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

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

  • Минимализм визуальной составляющей дизайна;
  • Сосредоточенность на юзабилити, а не на эстетической составляющей;
  • Более простой дизайн приводит к более высокой скорости загрузки и увеличивает пропускную способность;
  • Пользователи фокусируются на содержании, а не на визуальных преимуществах;
  • Хорошая адаптированность под мобильные устройства.

Do You Buy that Girl a Drink

Материальный дизайн - doyoubuythatgirladrink

Недостатки:

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

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

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

  • Как и плоский, материальный дизайн обеспечивает оформлению элегантный и минималистический внешний вид;
  • Применение Z-оси делает объекты более реалистичными, без перехода в сквеоморфизм;
  • Подробные указания от Google не оставляют места для гадания и помогают в создании материальных дизайнов новичкам и даже профессиональным дизайнерам;
  • Это действительно удобный в использовании стиль, который четко определяет функции любого важного элемента с помощью фишек дизайна;
  • Отличное решение для адаптивных сайтов, так как дизайн совместим со всеми девайсами и мобильными устройствами;
  • Один из главных принципов материального дизайна – движение. Движения и незначительные анимации используются не для оформления, а для улучшения взаимодействия с пользователем.

La Refactoria

Материальный дизайн - larefactoria

Недостатки:

  • Тесно связан с брендом Google. Если вы хотите применить принципы материального дизайна к вашему веб-сайту, все непреднамеренно будут ассоциировать ваш дизайн с Google. Таким образом, создание уникального дизайна становится реальной проблемой;
  • Не каждая система позволяет полностью реализовывать принципы материального дизайна. Следовательно, это сужает выбор софта;
  • Анимация доступна для использования, но замедляет скорость веб-сайта. Но если вы не осуществляете ее – какой же это материальный дизайн;
  • Создание данного дизайна занимает немного больше времени, чем плоского. Хотя, так или иначе, любой проект занимает много времени.

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

Автор: Иван Алексеев
В компании MotoCMS Иван работает со дня ее основания. Признается, что успел создать не один сайт на MotoCMS ради досконального изучения админки и изложения всех хитростей работы с ней в блоге. Иван невероятно позитивен, предан своему делу, отзывчив. С удовольствием поболтает с вами о новых фичах, тулзах, пингах и других непонятных определениях на страницах блога.
Зарегистрируйте демо-версию
используя соц.сети
или электронную почту
Email не действителен
Вы меняете шаблон
Вы собираетесь заменить шаблон в вашем демо аккаунте - мы отправляем вам ссылку на подтверждение на ваш имейл.

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

Как только вы подтвердите смену шаблона, вы сразу сможете начать работу с шаблоном.
Проверьте вашу Почту
Регистрация демо-шаблона практически завершена.
Всего 1 шаг отделяет вас от погружения в мир
MotoCMS -мы отправим вам ссылку для подтверждения на ваш имейл.
Введите ваш Email
Проверте свою почту.
Ошибка. Пожалуйста, попробуйте позже.
Я даю согласие на обработку персональных данных в соответствии с политикой конфиденциальности