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 - bet arī viena no biedējošākajām, īpaši, ja Tev nav dizaina pieredzes. Ar tik daudziem toņiem, kombinācijām un idejām par zīmolu ir viegli justies nedrošam par to, ar ko sākt.
Mozello mēs esam palīdzējuši tūkstošiem cilvēku izveidot mājaslapu, izmantojot mūsu mājaslapu veidotāju maziem uzņēmumiem. Lielākā daļa no viņiem nav dizaineri. Viņi ir parasti cilvēki, kuri vēlas lapu, kas šķiet moderna, uzticama un viegli lietojama. Un viena lieta, ko esam pamanījuši atkal un atkal, ir šī:
Lielisks krāsu dizains nav par "skaistu krāsu" izvēli.
Lielisks krāsu dizains ir par to, lai padarītu Tavu mājaslapu efektīvāku.
Krāsas palīdz vadīt Tavus apmeklētājus, noteikt Tava zīmola toni, radīt hierarhiju, uzlabot lasāmību un ietekmēt cilvēku rīcību. Ar tikai dažiem vienkāršiem principiem Tu vari izveidot krāsu paleti, kas šķiet profesionāla - pat ja Tu izvēlies krāsas pirmo reizi.
Šis raksts izvedīs Tevi cauri visam, kas Tev kā iesācējam jāzina:
- kā izvēlēties vienkāršu, efektīvu krāsu paleti
- kā to pareizi izmantot savā mājaslapā
- kā izvairīties no biežākajām kļūdām
- kā pārliecināties, ka Tavas krāsas ir viegli lasāmas un pieejamas, izmantojot labu kontrastu
Padarīsim krāsas vieglas.
Kāpēc krāsa ir svarīga, veidojot mājaslapu
Krāsa ir viens no ātrākajiem veidiem, kā Tava mājaslapa sazinās ar apmeklētājiem - daudz ātrāk nekā teksts vai attēli. Pirms kāds izlasa virsrakstu vai izpēta Tavu izvēlni, viņa smadzenes veido iespaidu, balstoties tikai uz krāsu.
Pareizās krāsas var padarīt Tavu biznesu:
- uzticamu
- draudzīgu
- modernu
- tīru
- luksusa
- jaunīgu
- mierīgu
- enerģisku
Nepareizās krāsas var radīt apjukumu, neapmierinātību vai pat neuzticēšanos. Piemēram, zema kontrasta teksts var padarīt Tavu lapu grūti lasāmu. Pārāk piesātinātas krāsas var šķist stresa pilnas. Pārāk daudz krāsu var padarīt visu neprofesionālu.
Tā kā Tavas mājaslapas uzdevums ir vadīt un atbalstīt apmeklētāju, Tavas krāsas jāizvēlas, domājot par lietošanas ērtumu - ne tikai par radošumu.
Kad Tu veido mājaslapu, izmantojot jebkuru mājaslapu veidotāju maziem uzņēmumiem, krāsas kļūst par būtisku daļu no pirmā iespaida, ko iegūs Tavi potenciālie klienti. Pārliecināsimies, ka šis iespaids ir pozitīvs.
Kā izskatās iesācējam draudzīga mājaslapas krāsu palete
Profesionāli izskatošai mājaslapai nav vajadzīga varavīksne no krāsām. Patiesībā mazāk krāsu gandrīz vienmēr rada tīrāku dizainu.
Lielākā daļa lielisku mājaslapu izmanto:
- 1 galveno krāsu - galveno zīmola krāsu
- 1 akcentkrāsu - izmantotu taupīgi pogām un svarīgiem elementiem
- 1 neobligātu sekundāro krāsu - ļoti smalku atbalstu
- neitrālu krāsu kopu - baltas, pelēkas, melnas un pelēkbaltas
Tas arī viss.
Pilnīga palete ar tikai 3-5 krāsām kopā ir vairāk nekā pietiekama.
Mazāk krāsu izmantošana padara Tavu lapu:
- vieglāk lasāmu
- konsekventāku
- mierīgāku un profesionālāku
- vieglāk veidojamu un uzturamu
Tas ir īpaši patiesi, ja Tu izmanto mājaslapu veidotāju - jo šabloni jau ir strukturēti. Tavai paletei vienkārši jāpapildina izkārtojums, nevis jādominē pār to.
Labas krāsu paletes anatomija
1. Galvenā krāsa
Tava galvenā zīmola krāsa.
Izmantota:
- virsrakstiem
- smalkiem akcentiem
- sadaļu foniem
- ikonām
- zīmola elementiem
Labai galvenajai krāsai vajadzētu:
- būt ērti skatāmai
- atspoguļot Tava zīmola noskaņu
- labi saskanēt ar baltu vai melnu tekstu
Labas izvēles: tumši zila, meža zaļa, dziļa tirkīza, pieklusināta bordo, silti brūna, pelēcīgi zila
Krāsas, no kurām izvairīties kā galvenajām: neona toņi, ārkārtīgi spilgti dzeltenie un pārāk piesātināti sarkanie
2. Akcentkrāsa
Tava vissvarīgākā krāsa.
Izmantota:
- pogām
- aicinājumiem rīkoties
- svarīgiem izcēlumiem
- steidzamai informācijai (izpārdošanas, brīdinājumi, akcijas)
Tavai akcentkrāsai skaidri jākontrastē ar galveno krāsu, lai svarīgie elementi izceltos.
Labas kombinācijas:
- tumši zila + koraļļu
- ogļu pelēka + zelta
- tumši zaļa + maiga oranža
- brūna + debeszila
Tavu akcentkrāsu vajadzētu izmantot taupīgi - varbūt 5-10% no visa dizaina. Tas saglabā tai nozīmi.
3. Sekundārā krāsa (neobligāta)
Maiga atbalsta krāsa, izmantota mērenībā, parasti:
- foniem
- maziem dekoratīviem elementiem
- smalkām vizuālām variācijām
Sekundārajām krāsām vajadzētu būt mierīgākām nekā Tavai galvenajai krāsai, nevis spilgtākām.
4. Neitrālās krāsas
Neitrālās krāsas ir Tavs pamats. Tās nes Tavu saturu un struktūru.
Lieliskas neitrālās krāsas ir:
- balta
- pelēkbalta
- gaiši pelēka
- vidēji pelēka
- ogļu pelēka
- melna (taupīgi)
Neitrālās krāsas veido lielāko daļu Tavas mājaslapas. Tās saglabā visu tīru un viegli lasāmu, īpaši, ja tās apvienotas ar labām atstarpēm.
Kā izvēlēties krāsas soli pa solim
1. solis: Izlem, kā vēlies, lai Tavs zīmols justos
Katram biznesam ir sava personība.
Vai Tu esi:
- profesionāls un nopietns?
- silts un viesmīlīgs?
- dzīvespriecīgs un enerģisks?
- mierīgs un rāms?
- luksusa un elegants?
Dažādas krāsu saimes atbalsta dažādas noskaņas.
Piemēri:
- Tumši zila, ogļu pelēka → profesionāli
- Maigi zaļā, smilškrāsa → dabiski
- Zelta, melna → luksuss
- Silti oranža, koraļļu → draudzīgi
- Spilgta tirkīza, dzeltena → enerģiski
Tas piešķir Tavai krāsu izvēlei virzienu.
2. solis: Izvēlies savu galveno krāsu
Izvēlies vienu krāsu, kas iemieso Tava zīmola personību.
Padomi:
- izvairies no neona
- izvairies no ārkārtīgi spilgtām krāsām
- izvēlies toni, ko ir ērti bieži skatīt
- pārbaudi to uz liela fona
Ja Tu nezini, ar ko sākt, meklē Pinterest "modernas krāsu paletes". Tu redzēsi daudz gatavu ideju.
3. solis: Izvēlies akcentkrāsu, kas kontrastē
Lai pārbaudītu kontrastu starp galveno un akcentkrāsu, jautā:
- Vai akcentkrāsa uzreiz izceļas?
- Vai Tu vari uzreiz atrast pogu?
- Vai tā šķiet manāmi atšķirīga, bet ne konfliktējoša?
Ja abas krāsas ir pārāk līdzīgas, nekas neizceļas.
Spēcīgu kombināciju piemēri:
- Tumši zila + koraļļu
- Olīvzaļa + sinepju
- Slānekļa zila + degoša oranža
- Brūna + tirkīza
4. solis: Izvēlies savas neitrālās krāsas
Neitrālajām krāsām vajadzētu šķist mierīgām un nepievērst uzmanību.
Labas kombinācijas:
- 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 kļūs par visa Tava dizaina fonu.
5. solis: Pārbaudi savas krāsas kopā
Pirms apņemies, izmēģini savu paleti uz:
- galvenās sadaļas
- virsrakstiem un rindkopām
- pogām
- fona blokiem
Šis priekšskatījums ātri parādīs, vai palete šķiet līdzsvarota vai haotiska.
Krāsu kontrasta izpratne (lasāmības atslēga)
Tev var būt visskaistākās krāsas pasaulē, bet, ja Tavu tekstu ir grūti izlasīt, Tavs dizains cieš neveiksmi. Tieši tāpēc ir svarīgs krāsu kontrasts.
Kontrasts attiecas uz spilgtuma atšķirību starp divām krāsām - īpaši tekstu un fonu.
Augsts kontrasts = viegli lasāms
Zems kontrasts = grūti vai neiespējami lasāms
Labs kontrasts:
- uzlabo lasāmību
- padara Tavu lapu pieejamāku ikvienam
- palīdz apmeklētājiem ātri pārskatīt
- samazina acu nogurumu
- palielina profesionalitāti
Aplūkosim piemērus.
Laba kontrasta piemēri
- Melns teksts uz balta fona
- Balts teksts uz tumši zila
- Ogļu pelēks teksts uz gaiši pelēka
- Tumši zaļš teksts uz bālas smilškrāsas
Šīs kombinācijas ir ērtas un viegli lasāmas.
Slikta kontrasta piemēri
- Gaiši pelēks teksts uz balta
- Dzeltens teksts uz bālas smilškrāsas
- Sarkans teksts uz melna
- Zils teksts uz nedaudz tumšāka zila
- Balts teksts uz spilgti dzeltena fona
Tie rada acu nogurumu un liek apmeklētājiem ātri aiziet.
Kāpēc kontrasts ir būtisks pieejamībai
Ne visi redz krāsas vienādi:
- daudziem cilvēkiem ir kāda krāsu akluma forma
- vecākiem apmeklētājiem var būt zemāka kontrasta jutība
- daži lietotāji skatās Tavu lapu spilgtā saules gaismā
- dažiem ekrāniem ir slikts spilgtums
Pareizs kontrasts nodrošina, ka Tava mājaslapa strādā ikvienam apmeklētājam.
Biežākās kļūdas, ko iesācēji pieļauj ar krāsām
Kļūda #1: Pārāk daudz krāsu izmantošana
Iesācēji bieži domā "vairāk krāsu = interesantāk".
Bet patiesībā:
Vairāk krāsu = vairāk apjukuma.
Slikts piemērs:
- sarkani virsraksti
- zaļas ikonas
- zilas saites
- violetas pogas
- dzelteni izcēlumi
Labs piemērs:
- viena galvenā krāsa
- viena akcentkrāsa
- mierīgas neitrālās krāsas
Tavai paletei vajadzētu šķist kā komandai - nevis sacensībai.
Kļūda #2: Spilgtu neona krāsu izvēle
Neona krāsas izskatās aizraujoši, bet ekrānos uzvedas šausmīgi. Tās vibrē, nogurdina acis un samazina lasāmību.
Izvairies no:
- neona zaļas
- spilgti dzeltenas
- elektriski violetas
- koši rozā
- īpaši piesātinātas sarkanas
Tā vietā izvēlies apslāpētas vai dziļas versijas.
Kļūda #3: Slikts teksta kontrasts
Pat ar jauku paleti, ja Tavs teksts pazūd fonā, Tavu lapu kļūst nepatīkami lietot.
Piemēri, no kuriem izvairīties:
- gaiši pelēks uz balta
- balts uz dzeltena
- dzeltens uz tirkīza
- sarkans uz melna
Vienmēr dod priekšroku lasāmībai.
Kļūda #4: Akcentkrāsas pārmērīga izmantošana
Akcentkrāsas zaudē savu "spēku", kad tās parādās visur.
Pogām vajadzētu būt viskrāsainākajam elementam - nevis visam Tavam izkārtojumam.
Kļūda #5: Nekonsekventa krāsu lietošana
Dažādu viena toņa nokrāsu izmantošana dažādās lapās padara Tavu lapu nepabeigtu.
Turies pie precīzajām krāsām savā paletē.
Kur un kā efektīvi izmantot savas krāsas
Galvenās krāsas lietošana
Izmanto to:
- virsrakstiem
- galvenajai grafikai
- ikonām
- maziem dekoratīviem pieskārieniem
Neizmanto to lieliem teksta blokiem vai visiem foniem, ja vien tā nav pietiekami maiga.
Akcentkrāsas lietošana
Izmanto taupīgi:
- galvenajām pogām
- aicinājumiem rīkoties
- svarīgām etiķetēm
- izpārdošanas nozīmītēm
Tavai akcentkrāsai vajadzētu uzreiz piesaistīt uzmanību.
Neitrālo krāsu lietošana
Izmanto neitrālās krāsas:
- pamattekstam
- foniem
- formām
- sadaļām
- kājenei
- kartīšu blokiem
Neitrālās krāsas ir Tava dizaina "elpošanas telpa".
Rīki, kas palīdzēs Tev izvēlēties krāsas
Šeit ir iesācējam draudzīgi rīki, kas atvieglo krāsu izvēli:
- Coolors.co - automātiski veido paletes
- Adobe Color - pārbauda kontrastu un atrod harmonijas
- Khroma.co - MI balstīti paletes ieteikumi
- Pinterest - daudz "krāsu paletes" iedvesmas
- Mozello tēmu iestatījumi - tīras, līdzsvarotas iespējas, gatavas lietošanai
Šie rīki novērš minēšanu no krāsu izvēles.
Pēdējais kontrolsaraksts pirms publicēšanas
Pajautā sev:
- Vai es ierobežoju savu paleti līdz 3-5 krāsām?
- Vai manas pogas skaidri izceļas?
- Vai es varu ērti izlasīt visu tekstu?
- Vai mana akcentkrāsa kontrastē ar galveno krāsu?
- Vai manas krāsas atbilst mana zīmola personībai?
- Vai lapa šķiet mierīga, tīra un konsekventa?
- Vai es izvairījos no neona krāsām un zema kontrasta teksta?
Ja Tu atbildēji "jā" uz lielāko daļu no šiem, Tava krāsu palete ir spēcīga.
Secinājums: Krāsa ir instruments - nevis dekorācija
Kad Tu veido mājaslapu savam biznesam, krāsa kļūst par vienu no Taviem svarīgākajiem dizaina lēmumiem. Bet tam nav jābūt sarežģītam. Saglabā savu paleti nelielu, kontrastu spēcīgu un lietojumu apzinātu.
Ar šī raksta principiem Tu izvairīsies no biežākajām iesācēju kļūdām un izveidosi krāsu kombinācijas, kas šķiet tīras, modernas un patiešām noderīgas Taviem apmeklētājiem.
Vairāk rakstu šajā sērijā
- Kas ir labs tīmekļa dizains un kāpēc tas ir svarīgi
- Kā izvēlēties krāsas savai mājaslapai
- Kā izvēlēties fontus savai mājaslapai
- Kā izmantot brīvo vietu tīmekļa dizainā
- Kā formatēt tekstu savā mājaslapā
- Kā radīt vizuālo identitāti savai mājaslapai
- Kā izveidot efektīvus aicinājumus rīkoties
- Kā organizēt savu mājaslapu kā dizainerim
- Kā izveidot skaidru mājaslapas navigāciju
Lejupielādē mūsu bezmaksas Labākās tīmekļa dizaina prakses kontrolsarakstu, kas palīdzēs Tev soli pa solim izvērtēt savu mājaslapu.