Один из главных вопросов в веб-дизайне был и остается вопрос выбора цветовой палитры сайта. Некоторые предлагают колористику в уже разработанном фирменном стиле, на основании которого можно разработать цветовое решение для конкретного сайта. В большинстве случаев, если сайт разрабатывается с нуля, заказчик порой не может выбрать цветовую гамму, в которой можно выполнить сайт. В этой статье мы поговорим о том, какие цвета выбрать при разработке сайта, чтобы и волки были сыты, и овцы целы.
Как цвет сайта может повлиять на конверсии и продажи
Обычному человеку требуется около 90 секунд, чтобы сформировать позитивное или негативное отношение к вашему сайт. Согласно исследованию, проведенному Университетом Виннипега в Канаде, до 90% оценок человека относительно вашего сайта основаны только на его цветовой гамме.
Для владельцев интернет-магазинов будет интересен следующий факт: почти 90% покупателей указывают цвет в качестве основы для большинства решений о покупке товара.
КАК Я СОЗДАЮ ЦВЕТОВУЮ ПАЛИТРУ ДЛЯ САЙТОВ
Цвет также помогает людям узнать ваш бренд в 80% случаев.
Как выбрать цветовые комбинации для сайта
Копировать чужое — не хорошо, это знают все. Однако первое, что вы должны сделать, это поискать в Интернете компании, чья деятельность схожа с вашей. Изучите их сайты и постарайтесь определить, почему организации выбрали именно эти цвета. Обратите внимание на графику, созданную Material UI, которая демонстрирует цвета, используемые топовыми сайтами со всего мира: Вы можете черпать вдохновение на этих сайтах, но знание того, почему компании выбрали соответствующие цвета, поможет вам больше, чем бездумное копирование.
Цветовое колесо
Чтобы понять концепцию цветовых комбинаций, предлагаем вам обратиться к цветовому колесу. Оно поможет вам понять соотношение цветов друг с другом и создавать сногсшибательные комбинации цветов для сайтов. Вот несколько способов использования цветового круга для достижения наилучших результатов.
Комплиментарные цвета
Соответствие вашего основного цвета дополнительному может сделать ваш сайт более приятным для глаз. Как только вы выбрали понравившийся цвет, просто нарисуйте прямую линию через цветовое колесо на другую сторону:
Аналогичные цвета
Эта цветовая схема предполагает выбор цвета на колесе, который находится непосредственно рядом с выбранным вами цветом. Например, если ваш основной цвет — синий, выбор сине-фиолетового и сине-зеленого придаст вашему сайту глубину и нюансы.
Триада цвета
С помощью этой схемы вы рисуете равносторонний треугольник, одной из вершин которого является понравившийся вам цвет. Две другие вершины указывают на цвета, используемые в качестве акцентов.
Как выбрать цвета для сайта. Подбора палитры сайта, веб-дизайн
Тетрада цвета
В этом случае один цвет выполняет роль основного, два — дополняющие, а четвертый — акцентный.
Квадрат
Это сочетание цветов, которые равноудалены друг от друга и от центра.
10 лучших цветов для высокой конверсии
1. Белый.Этот цвет имеет решающее значение для отображения текста с правильной контрастностью, чтобы сделать слова, предложения и абзацы вашего сайта более четкими и удобными для чтения. Но стоит помнить, что слишком много белого цвета может придать вашему сайту странный и недружелюбный вид.
Например, Skype активно использует пустое белое пространство, чтобы привлечь внимание к заголовкам, изображениям и основным СТА-элементам синего цвета. 
2. Синий.Синий цвет и его оттенки используются многими веб-сайтами: Facebook, Twitter, LinkedIn, Skype, Dropbox, WordPress.
Для этого есть веская причина: синий и его оттенки располагают человека к общению. Это цвет интеллекта. Обычно он встречается в корпоративном бизнесе из-за его способности вызывать чувство безопасности, комфорта и доверия. 
3. Черный.
Вы можете подумать, что черный ассоциируется с тьмой и холодом, и в каком-то смысле вы будете правы. Но черный цвет, грамотно используемый в веб-дизайне, также может представлять изысканность, гламур, эффективность. Вы заметили, что черный цвет широко используется такими мощными и роскошными брендами, как Mercedes-Benz, Under Armour, Loreal, Rolls Royce?
4. Серый.Этот цвет, представляющий силу, мощь и авторитет, создает превосходные оттенки, которые сочетаются с большинством цветов.
5. Красный.Красный цвет ассоциируется с силой, мощью и скоростью. Он пробуждает и заставляет действовать. Он активно используется теми компаниями, которые полагаются на импульсивных покупателей. Также он используется, чтобы создать чувство срочности и привлечь внимание — именно поэтому его часто используют в акциях и распродажах.
Избыток красного может быть ярким пятном, неприятным глазу, но из него получается отличный акцентный цвет, который придаст вашему сайту жизнь. Обратите внимание, как Toyota использует красный в своем логотипе и для демонстрации одного из автомобилей.
6. Желтый.Цвет солнца также вызывает оптимизм и уверенность, креативность. Но слишком много желтого может отвлекать. Поэтому используйте его в качестве акцентного цвета.
7. Оранжевый.Оранжевый цвет дарит посетителям сайта чувство комфорта и тепла. Он также заставляет людей действовать, и поэтому отлично подходит для мощных СТА-элементов, которые подталкивают посетителей на подписку или покупку. Nickelodeon — отличный пример того, как можно использовать оранжевый цвет, чтобы создать волнение и побудить к действию.
8. Коричневый.Существует очень мало сайтов, интенсивно использующих коричневый цвет. Используйте этот цвет аккуратно: проведите сплит-тестирование, которое покажет, подходит ли эта цветовая схема для вашей организации.
9. Пурпурный.Этот цвет часто используется для продвижения антивозрастных товаров из-за его успокаивающего действия. Он прочно ассоциируется с королевской роскошью, богатством и успехом.
10. Зеленый.Этот цвет помогает людям чувствовать себя гармонично и сбалансированно. Это цвет равновесия, мира и понимания окружающей среды. Если ваша компания занимается сельским хозяйством, ваша деятельность связана с экологией, то он может стать вашим основным цветом. Сайт компании «ВкусВилл» — отличный пример того, как можно искусно сочетать зеленый и белый цвет, добиваясь отличного эффекта:
Совет: чтобы помочь вам выбрать наилучшую цветовую схему для веб-сайта, используйте Color Calculator. Инструмент позволяет легко определить правильные основные, дополнительные, аналогичные, триады и другие сочетания цветов.
Заключение
Выбор наилучшей цветовой схемы для вашего сайта — не простое решение, которое нужно воспринимать легкомысленно. Если вы потратите на решение этого вопроса достаточно времени, вы получите потрясающий результат. Правильно выбранная цветовая палитра и комбинация цветов поможет создать не только внешне привлекательный сайт, но и уменьшить показатель отказов, повысить конверсию и траффик. Используйте инструменты для выбора цвета, экспериментируйте с различными цветовыми схемами, пока не найдете ту, которая сделает ваш сайт действительно привлекательным.
Источник: pear-advert.ru
119 трендовых цветов для создания фантастических сайтов (на 50 живых примерах).
Вам знакома эта проблема? Вы хотите создать сайт, но понятия не имеете, какой цвет подобрать и как лучше сочетать цвета? Пробуете, что-то делать, но в итоге получается какая-то «абра-кадабра»? Хорошая новость! Благодаря этой статье Вы получите мощный и готовый инструмент по подбору цветов.
Это действительно достойно Вашего внимания.
Я покажу Вам 50 реальных примеров, которые выглядят на отлично. Благодаря этому Вы не только сэкономите своё время при подборе цветов, но и будете создавать более качественные и классные сайты. Правда здорово? Это статья будет полезна для тех кто любит простые решения.
НО! Не забывайте, что цвета должны подбираться исходя из задач и целей проекта. Не все цвета могут Вам подойти. Тем не менее Вам стоит уделить время этой статье, потому, что это расширит Ваш кругозор. Можете смело их использовать, ибо в мире нет ничего по настоящему нового.
Не буду тянуть резину. Давайте начнем.
Понравилось? Поделитесь с друзьями в социальных сетях нажав на кнопки ниже. Хотя бы на одну.
Один маленький клик для Вас — огромная радость для меня.
Источник: vladimirchernyshov.ru
Подбор цветового решения для веб-сайта
Привет! Что важно иметь ввиду при проектировании web-сайта? Визуальная составляющая сайта не менее важна, чем информация или движок на котором будет работать сайт. Конечно, главная роль, в большинстве случаев, отводится наполнению веб-сайта контентом, но многие забывают, что грамотно подобранная цветовая схема является важнейшим компонентом сайта.
Как я уже рассказывала в предыдущих постах цветовая схема должна быть составлена правильно, именно она позволит удержать посетителя на вашем ресурсе. Как подобрать цветовую гамму для сайта? Какую цветовую схему выбрать? Какими инструментами можно воспользоваться для подбора цвета? Об этом читайте ниже.
Цвет часто влияет на настроение и самочувствие человека, некоторые цветовые решения могут как понравится посетителям, так и отпугнуть их. Любой сайт всегда направлен на определенную аудиторию, у которой есть свои предпочтения, касаемо определенных цветов. Большую роль в создании сайта играет восприятие человеком цвета.
Восприятие зависит от нескольких факторов:
- Восприятие сайта целиком
- Психологическое и физиологическое состояние посетителя
- Форма элементов дизайна
- Как выглядят мелкие детали
- Как читается информация
Для детей цвета должны быть яркими, теплыми и красочными, для людей среднего возраста характерны цвета средней насыщенности, более холодные и смешанные, для людей старшего возраста чаще всего используются пастельные, мягкие тона. Что бы узнать какую цветовую гамму выбрать для сайта, нужно провести анализ и статистику ваших посетителей.
Советы по использованию цветов для сайта:
1. Цвета должны соответствовать теме сайта и гармонировать между собой;
2. Выбранные цвета должны отвечать правилам логики ;
3. Цветовой тон и насыщенность должны соответствовать фирменному стилю ;
4. Количество цветов на сайте должно быть около 3-х ;
5. Подбирать цвет нужно с учетом возрастной категории посетителей;
6. Правильно выбрать цвет шрифта , подробнее о шрифтах читайте тут.
Многие начинающие веб-дизайнеры допускают ошибки при создании дизайна для сайта, самая большая ошибка это неправильно подобранный цвет . Чаще всего новички используют яркие цвета, которые режут глаз, даже иногда не важно для какой фирмы создается макет.
Яркие цвета, конечно, не всегда плохо, но они должны быть в меру контрастными, например, если такие цвета использовать для развлекательных сайтов, или каких-либо промо-сайтов, рекламу и прочее, тут вопросов нет.
Давайте рассмотрим несколько факторов, которые влияют на понимание и грамотно составленных цветовых схем.
Понятие и значение цвета:
Перед тем как приступать к разработке макета для сайта, следует изучить теорию цвета, значение цветов и как использовать цвета. Понятие «цвет» применяется для обозначения цветового пигмента.
К первичным цветам относятся: синий, красный и желтый.
Ко вторичным цветам , которые получаются при смешивании, относятся: оранжевый, зеленый и фиолетовый.
Третичные цвета образуются смешиванием первичных и вторичных цветов: оттенки сине-зеленого, красно-оранжевого и т.д.
RGB (от сокр. Red+Green+Blue) — составлена из красного, синего и зеленого цветов, которые при смешении даю белый цвет.
CMYK (от сокр. Cayn+Magenta+Yellow+Key) — при смешивании голубого, пурпурного и желтого образуют черный цвет.
Гармоничные и не гармоничные цвета:
Каждый человек воспринимает цвета по своему. Следует помнить, что у каждого цвета есть свое символическое значение, с которым, возможно, связаны наши эмоции. Знание психологии цветов очень важно, а еще важно чтобы цвет радовал глаз.
Гармонирующие цвета — цвета которые находятся рядом друг с другом, например, розовый с красным, желтый с оранжевым, и тд, так же могут гармонировать любые другие цвета, если они не сильно контрастны.
Не гармонирующие цвета — цвета которые совершенно не сочетаются друг с другом, например, синий и желтый, зеленый и красный.
Основные цвета . Они отвечают за само меню, кнопки, блоки, подвал.
Второстепенные цвета . Цвета, которые отвечают за границы меню, блоков, цвета текстов, ссылок и прочих элементов дизайна.
Цветовые решения для сайтов:
Новостные сайты. На них преобладают простые и строгие цвета, в большинстве черный, белый, серый. На таких ресурсах в первую очередь важен контент, поэтому дизайна там по минимуму.
Развлекательные сайты. Преобладают яркие цветовые решения и более сложные схемы оформления.
Социальные сети. Имеют простое оформление, чаще всего не больше 2-3 цветов, так как они должны быть в первую очередь простыми и удобными для посетителей.
Форумы. Так же как и социальные сети имеют простой, не замысловатый дизайн, цветовые решения для создания дизайна для форума берутся исходя из тематики форума.
Интернет-магазины. Такие сайты обычно сделаны в цветном варианте, в котором используется иногда более 3-х цветов. Такой сайт может иметь красочные элементы, но они должны строго соответствовать товару, который в нем продается.
Промо-сайт. Пожалуй, такие сайты самые красивые и яркие, в общем так и должно быть. На странице промо-сайта, обычно располагается один или несколько продуктов поэтому в дизайне можно использовать яркое оформление.
Бизнес-сайт. Тут все просто, никаких ярких цветов,спокойные, нейтральные тона, все строго и по-деловому оформлено.
Сервисы для составления цветовой схемы сайта
Составлять цветовую схему это увлекательное занятие, но зачастую — сложное. Даже у мастеров своего дела бывают ошибки. Чтобы их избежать, можно воспользоваться сервисами, которые предназначены для решения задач по подбору цвета.
Вот небольшой список сервисов по подбору цветов. С помощью данных сервисов можно найти оптимальное цветовое решение.
У каждого дизайнера есть свой вкус , создавая макет сайта можно без особых усилий подобрать цвета . Если вы понятия не имеет как должен выглядеть сайт, который просит сделать заказчик, доверьтесь своей интуиции, или поищите варианты оформления в сети интернет.
Позаботьтесь о правильно подобранных цветах для шрифтов , чтобы они сочетались с цветами разрабатываемого вами макета, текст должен читаться легко.
Дизайн должен быть на всех страницах одинаковый. Если на каждой странице будет своя цветовая схема, то это может ввести в заблуждение пользователя и он покинет сайт.
Ссылки по теме
- Купить Adobe PhotoShop CS6 в ITShop
- Купить программу CorelDRAW Graphics Suite X6
- Акция Adobe для предприятий малого бизнеса Москвы
- Aкция от Adobe. Видеомонтаж по твоим правилам.
- Специальная акция от Corel скидка 25% при покупке лицензий CorelDRAW
| 11.2012 | ||
|
Источник: www.interface.ru |
||