Что такое flat design? Все о плоском дизайне

---

Объясняем, как работает самый популярный стиль дизайна последних десятилетий и даём советы по его использованию.

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

Определение flat design

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

Отличия от других стилей

Флэт дизайн появился впервые именно в дизайне интерфейсов и пришёл на смену старым стилям — скевоморфизму и реализму.

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

Реализм как часть скевоморфизма отвечает за имитацию объёма. Это блики, градиенты, свет и тени. В первых поколениях популярных смартфонов и компьютеров именно так были оформлены все кнопки — они подражали физическим частям плееров, калькуляторов и других приборов.

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

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

Именно задачу знакомства с техникой в первое десятилетие выполнял скевоморфизм.

Flat design (плоский дизайн) отказывается от этих эффектов в пользу плоских цветов, простых форм и лёгкости. Сегодняшний пользователь уже устал от перегруженных экранов, и имитация реальности оказалась не нужна. 

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

Больше напоминает тактильные механические кнопки и создаёт ощущение работы над механикой(идёт рука об руку с развитием тактильных и звуковых сигналов)

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

выделить в отдельный блок summary, в рамку или как-то ещё Таким образом, основное различие заключается в подходе к дизайну: flat design упрощает и стилизует элементы под плоскую печатную графику, а скелетный дизайн имитирует реальные объекты и их свойства.

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

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

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

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

— Эффект небрежности. Плоский интерфейс, выполненный неопытным дизайнером, иногда даёт эффект недоделанности и небрежности, из-за чего приложение выглядит «сырым». Хотя флэт дизайн и выглядит простым, нужно изучать базу и практиковаться, чтобы он был полезным и визуально приятным.

Есть и компромиссное решение — «почти плоский дизайн». Он соблюдает все принципы плоского дизайна, но допускает небольшие имитации объёма и градиенты, чтобы сохранить доступность и понятность для большинства пользователей.

Основные принципы плоского дизайна

Простота и минимализм

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

Вместо сложных объектов появляются их упрощённые аналоги. Например, вместо струй дождя появится пунктир, а облако разделится на круги и овалы. Такая лаконичность намного лучше призывает к прикосновению, взаимодействовать с ней приятнее, чем с имитацией 3D-объекта, объём которой почувствовать на самом деле невозможно.

Яркие цвета и контрасты

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

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

Сильная типографика

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

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

Применение flat design

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

Иконки и логотипы

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

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

Например, после масштабных изменений в iOS 7 и Microsoft 8 пользователи запускали петиции с требованием вернуть всё обратно. Некоторые компании критиковали за модный редизайн, потому что он в нём исчезали привычные представления о продукте и его атмосфере. Например, с одной из новых версий лого браузера FireFox пропала милая лиса.

А для другой части брендов это становится способом напомнить и о своей истории. Так, редизайн Burger King придал логотипу современности и при этом напомнил о его ретро-составляющей, стал вызывать ностальгические чувства.

Веб-дизайн

Сайты с плоским дизайном проще воспринимать как функциональные, а не просто красивые. Для веб-среды главное преимущество — это быстрая загрузка. Именно её обеспечивает 2D-графика вместо 3D.

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

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

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

Графический дизайн и иллюстрация

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

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

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

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

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

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

Интерфейсы приложений и устройств

Начиная с 2010-х годов компании избавляются от всего лишнего в оформлении своих продуктов. Одной из первых компания Android представила версию операционной системы Ice Cream Sandwich, а затем в 2013 году появилась iOS 7, где изменений было ещё больше.

В 2014 году корпорация Google представила систему Material Design, построенную на принципах плоского дизайна. Это единый стиль, которого придерживаются все сервисы компании. Десять лет спустя Material Design всё ещё существует и активно обновляется.

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

Советы по созданию плоского дизайна

Чтобы успешно освоить flat design, нужна насмотренность и технические навыки. вот несколько практик и принципов, которые помогут вам в обучении.

— Ищите вдохновение. Полистайте руководство по Material Design, побродите по интересным сайтам и запомните фишки. Флэт дизайн сейчас используют все, поэтому на любом авторском или корпоративном портале вы найдёте нужные референсы.

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

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

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

Освойте плоский дизайн профессионально на курсах онлайн-института Vill. Наши эксперты покажут, что это не скучно и не сложно.

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