8 akį traukiančios svetainės spalvų schemos ir kaip jas naudoti

Spalva yra vienas galingiausių įrankių dizainerio arsenale. Ji patraukia dėmesį ir perteikia prasmę, o kartu didina konversijas ir stiprina jūsų prekių ženklo identitetą. Tinkamai parinkta svetainės spalvų schema ypač svarbi el. prekybos svetainės dizaine, kur informaciją reikia perteikti greitai ir aiškiai, kad atsitiktiniai lankytojai taptų apsisprendusiais pirkėjais.

Toliau rasite aštuonias mūsų mėgstamas el. prekybos svetainių spalvų schemas ir sužinosite, kaip išsirinkti tinkamą paletę savo svetainei.

Kas yra svetainės spalvų schema?

Svetainės spalvų schema – tai apgalvotai sudaryta trijų–penkių pagrindinių spalvų paletė, apibrėžianti svetainės vizualinį identitetą. Šios spalvos naudojamos visuose svetainės elementuose – nuo fonų iki mygtukų. Tinkami spalvų deriniai sukuria tam tikrą nuotaiką, vizualinę darną ir sustiprina prekių ženklo kūrimą.

Rinkdamiesi spalvas svetainės kūrimui, verslo savininkai, grafikos dizaineriai, prekių ženklo specialistai ir programuotojai dažnai dirba kartu. Jie vertina tokius veiksnius kaip rinkos įpročiai, tikslinės auditorijos lūkesčiai ir teksto įskaitomumas. Kai spalvų schema parinkta tinkamai, ji tampa svarbia svetainės sėkmės dalimi: perteikia prekių ženklo esmę ir gerina bendrą naudotojo patirtį.

Tačiau norint išsirinkti tinkamą svetainės spalvų schemą savo prekių ženklui, nebūtina būti dizaino profesionalu. „Shopify“ temos turi paruoštus dizaino nustatymus, kurie padeda lengviau pradėti. O naudodami naują „Shopify“ temų pagrindą „Horizon“, galite per kelias sekundes sugeneruoti individualią temą su dirbtiniu intelektu.

Kodėl svetainės spalvų schema yra svarbi?

Tinkama svetainės spalvų schema padeda pasiekti du tikslus: sukurti stiprų prekių ženklo identitetą ir padidinti konversijas.

Spalvos padeda kurti prekių ženklo identitetą

„Spalva yra būdas atskirti savo prekių ženklą nuo kitų“, – sako dizaino agentūros MOTE bendraįkūrėja Sara Mote. Išskirtinė spalvų paletė ne tik padeda išsiskirti konkurentų fone – ji gali padaryti prekių ženklą akimirksniu atpažįstamą. Pakanka prisiminti legendinį „McDonald’s“ raudonos ir geltonos derinį arba „Coca-Cola“ raudoną ir baltą.

Norėdami sukurti stiprų prekių ženklo identitetą, pasirinktą spalvų paletę, kaip ir kitus prekių ženklo elementus, pavyzdžiui, prekių ženklo balsą ar logotipą, turėsite nuosekliai naudoti visuose klientų sąlyčio taškuose: spaudos reklamoje, internetinėje reklamoje, įrašuose socialiniuose tinkluose ir savo el. prekybos svetainėje.

Toks nuoseklumas svarbus dėl kelių priežasčių. „Vartotojai ir klientai labiau jumis pasitiki, kai mato aiškią ir nuoseklią poziciją“, – sako prekių ženklų agentūros „Outline“ kūrybos vadovas Ky Allport.

„Outline“ strategijos vadovė Margaret Pilarski tai papildo: „Jūs kuriate atpažįstamą aplinką, kurioje pirkėjas jaučiasi užtikrintai ir supranta esantis bendruomenės dalimi.“

Strategiškai parinktos spalvos didina konversijas

Prekių ženklai dažnai įtraukia kontrastingą akcentinę spalvą į savo svetainės spalvų schemą, kad tam tikri elementai išsiskirtų. Ši spalva naudojama nukreipti lankytojų žvilgsnį į svarbiausias vietas, pavyzdžiui, mygtukus „Pirkti dabar“ ar kitus raginimus veikti (CTA).

Renkantis spalvų schemą, „svarbu pasirūpinti, kad spalvų pakaktų kontrastui ir charakteriui sukurti“, – sako Sara. Vienas būdas tai pasiekti – rinktis viena kitą papildančias spalvas, tai yra tas, kurios spalvų rate yra viena priešais kitą.

8 išskirtinės el. prekybos svetainių spalvų schemos

Štai aštuonios realių prekių ženklų svetainių spalvų schemos, kurios gali įkvėpti jūsų unikalią spalvų paletę.

