Принципы плоского дизайна (Flat Design)

Сообщество дизайнеров не перестает обсуждать плоский дизайн (Flat design). Эмоции на пределе. Большая часть дизайнеров ненавидит этот тренд. Другая часть придерживается середины. Некоторое время ранее мы уже рассматривали чем отличается плоский дизайн от скевоморфизма.

Хороший дизайн заключается в том, чтобы создавать нечто полезное для людей. И если нечто, работающее и полезное имеет плоские образы, пускай. Тем не менее тренд может не подойти любому проекту, поэтому не стоит притягивать его за уши. Давайте пройдемся по некоторым примерам плоского дизайна. У плоского дизайна (Flat design) имеются очень характерные черты. Их мы и рассмотрим в этой статье.

Отсутствуют дополнительные эффекты

TriplAgent

intothearctic

Task-app

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

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

Для создания реалистичности не добавляется ничего. Особенно совокупность трюков для имитации трехмерности элемента (см. скевоморфизм). Так в чем же соль? Плоская конструкция имеет ярко выраженный вид без дополнительных эффектов. Дизайн опирается на четкую иерархию расположения элементов, что позволяет пользователям эффективнее взаимодействовать с UI интерфейсом. В то время как все больше и больше сайтов перенимают плоский дизайн, настоящее распространение он получил среди мобильных приложений. При небольшой области экрана и минимальном количестве кнопок пользоваться им по настоящему просто.

Простые элементы

iPad-Calendar-Login

Simone-Marcarino

square-ui

Filetypes

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

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

Акцент на типографике

courtneyandrew

Flatmate

Plover

Из-за упрощенной подачи плоского дизайна, типографика чрезвычайно важна.

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

Рассмотрим простой шрифт с засечками (san-serif) с множеством стилевых вариаций. Применим его на сайте с плоским дизайном. Добавьте эффект неожиданности, используя шрифта как элемент оформления. Но будьте осторожны, не переусердствуйте.

Шрифт всегда должен направлять пользователя в правильную сторону использования дизайна. Закладки, бирки-кнопки должны повышать эффективность и простоту использования.

Акцент на цвете

Close-landing-page

Online-Radio

Squirrel-Settings

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

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

Минимализм и простота

Dropbox

Mud

Personal-Site

Плоский дизайн прост по своей натуре и хорошо подходит к дизайну с минимальным количеством элементов.

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

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

“Практически” плоский дизайн

Calc

Coming-project

Music-Web-Application

Nagging-popup

SimpleMail

 

Стиль о который ломают копья большинство дизайнеров — «практически» плоский дизайн.

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

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

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

А как вы относитесь к плоскому дизайну?

Автор материала: Carrie Cousins. Статья подготовлена по мотивам материалов с designmodo.com