Как да изберете цветовете на марката и да ги използвате на вашия уебсайт
Лесно е да изберете цветовете за вашия уебсайт, когато вече имате марка. Просто вземете цветовете на марката си и ги прилогате! Но ако сте нов бизнес, създаващ цветовете на марката си от нулата, има няколко неща, които трябва да направите, за да си осигурите успех.
Ще искате да се справите с това в две стъпки:
Разберете какви цветове се нуждаете за вашата марка.
- Приложете цветовете си към вашия уеб сайт.
- Колко цветове на марката са ви необходими?
Общото правило е пет цвята на марка, но има много сайтове, които имат само един основен цвят. Това е цветът, който използват в логото си, бутоните и може би като акцент вътре в снимки.
Тогава фона на сайта е бял, а текстът – черен. Използвам тази техника на моя собствен сайт. Лесно е да проектирате и създавате.
Ако имате време, изборът на пет цвята е интелигентен, защото ви дава повече гъвкавост при всички бъдещи дизайнерски работи.
Ето екранна снимка от colourmind.io, показваща петте вида цветове, които препоръчват:
Типична разбивка на цвета на марката
Насоките за цветовете на марката Colourmind са чудесно начало, но според моя опит в работата разбивката е по-скоро като по-долу.
Основен цвят на марката
Това обикновено фигурира на видно място във вашето лого. Всъщност цялото ви лого може да е този цвят.
Цвят на вторичната марка (тъмен акцент и / или светъл акцент)
Това може да бъде по-малко разположение на вашето лого. Може да се използва и като акцент цвят на вашия уеб сайт – в текста, връзките и т.н.
Третични цветове на марката
Не е задължително. Понякога марките искат да избират много забавни цветове, от които да избират, така че да избират екстри. Те се добавят пестеливо, за да внесат допълнителен живот на техните страници.
Тъмен цвят (текст)
Вашият основен цвят на текста. Обикновено черно или тъмно сиво, но също така може да бъде синьо, кафяво и т.н.
Светъл цвят (фон)
Това често е цветът на самия уебсайт или леко засенчени секции, докато превъртате надолу по дълга страница. Обикновено бял или неутрален нюанс на сиво
Как да изберем цветовете на марката
Има два възможни подхода, които трябва да предприемете, когато стартирате избора на цветна марка.
Подход 1: Използвайте интуицията си, за да изберете цветове за вашата марка
Ако сте инстинктивен човек, може да искате да използвате интуицията си, за да изберете цветовете на марката си. Огледайте дома си за вдъхновение. Имате ли любим цвят, който използвате отново и отново в своя декор? Какъв цвят са вашите килими, възглавници и завеси? Как изглежда вашето спално бельо? Вашето обзавеждане от дърво е тъмно махагон или „селска“ къща в бяло?
Завийте през гардероба си – виждате ли някакви цветове, които да се появяват отново и отново в гардероба си? Любимите ви ризи ли са червени? Всеки шал лилав ли е?
Какви моди ви вдъхновяват? Вероятно ще можете да стесните списъка с подходящи цветове на марката, като направите това упражнение.
Подход 2: Изследователски тенденции за информиране на цветовете на вашата марка
Можете също така да погледнете към актуалните моди и тенденции за вдъхновение. Ако обичате Pottery Barn, прегледайте най-новия каталог и вижте какви цветове правят във външния вид. Може би обичате плажните вилни дизайни, пълни с корали, аква и пясък. Или обичате дълбоките червени и богати кафяви и златни в традиционната английски стил.
Можете също да се насочите към книжарница, за да видите какво е тенденцията в книгите и списанията за декор на дома. Или посетете мол, за да видите какви цветове използват магазините. Можете дори да отидете до местния магазин за подобряване на дома и да разгледате наборите с бои.
По-скоро изследвайте в дома си? Имате късмет! Просто потърсете „цветови тенденции“, „цветови схеми“ или „цветни палитри“ в Pinterest или Google. И не забравяйте да видите какви са цветовете на марките на вашите конкуренти. Може би искате нещо подобно… или противоположното!
Можете да комбинирате тези подходи, ако искате
Лично аз обичам да започвам с инстинктивния си избор на цветове, комбиниран със сърфиране в Pinterest. След това прецизирам избора си на макети на Photoshop на моя уебсайт и накрая тествам за достъпност.
Понякога стигам докрай до уебсайта и осъзнавам, че трябва да оправям цветовете с лек нюанс, преди да се получи правилно. Това работи при мен. Направете това, което работи най-добре за вас!
Цветни подбирачи
Спомняте ли си, когато споменах по-горе за намирането на цветове в сайтовете на конкурентите? Ако намерите уебсайт с цвят, който харесвате и не сте сигурни как да го запазите, всъщност е много лесно. Просто използвайте специален инструмент като този ColourPick Eyedropper. Това е добавка за Chrome, която ви позволява да избирате стойности на цветовете от уеб страниците, като щракнете върху тях с малък инструмент. Не може да е по-лесно!
Генератори на цветна палитра
Друг прекрасен инструмент, който ще ви помогне да изберете цветовете на марката, са генераторите на цветна палитра. Тези приложения ви помагат да изпробвате цветовете от съществуващите дизайни, да преглеждате идеи и да придвижвате идеалните си цветове.
Ето 3 популярни онлайн инструменти за цветова палитра, които могат да ви помогнат да започнете:
Coolors.co е онлайн приложение, което ви позволява да натискате интервала на клавиатурата си, за да преминете през произволно предложени палитри. Можете също да изберете цветни марки от снимка, да запазите един цвят, който виждате, и да генерирате повече цветове, които да вървите с него, и да запазите / експортирате окончателния си избор, когато сте готови.
Canva / color-palette е просто приложение за уеб сайт, в което можете да качите снимка и тя автоматично генерира пет цвята, които съответстват. Тогава можете просто да записвате шестнадесетичните кодове за харесваните от вас цветове. Това е бързо и лесно. Можете дори да се преместите оттам направо в приложението Canva и да започнете да създавате графики и документи с новата си палитра.
Colourmind.io описва себе си като „генератор на цветни схеми, който използва задълбочено обучение. Може да научи цветови стилове от снимки, филми и популярно изкуство. “
Той е малко по-пълноценен, с ежедневни цветни палитри за вдъхновение и образователно съдържание около цвета и как да го приложите към страници и дизайн.
Подобно на другите два варианта, Colourmind също може да избира цветове от снимка. Затова не забравяйте да запазите снимки, които ви вдъхновяват, тъй като те ще ви осигурят страхотна отправна точка, когато използвате генератори на цветна палитра като тези.
Тест за слепота на цветовете
Когато сте стеснили избора си на цветове до някои финални и сте готови да ги вземете онлайн, не забравяйте да тествате страницата си за проблеми с цветната слепота, преди да стартирате.
Ще се изненадате какви цветове ще бъдат нечетливи за някои посетители.
Не всеки има перфектна 20/20 визия. Използваемостта е от ключово значение да можете да обслужвате повече хора, по-добре! Посетете Указания за уеб дизайн за цветна сляпа аудитория за най-добри практики как да проектирате за достъпност.
Как да приложите цветовете на марката към вашия уебсайт
Избрахте перфектния набор от цветове и сега трябва да решите къде да отидат на вашия уебсайт. Ето някои общи области, в които ще отидат новите ви цветове, заедно с моите препоръки кои цветове са най-подходящи за всеки.
Бутон за покупка
Какво е: Бутон за покупка води до място, в което вашият читател всъщност може да направи покупка, например o страница на количка или начин за плащане. Формулировката обикновено е „Купете сега.“
Цвят: Използвайте основния си цвят или вторичен цвят, който се вижда лесно и се откроява добре на страницата. Така че на светла страница може да е тъмно. Или много ярка.
Не искате този вид бутони някога да бъде пренебрегван, така че бъдете смели.
Оранжево, пурпурно или ярко синьо са добри варианти.
Информационен бутон
Какво е: Информационен бутон е този, който ви отвежда на страница с допълнителна информация по дадена тема. Така че вместо да води директно до количка, където клиентът може да закупи вашия продукт, това може да доведе до целева страница, където да научат повече за него. Формулировката обикновено е „Научете повече“.
Цвят: Тук можете да използвате и основния си цвят или да използвате вторичен цвят – може би зелен или ярко син. Много сайтове ще използват плътен цвят за основните си бутони за покупка, а за вторичния „информационен“ бутон ще използват бял бутон с черно очертание. Това все още изглежда видимо, но не толкова изпъкващо, колкото плътния бутон. Можете също така просто да използвате текстова връзка за всичките си „научете повече“ призиви за действие и да оставите бутоните само за най-важните действия за генериране на доход.
Връзки
Какво е: Връзките вътре в абзаци или блокове от текст се наричат „вградени връзки“. Можете също да имате връзки в заглавие.
Цвят: Повечето уеб страници по подразбиране имат ярко син цвят за всички тези видове връзки и трябва да положите умишлено усилие, за да го промените в друг цвят. Вашите вторични или третични цветове ще работят добре, като свързват цветовете и ще извървят дълъг път към втвърдяване на вашата марка на вашия уеб сайт.
Текст на заглавието
Какво е: Това са текстовите заглавия или <h1> или <h2> или <h3> таговете на вашия уебсайт.
Цвят: Вашите по-тъмни сиви и черни работят чудесно, но понякога изглежда хубаво, ако смените заглавията на друг цвят. Просто не забравяйте да използвате цвета на връзката си на заглавия или посетителите ви няма да знаят какво може да се кликва и кое не.
Графика и снимки
Какво е: Икони, графика и снимки.
Цвят: Можете да оцветите вашите икони с всеки от цветовете на вашата марка. Можете също така да добавите цвят към кутии с текстови наслагвания или към снимки.
Съвет: потърсете снимки на хора, които носят дрехи, които съответстват на цветовете на вашата марка, или нанесете цветно покритие върху вашите изображения за чист и марков вид.
Документирайте цветовете на марката си
След като се заемете с работата по решаването на цветовете, отговарящи на вашата марка, важно е да не губите тази информация. Прекарайте известно време, създавайки ръководство за марката, за да съхранявате тези и други важни детайли на марката като шрифтове, лога и копиране на глас.
Сега е твой ред
И така, какво мислите? Ще използвате ли пет цвята на марката или ще я поддържате по-проста? Интуитивен ли сте или повече от научен, базиран на изследвания от други хора? Добре е да смесите двете.
Просто вземете тетрадка и запишете мислите си, докато ровите в този процес. След това, след като документирате всичките си любими цветове, можете да започнете да ги прилагате към уебсайта си.
Не забравяйте да следвате новия си план за всички страници на вашия сайт. Ако останете последователни, за нула време ще имате уеб сайт с красива марка, и професионално изглеждащ!
