Як вибрати гарну колірну схему для свого веб-сайту

як вибрати колір для веб-сайтуВибір хорошої кольорової гами для вашого веб-сайту може бути страшною справою, особливо якщо ви’не впевнені у своїх здатностях до координації кольорів або відчуваєте, що ви’ти не кваліфікований дизайнер.


Мій чоловік злегка сліпий, що робить його дуже нервовим, коли він намагається вибрати колір для чого завгодно!

Що з тобою?

  1. Який колір слід використовувати для логотипу чи заголовка?
  2. Чи знаєте ви, як підібрати допоміжні кольори, які добре поєднуються?
  3. У якій частині вашого веб-сайту слід використовувати колір?

Підбір і змішування кольору може бути хитрою грою.

Результат може виглядати гармонійно, або як сцена прямо з фільму жахів!

Якщо ви уникаєте будь-яких кольорів, ваш веб-сайт може виглядати натхненно і незабутнім. Якщо ви використовуєте занадто багато кольорів на своєму веб-сайті, ви ризикуєте зробити його клейким.

Окрім того, що не розуміти, як правильно вибрати дизайн шаблону, навчитися використовувати колір на своєму веб-сайті – одна з найбільших проблем, з якою може зіткнутися власник веб-сайту. Особливо це стосується, якщо ви не робите’не мати природну здатність до кольору та дизайну.

Якщо ви малюєте бланк про те, як і як правильно використовувати колір на своєму веб-сайті, ця публікація може вам допомогти.

Використання кольору можна спростити, як тільки ви дізнаєтеся, як правильно вжити заходів.

Отже, ми’я поклав цей посібник разом, щоб показати вам, крок за кроком, як:

  1. Виберіть правильний домінуючий колір для вашого веб-сайту та бренду.
  2. Комбінуйте додаткові кольори, щоб створити свою ідеальну колірну гаму.
  3. Виберіть колір фону, який підходить вам.
  4. Використовуйте кольори в потрібних місцях вашого веб-сайту – як професіонал.

Дозволяє’s почати!

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

Contents

Як колір може покращити ваш веб-сайт та бренд

Коли я прошу вас подумати про Кока-Колу, це перше, що стрибає вам у голові?

Що ж, бажати крижаної пляшки Coca-Cola може бути одним із них.

Тоді вам може прийти зображення знакового логотипу червоного коксу.

як вибрати колір веб-сайту - коксДжерело: www.coca-colacompany.com

Це’s досить важко придумати Coca-Cola, не бачачи червоного кольору. Червоний колір є стільки ж частиною кока-коли, як і його знаменита сода.

Чи знаєте ви рішення Coca-Cola використовувати червоний колір, оскільки їхній колір марки не був випадковим?

Червоний колір служить двом критичним цілям:

№1 Пожежна машина червоного кольору дозволяє Coca-Cola виділятися від своїх конкурентів на прилавках магазинів; і

№2 Кожен колір має різні почуття чи емоції, прикріплені до нього. Коли люди бачать колір червоний, він викликає такі емоційні реакції, як хвилювання, сміливість, любов та пристрасть. Це саме ті почуття, які Кока-Кола хоче, щоб ви асоціювали її соду.

Вибір кольорів на веб-сайті - кока-колаДжерело: us.coca-cola.com

Коли ви підбираєте потрібний колір для свого веб-сайту, ви робите набагато більше, ніж просто робите його привабливим – Ви створюєте пам’ятний бренд.

85% покупці розміщують колір як основну причину того, чому вони купують певний товар. 80% збільшується розпізнаваність бренду при використанні кольору. Розпізнавання бренда безпосередньо пов’язує з довірою споживачів.

Джерело: Кісметрія

Поки що, ви повинні думати “Вау, колір – це як магія! Чому ні’t більше людей, які використовують це на свою користь?”

Ну, тому що більшість людей дон’не знаю, як.

Отже, у наступному розділі ми покажемо 3 простих кроки, які ви можете виконати, щоб почати використовувати колір на вашу користь на своєму веб-сайті.

3 кроки до використання кольору на вашому веб-сайті – правильний шлях

Є три основні кольори, які потрібно враховувати при розробці веб-сайту:

  1. Вибір домінуючого кольору як кольору вашої марки
  2. Вибір від 1 до 2 кольорів акценту для створення кольорової гами для вашого веб-сайту
  3. Вибір кольору фону для завершення вашого дизайну

Це’s в значній мірі це! Дон’хвилюйтесь, ми’Я покажу вам, як їх вибрати разом із деякими прикладами – нехай’s продовжуйте рухатися вперед!

№1 Виберіть свій домінуючий колір

Домінуючим кольором є колір вашого бренду – як червоний пожежна машина для Coca-Cola.

