Kodulehe disaini põhimõtted: 10 reeglit

🎧 Podcast · VarvaraPodcast lisandub peagi

Avaldatud 14.11.2026 · Uuendatud 14.11.2026

Lühidalt: Kodulehe disaini põhimõtted, mis toovad päringuid, on: selge sõnum lehe ülaosas, mobiil enne arvutit, kiire laadimine, loetav tüpograafia, piisav kontrast ja ligipääsetavus, usaldussignaalid, nähtavad tegevuskutsed, lühikesed vormid, korralik mitmekeelsus ning ühtne kujundus. Nielsen Norman Groupi uuringu järgi kulub umbes 57% vaatamisajast lehe esimesele ekraanitäiele, seega peab väärtuspakkumine olema kohe näha. Google’i uuringu järgi lahkub 53% mobiilikülastajatest, kui leht laeb üle 3 sekundi. Alates 28.06.2025 kehtib EL-is ka ligipääsetavusakt (EAA), mis puudutab paljusid e-teenuseid ja e-poode.

Hea kodulehe disain ei tähenda ilusaid pilte, vaid lehte, kus külastaja saab mõne sekundiga aru, mida pakud, usaldab sind ja teab, mida edasi teha. Allpool on 10 kodulehe disaini põhimõtet, mis põhinevad kasutatavuse uuringutel ja meie kogemusel Eesti ettevõtete kodulehtedega. Iga põhimõtte juures on lihtne kontrollküsimus, millega saad oma lehte ise hinnata.

Miks kodulehe disain mõjutab päringute arvu?

Jakob Nielsen kirjutas Nielsen Norman Groupis, et kasutajad lahkuvad lehelt sageli 10–20 sekundi jooksul ning et lehel on umbes 10 sekundit aega oma väärtus selgeks teha. Kui külastaja selle aja jooksul ei leia vastust küsimusele „kas see on minu jaoks?“, läheb ta tagasi otsingusse ja konkurendi juurde. Disain on seega müügivahend: see otsustab, kas reklaamile või SEO-le kulutatud raha muutub päringuks.

Disain mõjutab ka nähtavust. Selge struktuur, loogilised pealkirjad, kiire laadimine ja tekstina (mitte pildina) esitatud info aitavad Google’il ja AI-süsteemidel, nagu ChatGPT ja Google’i AI-ülevaated, lehe sisu mõista ja tsiteerida. Sama lehe ülesehitus, mis aitab inimesel kiiresti vastuse leida, aitab ka masinal.

Põhimõtted 1–3: kuidas teha hea esmamulje?

1. Selgus lehe ülaosas

Nielsen Norman Groupi 2018. aasta silmajälgimisuuringus kulus 57% vaatamisajast esimesele ekraanitäiele ja 74% kahele esimesele. Ülaosas peab olema: mida sa teed, kellele, kus ja mis on järgmine samm. Näiteks „Raamatupidamisteenus väikeettevõttele Tallinnas“ ütleb rohkem kui „Teie edu on meie missioon“.

Kontroll: kas võõras inimene oskab 5 sekundi järel öelda, mida ettevõte pakub?

2. Mobiil enne arvutit

Kujunda kõigepealt telefoniekraanile: üks veerg, piisavalt suured nupud, telefoninumber klikitav, menüü lihtne. Google indekseerib lehti valdavalt mobiilivaate järgi, nii et mobiilis peidetud sisu kaotab ka otsingus.

Kontroll: kas saad telefonis ühe pöidlaga päringu saata ilma suumimata?

3. Kiirus

Google’i 2016. aasta uuringu „The Need for Mobile Speed“ järgi lahkub 53% mobiilikülastajatest, kui leht ei lae 3 sekundiga. Google’i Core Web Vitals mõõdikute „hea“ piirid on: suurima sisu kuvamine (LCP) kuni 2,5 sekundit, reageerimine interaktsioonile (INP) kuni 200 ms ja paigutuse nihe (CLS) kuni 0,1. Disainis tähendab see: optimeeritud pildid, vähem fonte ja animatsioone, ilma raskete liuguriteta avaplokk. Põhjustest ja kuludest lähemalt artiklis aeglane koduleht.

Kontroll: kas PageSpeed Insights näitab mobiilis rohelisi Core Web Vitals väärtusi?

Põhimõtted 4–5: kas leht on loetav kõigile?

4. Tüpograafia

Kasuta üht või kahte kirjatüüpi, põhiteksti suurus vähemalt 16 px, reavahe umbes 1,5 ja rea pikkus mõistlik (umbes 60–80 tähemärki). Selge pealkirjade hierarhia (H2, H3) aitab nii lugejat kui ka Google’it ja AI-süsteeme sisu struktuurist aru saada.

5. Kontrast ja ligipääsetavus

WCAG 2.2 nõuab tavalise teksti puhul kontrastsust vähemalt 4,5:1 ja suure teksti puhul 3:1. Helehall tekst valgel taustal on üks levinumaid vigu. Lisaks: piltidel alternatiivtekst, vormiväljadel sildid, klaviatuuriga kasutatav menüü, nähtav fookus. Euroopa ligipääsetavusakt (direktiiv (EL) 2019/882) kohaldub alates 28. juunist 2025 ning puudutab muu hulgas e-kaubandust ja paljusid tarbijatele suunatud e-teenuseid. Teenuseid osutavad mikroettevõtted (alla 10 töötaja ja käive või bilansimaht kuni 2 miljonit eurot) on teenustele kehtestatud nõuetest vabastatud, kuid ligipääsetav disain toob rohkem kliente ka siis, kui seadus seda ei nõua. Kas sinu lehte nõuded puudutavad, aitab hinnata meie veebilehe ligipääsetavuse teenus.

