Labs dizains ir par to, kā tas strādā, ne tikai kā tas izskatās

Kas ir labs mājaslapas dizains un kāpēc tas ir svarīgi.

Kad vairums cilvēku dzird vārdu "dizains", viņi iedomājas krāsas, fontus, grafiskos elementus un varbūt arī izsmalcinātu izkārtojumu. Jā, tas viss ir svarīgi. Taču labs dizains nenozīmē tikai skaistu izskatu. Tikpat svarīgi ir tas, kā mājaslapa darbojas: cik viegli apmeklētāji var atrast vajadzīgo, cik ērti ir lasīt tavu saturu un cik skaidri viņi saprot, ko darīt tālāk, piemēram, iegādāties produktu, sazināties ar tevi vai pieteikties.

Mozello esam redzējuši, kā tūkstošiem cilvēku pirmo reizi veido savu mājaslapu. Lielākā daļa no viņiem nav dizaineri. Daudzi uztraucas, ka viņiem "nav dizainera acs" vai ka viņi "neorientējas tehnoloģijās". Tas ir pilnīgi normāli, jo labam mājaslapas dizainam nav nepieciešams īpašs mākslinieka talants. Svarīgāk ir apgūt dažus vienkāršus un praktiskus principus, kas palīdz izveidot ērti lietojamu mājaslapu.

Ja veido mājaslapu mazam uzņēmumam, šie principi ir īpaši svarīgi. Mazā uzņēmuma mājaslapai jāspēj paveikt daudz: tai jāpārliecina, jāinformē, jārada uzticība un jāpalīdz apmeklētājiem ātri rīkoties. Skaista mājaslapa, kas mulsina apmeklētājus, nekad nebūs tik efektīva kā vienkārša mājaslapa, kas labi pilda savu uzdevumu.

Šajā rakstā apskatīsim, ko patiesībā nozīmē labs mājaslapas dizains un kāpēc tas ir svarīgs. Ar to ieliksim pamatus arī pārējiem sērijas "Labākā prakse mājaslapu dizainā" rakstiem.

Ķersimies pie lietas.

Kāpēc dizains ir kas vairāk par dekorāciju

Iedomājies, ka ieej pārtikas veikalā, kurā:

augļi ir salikti kopā ar tīrīšanas līdzekļiem;
preču etiķetes ir neskaidras;
ejas ved zigzagā;
katrs plaukts izskatās citādi;
nav iespējams atrast kasi.

Veikals joprojām varētu izskatīties košs, taču tu justos apjucis un neapmierināts. Visticamāk, tu drīz vien aizietu.

Mājaslapa darbojas līdzīgi.

Dizains veido struktūru, kas palīdz cilvēkiem viegli orientēties. Veidojot mājaslapu, tu radi vidi īstiem cilvēkiem, nevis mākslas galerijas ekspozīciju. Taviem apmeklētājiem vajadzētu:

uzreiz saprast, kur viņi atrodas;
viegli atrast meklēto;
justies ērti un saprast, kurp doties;
nešaubīties, ko darīt tālāk.

Labs dizains ļauj rīkoties intuitīvi. Slikts dizains liek apstāties un domāt par katru soli.

Slikta dizaina piemērs

Iedomājies šādu sākumlapu:

milzīgs virsraksts grūti salasāmā dekoratīvajā fontā;
spilgts fona attēls, uz kura esošais teksts nav pietiekami labi salasāms;
trīs atšķirīgi pogu stili, kas vienlaikus cenšas piesaistīt uzmanību;
gari teksta bloki bez skaidra sadalījuma un formatējuma;
galvenā izvēlne ar 10 vai vairāk sadaļām.

Pat ja uzņēmums un produkti ir izcili, daudzi apmeklētāji šādu mājaslapu pametīs dažu sekunžu laikā, jo tā šķiet pārblīvēta un grūti uztverama.

Laba dizaina piemērs

Tagad iedomājies vienkāršu, pārskatāmu un iesācējam viegli izveidojamu sākumlapu:

