Флэт дизайн: главные принципы и лучшие примеры

Один из самых распространенных и современных стилей сейчас — флэт дизайн или плоский дизайн. Что это такое, чем он хорош и для каких проектов подходит?

Что такое флэт дизайн

Флэт дизайн в переводе с английского flat design — буквально «плоский дизайн». Это простой двухмерный дизайн без теней и объема, который берет истоки в минимализме, швейцарском стиле и Баухаусе. Подробно о влиянии последнего на современный дизайн мы рассказали в этой статье⁠(открывается в новой вкладке или окне). А вот так выглядит плакат в швейцарском стиле⁠(открывается в новой вкладке или окне) — незамысловатая графика, контрастные цвета, плоский дизайн.

Одна из первых компаний, которая стала использовать этот стиль в дигитальном дизайне — Windows⁠(открывается в новой вкладке или окне).

В 2013 году флэт дизайн начала использовать компания Apple. С переходом на iOS 7 иконки стали простыми, плоскими и графичными. И вот тогда это направление массово подхватили уже и другие мировые бренды.

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

Двухмерность

Никакого объема: теней, фактур, бликов, отражений и трехмерных изображений. Флэт дизайн = плоский дизайн.

Минимализм

Никаких лишних украшательств и вычурности. Вот такой предельно простой, но очень эффектный логотип в стиле плоского дизайна сделала Студия Артемия Лебедева для Pizza Point⁠(открывается в новой вкладке или окне).

А вот такой можно сделать самостоятельно на платформе графического дизайна Canva.

Еще 100 идей логотипов можно подсмотреть в этой статье⁠(открывается в новой вкладке или окне).

Четкие контуры

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

Контраст

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

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

Простая типографика

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

Буквы необязательно должны быть геометрически правильными, надписи художницы @lelevina⁠(открывается в новой вкладке или окне) тоже пример флэт дизайна. Она использует простой рукописный шрифт и контрастные фоны.

Подробно о видах шрифтов с засечками и без мы рассказали в этой статье⁠(открывается в новой вкладке или окне).

Ретроплакаты

Флэт дизайн — это не только современные сайты и графика. Упрощенные формы, отсутствие деталей и плоский дизайн — такими часто создавали плакаты еще в то время, когда не было дигитального дизайна.

И все больше графики в таком стиле встречается и сейчас.

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

Рассылка Spotify

В конце года Spotify отправил своим пользователям письмо с очень лаконичным, но ярким флэт дизайном. Благодаря простоте и цветам они здорово выделились в ленте пестрых рассылок и привлекли внимание. Обратите внимание, никаких графических элементов, кроме логотипа. Здесь вся магия в цветах, контрасте и предельно простой типографике.

Искусство

Вдохновиться примерами флэт дизайна можно не только на примере сайтов, рассылок и плакатов. Примеры есть и в искусстве! Например, в супрематизме Казимира Малевича.

Упаковка Pocky

А вот еще один пример флэт дизайна, на этот раз в упаковке — коллекция сладостей Pocky с лимитированным дизайном.

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

Обложки для книг и журналов

А вот обложка для блокнота — Мона Лиза в стиле флэт дизайна художницы Анастасии Депресовой⁠(открывается в новой вкладке или окне).

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

А здесь можно посмотреть еще 50 идей обложек⁠(открывается в новой вкладке или окне), которые легко самостоятельно сделать в Canva.

Ролик журнала Monocle

Видео на главной странице сообщества Monocle⁠(открывается в новой вкладке или окне) — пример современного флэт дизайна. Черные контуры изображений и цветные пятна выглядят, как детская раскраска. Простые и понятные картинки, а главное, никакого объема.

https://player.vimeo.com/video/431809006?autoplay=1

Иконки MAMM в инстаграме

Иконка на профильном изображении и обложках вечных историй у Мультимедиа Арт Музея — идеальный пример плоского дизайна. В иконках соцсетей он просто незаменим. Благодаря простоте форм, отсутствию лишних деталей и контрасту — даже в маленьком разрешении такие картинки понятны.

Сами иконки инстаграма в правом верхнем углу тоже пример флэт дизайна. Чем меньше изображение —тем меньше в нем должно быть деталей⁠(открывается в новой вкладке или окне), это важно для легкого прочтения и понимания. Такие иконки легко сделать самостоятельно, без знания фотошопа.

Иллюстрация коллекции косметики Givenchy

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

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

Лендинг дизайнера Максима Арбузова

Большинство современных лендингов выполнены в стиле флэт дизайна. Особенно много таких примеров среди личных страниц дизайнеров, например, Максима Арбузова⁠(открывается в новой вкладке или окне). Простой шрифт, четкие формы и немного фотографий.

Портреты

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

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

Подписывайтесь на обновления в Телеграме⁠(открывается в новой вкладке или окне), ВКонтакте⁠(открывается в новой вкладке или окне) и Яндекс Дзене⁠(открывается в новой вкладке или окне), чтобы всегда быть в курсе трендов графического дизайна и возможностей Canva, которые помогут воплотить их в жизнь!