Kodulehe disaini põhimõtted: kuidas üles ehitada hea kujundus

Hea kodulehe disain ei tähenda lihtsalt ilusat pilti. See on süsteem, mis aitab külastajal aru saada, kuhu ta on sattunud, mida saab teha ja kuhu edasi minna. Kui kujundus seda ei toeta, ei aita ka kõige stiilsem visuaal. Allpool käime läbi kodulehe disaini põhimõtted, mis päriselt tulemust mõjutavad, ja iga juures ka selle, kuidas neid praktikas rakendada.

Esmamulje ja visuaalne hierarhia

Külastaja otsustab mõne sekundiga, kas jääda või lahkuda. Selle aja jooksul ei loe ta teksti, vaid skaneerib lehte pilguga. Visuaalse hierarhia ülesanne on suunata see pilk õigesse järjekorda: kõigepealt peamine sõnum, siis toetav info, alles seejärel detailid.

Hierarhia tekib kontrastist. Suurem kiri tundub tähtsam kui väiksem, tugev värv tõmbab tähelepanu kiiremini kui hall, ja ümbritsev tühi ruum tõstab elemendi esile. Praktikas tähendab see: lehe ülaservas üks selge pealkiri, mis ütleb, mida pakute ja kellele; selle all lühike selgitus; ja kohe nähtaval üks peamine nupp. Kui kõik on korraga suur ja paks, ei paista miski silma. Vähem rõhutamist annab tihti rohkem mõju.

Kasutajakogemus ja selge teekond

Kasutajakogemus (UX) on see, kui lihtne on külastajal jõuda oma eesmärgini. Iga lehe puhul tasub küsida: mida see inimene siin teha tahab ja mida mina tahan, et ta teeks? Kui need kaks kattuvad, on teekond loomulik.

Hea veebidisain juhib külastaja punktist A punkti B ilma, et ta peaks mõtlema. See tähendab loogilist sammude jada: avaleht tutvustab, teenuse- või tootelehed selgitavad, kontakt- või ostuvorm viib lõpule. Iga lehe lõpus peaks olema selge järgmine samm. Vältige olukorda, kus külastaja jõuab info lugemise lõppu ja seisab tupikus, kust edasi minna ei saa.

Üks levinud viga on liiga palju valikuid korraga. Kui pakute kümmet võimalust ühel ekraanil, ei vali inimene sageli ühtegi. Parem on üks selge põhitee ja kõrval paar alternatiivi.

Navigeerimine, mis ei eelda mõtlemist

Menüü on kodulehe kaart. See peab olema arusaadav inimesele, kes teie ettevõttest midagi ei tea. Kasutage tavalisi, äratuntavaid nimetusi (Teenused, Hinnad, Meist, Kontakt) leidlike sõnamängude asemel. Mida vähem menüüpunkte, seda lihtsam on valida — enamasti piisab viiest-kuuest.

Külastaja peaks alati teadma, kus ta lehel asub ja kuidas tagasi pääseb. Selles aitavad püsiv ülemenüü, leivapuru-rada pikematel lehtedel ja selgelt eristuvad lingid. Otsing on kasulik suuremate saitide puhul, kuid see ei asenda korralikku struktuuri.

Mobiilisõbralikkus ja responsiivsus

Suurem osa veebiliiklusest tuleb täna telefonist. See tähendab, et kujundus tuleb mõelda läbi väikese ekraani jaoks, mitte hiljem sinna "ära mahutada". Responsiivne disain kohaneb ekraani laiusega: veerud lähevad üksteise alla, kirjasuurus jääb loetavaks ja pildid skaleeruvad.

Praktikas on olulised mõned detailid. Nupud ja lingid peavad olema piisavalt suured, et neid sõrmega tabada. Tekst peab olema loetav ilma suurendamata. Vormiväljad ei tohi olla kitsad ega üksteise vastu surutud. Hea reegel on testida lehte päris telefonis, mitte ainult brauseri aknas väiksemaks tõmmatuna.

Brändi järjepidevus: värvid ja tüpograafia

Järjepidev kujundus tekitab usaldust. Kui iga leht näeb välja erinev, jääb mulje lohakusest. Sellepärast tasub paika panna kindel värvipalett ja sellest kinni pidada: tavaliselt üks põhivärv, üks-kaks lisavärvi ja neutraalsed toonid taustaks. Värve ei pea olema palju — distsipliin mõjub professionaalsemalt kui kirevus.

Sama kehtib tüpograafia kohta. Üks või kaks kirjastiili on enamasti piisav: üks pealkirjadele, teine põhitekstile. Tähtis on lugemismugavus — piisav reavahe, mõistlik rea pikkus ja selge kontrast teksti ja tausta vahel. Korralik tüpograafia teeb lehe loetavaks ja ühtne stiil paneb selle kokku kuuluma.

Selged üleskutsed tegevusele

Üleskutse (CTA) on koht, kus külastaja teeb otsuse: võtab ühendust, tellib, ostab. See peab olema visuaalselt esile tõstetud ja sõnastatud selgelt. "Küsi pakkumist" ütleb rohkem kui "Edasi". Üks peamine üleskutse lehe kohta töötab paremini kui mitu konkureerivat nuppu.

CTA asukoht loeb. Pane see sinna, kus külastaja on otsustamiseks valmis — pärast seda, kui ta on saanud vajaliku info. Pikemal lehel võib sama üleskutse korrata mitmes kohas, sest erinevad inimesed jõuavad otsuseni eri hetkel.

Kiirus on osa disainist

Kõige ilusam kujundus ei aita, kui leht avaneb aeglaselt. Iga lisasekund laadimist suurendab tõenäosust, et külastaja lahkub enne, kui leht üldse nähtavale jõuab. Kiirus mõjutab ka otsingumootori positsiooni.

Suurim süüdlane on tavaliselt pildid. Optimeeri need õigesse suurusesse ja kaasaegsesse vormingusse, lae alla alles vajadusel ja väldi raskeid taustavideoid seal, kus need väärtust ei lisa. Sama oluline on tehniline pool: liiga palju koodi ja kolmandate osapoolte skripte (näiteks raskelt seadistatud WordPressi pluginad) aeglustavad lehte märgatavalt. Hea disain arvestab jõudlusega juba algusest peale.

Kuidas need põhimõtted kokku panna

Visuaalne hierarhia, läbimõeldud kasutajakogemus, selge navigeerimine, responsiivsus, ühtne bränd, arusaadavad üleskutsed ja kiirus ei ole eraldi nimekirja punktid. Need töötavad koos: tugev hierarhia toetab teekonda, järjepidev bränd tugevdab usaldust, kiirus hoiab külastaja kohal. Kui üks lüli puudub, kannatab tervik.

ArborIT on kodulehti ja veebidisaini teinud alates 2014. aastast, nii WordPressi kui ka koodipõhiste (Reacti) lahendustega — valime tehnoloogia vastavalt sellele, mis projektile kõige paremini sobib. Kui plaanid uut kodulehte või tahad olemasolevat värskendada, vaata lähemalt meie UI/UX disaini ja kodulehtede tegemise teenuseid või võta ühendust ja arutame, mis sinu projekti puhul kõige rohkem mõtet annab.