Плоский дизайн (Flat) против минимализма. Основные принципы плоского «flat» дизайна Важен ли в дизайне минимализм
Flat дизайн -это ключевое направление в дизайне на ближайшие годы, поэтому предлагаем познакомиться с ним ближе и узнать 5 основополагающих принципов, легших в его основу.
Знакомство с flat дизайном
На русском языке flat design переводится как «плоский дизайн», а стал он абсолютным фаворитом после презентации Apple ОС iOS. Во главу угла встал минималистичный подход к дизайну для юзабилити. Ставка сделана на комфорт пользователя. Это ярко выраженный протест против «сквеформизма» (визуализация объектов, как в реальности). Выбор пал на более упрощенные и при этом простые в эстетическом плане решения. Пользователи, уставшие от реалистичных визуализаций, с восторгом встретили это направление, и все больше web-проектов переходят именно к этому формату.
Хочется отметить, что «плоско» - не значит «скучно». Решения flat дизайна могут быть красивыми, они более утонченные, чистые, избавленные от избыточности чего-либо, трансформируясь в «островок спокойствия». Они, наконец, делают контент понятным. Осталось узнать основные принципы, чтобы применять их на практике.
Принцип №1: долой ненужные эффекты«Плоский» дизайн не стремится передавать объемы, поэтому в основе лежит двумерная визуализация. Это значит, что вы не увидите ни теней, ни рефлексов, ни бликов с текстурами (исключение составляют длинные тени). Только передача контуров, и ничего более.
Рекомендуется использование односложных фигур в дизайне, как и следить за четкостью контуров, что призвано подчеркнуть легкость и невесомость. Кроме того, такие лаконичные элементы хорошо имитируют сенсор, порождая желание к взаимодействию с объектом (призыв к нажатию, прикосновению). Впрочем, простота элементов не равна простоте дизайна в целом - это относится только к очертаниям. В результате, все, что видит пользователь, ему понятно, и он может с легкостью этим пользоваться.
Флэт дизайн призывает крайне осторожно работать со шрифтами. То есть их характер обязан дополнять дизайн-схему, не противореча ей. Более того, во флэт дизайне шрифт - это еще и ключевой навигационный элемент.
Не только шрифт, но и цвет -существенная часть в «плоском» дизайне. В подавляющем большинстве палитры базируются на 2-3 цветах, хотя, конечно, есть и исключения. Обычно выбираются сочные и яркие, но при этом чистые цвета. Как было отмечено, нет никаких градиентов и излишних переходов.
Flat дизайн - это яркий пример такого всемирного тренда, как минимализм. Дизайнеры отказываются от излишних «наворотов», уходят от сложных и неявных подходов к визуализации, что дает свои плоды в виде пользовательской активности.
Плоский или почти плоский? Ищем компромисс!
В завершение хочется отметить, что сегодня имеет место быть синергия между плоским и неплоским дизайном. Речь идет о «почти плоском» дизайне. Это наиболее распространенное применение описанного концепта, когда вместе с простыми и лаконичными элементами и двумерным пространством дизайнеры применяют 1-2 приема для глубины и перспективы.
Также трендом 2017 года стал Semi Flat Design - полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.
Слово "flat" в переводе с английского означает "плоский". С момента появления так называемый Flat design вот уже на протяжении нескольких лет продолжает удерживать свои позиции, занимая лидирующие места на рынке.
С чего все начиналось
Веб-дизайн со времен своего появления менялся большое количество раз. Он прошел длинный путь от простых и скучных элементов до трехмерных, выпуклых и почти материальных. Это легко можно заметить на примере изменения внешнего вида операционной системы Windows. Визуальная составляющая развивается параллельно с развитием технологий. Но ее новые тенденции указывают, скорее, на возврат к минимализму и простоте.
От скевоморфизма к Flat design
Стилем, предшествующим плоскому, был скевоморфизм. Он очень долгое время являлся основным трендом в дизайне. Скевоморфизм - это псевдообъемный стиль, все элементы которого имитируют внешний вид реальных предметов (записная книжка, будильник), с помощью теней, натуральных текстур и прочего. Его яркие примеры встречались в ранних интерфейсах смартфонов. Он начал утрачивать свои позиции после 2010 года, когда дизайнеры крупных компаний стали смотреть в сторону упрощения и при разработке пользовательских интерфейсов стали избавляться от главной черты скевоморфизма - трехмерности.
Отличным наглядным примером различия стилей, может послужить фото, приведенное ниже. Изображение слева представляет собой плоский дизайн, а справа - скевоморфизм.
Характерные черты плоского стиля
Flat представляет собой двухмерный стиль. В нем абсолютно отсутствуют визуальные эффекты, такие как плавные переходы цвета, тени, объемные текстуры. Одним словом все, что делает изображение трехмерным.
Основную информативность несут в себе иконки (Flat design icon). Они должны быть максимально понятны пользователю, если речь идет о приложениях для смартфонов. Для сайтов же иконки являются главными элементами, отражающими его специфику и информационный посыл. Как правило, они представлены в виде простых геометрических фигур, круга или квадрата, с характерным условным изображением.
При разработке Flat-дизайна внимание уделяется и цветовой гамме. Она должна быть монотонна, не навязчивая и не отвлекающая пользователя. Чаще всего используется один чистый цвет и несколько контрастных оттенков. Кстати говоря, есть множество интернет-сервисов с наборами Flat design colors, которые можно использовать, скопировав hex-коды понравившихся цветов.
Не менее важна и такая вещь, как типографика (текст). За счет общей упрощенности текстовая составляющая особенно выделяется. Значит, она должна быть читабельной и не противоречить общей стилистике. Это будет зависеть от удачного выбора шрифта и его цвета.
Примеры Flat design
Начнем с того, что в плоскую сторону поменялись значки очень многих известных интернет-ресурсов и социальных сетей. Не так давно гиганты Google и YouTube тоже поменяли свое оформление на плоское. Операционная система Windows, начиная с восьмерки, полностью отказалась от всех признаков объема в иконках, которые радовали глаз некоторых пользователей в предыдущих версиях, и стала придерживаться Flat design. Ее примеру последовали и разработчики мобильных приложений для iOS и Android.
Широко используют преимущества Flat дизайна одностраничные сайты (лендинги), для которых решающую роль играет не вычурный внешний вид, а функционал и читабельность.
Эволюция плоского дизайна
Поначалу Flat design действительно был абсолютно плоским, что создавало определенные трудности для пользователей, привыкших к выпуклым кнопкам. Если в скевоморфизме кликабельность кнопок была сразу заметна, то в первых вариациях плоского дизайна определить интерактивность элементов не всегда получалось с первого раза.
После того как компания Microsoft выпустила Windows 8, оформленную в плоском стиле, не все пользователи смогли сразу разобраться с новым интерфейсом и на какие иконки они могут кликнуть. Внешний вид элементов никак не указывал на возможное взаимодействие с ними. Такой дизайн был удобным, скорее, для мобильных приложений, которые и подхватили эту идею. И первыми это сделала компания Apple в оформлении iOS 7.
Однако Flat design не стоит на месте и развивается в сторону усложнения. На сегодня он все чаще выглядит как полу-плоский дизайн или, как его еще называют, Flat 2.0. В нем стали появляться эффекты глубины, тени, градиенты. Глубина в плоском дизайне достигается путем расположения элементов на разном уровне или под углом.
Как бы там ни было, стиль на пике популярности и очень востребован. Так что, если вы планируете оформлять свой сайт, можете смело делать выбор в пользу Flat дизайна. А если вам необходимы какие-то недостающие элементы для вашего сайта, то в интернете вы сможете найти огромное количество Free flat design UI-элементов (бесплатные для скачивания), например иконки, шрифты, шаблоны и другие необходимые составляющие пользовательского интерфейса.
Плюсы и минусы стиля
Вне всяких сомнений, в современном стремительном ритме жизни такой неброский информативный стиль более удобен, чем его предшественник. Flat дизайн имеет ряд неоспоримых преимуществ.
К самому главному, пожалуй, относится быстрая загрузка веб-страниц. Сайты, использующие плоский дизайн, открываются гораздо быстрее, чем те, которые перегружены анимацией и другими тяжелыми объектами. Особенно важно время загрузки для SEO-оптимизации и продвижения сайта в топ.
Упрощенный внешний вид способствует читабельности текста и позволяет концентрировать внимание на основном контенте.
Оформление выглядит гармоничным и целостным, что создает общее приятное впечатление.
Ничто не может быть идеальным и Flat design не исключение. При всей своей кажущейся простоте разработать действительно удачный плоский веб-дизайн не так то просто. Есть вероятность сделать его скучным и непривлекательным. Или наоборот, перемудрить с оформлением и забыть о функциональности. Главная задача при разработке Flat-дизайна, это выдержать идеальный баланс между красотой и удобством пользования.
В последнее время огромную популярность приобрел специфический стиль в оформлении сайтов и пользовательских интерфейсов, который из-за стилизации его элементов получил название Flat.
Если вы посмотрите на сайт, выполненный по правилам Flat, то вы не увидите ни градиентных переходов, ни теней, ни малейших намеков на объем и текстуры. Основные принципы flat-стиля – простота, лаконичность и минимализм. Основные отличительные черты – это те вещи, на которых можно акцентировать внимание – яркие необычные цвета, нестандартная типографика, графические примитивы.
Сегодня все больше и больше дизайнеров применяют эту тенденцию в своих работах, однако особую популярность стиль Flat получил с распространением современных мобильных операционных систем Windows Phone и iOS 7, так как они являются последователями этой тенденции, хотя и не придерживаются им полностью.
Наша компания уже имеет опыт в создании сайтов в стиле Flat, и мы с радостью поможем вам в создании flat сайта !
В этой статье мы выделим основные принципы плоского дизайна, которыми вы должны руководствоваться в том случае, если захотите использовать flat, как основной стиль своего проекта.
Ниже мы проанализируем и приведем примеры некоторых сайтов, которые используют flat-стилистику.
1. Убираем все эффекты
Основной принцип flat-дизайна – это создание двумерного изображения, которое уже само по себе является плоским. При этом нужно избавиться от всех элементов, которые могут добавлять хоть какую-то глубину изображению: градиенты, плавные переходы, тени, скосы, объем, текстуры и так далее. Все элементы рисунка имеют жесткие края и также не выделяются и не имеют глубины относительно других элементов изображения.
Во flat-дизайне вы не встретите элементы, которые пытаются выглядеть реалистично (скевоморфизм), 3D-анимацию, реалистичные пиктограммы и т.д. Однако при этом сам дизайн пытается оставаться аналогичным традиционному, но теперь на передний план выходят надписи, кнопки и навигация.
На первый взгляд сайт с применением Flat дизайна может показаться чересчур простым, хотя на самом деле этому стилю присуща четкая иерархия элементов, удобное размещение всех инструментов взаимодействия пользователя, а следовательно имеет высокий показатель юзабилити.
2. Используем простые элементы
Для достижения поставленных целей в плоском дизайне дизайнеры используют кнопки и иконки. Они должны быть максимально интуитивными и кликабельными. Как и все остальные элементы интерфейса они должны быть плоскими и простыми, без дополнительных эффектов. Также дизайнеры часто используют простые геометрические формы – прямоугольники, круги и квадраты, позволяя каждой фигуре быть отдельным объектом.
3. Сделаем акцент на типографике
Так как согласно предыдущему принципу графика в плоском дизайне является простой, то чрезвычайно важным элементом является типографика – оформление надписей. В плоском дизайне типографика наряду с кнопками выходит на передний план.
Шрифты должны быть читабельными и, конечно, соответствовать дизайну, так как при простом дизайне чрезвычайно вычурные шрифты будут выгнлядеть неуместно. Однако не стоит использовать обычные шрифты, лучше поэкспериментировать и выбрать именно тот, который привлечет внимание пользователя.
Можно рассмотреть сочетание простого шрифта без засечек с каким-либо новым шрифтом, который будет восприниматься как арт-элемент. Шрифты должны помогать дизайну быть более простым и понятным, а кнопки и другие элементы должны служить только для повышения интерактивности.
4. Привлечем внимание цветом
Чуть ли не основную роль в плоском дизайне играет цвет. Если внимательно изучить сайты, созданные на основе этой концепции, то первое, что бросается в глаза – яркая цветовая палитра. Она состоит, как правило из нескольких контрастных чистых (без оттенков) цветов, двух-трех, хотя это число может доходить и до восьми. Причем все эти цвета обычно используются в равной степени.
Наиболее популярными цветами являются первичные и вторичные цвета. То есть основные цвета (cyan, magenta, yellow, black) и полученные на основе их смешения. Также очень часто в цветом решении при создании плоского дизайна используются цвета ретро, такие, как salmon (лососевый), purple (фиолетовый) и т.д.
5. Минимализм
Плоский дизайн по своей натуре прост, и он хорошо сочетается с минималистичным подходом.
В общем дизайне сайта нужно избегать слишком больших наворотов. Конечно, простых цветов и текста может быть недостаточно. Поэтому, если вы хотите добавить визуальных эффектов, нужно выбирать простые фотографии. Некоторые сайты с предложением о продаже розничных товаров используют плоский дизайн для того, чтобы разместить свои продукты на простом не отвлекающем фоне.
Нужно отметить, что некоторые фотографии имеют природную глубину, но в целом она вписывается в общую плоскость дизайна
Сравнительно недавно популярным стало такое направление дизайна как 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)
Плоский дизайн или flat-стиль существовал ещё в 80-е годы и не имел альтернатив, так как уровень технологий не позволял работать со сложными текстурами. Со временем появились сначала простые элементы скевоморфирзма (имитации реальных объектов), а затем и сложные отображения визуальной псевдовыпуклости.
Мода циклична и с 2010 года плоский дизайн быстро восстанавливал популярность, пока в 2014 году не стал новым стандартом компьютерного дизайна.
Эволюция flat-дизайна
Изначально плоский дизайн задумывался как полная противоположность сквеморфизма. Отрицались тени, градиенты и любые намёки на объём. Первой эту концепцию воплотила компания Microsoft. Но после юзабилити-тестирования выяснилось, что пользователи с трудом идентифицируют некоторые элементы интерфейса. Так, фокус-группа не могла понять какая иконка кликабельная, а какая нет, ведь все они плоские. Ещё больше проблем возникло с кликабельными надписями, потому что выглядели они как стандартная подпись к объектам.
В связи с этим, появилась адаптированная версия плоского дизайна - flat 2.0 или наполовину плоский дизайн. Он имеет слабый контраст и едва различимые тени, которые показывают пользователю, что иконка кликабельна. Когда говорят о плоском дизайне, имеют в виду именно версию flat 2.0. С развитием данного стиля псевдотени и легкий контраст был снова сменен на полную плоскость объектов. При этом в веб для понятия кликабельности элементов стала использоваться просто смена цвета на контрастный в таком же плоском стиле, без использования градиентов.
Принципы плоского дизайна
1. Двухмерная графика.
В плоском дизайне акцент делается на контурном изображении объекта. Дизайнер не стремится к реалистичности, его задача - передать суть, используя простые двухмерные формы.
2. Иконки.
Использование простых иконок с прослеживающимся призывом к действию (иконка дискеты или облачного хранилища, призывающая сохранить файл) делает интерфейс более лёгким и понятным интуитивно.
3. Простые шрифты.
Flat стиль большое внимание уделяет типографике в целом и шрифтам в частности. Плоский дизайн подразумевает минималистичные шрифты без засечек и любых украшений, под запретом даже курсивное начертание. Характер шрифта должен дополнять концепт проекта и не выбиваться из общей стилистики.
4. Игра с цветами.
Так как плоский дизайн не допускает градиентные переходы, в стилистике создаваемого элемента можно и нужно использовать несколько основных цветов, часто контрастных по отношению друг к другу.
5. Минимализм.
Flat дизайн предполагает визуализацию объектов, использование всего экрана, но при этом минимализирование информации. Это значит, что дизайнер не стремится заполнить всё свободное пространство и не боится пустого места.
6. Простые фоновые изображения.
Однотонный фон - лучший выбор. Можно забыть об изображениях а-ля кирпичные стены или шкура леопарда. Спокойные и едва заметные фоновые цвета не перетягивают внимание на себя и позволяют посетителю сфокусироваться на важных элементах интерфейса.
Учитывая все эти принципы, бытует мнение о простоте создания плоского дизайна. На самом деле именно flat дизайн большое внимание уделяет деталям и передаче движения, ритма. Перед дизайнером стоит задача создать привлекательную, понятную и завершённую картинку, используя исключительно простые формы.
Преимущества плоского дизайна для сайта
1. Читабельность текста
.
В плоском дизайне акцент делается не на графику, а на текст, что улучшает его восприятие. Кроме того, используются простые шрифты, которые не перетягивают внимание на себя.
2. Время загрузки сайта.
Благодаря отсутствию тяжёлой графики и сложных элементов, страницы грузятся быстро и не подвисают. Даже страница Google загружается быстрее, после того как компания сменила логотип, используя плоский и простой шрифт.
3. SEO-оптимизация.
Этот пункт вытекает из предыдущего. Скорость загрузки страницы влияет на ранжирование результатов поиска. Таким образом, просто сменив стиль дизайна, можно поднять свой ресурс в поисковой выдаче. Кроме того, теперь Google использует технологию, помечающую медленно загружающиеся сайты специальным значком. А это значит, что количество ваших посетителей может упасть, если вы не адаптируете дизайн сайта.
4. Внешний вид.
Как вы думаете, сколько времени нужно пользователю, чтобы сформировать мнение о ресурсе? Минута? Может, 30 секунд? Правильный ответ: 0,05 секунды! За это время невозможно изучить контент сайта, но можно просканировать внешний вид и понять, какие ощущения он вызывает. Flat дизайн говорит пользователям, что ваш сайт современный, что его развивают, а это уже предпосылка к формированию базового доверия.
Где можно использовать плоский дизайн?
Flat дизайн особенно актуален для разработки мобильных приложений и адаптивного дизайна сайтов. Кроме того, плоский стиль постепенно из цифрового мира переходит в реальный.
Элементы фирменного стиля, разные виды полиграфической продукции в «плоской» адаптации при должном исполнении смотрится весьма оригинально. Стоит отметить, что очень интересным решением является использование плоской линейной стилистики в дизайн-проектах.
Если судить по нынешним тенденциям, то стиль flat через непродолжительное время станет стандартом не только для цифровой сферы. Так, может, стоит озадачиться ребрендингом и созданием проектов в плоском дизайне уже сейчас?
Если вам понравилась или была полезна данная статья, будем рады получить небольшое поощрение в виде ссылки в социальных сетях. Для этого нажмите на кнопку любой социальной сети, расположенной ниже.