īss un skaidrs virsraksts;
vienkāršs, viegli salasāms fonts;
viena akcentkrāsa, kas konsekventi izmantota visā mājaslapā;
nepārblīvēts galvenais attēls ar pietiekami daudz brīvo vietu;
īsa galvenā izvēlne ar 4 vai 5 sadaļām;
viens skaidrs aicinājums uz darbību (CTA).

Šī mājaslapa necenšas pārsteigt ar sarežģītu un māksliniecisku dizainu. Tās spēks ir tas, cik ērti to lietot, un tieši tas palīdz noturēt apmeklētāju uzmanību.

Labs dizains palīdz apmeklētājiem sasniegt mērķi

Neatkarīgi no tā, vai mājaslapu veido ar mājaslapu izveides rīku vai no pašiem pamatiem, ikviens dizaina lēmums ietekmē to, cik viegli apmeklētāji var to lietot. Ja apmeklētāji var viegli sasniegt savu mērķi, arī tava mājaslapa veiksmīgāk pilda savu uzdevumu.

Labs dizains palīdz apmeklētājiem:

ērti lasīt saturu, izmantojot īsas rindkopas, viegli salasāmus fontus, pietiekamas atstarpes un izteiktu kontrastu;
atrast vajadzīgo pogu, veidojot skaidrus, pamanāmus un konsekventus aicinājumus rīkoties, piemēram, "Sazinies ar mums" vai "Pērc tagad";
izprast mājaslapas struktūru, izmantojot loģisku satura hierarhiju, skaidrus virsrakstus, pietiekamas atstarpes un intuitīvu navigāciju;
pieņemt lēmumus, izmantojot vienotu zīmola stilu, noderīgus vizuālos elementus, skaidru valodu un izkārtojumu, kas palīdz spert nākamo soli.

Dizains nav tikai dekorācija. Tas ir biznesa instruments.

Kāpēc vienkāršs dizains ir labāka izvēle iesācējiem

Viena no biežākajām iesācēju kļūdām, veidojot mazā uzņēmuma mājaslapu, ir pieņēmums, ka "vairāk dizaina elementu" nozīmē "labāku dizainu".

Taču vienkāršība nenozīmē garlaicīgu dizainu. Tā nozīmē ērtu lietošanu.

Vienkāršs dizains darbojas, jo:

Mūsu smadzenēm patīk skaidrība. Jo vieglāk mājaslapu saprast, jo ilgāk apmeklētāji tajā, visticamāk, uzkavēsies.
Vienkāršas mājaslapas ielādējas ātrāk. Sarežģīti un apjomīgi elementi var palēnināt mājaslapu, savukārt ātra ielāde palīdz noturēt apmeklētāju uzmanību un nāk par labu SEO.
Vienots dizains rada uzticību. Nesaskaņotas krāsas, fonti un atstarpes var radīt haotisku iespaidu un mazināt uzticību mājaslapai.
Vienkāršs dizains ilgāk saglabā aktualitāti. Moderni efekti nāk un iet, bet skaidrs un pārskatāms dizains nezaudē savu vērtību.
Vienkāršu mājaslapu ir vieglāk uzturēt. Mazāks stilu skaits, pārskatāms izkārtojums un vienkāršas sadaļas atvieglo mājaslapas atjaunināšanu.

Veidojot mājaslapu ar Mozello, tev nav jāseko katrai jaunākajai dizaina tendencei. Koncentrējies uz skaidru struktūru, pārskatāmību un ērtu lietošanu.

Biežākās iesācēju kļūdas un kā no tām izvairīties

Apskatīsim biežākās kļūdas, ko iesācēji pieļauj, veidojot mājaslapu, un vienkāršus veidus, kā no tām izvairīties.

1. kļūda: pārāk daudz krāsu

Spilgtas, savstarpēji nesaskaņotas vai nejauši izvēlētas krāsas var padarīt mājaslapu haotisku un grūti uztveramu.

Slikts piemērs:
Sākumlapa, kurā ir:

sarkani virsraksti
zaļš teksts
dzeltenas pogas
zilas saites
violetas ikonas