Nostalgiška ir ryški

„Heyday Canning Co.“ konservuotiems produktams suteikia šiuolaikišką veidą – nuo avinžirnių su harisa ir citrina iki cannellini pupelių su pomidorų ir degtinės padažu. Įmonės įkūrėjai kartu su „Outline“ siekė atgaivinti vintažo įkvėptą, bet kartu gaivų „Heyday“ prekių ženklo charakterį.

„Sukūrėme spalvų paletę, kuri atrodė šiek tiek nostalgiška, labai ryški ir gyvybinga“, – sako „Outline“ atstovas Ky Allport. Taip pat buvo svarbu, kad visos spalvos atrodytų natūraliai. „Nieko dirbtinio“, – priduria jis.

„Heyday“ svetainės tekstui naudoja šviesiausią spalvą „Butter Bean“ ir tamsiausią – „Grassy Green“. Kitos prekių ženklo spalvos, tokios kaip „Sungold Orange“, „Lemon Yellow“ ir „Blue Linen“, naudojamos CTA mygtukams, skaitmeniniams lipdukams ir fonams.

Minimalistinė

Odos priežiūros prekių ženklas „Klur“ savo svetainės spalvų schemoje naudoja tik dvi spalvas: šviesiai pilką fonams ir tamsiai pilką tekstui bei CTA mygtukams. Tai visoje svetainėje kuria minimalistinį įspūdį, kuris puikiai dera prie prekių ženklo, siūlančio produktus paprastai odos priežiūros rutinai.

„Klur“ šią estetiką perkelia ir į produktų pakuotes. Buteliukai ir indeliai dekoruojami minimaliai, naudojant tik dvi spalvas. Tekstas visada yra smėlinis, o pakuotės – juodos arba rudos. Tai padeda sukurti vientisą prekių ženklo patirtį.

„Viskas labai tiksliai suderinta su prekių ženklo identitetu ir pakuotėmis“, – sako Sara Mote, kurios komanda kūrė „Klur“ svetainę. „Patirtis atrodo vientisa nuo pirmos akimirkos svetainėje iki momento, kai klientas gauna ir išpakuoja produktus.“

Ryškus neonas

„Magic Spoon“ gamina sveikesnes, suaugusiesiems skirtas nostalgiškų pusryčių dribsnių versijas. Įmonė naudoja tris pagrindines spalvas – violetinę, sodrią purpurinę ir šviesiai mėlyną – bei ryškius akcentus. Produktų puslapiuose fonai dažnai derinami prie skonio, pavyzdžiui, šviesiai ruda kakaviniams dribsniams ar rožinė vaisiniams.

Taip pat pastebėsite pereinamų spalvų foną „Magic Spoon“ svetainės nukreipimo puslapyje, kuris vėliau kartojamas ir kituose puslapiuose. Šie perėjimai įveda tokias spalvas kaip ryškiai geltona ir persikinė, kurios pabrėžia energingą ir žaismingą „Magic Spoon“ prekių ženklo identitetą.

„Magic Spoon“ kartu su „Gander“ kūrė ir pakuotes, ir svetainės dizainą, kad sukurtų ryškių spalvų paletę, kuri, kaip teigiama jų atvejo analizėje, turėtų „suteikti prekių ženklui nuostabos jausmą ir pažadinti vaiką kiekviename iš mūsų“.

Vintažinė neutrali

Šioje svetainės spalvų schemoje naudojama kreminė, persikinė ir terakotos spalvos, kurios pirkėjams kuria ramią, vintažo įkvėptą atmosferą. „Adored Vintage“ produktai – moteriški, antikos įkvėpti drabužiai – dažnai atkartoja neutralios svetainės spalvų schemos tonus, todėl visa svetainė atrodo vientisa.

Jūrinė

Drabužių prekių ženklo „Velasca“ paletę sudaro kreminė, pilki tonai ir vėsi mėlyna spalva, primenanti Viduržemio jūrą. Tai taiklus pasirinkimas įmonei, kuri savo itališką tapatybę pabrėžia tiek produktų kolekcijoje, tiek prekių ženklo istorijoje.

„Velasca“ jūros mėlyną naudoja antraštėms ir CTA elementams, smėlinę – navigacijos juostai, o tamsiai pilką – tekstui. Ši paletė puikiai dera su prekių ženklo jūrine gyvenimo būdo fotografija.

Rožinė ir ruda

