Привет!
До появления плоского дизайна популярным стилем был скевоморфизм. Скевоморфизм – это когда в дизайне используются реалистичные представления физических объектов.
Например, старый логотип компаса Safari или оригинальный логотип Instagram. В скевоморфизме часто используются текстуры, сложная графика и чрезмерно стилизованная типографика.
Плоский дизайн устранил эти неуклюжие дизайнерские решения, сделав веб-сайты более быстрыми, легко читаемыми и привлекательными для пользователей. В 2012 году с выходом Windows 8 плоский дизайн получил широкое распространение.
Эта тенденция не заставила себя ждать. Более десяти лет спустя мы по-прежнему используем плоский дизайн в веб-сайтах, пользовательских интерфейсах, графическом дизайне и приложениях.
Что такое флэт дизайн?
Флэт дизайн – это двухмерный минималистский стиль дизайна. Вдохновленный швейцарским стилем, он отличается контрастной цветовой палитрой, минималистской типографикой, белым пространством, четкими краями и макетами на основе сетки.
Флэт дизайн – это обтекаемый и современный способ быстрой подачи информации. В нем нет теней, бликов и выделений, которые часто используются в других стилях дизайна для придания изображениям трехмерного вида.
Он стал популярным после выхода Windows 8 (2012) и iOS 7 (2013) от Apple. С акцентом на чистоту и иерархию, плоский дизайн создает функциональные веб-сайты, которые доносят информацию быстрым и понятным способом.
Шесть характеристик плоского дизайна
Флэт дизайн – это современный стиль дизайна, который последовательно сохраняет минимализм и 2D-черты.
Вот шесть признаков того, что перед вами флэт дизайн:
- Контрастные цвета: часто яркие цвета, плоский дизайн полагается на отчетливый контраст, чтобы послать визуальные подсказки пользователям.
- 2D-стиль: простые формы и отсутствие реалистичных изображений.
- Простая типографика: как правило, шрифты sans-serif являются выбором плоского дизайна. Они быстро загружаются, подходят к минималистскому стилю и легко читаются.
- Белое пространство: негативное пространство помогает дизайнерам указать, на какой части страницы они хотят сосредоточить внимание пользователей, и делает сайт более читабельным.
- Макеты на основе сетки: обычно плоский дизайн симметричен и использует сетку для компоновки и иерархии.
- Простота: символические значки, абстрактные формы, отсутствие текстур и градиентов.
Как дизайнеры пользовательского интерфейса используют плоский дизайн?
Флэт дизайн позволяет дизайнерам пользовательского интерфейса думать о своем дизайне скорее как о функциональном инструменте, чем как об эстетическом. Поскольку успех их работы основан на ценности, которую дизайн приносит пользователю, а не на эстетической привлекательности, многие дизайнеры пользовательского интерфейса любят плоский дизайн.
Поскольку флэт дизайн может быть тонким, дизайнеры пользовательского интерфейса должны помочь пользователям ориентироваться на сайте без излишней стилизации.
Они используют негативное пространство, контрастные цвета, анимацию и векторные иллюстрации, чтобы показать пользователю, как взаимодействовать с их дизайном.
Сетчатая структура флэт дизайна также помогает дизайнерам пользовательского интерфейса эффективно создавать интуитивно понятный интерфейс.
Простота флэт дизайна также позволяет дизайнерам пользовательского интерфейса легче донести четкое послание.
Жирные шрифты без засечек и контрастные цвета позволяют дизайнерам передать сильное послание. Некоторые проекты требуют ярких цветов для создания настроения, в то время как другие задают тон с помощью простых нейтральных цветов, которые хорошо контрастируют.
Для дизайнеров пользовательского интерфейса флэт дизайн – это создание четкого и чистого пользовательского опыта. Ключом к созданию флэт пользовательского интерфейса без трения является четкая индикация и последовательность.
Это означает согласованные цвета, иконки и шрифты, а также четкие CTA и иерархическую навигацию.
Что такое полуплоский дизайн?
Полуплоский дизайн – это, по сути, плоский дизайн, но с добавлением теней и многослойности. После нескольких лет мониторинга этой тенденции компанией Norman Nielsen Group, некоторые пользовательские тесты показали, что базовый плоский дизайн может быть слишком минималистичным.
В связи с этим некоторые дизайнеры начали вносить коррективы в свои проекты, чтобы сделать их более удобными для пользователей.
В полуплоском дизайне дизайнеры начали указывать пользователям больше направлений, добавляя тени под кнопки и используя стрелки и анимацию для обозначения следующих шагов. Они также используют выделения и слои, чтобы еще больше подчеркнуть элементы, на которые можно нажать.
По мере того, как эти функции юзабилити набирали обороты, полуплоский дизайн превратился в флэт дизайн 2.0, который также иногда называют «Flat 2.0» или «почти плоский». Подробнее об этом мы поговорим позже!
Когда следует использовать плоский дизайн?
Флэт дизайн можно использовать для создания наборов иконок, типографики, приложений, графических пользовательских интерфейсов, веб-сайтов, графики движения, инфографики и игр.
Если вы хотите создать простой, эффективный и модный дизайн, плоский дизайн – отличный вариант. Среди основных преимуществ плоского дизайна – улучшение SEO (поисковой оптимизации), снижение числа отказов, хорошая доступность и отзывчивость, более быстрое время загрузки и более активное взаимодействие с пользователем.
Если вы переделываете сайт, который испытывает трудности в какой-либо из этих областей, плоский дизайн может стать решением.
Если вы просто хотите попробовать флэт дизайн или начать изучать принципы плоского дизайна, вы можете начать с создания набора иконок. Иконки и векторы являются основополагающими элементами плоских интерфейсов, но с ними легче экспериментировать, чем создавать целый сайт.
Если же вы заинтересовались в полном изучении дизайна, мы рекомендуем вам обратить свое внимание на курс от образовательной платформы Skillbox «Профессия UX/UI-дизайнер».
На данном курсе вы научитесь визуализировать прототипы, создавать анимацию, кнопки, слайдеры. Сможете проектировать удобные интерфейсы по правилам юзабилити.
Плюсы флэт дизайна
Флэт дизайн – это не просто современный, простой стиль. На более глубоком уровне он может помочь веб-сайтам работать лучше. Кроме того, он практичен и эффективен с точки зрения дизайнера пользовательского интерфейса.
Плоский дизайн может улучшить читаемость, время загрузки, SEO и пользовательский опыт. Плоские веб-сайты часто выгодны и пользователям, и дизайнерам, и поисковым системам!
Пользователи выигрывают от минималистского стиля плоского дизайна, потому что плоские сайты обычно легче читать.
Дизайн, основанный на сетке, более отзывчив на мобильных устройствах. Упрощенные векторы и минимализм, не отвлекающий внимание, часто обеспечивают более быструю навигацию.
Белое пространство в сочетании с чистыми шрифтами приводит к созданию читабельных и разборчивых веб-сайтов.
Плоский дизайн также может улучшить SEO сайта. Благодаря менее сложным изображениям и упрощенному дизайну большинство плоских сайтов загружаются быстрее всего.
Кроме того, благодаря лучшей навигации пользователи часто остаются на сайте дольше. Легко читаемые шрифты помогают веб-гуру легко индексировать плоский сайт.
Дизайнеры пользовательского интерфейса обнаружат, что плоские веб-сайты зачастую проще всего создавать.
Вот лишь несколько причин, почему:
- Масштабируемость и простота итераций, что делает их хорошим выбором для долгосрочных проектов.
- Применимы к любой нише
- Оптимизированы для доступности и мобильности по дизайну
Недостатки плоского дизайна
Каким бы замечательным ни был плоский дизайн, у него есть и свои недостатки. Nielsen Norman Group проанализировала плоский дизайн за первые три года его популярности.
Они обнаружили, что чрезмерное увлечение элементами плоского дизайна может снизить их пользовательскую эффективность, поскольку они упрощают все до такой степени, что пользователи не понимают, что можно нажимать, а что нет.
Некоторые примеры «чрезмерного минимализма» включают редизайн иконок Google в 2020 году и Microsoft Windows 8.
Когда плоский дизайн становится слишком плоским, он удаляет ключевые признаки, указывающие на то, что на самом деле является кликабельным, оставляя пользователей в замешательстве.
Когда флэт дизайн заходит слишком далеко, он может включать удаление рельефных кнопок, подчеркнутых и цветных гиперссылок, а также текста действия рядом с иконками и кнопками. Это классические признаки того, с чем пользователь должен взаимодействовать.
Флэт дизайн и анимация
Хотя флэт дизайн может похвастаться минимализмом, это не значит, что вы не можете использовать анимацию! Как мы уже видели в нашем полном руководстве по анимации, это отличный способ показать пользователям, как взаимодействовать с вашим дизайном.
Анимацию также можно использовать для того, чтобы развлечь посетителей, пока что-то загружается, или для обратной связи.
Анимация – это простой способ показать, где находятся кнопки, указать, что делать дальше, или привлечь внимание пользователя. Анимацию можно использовать для создания сюжетов, кнопок, логотипов, придания размерности и в графике героев.
Представляем плоский дизайн 2.0
Плоский дизайн 2.0, также известный как полуплоский дизайн, – это плоский дизайн, но с добавлением нескольких практических функций. Дизайнеры тонко показывают пользователям, что нужно делать, добавляя глубину и контекст в те области сайта или приложения, с которыми они хотят, чтобы пользователи взаимодействовали.
Когда дизайнеры поняли, что чрезмерный минимализм приводит к плохому пользовательскому опыту, они начали добавлять обратно некоторые вещи, которые были удалены в их первоначальном плоском дизайне.
Тени, блики, анимация наведения и градиенты – вот три способа, которыми плоский дизайн 2.0 отличается от базового плоского дизайна.
На данный момент оригинальный плоский дизайн устарел, и плоский дизайн 2.0 – это то, что нужно.
В 2014 году компания Google сделала еще один шаг вперед и выпустила Material Design.
Material – это система плоского дизайна, которая ставит во главу угла эффективный дизайн и хороший пользовательский опыт, а также стремится стандартизировать дизайн веб-сайтов и приложений. Почта Gmail от Google – отличный пример плоского дизайна 2.0.
В последней версии при наведении курсора на значки появляются небольшие черные надписи, чтобы пользователи знали их назначение и знали, что на них можно нажать.
Многие другие сайты используют плоский дизайн 2.0, добавляя тени за своими кнопками. Apple использует плоский 2.0, добавляя градиенты к иконкам приложений, чтобы придать некоторую размерность пользовательскому интерфейсу.
Выводы по флэт дизайну
Сейчас, когда на сцену вышли flat 2.0 и material design, базовый флэт дизайн постепенно сходит на нет. Но эти две новые формы даже не появились бы, если бы плоский дизайн не задал тренд с самого начала.
Вот три самые важные вещи, которые вам нужно помнить о плоском дизайне и о том, как использовать его в своей работе:
- Флэт дизайн – это минимальный подход к дизайну пользовательского интерфейса, веб-приложений и приложений, который может похвастаться скоростью, читабельностью, масштабируемостью и простотой.
- При использовании плоского дизайна избегайте излишнего минимализма. Сейчас мы находимся в эпохе плоского дизайна 2.0. Используйте тени, градиенты и анимацию, чтобы донести свою мысль до читателя!
- Чтобы начать учиться использовать плоский дизайн, попробуйте сделать набор иконок! Векторы – это простой способ окунуться в идеи плоского дизайна. Если вам нужна дополнительная помощь, мы создали пошаговое руководство по созданию иконок.
До новых встреч!