Šāda krāsu kombinācija var apjucināt un nogurdināt apmeklētājus.

Labāka pieeja:
Izvēlies vienu pamatkrāsu, vienu papildkrāsu un vienu akcenta krāsu. Pārējā dizainā izmanto neitrālus toņus, piemēram, baltu, melnu un pelēku.

Krāsu izvēli sīkāk apskatīsim nākamajā rakstā.

2. kļūda: pārāk daudz fontu

Ja katram virsrakstam un rindkopai izmanto citu fontu, dizains kļūst haotisks un tekstu ir grūtāk lasīt.

Slikts piemērs:

dekoratīvs kursīva fonts galvenajam virsrakstam
fonts ar serifiem apakšvirsrakstam
fonts bez serifiem pamattekstam
vēl cits fonts ar serifiem citātiem

Labāka pieeja:
Izvēlies vienu vai divus savstarpēji saderīgus fontus un izmanto tos konsekventi visā mājaslapā.

3. kļūda: gari un nesadalīti teksta bloki

Cilvēki mājaslapas nelasa tāpat kā grāmatas. Parasti viņi vispirms pārskata saturu un meklē svarīgāko.

Slikts piemērs:
Liels teksta bloks bez virsrakstiem, apakšvirsrakstiem vai atstarpēm.

Labāka pieeja:
Sadali tekstu:

īsās rindkopās
aizzīmju sarakstos
sadaļās ar skaidriem virsrakstiem
īsos un kodolīgos teikumos

Šādi saturu ir vieglāk uztvert, un tas labāk notur apmeklētāju uzmanību.

4. kļūda: visas brīvās telpas aizpildīšana

Iesācēji bieži baidās no brīvas telpas un cenšas katru laukumu aizpildīt ar tekstu vai attēliem.

Taču brīvā telpa ir nozīmīgs dizaina elements. Tā palīdz veidot skaidru struktūru, uzlabo lasāmību un neļauj saturam izskatīties pārblīvētam.

Uztver brīvo telpu kā vietu, kas ļauj saturam elpot.

5. kļūda: pārāk sarežģīta navigācija

Izvēlne ar pārāk daudziem punktiem apgrūtina izvēli un var mulsināt apmeklētājus.

Labāka pieeja:
Grupē līdzīgu informāciju un izvēlnē atstāj četrus līdz sešus galvenos punktus.

6. kļūda: nepamanāmas pogas

Ja aicinājuma uz rīcību (CTA) pogas izskatās kā parasts teksts vai katrai ir pilnīgi atšķirīgs dizains, apmeklētāji tās var nepamanīt.

Labām CTA pogām jābūt:

viegli pamanāmām
veidotām vienotā krāsā un stilā
skaidri saprotamām
loģiski izvietotām

Dizains cilvēkiem, nevis dizaineriem

Veidojot mājaslapu, tavs mērķis nav iespaidot citus dizainerus. Tavs mērķis ir palīdzēt apmeklētājiem, kuri:

saturu parasti tikai ātri pārskata
pirmo iespaidu gūst dažu sekunžu laikā
nevēlas ilgi meklēt vajadzīgo
sagaida skaidru un vienkāršu ceļu līdz mērķim

Turpmākie trīs dizaina principi palīdzēs tev pieņemt pārdomātākus dizaina lēmumus arī bez padziļinātām zināšanām.

1. princips: vizuālā hierarhija

Vizuālā hierarhija parāda apmeklētājiem, kam pievērst uzmanību vispirms.

Vizuālo hierarhiju vari veidot, mainot:

elementu izmēru
krāsu
kontrastu
atstarpes
elementu izvietojumu

Slikts piemērs:
Visi virsraksti, rindkopas un saites izskatās vienādi. Nekas neizceļas.

Labs piemērs:

viens skaidrs galvenais virsraksts
mazāki apakšvirsraksti
vienots un viegli lasāms pamatteksts
labi pamanāmas pogas

Šāda hierarhija palīdz apmeklētājiem uztvert saturu un orientēties mājaslapā bez liekas piepūles.