„Beauty Bakerie“ parduoda dekoratyvinės kosmetikos ir odos priežiūros produktus, įkvėptus kepinių pasaulio: pavyzdžiui, fiksuojamoji pudra pakuojama kaip mažas miltų maišelis, o makiažo bazė primena sviesto lazdelę. Įmonės svetainės spalvų paletėje naudojama šviesiai rožinė fonams, tamsesnė rožinė reklamjuostėms ir CTA mygtukams, o kakavinė ruda – tekstui.

Rožiniai ir rudi tonai atkartoja „Beauty Bakerie“ produktų atspalvius. Kartkartėmis pasirodantis žalsvai mėlynas akcentas suteikia kontrasto ir taip pat matomas produktų pakuotėse.

Drąsi

„Fly By Jing“, padažų ir makaronų prekių ženklas, kartu su „Day Job“ atliko prekių ženklo atnaujinimą, kurio esmė buvo „leisti įkūrėjos istorijos atvirumui skambėti taip pat stipriai kaip ir jos skoniams“. Tai virto svetainės spalvų schema, sudaryta iš sodrios raudonos, šiltos geltonos, miško žalios ir violetinės.

Naudodama tokius ryškius atspalvius, „Fly By Jing“ svetainės tekstui renkasi juodą ir baltą spalvas, kad jis išliktų lengvai įskaitomas.

Prigesintas retro

Apsaugos nuo saulės prekių ženklas „Vacation“ turi aiškų identitetą, paremtą 9-ojo dešimtmečio estetika. Jo svetainės spalvų schema atkartoja „Classic Lotion“ pakuotę: prigesintas geltonas dangtelis, smėlinio kremo spalvos buteliukas ir vandenyno mėlynumo tekstas. Žalsvai mėlyni akcentai matomi visoje svetainėje ir ant „Mineral Lotion“ tūbelės.

Kaip pasirinkti tinkamą svetainės spalvų schemą

Vadovaukitės šiais veiksmais kurdami savo svetainės spalvų schemą.

1. Įvertinkite savo prekių ženklo identitetą

Prieš rinkdamiesi spalvas, pirmiausia apmąstykite savo prekių ženklo identitetą ir tai, kaip skirtingos spalvos gali padėti išreikšti jūsų prekių ženklo charakterį. Taip pat verta pagalvoti, kaip spalvos padeda perteikti jūsų misiją ir vertės pasiūlymą, o galiausiai – kaip norite, kad klientai jaustųsi naršydami jūsų svetainėje.

Viename „Shopify Masters“ epizode „Heyday Canning Co.“ įkūrėja Kat Kavner pasakoja, kaip įmonės charakteris, misija ir vertybės nulėmė nostalgišką ir ryškią spalvų paletę.

„Šis naujas prekių ženklas turėjo būti labai džiugus, gyvybingas ir smagus, šiek tiek vintažinis ir retro, bet kartu orientuotas į ateitį“, – sako Kat. „Turėjome tvirtą pagrindą: žinojome, kas esame, kuo tikime ir ką norime perteikti. Todėl galėjome aiškiai suformuluoti užduotį dizaino partneriams, kad jie sukurtų mūsų prekių ženklo identitetą, logotipą, spalvas, šriftus, o vėliau ir pakuotes.“

Norėdami geriau suprasti savo prekių ženklo charakterį, užduokite sau šiuos klausimus:

• Kokie trys–penki būdvardžiai geriausiai apibūdina jūsų prekių ženklą? Pavyzdžiui: linksmas, žaismingas ir orientuotas į šeimą, arba prabangus, ramus ir rafinuotas.

• Kokias emocijas norite sukelti žmonėms, kai jie galvoja apie jūsų prekių ženklą ir naršo jūsų svetainėje?

2. Sugeneruokite pagrindinių spalvų idėjų

Kai jau aiškiai apibrėžėte savo prekių ženklo identitetą, metas pasižvalgyti po esamas spalvų paletes ir ieškoti įkvėpimo. Pradėkite nuo konkurentų svetainių dizaino analizės: kokias pagrindines spalvas jie naudoja? Tuomet nuspręskite, ar norite laikytis rinkos normų, ar sąmoningai išsiskirti.

Įkvėpimo galite ieškoti ir už savo kategorijos ribų.

Kai Kavner perteikė „Heyday“ prekių ženklo charakterį agentūrai „Outline“ ir išreiškė norą turėti retro spalvų schemą, „Outline“ atstovas Ky Allport pradėjo tyrinėti senesnes spalvų paletes.

„Žiūrėjome daug vintažinių pavyzdžių“, – sako Allport. „Analizavome senų vaisių pakuočių etikečių dizainus, kurie atrodė šiek tiek ūkiški ir nostalgiški.“ Komanda taip pat įkvėpimo sėmėsi iš Andy Warhol „Campbell’s Soup Cans“.

