Игра с цветом в дизайне интерфейсов

12 октября 2017

игра с цветом в дизайне интерфейсов

Цвет - это мощный инструмент в наборе дизайнера

Игра с цветом: яркие варианты для приложений и веб-сайтов

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

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

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

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

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

Двуцветные фотографии почти стали визуальным символом Spotify.

Эмоции
Дутоны позволяют вам хорошо передавать различные эмоции. Различные цвета вызывают разные эмоции.
Мягкие, неконтрастные сочетания цветов создают серьезную атмосферу.

 

Эффект мягкого двухцвета создает деловую атмосферу.



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

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



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

Градиенты выполняют следующие функции в пользовательских интерфейсах:

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



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

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

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


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

Перевод статьи
https://www.smashingmagazine.com/2017/09/vibrant-colors-apps-websites/