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

По большому счету, разница между плоским дизайном (Flat design) и материал дизайном (Material Design) едва уловима. Человеку, который не имеет глубоких познаний в графическом дизайне , они и правда могут казаться очень похожими. В этой статье я попытаюсь “пролить свет” на некоторые различия между ними. Вы получите дополнительные знания, которые так необходимы, чтобы случайно не ранить нежную натуру дизайнера.

Немного истории

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

Скевоморфизм

Если говорить о пользовательском интерфейсе и веб-дизайне, то под понятием скевоморфизма подразумевается подход, основной идеей которого является имитация. Не вдаваясь в подробности, просто вспомним интерфейсы Apple до появления iOS 7 с их “реалистичными текстурами, освещенностью и претенциозными эффектами”.

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

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

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

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

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

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

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

И, конечно, плоские иконки со сравнительно простым шрифтом могут направить внимание пользователей на действительно важный контент.

На сегодня плоский дизайн получил заслуженное признание, но без проблем все же не обошлось. Самым очевидным примером таких проблем стал выпуск Windows 8 компанией Microsoft. Эта операционная система считается пионером плоского дизайна и поддерживает концепцию Metro дизайна . К проблемам же привело то что компания сочла нужным уделить типографии внимания больше чем собственно графике.

Результаты юзабилити теста Windows 8 , проведенного NN Group, показали, что пользователи с трудом отличали кликабельные объекты от некликабельных. Пользователи жаловались, что объекты, которые выглядят как статичные, на самом деле оказывались кликабельными. В результате, основная миссия компании - помочь пользователям корректно интерпретировать систему, была провалена.

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

Материал дизайн

Давайте внесем ясность прямо сейчас: материал дизайн - это скорее фирменный продукт, чем спонтанно появившееся веяние в дизайне, завоевавшее широкое признание. Именно это в основном и отличает его от его от плоского дизайна.

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

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

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

Достоинства и недостатки плоского дизайна

Оставим позади историю эволюции стилей и перейдем к чему-то более существенному - перечислим сильные и слабые стороны плоского дизайна.

• Минималистичность и стиль
• Интуитивность. Вам будет проще донести вашу идею до пользователей.
• Экономия времени и ресурсов. Страницы загружаются гораздо быстрее с меньшим потреблением трафика.
• Фокус на контенте. Интерфейс без лишних деталей, которые могут отвлекать от действительно ценной информацию.
• Выглядит одинаково хорошо на различных устройствах, будь то браузер ПК или смартфона.
• Ускоряет процесс разработки дизайна вебсайта или приложения путем избавления от ненужных дизайнерских штрихов.

• Минималистичный стиль.
• Достаточно понятен на интуитивном уровне. Материал дизайн будет одинаково легко восприниматься как опытными пользователями, так и новичками.
• Умеренный скевоморфизм. Все выглядит более реалистично благодаря использованию оси Z (уникальной концепции Google).
• Имеется набор руководств, которые постоянно обновляются. Поэтому любой дизайнер всегда может обратиться к ним, если возникают трудности в процессе работы.
• Поощряется анимация для веб-решений. Нет необходимости напоминать, насколько люди любят движение. Кроме того, анимация позволяет сделать интерфейс более понятным и интуитивным.

• Имеет владельца (компания Google). Поэтому любые вопросы и предложения по улучшению должны быть адресованы с владельцу.
• Из-за наличия оси Z на процесс создания дизайна может потребоваться больше времени.
• Анимированные элементы требуют больше ресурсов.
• Неуклонное следование руководствам может ограничивать оригинальность дизайна.

Подведем итог

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

По правде говоря, плоский дизайн сильно эволюционировал за последние годы: от полностью “плоского” стиля до “полу-плоского”. Сейчас он допускает использование слоев и слабых теней, чтобы позволить объектам выглядеть более глубокими, чем они казались ранее. Так что, мы с вами - счастливые современники плоского дизайна 2.0.

И последнее, ничто не запрещает вам постараться объединить эти два подхода для создания действительно функционального и дружественного к пользователю продукта. Так что, черпайте вдохновение от гуру плоского и материал дизайна и вперед, за работу!

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать .

