Кольорові схеми веб-сайту, які ви можете використовувати для свого сайту WordPress

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


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

Чому кольорові схеми важливі

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

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

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

Гарна колірна гамма також може сподобатися вашій цільовій аудиторії.

Згідно з опитуванням Scott Design, два улюблені кольори здаються синім та зеленим.

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

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

Компанії використовували ефекти кольорів для власних вигод. Наприклад, діти зазвичай позитивно реагують на яскраві кольори. Таким чином, веб-сайт на кшталт PBS Kids використовує яскраву кольорову гаму для залучення дітей.

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

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

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

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

Найпростіший спосіб вибору хорошої кольорової гами – це використання кольорових генераторів. Ось кілька інструментів, якими ви можете скористатися:

  • Colorspire– попередній перегляд кольорів на шаблоні веб-сайту.
  • Палеттон– подивіться, як буде виглядати ваша колірна гамма в різних макетах.
  • Охолодження– генерувати кольорові схеми з обраних вами зображень.

Однак якщо ви хочете зробити кольорову схему з нуля, ось що можна зробити:

  1. Виберіть домінуючий колір. Це колір, який ви хочете найбільше виділити. Рекомендується використовувати колір вашого бренду на всьому веб-сайті.
  2. Підберіть вторинні кольори. Ці кольори доповнюють або підсилюють ваш домінуючий колір.
  3. Визначте, де розмістити кольори. Дехто любить використовувати домінуючий колір для підкреслених функцій, таких як кнопки та посилання. Інші можуть використовувати його для великих візуальних елементів, тоді як другорядні кольори – для текстів. Вивчіть варіанти та знайдіть найкращий для вас.
  4. Виберіть колір тла. Люди зазвичай вибирають нейтральний тон, щоб веб-сайт читався.

8 приголомшливих кольорових схем веб-сайту

Оскільки 34% веб-сайтів використовують WordPress, я ретельно вибрав 8 типів кольорових схем, які ви можете використовувати як натхнення для свого сайту WordPress:

1. Яскравий

Відвідайте кліматичний оптиміст

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

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

2. Вимкнено

Відвідайте Mosole

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

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

3. Світло

Відвідайте Босум

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

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

4. Темний

Відвідайте критичні TechWorks

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

У цьому прикладі Critical TechWorks використовує темні кольори для доповнення своєї ідентичності як технологічної компанії нового покоління.

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

5. Пастель

Відвідайте Мон-Руко

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

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

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

6. Монохроматичний

Відвідайте Brightscout

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

Brightscout демонструє, як можна використовувати різні відтінки зеленого на одній сторінці. Хоча все переважно зелене, використання як світлих, так і темних відтінків заважає сторінці виглядати рівним.

7. Акцент

Відвідайте Фрактон

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

Наприклад, Frakton використовує переважно чорно-білу кольорову палітру з палітурками жовтого тут і там. Чорно-біла схема допомагає привернути всю увагу до жовтих виділень, тому колір акценту використовується для кнопок, підкреслених текстів та заголовків.

8. Контрастні кольори

Відвідайте молочні ферми Turner

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

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

Підведенню

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

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

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

Саймон Дуайт Келлер – підприємець з цифрового маркетингу, який прагне залучити тонни трафіку на ваш веб-сайт із креативним та переконливим вмістом. Після трьох років наполегливої ​​роботи на посаді фрілансера він вирішив підняти свої послуги на наступний рівень, він створив співзаснову в компанії цифрового маркетингу PRable. Врешті-решт Саймон відчув, що для того, щоб досягти більшого, йому довелося створити власну компанію – SDK Marketing. Своєю невеликою, хоча і професійною командою, він готовий приймати нові виклики, збільшувати ваш трафік та отримувати більше доходів. Окрім своєї палаючої пристрасті до SEO, він цікавиться хокеєм на ковзанах та подорожами. Зв’яжіться з Саймоном далі LinkedIn.

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