Цей колір допоможе виявити певні емоції чи почуття, коли люди приходять на ваш веб-сайт – так само, як пристрасть, хвилювання, сміливість та любов до коксу.

Це той колір, який ви хочете, щоб ваша аудиторія запам’ятала, коли думає про вас.

Якщо у вас вже є логотип, переконайтеся, що в одному з основних кольорів вашого логотипу використовується ваш домінуючий колір (якщо ви є)’переконайтесь, як створити хороший логотип, дивіться це керівництво).

Однак, якщо ви’не маю на увазі домінуючого кольору бренду, тут’s як вибрати один:

Значення кольорів: як правильно вибрати для вас колір

Великі компанії не роблять’не підбирайте їх домінуючі / брендові кольори випадково. Це’s стратегічно вибрані для використання у рамках їхніх брендингових та маркетингових ініціатив.

Різні кольори здатні залучати конкретні типи покупців, і навіть можуть змінювати поведінку споживачів.

психологія кольору для веб-сайтівКлацніть для збільшення

Джерело: Кісметрія

Ви також можете використовувати різні кольори на вашу користь, щоб ви могли залучити тип клієнта, якого ви хочете.

Ми’я створив зручну інфографіку, яка допоможе вам вибрати ідеальний домінуючий колір. Подивіться, чи зможете ви знайти колір, який найкраще відображає те, за що ви виступаєте!

індивідуальність кольору для веб-сайтів

Тепер ви маєте гарне уявлення про те, що означають певні кольори, який найкраще відповідає вашому бізнесу або як ви хочете, щоб відчували себе відвідувачі вашого веб-сайту, коли вони бачать ваш бренд.?

Якщо ви’Ви ще не зовсім впевнені, що це означає, що вам знадобиться трохи часу, щоб задуматися про ваш бренд та тип клієнтів, яких ви хочете залучити.

Ви намагаєтесь залучити молодих, енергійніших клієнтів? Або витончені особи з більшим наявним доходом? Ваші товари / послуги обслуговуються чоловіками чи жінками? Чи більше вони підходять для певної вікової групи?

Не всі кольори підходять для вашого бізнесу. Наприклад, якщо ви продаєте килимки для йоги, використання фіолетового (багатство, роялті) або чорного (влада, розкіш) може бути не найкращим вибором. Ви можете розглянути можливість використання зеленого (здоров’я, спокій), сірого (простота, спокій), синього (мир, спокій) або навіть червоного (пристрасть, енергія).

Продовжуйте кілька хвилин, щоб записати деякі ідеї.

Відмінності між хлопцями & Дівчата – їх кольорові переваги

Гаразд, різні кольори подобаються різним типам людей, але чи знали ви, що чоловіки та жінки, як правило, також віддають перевагу різним кольорам?

На яку стать орієнтується ваш бізнес чи веб-сайт? – Це жінки? чоловіки? або обидва?

кольоровий вплив на статьКлацніть для збільшення зображення

Джерело: Інфографіка: Як кольори впливають на перетворення & Стать та колір

Ви можете створити дуже потужний та орієнтований колір бренду, вивчивши таблицю вище.

Використовуючи поєднання кольорів, яким віддають перевагу чоловіки, жінки або обидва, ви можете змінити їхнє сприйняття вашого бренду – підсвідомо.

Наприклад, на основі досліджень, ви бачите, що і чоловікам, і жінкам подобається синій і зелений. Обидва статі також не люблять помаранчевий і коричневий. Отже, якщо ви орієнтовані на обидва статі, дослідження стверджує, що було б вигідніше розглянути можливість використання синього або зеленого в якості домінуючого кольору (або принаймні акцентного кольору – докладніше нижче).

Це корисна розвідка!

Дозволяє’s зроби це на крок далі.

На те, як ви використовуєте колір для свого бренду або товарів / послуг, також може впливати те, на які емоції звертається ваша цільова аудиторія.

Дозволь пояснити.

колір-бренд-залучення-різний-замовникБагато разів люди купують конкретні товари / послуги, оскільки вони підсвідомо хочуть спроектувати певну особистість на інших.

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

Ви розумієте мою думку? Дуже багато особистих рішень – це відображення того, хто вони відчувають, і що вони хочуть бачити інші. Це’s особистість, з якою люди асоціюються, і хочуть, щоб інші про неї знали.

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

Дістань?

Виділіть кілька хвилин і подумайте про свою ідеальну аудиторію та те, з чим вони прагнуть ототожнюватися. Що вони хочуть і як хочуть, щоб їх бачили?

Тут багато психології, але це’Ви важливо враховувати при створенні свого бренду.

Як використовувати свій домінуючий колір на своєму веб-сайті

Тепер, коли у вас є домінуючий колір, ви хочете використовувати колір у потрібних місцях на своєму веб-сайті.

Колір привертає до себе багато уваги, тож ви робите’не хочу вставити його скрізь.