Сравнительно недавно популярным стало такое направление дизайна как FLAT – дизайн или плоский дизайн.

Пользователи Windows 8 и более поздних версий уже знакомы с FLAT – дизайном, так как первое, что встречает их при загрузке системы – это вот такой экран.

Само появление FLAT – дизайна обусловлено распространением мобильных приложений. И я думаю, что обусловлено это тем, что объекты FLAT дизайна создаются с помощью векторных объектов, и соответственно их легче адаптировать под различные платформы гаджетов.

FLAT – дизайн имеет следующие особенности:

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

На первый план выходит типографика, , геометрия. Особенно если это касается web – дизайна.

Гармония и . В дизайне используется ограниченное количество цветов. Вот пример популярной палитры FLAT – дизайна.

Использование креативных информативных иконок.

Как я уже говорила, FLAT – дизайн стал очень популярным в мобильных приложениях, так как основной его особенностью является простота верстки и адаптивность. Так же широкое распространение FLAT-дизайн получил в инфографике , так как ставит в основу гармоничность восприятия информации за счет использования конструктивных приемов типографики и колористики .

В свое время самым популярным направлением в web-дизайне был Web 2.0. Теперь его место занял FLAT-дизайн. Мода имеет обыкновение возвращаться к хорошо забытому старому, чтобы сделать из него новое. Кто знает, когда выйдет из моды FLAT — дизайн, а пока наслаждайтесь простотой, гармонией и информативностью текущего веяния. К слову, плоский дизайн уже был популярен в 80-е годы, но тогда это было обусловлено техническими особенностями, невозможностью отображения теней и градиентов. А сейчас уже большинство ведущих IT компании перешли на Flat — дизайн.

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

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

(Visited 2 333 times, 1 visits today)

Не знаем, заметили вы или нет, но в последнее время (особенно в последний год) в веб-дизайне по всему миру начала прослеживаться чёткая тенденция к упрощению, жесткому минимализму и визуальному облегчению того, с чем мы как пользователи взаимодействуем каждый день. Проще говоря, дизайн стал «плоским»: в отличии от выпуклых иконок времен бурного роста социальных сетей и web 2.0, сейчас нас всё чаще встречают простенькие иконки новых сервисов. Всё это получило своё название – flat design. Не квартирный, а плоский.

Своей вчерашней презентацией новой мобильной ОС, iOS 7, компания Apple окончательно подтвердила стремительный рост популярности этого направления, традиционно обрадовав часть своих фанатов, но и встретив значительное недовольство среди опытных пользователей и дизайнеров. В чём же дело? В чём польза этого плоского дизайна и действительно ли он нужен миру? Мы решили обратится к экспертам из Украины и зарубежья.

Мы попросили их ответить на три главных вопроса:

• почему мир начал двигаться к flat design в вебе и мобайле и что он из себя представляет;
• что это даст Apple и iOS 7;
• как это повлияет на дизайнеров - с одной стороны, и на пользователей - с другой.

Денис Судилковский, Киев
Interaction Design специалист, продюсер Prodesign.in.ua

«Эффект маятника» в предсказании будущего проявляется в том, что если в каком-то вопросе существуют две крайности - человечество будет кидаться из одной стороны в другую. Без сомнения, это справедливо и для дизайна интерактивных систем. Плоский и неинтересно-примитивный веб в своё время изменился на объёмные вебдванольные кнопочки. Визуализации интерфейсов достигли своего апогея реалистичности и маятник летит в обратную сторону - flat&simple.

Что получит от этого Apple? Сохранит своё место в тренде и сотни тысяч комментариев, что их iOS становится очень похожей на Android.

Дизайнерам придётся эволюционировать (и не шутить на тему, когда же flat-дизайн придёт в машиностроение и подарит нам плоские автомобили:). Когда нет декораций - вся работа состоит в создании настроения контентом для конкретного сценария с пользователем. Эта профессия будет иметь всё больше общего с Режиссёром, нежели с Художником. Пользователи, напротив - получают новый опыт и новые впечатления. Лично я 4 года был адептом iPhone, но этой весной сменил телефон на Android по единственной причине - надоела однообразная идеальность яблочного интерфейса.

