Время исследовать цвета радуги! Отойдите ненадолго от backend и баз данных и узнайте всё о силе цвета и о том, как использовать её в своих проектах. Небольшой бонус ждёт наших читателей в конце статьи.
Для многих no-code разработчиков цвет может оказаться очень непростой вещью для понимания. Что-то смотрится хорошо вместе, что-то нет. На первый взгляд может показаться, что во всём этом нет никакой структуры!
Это определённо не так. Теория цвета существует уже очень давно, а использование различных сочетаний цветов предшествует даже самому раннему египетскому искусству. Итак, всем, кто находит цвета увлекательными и ищет более быстрый способ достичь баланса не только с точки зрения функциональности, но и эстетики — эта статья для вас. Приготовьтесь, впрочем: чтение будет долгим.
Давайте сразу погрузимся в увлекательный мир теории цвета. Эта захватывающая тема посвящена пониманию того, как цвета сочетаются друг с другом и как мы можем использовать их для создания визуально приятных дизайнов. Особенно когда речь идёт о no-code проектах — так приятно поиграть с визуальной частью вашего приложения и добавить мастерские штрихи то тут, то там.
Хотите быть модным с самого начала? Используйте этот цвет в своём проекте. Цвет года 2023 по версии Pantone — «Viva Magenta». #BB2649. Он действительно великолепен, честно говоря.
Цвет — мощный инструмент для создания идентичности бренда. Подумайте о некоторых самых известных брендах в мире. McDonald's ассоциируется с красным и жёлтым, Coca-Cola — с красным и белым, а Starbucks — с зелёным. Эти бренды создали сильные ассоциации между своими цветами и своей идентичностью. При разработке идентичности бренда важно учитывать эмоциональное воздействие цветов и выбирать цвета, которые поддерживают послание бренда.
При проектировании вам нужно учитывать эмоциональное воздействие используемых цветов. Подумайте о сообщении, которое вы хотите передать, и выбирайте цвета, которые его поддерживают. Например, если вы создаёте no-code сайт для йога-студии, вы можете выбрать успокаивающие синие и зелёные тона, чтобы создать расслабляющую и умиротворяющую атмосферу.
Подумайте также о доступности цвета. Не все видят цвет одинаково, поэтому вам нужно выбирать цвета, которые легко различимы для всех. Это особенно важно при проектировании для людей с дальтонизмом. Один из способов обеспечить доступность цвета — использовать коэффициенты цветового контраста, чтобы убедиться в достаточном контрасте между используемыми цветами.
Вы также можете использовать это интересное изображение, чтобы примерно понять, дальтоник вы или нет. Если вдруг вы что-то здесь не видите, поздравляем! Вы узнали это благодаря изображению, предоставленному SRON Netherlands Institute for Space Research. Я сам узнал об этом с помощью мема с непристойной надписью, которую не мог прочитать без чьей-либо помощи. Тяжело!
Цветовой круг — это фундаментальный инструмент, используемый художниками, дизайнерами и учёными для понимания того, как цвета соотносятся друг с другом.
Большое спасибо colorsontheweb.com за это изображение.
Истоки цветового круга восходят к сэру Исааку Ньютону, который в 1666 году обнаружил, что свет можно разложить на составляющие его цвета. Он выделил семь цветов видимого спектра: красный, оранжевый, жёлтый, зелёный, синий, индиго и фиолетовый. Позже этот спектр был сокращён до шести цветов, которые мы знаем сегодня: красный, оранжевый, жёлтый, зелёный, синий и фиолетовый.
Большое спасибо Wikipedia за эту потрясающую гифку. Так завораживает…
Цветовой круг — это круговая диаграмма, которая логично организует цвета. Он начинается с трёх основных цветов: красного, синего и жёлтого. Эти цвета называются основными, потому что их нельзя получить смешиванием других цветов. Они являются строительными блоками для всех остальных цветов.
Далее идут вторичные цвета: зелёный, оранжевый и фиолетовый. Эти цвета создаются путём смешивания двух основных цветов. Например, смешивание синего и жёлтого создаёт зелёный, а смешивание красного и жёлтого — оранжевый.
Наконец, у нас есть третичные цвета. Эти цвета создаются путём смешивания основного и вторичного цвета. Примеры третичных цветовых сочетаний включают красно-оранжевый, жёлто-зелёный и сине-фиолетовый.
Одна из самых интересных вещей в цветовом круге — то, как его можно использовать для создания визуально приятных цветовых схем. Существует несколько различных цветовых схем, которые художники и дизайнеры используют для создания своих произведений. Некоторые из самых популярных включают комплементарные цвета, аналогичные цвета и триадные цвета.
Комплементарные цвета — это пары цветов, которые находятся напротив друг друга на цветовом круге. Эти цвета создают сильный контраст при использовании вместе, что делает их идеальными для создания ярких дизайнов. Наиболее распространённые комплементарные пары — красный и зелёный, синий и оранжевый, жёлтый и фиолетовый.
Говоря о синем и оранжевом. «Звёздная ночь» Ван Гога. Классика!
Концепция комплементарных цветов восходит к началу XVIII века. Французский художник Мишель Эжен Шеврёль, который также был учёным, обнаружил, что при размещении комплементарных цветов рядом друг с другом они кажутся ярче и насыщеннее. Этот эффект известен как одновременный контраст.
Когда мы долго смотрим на комплементарный цвет, а затем переводим взгляд на белую поверхность, мы видим послеобраз в комплементарном цвете. В наших глазах есть клетки, отвечающие за восприятие цвета, и когда мы долго смотрим на определённый цвет, эти клетки утомляются. Когда мы затем переводим взгляд на белую поверхность, утомлённые клетки реагируют слабее, чем неутомлённые, вызывая появление послеобраза в комплементарном цвете.
Комплементарные цвета также можно использовать для создания оптических иллюзий. Например, если вы посмотрите на жёлтый квадрат несколько секунд, а затем на белую поверхность, вы увидите синий квадрат. Это происходит потому, что жёлтый и синий — комплементарные цвета, и взгляд на жёлтый квадрат вызывает утомление клеток, воспринимающих жёлтый цвет, делая синие клетки более чувствительными.
…и это тоже.
Аналогичные цвета — это цвета, которые находятся рядом друг с другом на цветовом круге. Когда мы используем аналогичные цвета вместе, они создают ощущение единства и баланса. Именно поэтому аналогичные цветовые схемы часто используются в графическом дизайне.
Представьте, что вы оформляете комнату в своём доме и хотите создать тёплую и уютную атмосферу. Вы можете выбрать аналогичную цветовую схему из красного, оранжевого и жёлтого. Эти цвета находятся рядом друг с другом на цветовом круге и создают ощущение тепла и уюта. С другой стороны, если вы хотите более прохладную и расслабляющую атмосферу, вы можете выбрать цветовую схему из синего, зелёного и фиолетового, которые также являются аналогичными цветами.
Возьмём в качестве примера приложение Instagram. Оно в основном использует аналогичные цвета — оранжевый, розовый и красный. Эти цвета создают тёплую и располагающую атмосферу и укрепляют идентичность и характер бренда, который весь посвящён обмену творческими визуальными материалами.
Важно отметить, что, хотя аналогичные цвета создают ощущение гармонии, они также могут быть немного скучными при чрезмерном использовании. Поэтому важно добавить контраст с помощью комплементарных цветов или нейтральных оттенков, чтобы ваш дизайн выделялся.
…и это тоже.
Триадные цвета — это группы из трёх цветов, равномерно расположенных вокруг цветового круга. Когда вы используете триадные цвета вместе, они создают ощущение баланса и гармонии, а также добавляют некоторое волнение и контраст.
Итак, как найти триадные цвета на цветовом круге? На самом деле это довольно просто! Вы начинаете с выбора одного цвета, а затем рисуете равносторонний треугольник вокруг цветового круга, где углы треугольника — это два других цвета в триадной группе (как показано на изображении выше). Например, если вы начнёте с синего, двумя другими цветами в триадной группе будут красный и жёлтый.
Возможно, вы думаете: «Это звучит как слишком много цветов для использования в дизайне!». Вам не обязательно использовать все три цвета в равных пропорциях. Вы можете использовать один цвет как доминирующий, а два других — как акценты или блики. Это создаст ощущение глубины и интереса в вашем дизайне.
Хотя триадные цвета могут выглядеть визуально ярко, они также могут быть подавляющими при чрезмерном использовании. Поэтому важно использовать их умеренно и уравновешивать нейтральными или комплементарными цветами.
С каждым годом тренды меняются. Как вы могли заметить в самом начале этой красочной статьи, всё постоянно находится в движении. Одно можно сказать точно: цвета могут становиться более или менее модными, но сами по себе они остаются неизменными. Некоторые сочетания всегда будут выигрывать в зависимости от того, чего вы хотите достичь. Давайте рассмотрим победителей 2023 года:
В море блёклых, приглушённых сайтов взрыв яркого цвета может стать именно тем, что привлечёт внимание посетителя и удержит его вовлечённость. Кроме того, яркие цвета помогают передать ощущение энергии и волнения, что особенно важно для сайтов, которые хотят сделать смелое заявление.
Как и с любым элементом дизайна, при использовании смелых и ярких цветов нужно помнить о некоторых вещах. Прежде всего, вы должны убедиться, что ваш выбор цвета соответствует вашему бренду и общему сообщению, которое вы пытаетесь передать. Хотя использовать яркие цвета — это здорово, вам также нужно помнить о создании сбалансированной цветовой схемы, приятной для глаз. Слишком много хорошего может быстро стать подавляющим, поэтому используйте свои цвета стратегически.
В качестве примера, сайт Refinery29 — это потрясающая демонстрация смелых и ярких цветов, которая по-настоящему передаёт весёлый, молодёжный и модный характер бренда. От ярких розовых акцентов до смелых вспышек зелёного и жёлтого — каждый элемент сайта тщательно продуман для создания визуально потрясающего впечатления, которое привлекает и удерживает вас.
Refinery29 также использует типографику и фотографию для создания визуально привлекательного дизайна. В результате получается сайт, который не только функционален, но и приятен для просмотра.
Зачем кому-то использовать спокойные и минималистичные цвета? Разве это не скучно?
Иногда меньше — значит больше.
Когда мы говорим о спокойных и минималистичных цветах, мы имеем в виду палитру мягких, приглушённых оттенков, таких как пастельные тона, серый и земляные цвета. Эти цвета часто используются вместе с простой, чистой эстетикой дизайна, что создаёт ощущение спокойствия и умиротворения на сайте.
Итак, почему вы можете рассмотреть использование спокойных и минималистичных цветов в веб-дизайне? Во-первых, они помогают создать более утончённый и вневременной вид, что особенно важно для брендов, желающих передать ощущение элегантности и изысканности. Эти цвета помогают уменьшить визуальную перегруженность и создать более спокойный пользовательский опыт, что может быть особенно ценно для сайтов, работающих с чувствительными или эмоциональными темами.
Но, как и с любым дизайнерским трендом, здесь есть свои подводные камни. Например, легко попасть в ловушку создания сайта, который слишком стерилен или монохромен, что может сделать его холодным и неприветливым. Именно поэтому важно использовать минималистичную цветовую палитру в сочетании с другими элементами дизайна, такими как типографика, изображения и пустое пространство, чтобы создать сбалансированный и вовлекающий пользовательский опыт.
MUJI известен своей чистой и простой эстетикой, и его сайт не исключение. На сайте представлена успокаивающая цветовая палитра приглушённых серых, белых и земляных тонов, которая создаёт ощущение спокойствия и умиротворения. Цвета используются экономно, с обилием пустого пространства для создания чистого и незагромождённого вида.
Сайт MUJI также разработан с акцентом на функциональность. Навигация интуитивно понятна, а страницы товаров чисты. Многим сайтам стоило бы обратить на это внимание!
Как вы знаете, наша планета является домом для огромного разнообразия захватывающих пейзажей и разнообразных экосистем, и использование природных цветов в веб-дизайне может помочь передать часть этой красоты и оживить её на экране.
Коричневые, зелёные, синие и жёлтые тона. Эти цвета часто используются вместе с органическими формами и текстурами, такими как текстура дерева или листва, чтобы создать ощущение связи с миром природы.
Земляные и природные цвета помогают создать более аутентичное и органичное впечатление, что может быть особенно ценно для брендов, желающих передать ощущение устойчивости, здоровья или экологичности. Эти цвета также способствуют созданию спокойного пользовательского опыта, что особенно ценно для сайтов, посвящённых здоровью, осознанности или активному отдыху на природе.
Однако легко переусердствовать с природными элементами и создать сайт, который кажется слишком перегруженным или загромождённым. Именно поэтому земляные цвета стоит сочетать с другими элементами дизайна, такими как типографика, пустое пространство и изображения, чтобы создать сбалансированную картину.
Patagonia, компания по производству одежды и снаряжения для активного отдыха, — фантастический пример использования земляных цветов в веб-дизайне. Их сайт представляет палитру приглушённых зелёных, синих и коричневых тонов, напоминающих природные ландшафты, которые они стремятся защитить.
Одна вещь, которую мы особенно ценим в использовании Patagonia земляных и природных цветов, — это то, насколько хорошо они сочетаются с их типографикой и макетом. По сайту легко ориентироваться, а типографика чёткая и разборчивая, что помогает создать ощущение баланса и иерархии на странице.
Монохромная цветовая схема предполагает использование различных оттенков и тонов одного цвета, например, различных оттенков синего, зелёного или серого. Такой подход создаёт ощущение гармонии и единства на странице, при этом позволяя уделить больше внимания типографике, изображениям и другим элементам дизайна.
Монохромная цветовая схема — отличный способ создать современную эстетику, которая ощущается продуманной. Она также может упростить процесс проектирования, ограничив ваш выбор цветов и позволив вам сосредоточиться на других элементах дизайна.
Будьте осторожны с монохромным дизайном, который кажется слишком плоским или лишённым контраста. Именно поэтому важно экспериментировать с различными оттенками и тонами выбранного цвета, а также включать другие элементы дизайна, такие как текстуры или паттерны, чтобы создать визуальный интерес.
Один из отличных примеров монохромных цветов в веб-дизайне — сайт люксового модного бренда Chanel. На сайте представлена классическая чёрно-белая цветовая схема, которая создаёт ощущение изысканности и вневременности.
Использование монохромной цветовой схемы позволяет продуктам бренда быть в центре внимания, а также создаёт незагромождённый пользовательский опыт.
Когда мы думаем о ретро и винтажных цветах, мы можем представить себе психоделические оттенки 60-х или приглушённые тона 70-х. Эти цвета могут вызывать чувство ностальгии и добавлять нотку индивидуальности веб-дизайну. Но знаете ли вы, что за привлекательностью этих цветов стоит настоящая наука?
Психология цвета говорит нам, что цвета могут вызывать у людей определённые эмоции и чувства. Ретро-цвета, такие как оранжевый, коричневый и оливково-зелёный, могут создавать ощущение тепла и комфорта, в то время как винтажные цвета, такие как пастельный розовый и голубой, могут создавать ощущение мягкости и ностальгии. Включая эти цвета в веб-дизайн, мы можем создать более располагающий и вовлекающий опыт для пользователей.
Но дело не просто в том, чтобы разбросать несколько ретро-цветов по сайту и на этом закончить. Важно использовать эти цвета так, чтобы они дополняли общий дизайн и идентичность бренда. Сочетая ретро-цвета с современными элементами дизайна, мы можем создать уникальную и визуально привлекательную эстетику, которая выделяется из толпы.
Хотите ли вы добавить нотку этого на свой сайт или просто хотите поэкспериментировать с некоторыми классными цветами, не бойтесь погрузиться в мир ретро и винтажных цветов в веб-дизайне. Кто знает, может, вы создадите что-то по-настоящему потрясающее!
Фантастический пример сайта, использующего ретро и винтажные цвета в веб-дизайне, — это сайт калифорнийской компании Stutterheim.
Сайт использует приглушённую цветовую схему с оттенками бледно-зелёного, синего и серого, чтобы создать спокойную и ностальгическую атмосферу. Эти цвета прекрасно дополняют идентичность бренда как производителя качественной дождевой одежды с акцентом на устойчивость и простоту.
Когда дело доходит до выбора цветов для вашего проекта, нужно учитывать несколько вещей. Прежде всего, вам нужно рассмотреть цель вашего проекта. Вы разрабатываете сайт для юридической фирмы или для пекарни? Выбираемые вами цвета будут сильно отличаться в зависимости от отрасли.
Далее подумайте о своей целевой аудитории. Кого вы пытаетесь охватить своим проектом? Они молоды и модны или более зрелые и утончённые? Выбираемые вами цвета должны привлекать вашу целевую аудиторию и отражать её предпочтения.
Разные отрасли часто имеют свои собственные цветовые палитры, которые ассоциируются с ними. Например, отрасль здравоохранения часто использует синие и зелёные тона, чтобы передать ощущение спокойствия и доверия. С другой стороны, индустрия еды и напитков часто использует красные и жёлтые тона, чтобы создать ощущение волнения и голода.
Мы могли бы перечислить очень много, но в этом мало смысла. Вот единственный, который вам может понадобиться: paletton.com. Это самый простой и эффективный инструмент для разработки цветовых схем, который вам может понадобиться. У него также есть готовые варианты цветовых сочетаний, о которых мы говорили ранее!
Мало? Хорошо, вот ещё несколько.
Вы также можете попробовать Adobe Color. Он очень настраиваемый, и если есть компания, которая много знает о цвете в веб-дизайне, то это Adobe. Не являюсь поклонником ценовой стратегии большинства подобных инструментов, но этот бесплатный! Настоящая редкость.
Ещё один вариант — colormind.io. Этот инструмент основан на ИИ, то есть он обучен на большом объёме данных, чтобы предлагать наилучшие возможные цветовые сочетания. Просто укажите исходный цвет, с которого хотите начать, и всё остальное он сделает за вас.
Наконец, вы можете попробовать Palx. Очень простой, но при этом даже более удобный для веб-дизайнеров, чем Paletton.
За последними новостями в мире веб-дизайна и UX следите на UX Collective. Это не строго ориентированное на цвет сообщество, но вы узнаете много интересного о влиянии цвета на пользователей.
И снова вернёмся к нам! Directual предлагает множество вариантов настройки, где вы можете применить свои новые навыки подбора цвета.
Чтобы настроить веб-страницу или выбрать шаблон для вашего проекта Directual, всё, что вам нужно сделать, — это перейти в раздел Web pages, нажать Edit portal settings и выбрать Appearance.
Во вкладке Appearance есть целый набор готовых шаблонов, которые вы можете использовать, при этом каждый элемент настраивается. Также есть тёмные и светлые темы на выбор, если вы хотите быстрый старт.
Обратите внимание: используемая иконка/логотип должны быть адаптированы к цветовой схеме вручную, так как это отдельное изображение. Здравый смысл, но стоит упомянуть.
Вы также можете настроить шаблоны как угодно. Для этого просто нажмите Customize theme, и у вас появятся все опции для каждого элемента. Видите шестнадцатеричные коды для каждого элемента? Перейдите к одному из инструментов подбора цвета выше, подготовьте цветовую схему на основе желаемого дизайна и скопируйте её.
Вы также можете сохранить цветовую схему и использовать её в других проектах. Это можно сделать, нажав кнопку Raw mode и скопировав код JSON. Сохраните её для других проектов и поделитесь с коллегами или друзьями — мир открыт для вас.
Если вы хотите узнать больше о конструкторе веб-страниц Directual и о том, как он работает, у нас есть полное пошаговое руководство (это один из уроков no-code академии) по каждому его элементу, включая упомянутую выше тему.
Теперь, когда вы знаете, как использовать JSON для копирования и обмена цветовыми схемами, мы хотим поделиться с вами парой эксклюзивных цветовых схем.
Как вам? Выглядит здорово! Живые демо: Bondi beach и Rosso Corsa
Это цветовая схема, используемая Ferrari, поистине эффектное сочетание, одновременно элегантное и смелое. Хотите попробовать её в своём проекте? Вот код:
Этот величественный тёмно-синий цвет назван в честь оттенка синего, который можно встретить в воде на пляжах Бонди в Австралии. Почему бы не сделать эту цветовую схему настоящим праздничным лакомством, добавив немного песочно-жёлтого и пышного пальмово-зелёного?
Ещё много цветовых схем впереди, а может, вы создадите свою собственную, чтобы пользователи Directual могли её увидеть и, возможно, приобрести?
От выбора правильных цветовых схем до использования лучших инструментов для подбора цвета — нужно учесть множество факторов. Прежде всего, вы всегда должны быть уверены в самой сути того, что ваш продукт пытается передать. Он спокойный, утешающий или какой-то другой? Отталкиваясь от этого, вы можете начать подбирать цвета, которые будут работать лучше всего.
Сделать это ещё проще, когда вы создаёте свой проект без кода. Набор готовых шаблонов Directual поможет вам быстро начать свой проект и создать красивый дизайн для идентичности и сообщения вашего бренда. Вам не нужно быть экспертом в дизайне, чтобы создать профессионально выглядящий веб-проект или приложение.
Хотите узнать больше о том, как это делается с Directual? Напишите нам на hello@directual.com, или, ещё лучше, присоединяйтесь к нашим сообществам в Facebook, Discord и Telegram — ссылки в футере ниже.