Ось’s загальне правило:

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

В основному, ваш домінуючий колір повинен “поп” – дійсно підкреслюючи, на якому ви хочете зосередитися на ваших відвідувачах.

де використовувати домінуючий колір на веб-сайтіДжерело: Wix.com

№2 Виберіть кольори акценту

Досить нудно мати всього 1 один колір на всьому веб-сайті.

Щоб зробити ваш дизайн більш цікавим (і професійним), вам потрібні акцентні кольори, щоб підкреслити достойні уваги частини вашого веб-сайту, наприклад, цитати, кнопки чи субтитри.

Змішування та відповідність кольорів насправді лякає багатьох людей через це’s не завжди легко та інтуїтивно зрозуміти, які кольори добре поєднуються між собою, не розуміючи теорії кольорів, а також багато спроб та помилок.

Але, хто встигає отримати ступінь доктора філософії. в теорії кольорів ?! – Не я.

Слава Богу, є ярлик, яким можуть користуватися всі !! Це’s інструмент відповідності кольорів, який може допомогти вам поєднувати кольори, як професіонал!

Як використовувати інструмент відповідності кольорів, щоб допомогти вам вибрати кольори акценту

Як тільки у вас є домінуючий колір, він’s дуже легко знайти свої акцентові кольори за допомогою інструментів відповідності кольорів, таких як інструмент Adobe Color CC.

Adobe Color CC виглядає складно, але насправді це досить простий інструмент у використанні.

Ми’Ви створили короткий підручник, щоб показати вам, як використовувати його для створення вашої кольорової гами одним із двох способів:

(Клацніть нижче, щоб відкрити підручник)

Як використовувати акцентні кольори на своєму веб-сайті

Тепер, коли у вас є додаткові кольори акцентів, ви можете використовувати їх для виділення вторинної інформації на своїх веб-сторінках.

Це вміст / елементи, які не є основними фокусними пунктами вашої сторінки, але ви все ще хочете, щоб вони виділялися.

Наприклад, це можуть бути підзаголовки, додаткові кнопки, інформаційні поля, колір тла тощо.

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

де використовувати акцентний колір на своєму веб-сайтіДжерело: Wix.com

№3 Виберіть колір тла веб-сайту

Як вибрати колір тла веб-сайтуВи коли-небудь раніше малювали будинок?

Якщо у вас є, то, напевно, ви будете мати певний досвід з підбору кольору стін – і ви будете знати, що вибрати правильний колір стіни може бути проблемою.

Ви хочете, щоб колір стін зробив кімнату комфортною. Колір повинен бути достатньо заспокійливим, щоб ви могли проводити години в кімнаті, не переймаючи вас кольором.

У той же час, ви дон’не хочу, щоб колір був настільки нудним, щоб кімната відчувала себе повністю стерильною.

Вибір фонового кольору насправді дуже схожий на вибір кольору настінної фарби!

Ви хочете, щоб відвідувачі вашого веб-сайту почували себе комфортно під час перегляду вашого веб-сайту. Ви дон’не хочете дратувати своїх відвідувачів або зробити складним поглинати ваш вміст, використовуючи надмірно сміливі або яскраві кольори фону. У той же час, ви дон’не хочу, щоб ваш веб-сайт був настільки благ, що ваша аудиторія’s очі просто засклили будь-які важливі речі, які ви хочете сказати.

Як правильно вибрати колір тла?

Якби ви підбирали кольори стін для модного роздрібного магазину та дачі, ви вибрали б для них однакові кольори?

Мабуть, не тому, що кожен простір служить різному призначенню, тож обраний вами колір повинен бути різним.

Наприклад, у роздрібній крамниці одягу, можливо, ви хочете використовувати сміливі кольори, щоб намалювати покупців до стійок одягу. Ви хочете, щоб колір стін контрастував з товарними полками, щоб покупці могли миттєво знати, де їх шукати, коли вони заходять у магазин.

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

Дуже подібним чином колір фону вашого веб-сайту залежить від того, на що ви хочете зосередитись на своїх відвідувачах.

Простіше кажучи, колір, який ви вибрали як колір тла, повністю залежить від призначення вашого веб-сайту.

Тип №1 – Веб-сайти, що містять інтенсивну інформацію & Веб-сайти електронної комерції

Ви коли-небудь помічали, що більшість інформаційних веб-сайтів або веб-сайтів електронної комерції зазвичай використовують білий або нейтральний колір фону?

Веб-сайт електронної комерціїВеб-сайт електронної комерції (drinkoma.com)

Веб-сайт електронної комерціїВеб-сайт електронної комерції (stikwood.com)

Блог про їжуБлог про їжу (pinchofyum.com)

Кінопродукційна компаніяКіновиробнича компанія (dingobill.com)

Це тому, що ціль веб-сайтів цих типів – це просування ідей чи продуктів.