2. princips: konsekvence

Konsekvence palīdz mājaslapai radīt profesionālu un uzticamu iespaidu.

Konsekvence nozīmē, ka visā mājaslapā tiek izmantoti:

vienoti fontu stili
saskaņota krāsu palete
vienādas pogu formas
vienoti atstarpju principi
vienots attēlu stils

Iedomājies māju, kur katrā telpā ir atšķirīgs grīdas segums, sienu krāsa un mēbeļu stils. Kopskats šķistu haotisks.

Mājaslapā ir līdzīgi.

3. princips: paredzamība

Paredzams dizains nav garlaicīgs. Tas palīdz apmeklētājiem justies droši, jo viss darbojas tā, kā viņi sagaida.

Apmeklētāji sagaida, ka:

logotips atradīsies lapas augšā
galvenā navigācija atradīsies lapas augšdaļā
kontaktinformācija būs atrodama lapas apakšā vai atsevišķā sadaļā
pogas izskatīsies nospiežamas
formas būs vienkāršas un saprotamas

Kad šie elementi atrodas ierastās vietās un darbojas paredzami, mājaslapu ir vieglāk lietot.

Labā ziņa ir tāda: ja izvēlies Mozello, tev nav pašam jāizplāno katra no šīm detaļām. Mozello jau sākotnēji ir veidots, ievērojot šos principus.

Krāsu paletes ir sabalansētas, bet fontu izvēle un kombinācijas ir ierobežotas līdz savstarpēji saderīgiem variantiem. Arī atstarpes, pogas un izkārtojumi ir veidoti vienoti un paredzami.

Tāpēc tava mājaslapa jau dabiski ievēro vizuālās hierarhijas, konsekvences un lietojamības principus. Tev nav nepieciešamas padziļinātas dizaina zināšanas vai papildu piepūle. Vari koncentrēties uz saturu un saviem mērķiem, kamēr Mozello palīdz ātrāk sasniegt profesionālu rezultātu.

Kāpēc labs dizains ir svarīgs tava uzņēmuma mājaslapai

Ja uzņēmuma mājaslapas izveidei izmanto mājaslapu veidotāju, tev jau ir būtiska priekšrocība: daudzi svarīgi dizaina lēmumi ir pārdomāti tavā vietā. Veidnes ir strukturētas, sabalansētas, pielāgojamas un vizuāli vienotas.

Tomēr par saturu, izvēlēm un izkārtojumu joprojām lem tu. Šie lēmumi būtiski ietekmē to, kā apmeklētāji uztver tavu mājaslapu.

Labs dizains palīdz ātri radīt uzticību. Cilvēki pirmo iespaidu gūst ļoti ātri. Ja mājaslapa ir tīra, sakārtota un viegli lietojama, apmeklētāji, visticamāk, uztvers arī tavu uzņēmumu kā profesionālu un uzticamu. Savukārt neskaidra, pārblīvēta vai nekonsekventa mājaslapa var mudināt viņus aiziet, pirms viņi paspēj saprast, ko tu piedāvā.

Labs dizains mudina apmeklētājus mājaslapā uzkavēties ilgāk. Ja informāciju ir viegli atrast un mājaslapu ir patīkami pārlūkot, cilvēki biežāk turpina lasīt, aplūko citas sadaļas un iepazīst piedāvājumu. Skaidra navigācija, viegli lasāms teksts, noderīgi attēli un loģiski veidotas sadaļas palīdz apmeklētājiem saprast, ka viņi atrodas īstajā vietā.

Labs dizains padara tavu vēstījumu skaidrāku. Mājaslapai jāpalīdz cilvēkiem ātri saprast, kas tu esi, ko piedāvā un kāpēc tas viņiem ir svarīgi. Pārdomāts dizains atbalsta šo vēstījumu, novēršot liekus traucēkļus un pievēršot uzmanību svarīgākajai informācijai.