Daniel Bruce, Stockholm
Senior Digital Creative, danielbruce.se

Для начала, я хотел бы отметить, что я не люблю термин «плоский дизайн». Большинство графического дизайна на протяжении столетий были «плоскими». Я также считаю, что это ограничивает вашу возможность сделать выдающимся дизайн, когда выбор стоит между flat и чем-то ещё. Дизайн может быть чем-то значительно большим, нежели это. Весёлым, ярким, темным, позитивным, минималистичным - его можно назвать как угодно. Но сегодня я редко слышу, чтобы кто-то считал дизайн не только плоским или склероморфным. Это немного грустно.

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

Я был очень удивлён, когда Microsoft выбрали для себя это направление несколько лет назад, презентовав известный Metro стиль. Фактически, они использовали графический дизайн для больших знаков, на которые люди смотрят с определённых расстояний и никогда не взаимодействуют с маленькими экранами со значительным количеством элементов. Это выглядит красиво, но имеют ли они хорошее юзабилити?

То, что я увидел вчера вечером от Apple, было лишь плохой копией нескольких интересных дизайнов, которые появляются на сайтах наподобие Dribbble i Behance на протяжении последнего года. Я не увидел ничего нового - кроме того, что это далеко не тот же «старый Apple» Стива Джобса. Компания показала, что она не на передовой дизайна мобильных интерфейсов. Конечно, мы увидим и фанатов, которые будут наследовать все эти белоснежные дизайны и креативные градиенты следующие несколько месяцев, но я не думаю что этот аспект будет настолько влиятелен, как недавние прекращения Google. Но с другой стороны, как бы там не было, Apple всегда выступала законодателем мод и вдохновением для многих людей, включая меня.

Что касается обычных пользователей, то им нравятся яркие цвета.

Иван Клименко, Киев
дизайнер мобильных интерфейсов, 5tak.com

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

Эпоха Баухауса 20-30-х годов принесла огромный вклад в дизайн, но всё-таки тональная герметичность и искуственность не выдержала желания и внутреннего позыва людей существовать в окружении более натуральных вещей.

Потом в 60-х все начали восхищаться пластиком.

Мебель, посуда и даже одежда - всё из пластика. Казалось, что это новая надежда человечества, но снова нет - люди очень быстро вернулись к природным формам или к копиям натуральных материалов.

Жесткий контраст форм и минималистичная графика всегда выражали накопление внутренних конфликтов внутри общества. Дизайн - всего лишь зеркало, которое показывает наш внутренний мир. Слишком много всего вокруг. Жизнь очень ускоряется, и у нас просто не остаётся времени подумать и рассмотреть что-нибудь. У нас часто нет времени просто жить.

Минималистичность и все эти электронные железяки - всего-лишь шаг на дороге к чему-то более природному и человеческому. Большему чем просто ещё один компьютер. Мне даже жаль, что Apple, которая умела смотреть глубоко, больше не существует.

Олеся Гричина, Киев
UI designer at Componentix, twitter: elendiel

Думаю, что на дизайнеров очень повлияло большое количество гаджетов с разными размерами экрана и разрешающей способностью - для всего этого разнообразия легче создавать дизайн без текстур, сложных теней, которые правильно учитывают освещённость и т.п. Больше стали думать в направлении «как бы удобнее для пользователя сделать», а не «как бы красиво нарисовать». Контент - это главное, и в нашей работе важно подать его наилучшим образом.

Мне кажется, что за внешними изменениями (flat UI, иконки) особенно и не заметили серьёзных изменений в удобстве работы, и того, как ругаются на эту тему. Когда проверят в работе - начнётся «ооо, как удобно, и почему раньше так не сделали». На дизайнеров, надеюсь, это повлияет таким образом, что они больше внимания будут уделять удобству интерфейса, а не текстурам и теням. В конце концов заказчикам можно будет пояснять, что это в тренде:)

На пользователей flat design, думаю, особенно не повлияет - если им удобно будет создавать и потреблять контент, довольных будет много. Но иконки на домашнем экране всё же кислотные:)

