Kā izveidot krāsu paleti savai mājaslapai + krāsu kontrasta pamati
Krāsu izvēle ir viena no patīkamākajām mājaslapas veidošanas daļām, taču iesācējiem tā var šķist arī viena no sarežģītākajām. Neskaitāmie toņi, iespējamās kombinācijas un zīmola krāsu izvēle var radīt apjukumu un likt šaubīties, ar ko sākt.
Ar Mozello mājaslapu veidotāju esam palīdzējuši tūkstošiem cilvēku izveidot sava uzņēmuma mājaslapu. Lielākā daļa no viņiem nav dizaineri. Tie ir cilvēki, kuri vēlas mūsdienīgu, uzticamu un viegli lietojamu mājaslapu.
Atkal un atkal esam pārliecinājušies par vienu:
Laba krāsu izvēle nav tikai skaistu toņu piemeklēšana.
Tās mērķis ir palīdzēt tavai mājaslapai strādāt efektīvāk.
Krāsas palīdz virzīt apmeklētāju uzmanību, veidot zīmola noskaņu, radīt vizuālo hierarhiju, uzlabot lasāmību un ietekmēt cilvēku rīcību. Izprotot tikai dažus vienkāršus principus, vari izveidot profesionālu krāsu paleti pat tad, ja dari to pirmo reizi.
Šajā rakstā uzzināsi visu, kas iesācējam jāzina:
- kā izvēlēties vienkāršu un efektīvu krāsu paleti;
- kā pareizi izmantot šo paleti savā mājaslapā;
- kā izvairīties no biežākajām krāsu izvēles kļūdām;
- kā ar pietiekamu kontrastu nodrošināt, lai saturs būtu viegli lasāms un pieejams ikvienam.
Padarīsim krāsu izvēli vienkāršāku.
Kāpēc krāsas ir svarīgas mājaslapas dizainā
Krāsas ļauj mājaslapai ļoti ātri nodot vēstījumu apmeklētājiem. Vēl pirms cilvēks ir izlasījis virsrakstu vai apskatījis izvēlni, viņam jau ir radies pirmais iespaids par mājaslapu, balstoties uz tās krāsām.
Pareizi izvēlētas krāsas var palīdzēt tavam uzņēmumam radīt šādu iespaidu:
- uzticamu
- draudzīgu
- mūsdienīgu
- tīru un sakārtotu
- izsmalcinātu un ekskluzīvu
- jauneklīgu
- mierīgu
- enerģisku
Savukārt neveiksmīga krāsu izvēle var radīt apjukumu, nepatiku vai pat neuzticēšanos. Piemēram, teksts ar nepietiekamu kontrastu ir grūti lasāms, pārāk spilgtas un piesātinātas krāsas var nogurdināt, bet pārāk plaša krāsu palete var radīt haotisku un neprofesionālu iespaidu.
Mājaslapas uzdevums ir palīdzēt apmeklētājiem orientēties un sasniegt savu mērķi. Tāpēc krāsas jāizvēlas, domājot ne tikai par radošumu, bet arī par lietošanas ērtumu.
Neatkarīgi no tā, kuru mājaslapu veidotāju izmanto, krāsas būtiski ietekmēs potenciālo klientu pirmo iespaidu par tavu uzņēmumu. Parūpējies, lai tas būtu pozitīvs.
Kā izskatās laba mājaslapas krāsu palete
Lai mājaslapa izskatītos profesionāli, tai nav nepieciešamas visas varavīksnes krāsas. Patiesībā ierobežota krāsu palete gandrīz vienmēr palīdz veidot tīrāku un sakārtotāku dizainu.
Lielākajai daļai veiksmīgu mājaslapu pietiek ar:
- vienu pamatkrāsu, kas ir galvenā zīmola krāsa
- vienu akcenta krāsu, ko taupīgi izmanto pogām un citiem svarīgiem elementiem
- vienu papildkrāsu, ja tā nepieciešama neuzkrītošiem akcentiem
- neitrālu toņu kopumu, piemēram, baltu, pelēku, melnu un pelēkbaltu
Profesionālai mājaslapai parasti pietiek ar trim līdz piecām krāsām.
Mazāks krāsu skaits palīdz padarīt mājaslapu:
- vieglāk lasāmu
- vizuāli vienotāku
- mierīgāku un profesionālāku
- vieglāk izveidojamu un uzturamu
Tas ir īpaši svarīgi, ja izmanto mājaslapu veidotāju, jo gatavās veidnes jau nodrošina pārdomātu struktūru. Krāsu paletei jāpapildina izkārtojums un saturs, nevis jānomāc tie.
No kā sastāv laba krāsu palete
1. Pamatkrāsa
Tā ir tava galvenā zīmola krāsa.
Pamatkrāsu vari izmantot:
- virsrakstiem
- nelieliem akcentiem
- sadaļu foniem
- ikonām
- zīmola elementiem
Labai pamatkrāsai vajadzētu:
- būt patīkamai un nenogurdināt acis;
- atspoguļot tava zīmola noskaņu;
- labi saderēt gan ar baltu, gan melnu tekstu.
Piemērotas izvēles: tumši zila, meža zaļa, tumši tirkīzzila, pieklusināta bordo krāsa, silti brūna un pelēcīgi zila.
Krāsas, kuras labāk neizvēlēties par pamatkrāsu: neona toņi, ļoti spilgti dzeltenie toņi un pārmērīgi piesātināti sarkanie toņi.
2. Akcenta krāsa
Akcenta krāsa palīdz izcelt svarīgākos mājaslapas elementus.
To vari izmantot:
- galvenajām pogām;
- aicinājumiem uz rīcību;
- svarīgas informācijas izcelšanai;
- steidzamiem paziņojumiem, piemēram, par izpārdošanām, akcijām un brīdinājumiem.
Akcenta krāsai skaidri jākontrastē ar pamatkrāsu, lai svarīgākie elementi būtu viegli pamanāmi.
Veiksmīgu kombināciju piemēri:
- tumši zila + koraļļkrāsa
- ogļu pelēka + zelta krāsa
- tumši zaļa + maigi oranža
- brūna + debeszila
Akcenta krāsu izmanto taupīgi, aptuveni 5 līdz 10% no visa dizaina. Tādējādi tā saglabās savu nozīmi un pamanāmību.
3. Papildkrāsa, ja nepieciešams
Papildkrāsa ir mierīgs atbalsta tonis, ko izmanto mēreni:
- foniem
- nelieliem dekoratīviem elementiem
- smalkām vizuālām variācijām
Papildkrāsai jābūt mierīgākai un neuzkrītošākai par pamatkrāsu. Tai nevajadzētu būt spilgtākai vai sacensties par uzmanību.
4. Neitrālās krāsas
Neitrālās krāsas veido paletes pamatu un palīdz saturam un struktūrai izcelties.
Piemērotas neitrālās krāsas ir:
- balta;
- pelēkbalta;
- gaiši pelēka;
- vidēji pelēka;
- ogļu pelēka;
- melna, izmantojot to taupīgi.
Neitrālie toņi parasti aizņem lielāko daļu mājaslapas. Tie palīdz saglabāt dizainu tīru un tekstu viegli lasāmu, īpaši kopā ar pietiekamām atstarpēm.
Kā izvēlēties mājaslapas krāsas soli pa solim
1. solis: Izlem, kādu noskaņu vēlies radīt
Katram uzņēmumam ir savs raksturs.
Kādu iespaidu vēlies radīt?
- profesionālu un nopietnu
- siltu un viesmīlīgu
- dzīvespriecīgu un enerģisku
- mierīgu un nosvērtu
- ekskluzīvu un elegantu
Dažādas krāsu grupas palīdz radīt atšķirīgas noskaņas.
Piemēri:
- tumši zila un ogļu pelēka rada profesionālu iespaidu
- maigi zaļa un smilškrāsa rada dabisku noskaņu
- zelta krāsa un melna rada ekskluzīvu iespaidu
- silti oranža un koraļļkrāsa rada draudzīgu noskaņu
- spilgti tirkīzzila un dzeltena rada enerģisku noskaņu
Nosakot vēlamo noskaņu, būs vieglāk izvēlēties piemērotas krāsas.
2. solis: Izvēlies pamatkrāsu
Izvēlies vienu krāsu, kas vislabāk atspoguļo tava zīmola raksturu.
Padomi:
- izvairies no neona toņiem;
- izvairies no pārmērīgi spilgtām krāsām;
- izvēlies toni, kuru ir patīkami bieži redzēt;
- pārbaudi, kā krāsa izskatās uz liela laukuma.
Ja nezini, ar ko sākt, meklē Pinterest frāzi "modernas krāsu paletes". Tur atradīsi daudz gatavu ideju un krāsu kombināciju.
3. solis: Izvēlies kontrastējošu akcenta krāsu
Lai pārbaudītu pamatkrāsas un akcenta krāsas kontrastu, pajautā sev:
- Vai akcenta krāsa izceļas uzreiz?
- Vai galveno pogu var pamanīt vienā acu uzmetienā?
- Vai akcenta krāsa ir pietiekami atšķirīga, bet joprojām sader ar pamatkrāsu?
Ja abas krāsas ir pārāk līdzīgas, svarīgākie elementi neizcelsies.
Veiksmīgu kombināciju piemēri:
- tumši zila + koraļļkrāsa
- olīvzaļa + sinepju dzeltenā
- slānekļa zila + rūsgani oranža
- brūna + tirkīzzila
4. solis: Izvēlies neitrālos toņus
Neitrālajiem toņiem jābūt mierīgiem un neuzkrītošiem.
Veiksmīgu kombināciju piemēri:
- balta + gaiši pelēka + ogļu pelēka
- pelēkbalta + silta smilškrāsa + tumši brūna
- ļoti gaiši pelēka + vidēji pelēka
Šie neitrālie toņi veidos fonu pārējam dizainam.
5. solis: Pārbaudi visas krāsas kopā
Pirms galīgās izvēles izmēģini savu krāsu paleti:
- mājaslapas galvenajā sadaļā
- virsrakstos un pamattekstā
- pogās
- fona blokos
Šāds priekšskatījums ātri parādīs, vai krāsu palete ir līdzsvarota vai izskatās haotiska.
Krāsu kontrasts: lasāmības pamats
Pat visskaistākā krāsu palete nepalīdzēs, ja mājaslapas tekstu būs grūti izlasīt. Tāpēc krāsu kontrasts ir viens no svarīgākajiem lasāmības nosacījumiem.
Kontrasts ir atšķirība starp divu krāsu gaišumu, īpaši starp teksta un fona krāsu.
Augsts kontrasts: tekstu ir viegli izlasīt.
Zems kontrasts: tekstu ir grūti vai pat neiespējami izlasīt.
Labs kontrasts:
- uzlabo lasāmību
- padara mājaslapu pieejamāku plašākam cilvēku lokam
- palīdz apmeklētājiem ātri pārskatīt saturu
- samazina acu nogurumu
- rada profesionālāku iespaidu
Apskatīsim dažus piemērus.
Laba kontrasta piemēri
- melns teksts uz balta fona
- balts teksts uz tumši zila fona
- ogļu pelēks teksts uz gaiši pelēka fona
- tumši zaļš teksts uz gaišas smilškrāsas fona
Šīs krāsu kombinācijas ir patīkamas acīm un viegli lasāmas.
Slikta kontrasta piemēri
- gaiši pelēks teksts uz balta fona
- dzeltens teksts uz gaišas smilškrāsas fona
- sarkans teksts uz melna fona
- zils teksts uz nedaudz tumšāka zila fona
- balts teksts uz spilgti dzeltena fona
Šādas kombinācijas nogurdina acis un var mudināt apmeklētājus ātri pamest mājaslapu.
Kāpēc pietiekams kontrasts ir svarīgs pieejamībai
Cilvēki krāsas uztver atšķirīgi:
- daudziem cilvēkiem ir kāds krāsu redzes traucējums
- vecākiem cilvēkiem var būt grūtāk uztvert vāju kontrastu
- daži apmeklētāji mājaslapu skatās spilgtā saules gaismā
- dažu ekrānu spilgtums vai kvalitāte var būt nepietiekama
Pietiekams kontrasts palīdz nodrošināt, lai mājaslapa būtu ērti lietojama pēc iespējas plašākam apmeklētāju lokam.
Biežākās iesācēju kļūdas krāsu izvēlē
1. kļūda: pārāk daudz krāsu
Iesācēji bieži domā, ka vairāk krāsu padarīs mājaslapu interesantāku.
Taču parasti vairāk krāsu nozīmē vairāk apjukuma.
Slikts piemērs:
- sarkani virsraksti
- zaļas ikonas
- zilas saites
- violetas pogas
- dzelteni izcēlumi
Labs piemērs:
- viena pamatkrāsa
- viena akcenta krāsa
- mierīgi neitrālie toņi
Krāsu paletei jādarbojas kā vienotai komandai, nevis jāsacenšas par uzmanību.
2. kļūda: pārāk spilgtas neona krāsas
Neona krāsas var šķist aizraujošas, taču ekrānā tās bieži ir pārāk uzkrītošas. Tās rada vizuālu ņirboņu, nogurdina acis un apgrūtina teksta lasīšanu.
Izvairies no:
- neona zaļās krāsas
- spilgti dzeltenās krāsas
- elektriski violetās krāsas
- koši rozā krāsas
- īpaši piesātinātas sarkanās krāsas
Tā vietā izvēlies šo krāsu pieklusinātākus vai tumšākus toņus.
3. kļūda: nepietiekams teksta kontrasts
Pat skaista krāsu palete nepalīdzēs, ja teksts saplūst ar fonu. Nepietiekams kontrasts padara mājaslapu grūti un nepatīkami lietojamu.
Kombinācijas, no kurām izvairīties:
- gaiši pelēks teksts uz balta fona
- balts teksts uz dzeltena fona
- dzeltens teksts uz tirkīzzila fona
- sarkans teksts uz melna fona
Vienmēr dod priekšroku lasāmībai.
4. kļūda: pārmērīga akcenta krāsas izmantošana
Akcenta krāsa zaudē savu spēku un nozīmi, ja tā parādās visur.
Galvenajām pogām un svarīgākajiem elementiem vajadzētu būt pamanāmākajiem krāsu akcentiem. Visam pārējam dizainam jāpaliek mierīgākam.
5. kļūda: nekonsekventa krāsu lietošana
Ja dažādās mājaslapas sadaļās izmanto nedaudz atšķirīgas vienas krāsas nokrāsas, dizains var izskatīties nepabeigts un nevienots.
Izmanto tieši tās krāsas, kas iekļautas tavā paletē, un lieto tās konsekventi visā mājaslapā.
Kur un kā izmantot krāsu paleti
Pamatkrāsas izmantošana
Pamatkrāsu vari izmantot:
- virsrakstiem
- galvenajiem grafiskajiem elementiem
- ikonām
- nelieliem dekoratīviem akcentiem
Neizmanto pamatkrāsu gariem teksta blokiem vai visiem mājaslapas foniem, ja vien tās tonis nav pietiekami maigs un neuzkrītošs.
Akcenta krāsas izmantošana
Akcenta krāsu izmanto taupīgi:
- galvenajām pogām
- aicinājumiem uz rīcību
- svarīgām atzīmēm
- izpārdošanas un akciju atzīmēm
Akcenta krāsas uzdevums ir uzreiz piesaistīt uzmanību svarīgākajiem elementiem.
Neitrālo krāsu izmantošana
Neitrālos toņus vari izmantot:
- pamattekstam
- foniem
- formām
- sadaļām
- lapas kājenei
- satura kartītēm
Neitrālie toņi palīdz dizainam elpot un ļauj izcelties pārējām paletes krāsām.
Rīki, kas palīdz izvēlēties krāsas
Šie iesācējiem piemērotie rīki var ievērojami atvieglot krāsu izvēli:
- Coolors.co automātiski ģenerē saskaņotas krāsu paletes
- Adobe Color palīdz pārbaudīt kontrastu un atrast harmoniskas krāsu kombinācijas
- Khroma.co piedāvā uz mākslīgo intelektu balstītus krāsu palešu ieteikumus
- Pinterest piedāvā daudz krāsu palešu ideju un iedvesmas
- Mozello krāsu paletes piedāvā lietošanai gatavas, tīras un līdzsvarotas krāsu kombinācijas
Ar šiem rīkiem krāsas nav jāizvēlas tikai pēc izjūtas.
Noslēguma kontrolsaraksts pirms mājaslapas publicēšanas
Pajautā sev:
- Vai krāsu paletē ir tikai trīs līdz piecas krāsas?
- Vai galvenās pogas skaidri izceļas?
- Vai visu tekstu var viegli izlasīt?
- Vai akcenta krāsa pietiekami kontrastē ar pamatkrāsu?
- Vai izvēlētās krāsas atbilst mana zīmola raksturam?
- Vai mājaslapa izskatās vizuāli vienota?
- Vai paletē nav neona krāsu un teksta ar nepietiekamu kontrastu?
Ja uz lielāko daļu jautājumu vari atbildēt ar "jā", tava krāsu palete ir veiksmīgi izveidota un gatava lietošanai.
Secinājums: krāsa ir instruments, nevis dekorācija
Veidojot uzņēmuma mājaslapu, krāsu izvēle ir viens no svarīgākajiem dizaina lēmumiem. Taču tai nav jābūt sarežģītai. Izvēlies nelielu krāsu paleti, nodrošini pietiekamu kontrastu un izmanto katru krāsu ar skaidru nolūku.
Ievērojot šajā rakstā aprakstītos principus, vari izvairīties no biežākajām iesācēju kļūdām un izveidot saskaņotas krāsu kombinācijas, kas izskatās tīras un mūsdienīgas, kā arī palīdz apmeklētājiem ērti lietot mājaslapu.
Vairāk rakstu šajā sērijā
- Kas ir labs dizains un kāpēc tas ir svarīgi
- Kā izveidot efektīvu krāsu paleti savai mājaslapai
- Kā izvēlēties fontus savai mājaslapai
- Kas ir brīvā vieta un kā to izmantot mājaslapas dizainā
- Kā formatēt tekstu savā mājaslapā
- Kā izveidot vizuālo identitāti savai mājaslapai
- Kā izveidot efektīvas aicinājuma uz rīcību (CTA) pogas
- Kā izveidot pārdomātu mājaslapas izkārtojumu
- Kā izveidot skaidru un ērtu mājaslapas izvēlni
Lejupielādē mūsu bezmaksas Efektīva mājaslapas dizaina kontrolsarakstu (PDF), kas palīdzēs tev soli pa solim izvērtēt savu mājaslapu.