Kontroll: kas saad kogu lehe läbida ainult Tab-klahviga?

Põhimõtted 6–8: kuidas muuta külastaja päringuks?

6. Usaldussignaalid

Päris inimesed. Meeskonna fotod ja nimed, mitte pildipanga naeratused.
Tõendid. Tehtud tööd, kliendilood, Google’i hinnang koos arvustuste arvuga.
Ettevõtte andmed. Registrikood, aadress, telefon; Eestis kontrollivad kliendid sageli ettevõtet äriregistrist.
Selge hinnaloogika. Kui täpset hinda ei saa öelda, selgita, millest hind sõltub.

7. Tegevuskutsed (CTA)

Igal lehel peab olema üks peamine tegevus: „Küsi pakkumist“, „Broneeri aeg“, „Helista“. Nupp peab erinema ülejäänud kujundusest ja korduma pika lehe lõpus. Konkreetne tekst („Saada päring, vastame tööpäeva jooksul“) töötab paremini kui „Edasi“.

8. Vormid

Küsi ainult hädavajalikku: nimi, kontakt ja sõnum. Iga lisaväli on põhjus loobuda. Märgi kohustuslikud väljad, näita veateadet välja juures, mitte lehe ülaosas, ja kinnita saatmist selge teatega. Mõõda vormi saatmist GA4 võtmesündmusena.

Põhimõtted 9–10: kuidas hoida lehte terviklikuna?

9. Mitmekeelsus (ET/RU/EN)

Eestis on paljude ettevõtete kliendid eesti-, vene- ja ingliskeelsed. Hea mitmekeelne disain tähendab: keelevalik nähtaval kohal, iga keel eraldi URL-il, tõlgitud ka nupud, vormid, veateated ja meta-andmed ning hreflang-märgendid. Venekeelne tekst on sageli eestikeelsest pikem, seega peab kujundus selleks ruumi jätma.

10. Järjepidevus

Samad värvid, nupustiilid, vahed ja ikoonid igal lehel. Kasutaja õpib liidese ära esimesel lehel ja ootab, et see ka mujal sama moodi töötaks. Lihtne disainisüsteem (värvid, fondid, komponendid) muudab ka hilisemad muudatused odavamaks.

Kodulehe disaini põhimõtted praktikas: milline on hea ja halb lahendus?

Valdkond	Hea	Halb
Ülaosa	Selge pealkiri: teenus, sihtrühm, asukoht + nupp	Üldine loosung ja vahetuv liugur
Mobiil	Üks veerg, klikitav telefon, suured nupud	Arvutivaate vähendatud koopia
Kiirus	LCP kuni 2,5 s, optimeeritud pildid	Taustavideo ja 5 MB pildid
Tekst	16 px+, kontrast vähemalt 4,5:1	Väike helehall tekst
Usaldus	Päris tööd, arvustused, ettevõtte andmed	Pildipanga fotod, kontaktiks ainult vorm
Tegevuskutse	Üks selge peamine tegevus	Viis võrdset nuppu või mitte ühtegi
Vorm	3–4 välja, selged veateated	10 kohustuslikku välja
Keeled	Eraldi URL ja täielik tõlge	Automaatne tõlkeplugin
Ligipääsetavus	Alt-tekstid, sildid, klaviatuuriga kasutatav	Tekst piltidel, fookus nähtamatu

Kuidas IT Solutions Group aitab?

Teeme Tallinnas kodulehti ja WordPressi lahendusi 2016. aastast ning oleme teinud üle 100 projekti Eestis, Soomes ja mujal EL-is. Kodulehe tegemise juures lähtume just nendest põhimõtetest: mobiil enne, kiirus, ligipääsetavus ja eesti, vene ning inglise keele korrektne ülesehitus. Olemasoleva lehe puhul alustame auditist, et näha, mis päringuid takistab.

Loe ka: Aeglane koduleht: 10 põhjust ja kui palju see maksab, Mida valmistada ette enne kodulehe tellimist ja Digiturundus väikeettevõttele.

Korduma kippuvad küsimused

Mis on kodulehe disaini kõige olulisem põhimõte?

Selgus: külastaja peab esimesel ekraanitäiel aru saama, mida pakud, kellele ja mis on järgmine samm. Nielsen Norman Groupi järgi kulub ligikaudu 57% vaatamisajast just sellele alale.

Kui kiiresti peaks koduleht laadima?

Google’i Core Web Vitals hindab heaks suurima sisu kuvamise (LCP) kuni 2,5 sekundiga. Google’i uuringu järgi lahkub 53% mobiilikülastajatest, kui leht laeb üle 3 sekundi.

Kas ligipääsetavusakt kehtib ka minu kodulehele?

EAA kohaldub alates 28.06.2025 eelkõige e-kaubandusele ja teatud tarbijateenustele. Teenuseid osutavad mikroettevõtted on nõuetest vabastatud, kuid täpne vastus sõltub tegevusalast ja lehe funktsioonidest.

Milline peab olema teksti kontrast?

WCAG 2.2 järgi vähemalt 4,5:1 tavalise teksti ja 3:1 suure teksti puhul. Kontrasti saab kontrollida tasuta tööriistadega, näiteks brauseri arendajatööriistadega.

Kas mitmekeelne koduleht vajab eraldi disaini?

Eraldi disaini ei vaja, kuid kujundus peab arvestama eri pikkusega tekstidega ja igal keelel peab olema oma URL. Tõlkida tuleb ka nupud, vormid ja veateated.

Kodulehe disain: 10 põhimõtet, mis toovad päringuid