Павел Грозян, Киев
Product Designer at MacPaw, grozyan

«Apple! А-ха-ха, прекрати! - Кричат дизайнеры. - Ура, стало проще. - скандируют пользователи". Понимаю обе точки зрения. Сегодня, после презентации с WWDC2013, многие из моих коллег встали и сказали «да ну её, эту профессию! Кто угодно теперь такую дурость нарисовать сможет. А эти иконки за $30?!». И на первый взгляд, они правы. Но если копнуть глубже, понимаешь, что есть тысячи предметов, которые долгое время отличались один от другого только сценарием использования, потом формой, потом цветом, и только потом - художественными деталями. Я помню времена, когда все эти ребята в LinkedIn профилях которых сегодня написано UX, UI Designer, нервно копировали эффект белой тени у букв. Как у Apple. Потом светлые и легкие сайты. Как у Apple. Потом насыщенные текстурами и реализмом интерфейсы. Как у Apple. Вся их работа заключалась в копировании, поскольку не было оригинальной, единой и удобной для всех концепции развития. Именно эту задачу сегодня решает flat design. Хотя мне кажется неправильным называть его именно так. Хорошо, что не Microsoft его придумала, и он формировался в течении десяти лет до цифровой эры, в сфере publishing.

Flat - он не для кликов, он для нажатий, тапов, taps. Плоским его не назовёшь - отсутствие «толстых» текстур и теней у кнопок делает его, скорее, упрощённым, и без визуальной агрессии. И без градиентов к кнопкам не обойтись. Я поддерживаю эту тенденцию. Если это не будет мешать качеству опыта использования, но с ним всем будет легче жить. В первую очередь пользователю. Во-вторую - творцу: будет проще в технической реализации, удобнее для нажатия (подчеркиванию ссылок - привет), и мультиплатформенно - объединяя веб, мобайл и декстоп в один единый опыт. Без сомнения, для Apple это смелый шаг. И только они могут на него решится. Их история имеет десятки подтверждений, потому им это скорее удастся, нежели наоборот.

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

Знакомство с flat дизайном

На русском языке flat design переводится как «плоский дизайн», а стал он абсолютным фаворитом после презентации Apple ОС iOS. Во главу угла встал минималистичный подход к дизайну для юзабилити. Ставка сделана на комфорт пользователя. Это ярко выраженный протест против «сквеформизма» (визуализация объектов, как в реальности). Выбор пал на более упрощенные и при этом простые в эстетическом плане решения. Пользователи, уставшие от реалистичных визуализаций, с восторгом встретили это направление, и все больше web-проектов переходят именно к этому формату.

Хочется отметить, что «плоско» - не значит «скучно». Решения flat дизайна могут быть красивыми, они более утонченные, чистые, избавленные от избыточности чего-либо, трансформируясь в «островок спокойствия». Они, наконец, делают контент понятным. Осталось узнать основные принципы, чтобы применять их на практике.

«Плоский» дизайн не стремится передавать объемы, поэтому в основе лежит двумерная визуализация. Это значит, что вы не увидите ни теней, ни рефлексов, ни бликов с текстурами (исключение составляют длинные тени). Только передача контуров, и ничего более.

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

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

Не только шрифт, но и цвет -существенная часть в «плоском» дизайне. В подавляющем большинстве палитры базируются на 2-3 цветах, хотя, конечно, есть и исключения. Обычно выбираются сочные и яркие, но при этом чистые цвета. Как было отмечено, нет никаких градиентов и излишних переходов.

Flat дизайн - это яркий пример такого всемирного тренда, как минимализм. Дизайнеры отказываются от излишних «наворотов», уходят от сложных и неявных подходов к визуализации, что дает свои плоды в виде пользовательской активности.

Плоский или почти плоский? Ищем компромисс!

В завершение хочется отметить, что сегодня имеет место быть синергия между плоским и неплоским дизайном. Речь идет о «почти плоском» дизайне. Это наиболее распространенное применение описанного концепта, когда вместе с простыми и лаконичными элементами и двумерным пространством дизайнеры применяют 1-2 приема для глубины и перспективы.

Также трендом 2017 года стал Semi Flat Design - полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.

