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

Flat design получил свое название не просто так: его концепция исключает использование трехмерных элементов, глубоких теней и ярких градиентов (с английского “flat” означает “плоский”). Кнопки, иконки и другие графические элементы выглядят упрощенно и четко, но по-прежнему привлекательно.

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

Подбираем flat цвета для цветовой схемы

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

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

Переходя от теории к практике, хотелось бы рассказать вам о наборе flat цветов от W3.CSS . Эта подборка содержит различные цветовые схемы для создания сайтов. Здесь вы найдете цвета для материального дизайна, flat цвета, цвета Windows metro и Windows phone 8. Эта подборка сопровождается примерами кода на HTML и CSS, чтобы вы быстро могли применить выбранную комбинацию.

Если же вы абсолютный новичок и не знаете, с чего начать, посетите Flat UI Colors . На этом сайте можно скопировать понравившийся цвет, а после найти его в графическом редакторе, вставив соответствующее значение. Как видите, в подборке преобладают яркие оттенки - от зеленых и голубых до желтых и оранжевых.

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

Хотите разработать flat дизайн сайта? Обратите внимание на шаблоны MotoCMS 3.0, созданные с учетом принципов плоского дизайна. Мы сравнили шаблоны с различными образцами flat цветовых схем, чтобы показать, как они влияют на свойства пользовательского интерфейса.

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

Шаблон MotoCMS 3.0 для сайта печатных услуг

Шаблон MotoCMS 3.0 для сайта печатных услуг - отличное решение для проекта, связанного с полиграфией и печатью. Тем не менее тематика шаблона может быть с легкостью изменена. Дизайн шаблона разработан с учетом принципов плоского дизайна. Пользователям предложено 8 вариантов слайдеров и галерей наряду с 20 виджетами и модулями. Все это поможет вам создать популярный и оригинальный онлайн-проект.

Ретро цвета. Зачастую это пастельные оранжевые и желтые оттенки в сочетании с ярким красным и голубым. Чаще всего первичные flat цвета в ретро стиле сочетаются со вторичными - так легче добиться эффекта смешения.

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

Плоский дизайн — подготовка

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

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

Определение цветовой палитры

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

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

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

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

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

Яркие цвета

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

Итак, с чего же начать?

FlatUIColors.com имеет большой стартовый список некоторых самых популярных оттенков в плоском дизайне. Начиная с яркого-синего и зеленого заканчивая желтым и оранжевым. Сайт является отличным началом для того чтобы использовать плоский дизайн в своем проекте, потому что Вы можете выбрать и скачать бесплатно цвета и различные сочетания цветов. (Лично мне нравятся серые и спокойные тона.)

Если Вы хотите соединить свои собственные яркие цвета в плоском дизайне, выберите простоту и такие цвета, у которых одинаковый цветовой тон и насыщенность.

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

Популярные цвета : синие, зеленые и фиолетовые

Ретро цвета

Ретро цвета также является популярным выбором при работе с плоским дизайном.

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

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

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

Популярные цвета : апельсиновый, персиковый или темно синий.

Монотонные цвета

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

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

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

Монотонные цвета особенно популярны для мобильных приложений и мобильного дизайна.

Монотонные примеры : Так же, как с другими цветовыми палитрами, в монотонных схемах также необходимо использовать контраст. Смешивайте оттенки отличные от базового цвета. Начните с насыщенного (100%) и оттенками 50%, 20% и 8%.

Заключение

Единственная вещь, которая действительно заставляет плоский дизайн работать — это то, что тренд новый и интересный.

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

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

«Если найти хорошие палитры в наше время просто, то найти удачное сочетание цветов для визуализации данных всё ещё трудно», - пишет Чженг. В поиске цветов для инфографики она выделяет три основные проблемы.

Палитра Flat UI Colors
Палитра Flat UI Colors в протапонии
Палитра Flat UI Colors в чёрно-белом

Во-первых, не все палитры предназначены для визуализации. Например, цвета из руководящих принципов дизайна интерфейсов (например, материальный дизайн Google) могут плохо восприниматься дальтониками и просто слабо отличаться друг от друга.

Палитры из четырёх цветов с сайта Color Hunt

Во-вторых, во многих существующих палитрах недостаточно цветов. В качестве примера она приводит сайт Color Hunt , где можно найти удачные сочетания четырёх цветов. Но для инфографики обычно нужно от 6 до 12 цветов.

Градиентные палитры с сайта Color Hunt, цвета из которых будут плохо различаться на инфографике
Отличие градиентной палитры из четырёх цветов и из 12

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

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

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

Во-первых, нужно проверить, есть ли у цветов из палитры достаточно сильное различие по яркости. «Отличие по яркости будет универсальным», - пишет дизайнер. Также большая разница в яркости поможет адаптировать палитру для дальтоников. Можно посмотреть, как её воспримут люди с протапонией (пониженной чувствительностью красного), дейтеранопией (пониженной чувствительностью зелёного или другого цвета), а также если перевести её в чёрно-белый.

Во-вторых, для палитры лучше использовать естественные сочетания. В качестве примера Чженг приводит переход от светло-жёлтого к тёмно-фиолетовому и от светло-фиолетового к тёмно-жёлтому. «С чисто математической точки зрения они должны выглядеть примерно одинаково», - пишет она, отмечая, что первое сочетание выглядит натуральнее второго. Дизайнер связывает это с тем, что человек привык видеть сочетания из первой палитры в природе, например, во время заката.

Сетка для работы с градиентами

В-третьих, при формировании палитры лучше использовать градиент, чтобы лучше почувствовать разницу в цвете. Чтобы облегчить задачу, Чженг советует сделать сетку с цветами в Photoshop, такую как на скриншоте выше. Градиенты, уверяет она, эффективны при выборе и двух, и 12 цветов.

Удачные палитры для инфографики
Удачные палитры для инфографики

Также дизайнер посоветовала 12 полезных ресурсов для работы с цветом и палитрами. Их список можно посмотреть

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

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

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

СВЕТЛЫЕ ОТТЕНКИ

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

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

Светлые оттенки присутствуют и на сайте www.caketeacher.com , где можно найти множество полезных советов по изготовлению тортов в домашних условиях. Оттенки здесь немного ярче, чем на сайте Jack Horner, однако они не мешают пользователю сосредоточиться на фотографиях, расположенных по центру. Контраст приглушенных тонов с яркими элементами помогает пользователю сфокусироваться на просмотре основного контента – рецептов, советов и подсказок. Кроме того, легкая цветовая гамма позволяет убрать часть негативного восприятия, которое может возникнуть у посетителя, который в какой-то момент обнаружит, что для того, чтобы получить доступ ко всему контенту на сайте, ему придется оформить подписку стоимостью $18,90 в месяц.

ТЕМНЫЕ ОТТЕНКИ

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

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

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

ВЫВОД

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