Основна увага приділяється вмісту чи продуктам, а не дизайну веб-сайту. Колір фону є лише фоном, щоб зробити вміст більш видимим і читабельним.

Найкраща колірна гамма, яка використовується для веб-сайтів, що займаються інформацією та електронної комерції, – білий або світлий фон, із жирною домінантою & акцентні кольори. Сміливі домінуючі та акцентні кольори надають веб-сайту індивідуальність та фокуси, а простий колір фону зберігає відвідувачів’ зосередитись на вашому вмісті чи продуктах.

Тип №2 – Корпоративний / Діловий веб-сайти

Корпоративні / ділові веб-сайти зазвичай мають дві цілі – просування бренду або його послуг.

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

Просування бренду

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

Це пояснюється тим, що колір тісно пов’язаний з розпізнаванням бренду (пам’ятаєте наш приклад Coca Cola вище?) Коли ви використовуєте в якості фону варіант свого домінанту / кольору бренду, ви зміцнюєте свій бренд і робите його більш запам’ятовуваним для вашої аудиторії.

Якщо у вас дуже сміливий колір бренду, використання його як кольору фону може бути занадто непосильним. Якщо це було так, розгляньте вибір менш інтенсивного відтінку кольору вашого бренду. Використовуйте інструмент Adobe Color CC для створення різного відтінку та яскравості вашого домінуючого кольору.

як вибрати колір тла веб-сайту корпоративний брендинг веб-сайтівjustactions.org
як вибрати колір тла веб-сайту бізнес-брендингsbjdanebury.com

Просування послуги

Якщо ви хочете, щоб цінність вашої послуги або вашого портфоліо минулих проектів була основною точкою, використовуйте білий або нейтральний колір фону.

Так само, як і веб-сайти з інтенсивним вмістом та електронною комерцією, ви не знаєте’не хочу, щоб ваш фоновий колір знімав фокус від вашого вмісту або повідомлення, яке ви хочете надати.

Вибравши нейтральний або білий фон, ваш вміст, природно, стане привертати більше уваги.

Як вибрати бізнес-колір кольорового фону фонуzengenti.com
Як вибрати бізнес-колір кольорового фону фонуcharddevelopment.com

Тип №3 – стильний & Творчі веб-сайти, які є інтенсивно графічними

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

Дійсно немає правил щодо того, яке фонове зображення або кольори ви повинні використовувати. Ви можете використовувати чорний рядок меню, щоб створити більше драматизму; Або ви можете використовувати всі кольори веселки для створення натхненного фонового зображення.

Як вибрати колір тла фону веб-сайтуtheeddynyc.com
Як вибрати колір тла веб-сайтуcafefrida.ca
як вибрати кольоровий дизайн фону веб-сайтуstudiolovelock.com
Як вибрати розкішний колір тла веб-сайтуgillemore.com

Чесно кажучи, тут ви можете порушити всі правила і використовувати будь-який колір, який вам подобається, якщо ви пам’ятаєте це правило 1 на увазі – “Ніколи не вибирайте фон, який робить текст чи вміст важким для читання.“

Ваш ідеальний колір фону – це той, що дозволяє вашому вмісту бути центральною точкою під час гармонійної роботи з вашою домінантою & акцентних кольорів та робить вашу аудиторію добре, переглядаючи веб-сайт.

Якщо ви сумніваєтесь, використовуйте білий або дуже світло-сірий колір тла. Хоча це може бути не самий надихаючий колір, ви знаєте, що ваш вміст завжди буде просвічувати.

Висновок & Ключові вивезення

Вибір правильної кольорової гами для вашого веб-сайту ніколи не повинен базуватися на вашому улюбленому кольорі чи на відчутті кишечника.

Хороший дизайн веб-сайту – це той, хто завжди ставить свою аудиторію на перше місце.

Виберіть колір та дизайн, який подобається вашій цільовій аудиторії, щоб ви могли встановити незабутнє з’єднання (підсвідомо) та відстоятись від своєї конкуренції.

Підбір кольорових схем взагалі не повинен бути випадковим. Натомість це має бути ряд організованих, об’єктивних, відповідних вправ:

(1) відповідність вашого бренду правильному домінуючому кольору; (2) відповідність домінуючого кольору та кольорам акценту за допомогою інструмента Adobe; і нарешті (3) відповідність кольору тла домінанті & акцентні кольори.

Виконуючи наші 3 кроки узгодження вище, ви можете створити гарне поєднання кольорів для свого веб-сайту – навіть якщо ви цього не зробите’не маєте гарного почуття дизайну та координації кольорів!

Дон’не бійтеся вводити якийсь колір на ваш веб-сайт і весело провести час! Просто пам’ятайте, що не дозволяйте вашому кольорові переважати вміст!

Знайшов цей посібник корисним?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map