Что такое флэт-дизайн? Данное направление дизайна является одним из самых обсуждаемых в интернете. Если коротко, то флэт-дизайн это предельно упрощенный стиль, корни которого уходят в минимализм. Но это не совсем минимализм, так как данный стиль может принимать самые разные формы в зависимости от требований к дизайну. Чтобы лучше понять, что же собой представляет плоский (flat) дизайн, лучше пойти от обратного и определить, чем он точно не является.

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

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

Впервые о плоском дизайне заговорили в 2012-2013 годах, когда этот стиль только появился. Тренд был очень заметный и наделал много шума, так как одним из первых, кто начал развивать это направление, была компания Microsoft. Выход Windows 8 с новым интефейсом навсегда изменил дизайн и в значительной степени предопределил вектор развития веба, по крайне мере, его визуальной составляющей.

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

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

Вполне возможно, что доминирующий на протяжении нескольких последних лет тренд на предельное упрощение сменится чем-то другим. Кое-какие предпосылки к этому существуют – например, направление Material Design, созданное дизайнерами корпорации Google.

СОВМЕСТИМОСТЬ С АДАПТИВНЫМ ДИЗАЙНОМ

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

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

Тренд на минимализм во многом упростил работу дизайнеров – им стало легче проектировать интерфейсы, которые корректно отображаются на любом типе устройства. В случае с псевдообъемными элементами все было не так – порой интерфейс, который потрясающе выглядел на экране десктопа, превращался в тыкву нечто невнятное на мобильном устройстве.

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

ГИБКАЯ ПЛАТФОРМА

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

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

ЧИТАЕМАЯ ТИПОГРАФИКА

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

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

МИНУСЫ

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

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

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

ПОТЕРЯ ИНДИВИДУАЛЬНОСТИ

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

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

Иногда доходит до смешного. Глядя на эти картинки, можно подумать, что перед нами разные разделы одного и того же приложения. Но нет, дизайнеры Марко Ла Мантиа и Симоне Липполис работали независимо друг от друга. В качестве главных элементов дизайна используются основные геометрические фигуры и белый шрифт без засечек – решение более чем логичное. Но результат плачевный – одинаковая цветовая схема напрочь лишила дизайн уникальности. И таких случаев масса.

ПОГОНЯ ЗА МОДОЙ

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

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

Перед нами работы дизайнеров Александра Лотоцкого и Эрика Мальмскельда. Это типичные примеры использования длинных теней в дизайне. Сейчас этим никого не удивишь, но в свое время, а обе работы были созданы еще в 2013 году, когда флэт-дизайн только-только входил в моду, новый визуальный стиль был очень интересным и привлекательным. В результате появилось такое количество похожих иконок, что сегодня использование теней является шаблонным и неинтересным решением. Когда-то было модно, но уже нет. Тени как тени. Смысла в них нет никакого, никакой полезной функции они не выполняют.

НЕУДАЧНЫЙ ВЫБОР ШРИФТОВ

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

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

FLAT 2.0

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

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

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

Очень много для продвижения Flat 2.0 сделала компания Google. Гайдлайн Material Design – это попытка создать новый визуальный язык, объединяющий плоские и объемные элементы дизайна. Рекомендации Google очень подробны и следовать им легко и просто. При этом Google не настаивает на жестком соблюдении всех правил, изложенных в гайдлайне – дизайнеры могут экспериментировать, создавая свои оригинальные проекты, где могут сочетаться самые разные элементы.

ВЫВОД

Сегодня Flat 2.0 находится на стадии формирования, но уже вполне различимо направление, в каком будет развиваться этот стиль. Существенных изменений не предвидится – законодатели мод Google, Apple и Microsoft не собираются отказываться от флэта. Если изменения и будут, то незначительные – появятся новые подходы, кто-то придумает интересную «фишку», продолжатся попытки взять самое лучшее из скевоморфизма. Но в глобальном смысле ожидать чего-то действительно нового не приходится – плоский дизайн тренд долговременный и сместить его с завоеванных позиций сможет только стиль, наилучшим образом отвечающий новым технологиям, которых пока еще нет.