Jei stringate, galite pasitelkti ir internetinį spalvų paletės generatorių, kuris padės išbandyti skirtingas kryptis.

3. Pasirinkite pagrindines spalvas

Kai jau turite bendrą spalvų schemos kryptį, metas apsispręsti dėl konkrečių spalvų ir atspalvių.

Pasirūpinkite, kad turėtumėte bent po vieną iš šių tipų spalvų:

• Fono spalva. Daugelis prekių ženklų renkasi šviesų foną, kuris kontrastuoja su tamsesniu tekstu, tačiau tai nėra griežta taisyklė. Galite naudoti ir tamsų foną, jei jį derinsite su šviesiais šriftais.

• Teksto spalva. Ji turėtų aiškiai kontrastuoti su fonu, kad tekstą būtų lengva skaityti. Dažniausiai pasirenkama pilka arba juoda, tačiau galima naudoti ir tamsų prekių ženklo atspalvį.

• Akcentinė spalva. Paprastai tai ryški spalva, kuri atkreipia dėmesį į tokius elementus kaip CTA mygtukai ir reklamjuostės.

Kai nuspręsite, kokias spalvas naudosite, susitelkite į konkrečius atspalvius. Pavyzdžiui, „Outline“ norėjo, kad „Heyday“ spalvos būtų ryškios, bet neatrodytų dirbtinai. Todėl vietoj neoninės oranžinės buvo pasirinkta santūresnė „Sungold Orange“.

4. Patikrinkite spalvų kontrastą

Pirmenybę teikite įskaitymui ir įsitikinkite, kad pasirinktos spalvos, naudojamos kartu, sukuria pakankamą kontrastą. Tam gali tekti sukurti svetainės maketą ir išbandyti šriftų bei fonų spalvas su svetainės prieinamumo įrankiu, pavyzdžiui, „WebAIM Contrast Checker“. Jei spalvos nėra pakankamai aiškios, teks eksperimentuoti su šviesesniais arba tamsesniais atspalviais.

„Pagrindinė spalvų paletė, kuri užtikrina įskaitymą ir kontrastą svetainėje, neabejotinai sustiprina bendrą naudotojo patirtį“, – sako Sara. „Kai pateikiate informaciją, pavyzdžiui, tekstą, norite būti tikri, kad jis labai aiškus ir lengvai skaitomas. Todėl, tarkime, tamsus tekstas, pavyzdžiui, juodas, baltame fone suteikia daug aiškumo.“

5. Nuspręskite, kaip derinti spalvas

Kai jau pasirinkote pagrindinį spalvų rinkinį ir išbandėte jo įskaitymą, nuspręskite, kaip spalvos veiks kartu, ir užfiksuokite tai prekių ženklo gairėse. Tai reiškia, kad turite aiškiai nurodyti, kurios spalvos bus naudojamos fonams, kurios – tekstui, o kurios – reklamjuostėms ir CTA mygtukams. Taip pat verta pažymėti, kurie spalvų deriniai veikia, o kurie – ne.

„Prekių ženklo gairėse paprastai pateikiame lentelę su patvirtintomis spalvų naudojimo taisyklėmis ir nurodome, kurių paletės spalvų nereikėtų naudoti kartu“, – sako „Outline“ atstovas Allport. Tai padeda dizaineriams ir naujiems komandos nariams naudoti pagrindines spalvas taip, kaip buvo numatyta.

Daugeliu atvejų visoje svetainėje verta naudoti tą pačią pagrindinio teksto spalvą. Antraštėms ar išskirtiniam tekstui galite rinktis kitas spalvas, tačiau ir čia svarbus nuoseklumas. Taip svetainė atrodys vientisa.

Taip pat verta nuspręsti, kuri spalva yra svarbiausia, nes tikėtina, kad ją norėsite naudoti skirtinguose svetainės puslapiuose ir, jei parduodate fizinį produktą, ant pakuotės.

„Paprastai egzistuoja ir hierarchija“, – sako Allport. „Pagrindinė „Heyday“ prekių ženklo spalva yra ta tamsi žalia, kuri nuosekliai kartojasi etiketėse, o fonams naudojamos skirtingos spalvos.“

Kurkite geresnę naršymo patirtį su tinkama spalvų schema

Svetainės dizainas yra nuolatinis procesas. Nebijokite išbandyti skirtingų derinių ir rinkti klientų atsiliepimų, kad rastumėte tinkamiausią variantą. Jūsų spalvos turėtų veikti išvien ir kurti vientisą, patrauklią svetainę, kuri internete aiškiai atspindėtų jūsų prekių ženklą.