06.03.2017

Инструкция по использованию flat (флэт) дизайна и выбору цветов. Примеры сайтов и приложений

Лучшие применения плоского (flat) дизайна

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

Давайте посмотрим, что вы можете сделать, чтобы заставить плоский дизайн работать на вас.

Невидимый дизайн

Уберите необязательную визуализацию

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

Плоский дизайн сайта Dropbox фокусируется исключительно на содержании

Плоский дизайн сайта Dropbox фокусируется исключительно на содержании

Дрожащие цвета

Цвет – основная часть эффективности плоского дизайна

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

Дрожащие цвета

Советы:

  • Сайты Material Design и Flat UI Colors предоставляют хорошее руководство по выбору цветов.
Flat UI Colors – отличное место для начала поисков идеальной цветовой схемы для вашего плоского дизайна.

Flat UI Colors – отличное место для начала поисков идеальной цветовой схемы для вашего плоского дизайна.

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

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

  • Яркие цвета могут быть использованы как акценты в противовес более приглушённому фону. Обратите внимание, как акцентные цвета выделяют изображения в примере, приведённом ниже:
Яркие изображения на тёмном фоне способны произвести потрясающее впечатление.

Яркие изображения на тёмном фоне способны произвести потрясающее впечатление.

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

Сосредоточьтесь на оформлении 

Творите ради чистой эстетикии

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

Простые шрифты передают уверенность и ясность.

Простые шрифты передают уверенность и ясность.

Советы:

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

Движение

Движение делает плоский дизайн ориентированным на пользователей

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

  • “Что здесь важнее всего?”
  • “Как мне узнать, что делать дальше?”
  • “Как мне узнать, выполнил ли я свою задачу?”

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

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

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

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

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

Иллюстрации

Иллюстрации являются прекрасным дополнением плоскому дизайну

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

Картинки говорят громче слов и заставляют опыт продвигаться быстрее

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

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

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

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

Взаимодействие должно быть интуитивно для пользователя без каких-либо объяснений

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

Плоский дизайн 2.0 использует лучшие аспекты минимализма и скеоморфизма, заставляя их работать вместе

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

Тени помогают объяснить пользователю иерархию компонентов: они оказывают помощь в различении двух объектов и, в некоторых случаях, помогают определить, что один объект находится над другим.

Тени помогают объяснить пользователю иерархию компонентов: они оказывают помощь в различении двух объектов и, в некоторых случаях, помогают определить, что один объект находится над другим.

В примере ниже можно увидеть, как ненавящивое использование  мягких теней повсюду вокруг контуров CTA-кнопок создаёт их особое восприятие.

Первичная и вторичная CTA-кнопки на главной странице Sripe противопоставлены фону

Первичная и вторичная CTA-кнопки на главной странице Sripe противопоставлены фону

Заключение

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

Спасибо за прочтение!

Перевод: SpaceWell. Оригинальная статья по ссылке
Лучшие материалы