Labs dizains var palielināt konversiju skaitu. Apmeklētājs biežāk sazināsies ar tevi, iegādāsies produktu, rezervēs pakalpojumu vai nosūtīs pieprasījumu, ja nākamais solis būs skaidrs. Pamanāmi aicinājumi uz rīcību, vienkāršs izkārtojums un vienots pogu dizains palīdz cilvēkiem vieglāk rīkoties.

Labs dizains darbojas arī tad, ja neesi dizaineris. Lai izveidotu labu mājaslapu, nav vajadzīgas padziļinātas dizaina teorijas zināšanas. Izprotot tādus pamatprincipus kā lasāmība, atstarpes, vizuālā hierarhija, krāsas un konsekvence, vari pieņemt pārdomātākus lēmumus un justies drošāk par savām izvēlēm.

Citiem vārdiem sakot, labs dizains nav tikai mājaslapas izgreznošana. Tas palīdz tavam uzņēmumam skaidri nodot vēstījumu, iegūt apmeklētāju uzticību un virzīt viņus uz vēlamo nākamo soli.

Saliec visu kopā: veido dizainu, domājot par apmeklētāju

Lūk, vienkārša domāšanas maiņa, kas var būtiski uzlabot tavu mājaslapu.

Tā vietā, lai jautātu:
"Kā es varu to padarīt iespaidīgu?"

Pajautā:
"Kā es varu to padarīt apmeklētājam ērtu un saprotamu?"

Pēc tam pajautā:
"Kāda ir viena galvenā darbība, ko vēlos, lai apmeklētājs šeit veiktu?"

Šī nelielā domāšanas maiņa palīdz tev pieņemt uz apmeklētāju vērstus dizaina lēmumus arī bez īpašas apmācības.

Īss kontrolsaraksts labam mājaslapas dizainam

Izmanto šo kontrolsarakstu, veidojot vai uzlabojot savu mājaslapu. Šie pamatprincipi palīdzēs padarīt to skaidrāku, sakārtotāku un vieglāk lietojamu.

Teksts ir viegli lasāms. Izmanto īsas rindkopas, skaidrus virsrakstus, vienkāršus fontus un pietiekamu kontrastu.
Krāsas ir līdzsvarotas. Izvēlies nelielu, saskaņotu krāsu paleti un neļauj mājaslapai kļūt pārāk raibai.
Navigācija ir vienkārša. Iekļauj izvēlnē tikai svarīgākos punktus un izmanto skaidrus nosaukumus, kuru nozīmi var saprast uzreiz.
Izkārtojumā ir pietiekami daudz brīvās telpas. Atstāj pietiekamas atstarpes starp sadaļām, attēliem, pogām un teksta blokiem.
Attēli ir vizuāli saskaņoti. Izmanto attēlus un citus vizuālos elementus ar līdzīgu stilu, noskaņu un kvalitāti.
Pogas ir viegli pamanāmas. Skaidri izcel galvenās darbības, piemēram, "Sazinies ar mums", "Pērc tagad" vai "Rezervē pakalpojumu".
Katrai sadaļai ir skaidrs mērķis. Katrai mājaslapas daļai jāpalīdz apmeklētājiem izprast piedāvājumu, vairot uzticību vai spert nākamo soli.
Mobilā versija darbojas labi. Pārbaudi, vai teksts, pogas, attēli un izvēlne ir ērti lietojami tālrunī.

Ievērojot šos pamatprincipus, tava mājaslapa izskatīsies profesionālāka un būs apmeklētājiem ērtāk lietojama.

Ko apgūsi nākamajos sērijas rakstos

Tagad, kad saproti, kas veido labu mājaslapas dizainu, nākamie šīs sērijas raksti palīdzēs tev soli pa solim pilnveidot savu mājaslapu.

Katrs raksts padziļināti apskatīs vienu konkrētu dizaina jomu, piemēram, krāsas, fontus, izkārtojumu, navigāciju vai vizuālo identitāti.

Sērijas beigās iegūsi mājaslapu, kas ne tikai labi izskatās, bet arī patiešām strādā.

Vairāk rakstu šajā sērijā

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.

Sāc veidot savu mājaslapu vai interneta veikalu ar Mozello

Sākums