Lapas izkārtojums un līdzsvars: kā organizēt savu mājaslapu kā dizainerim
Kad kāds atver tavu mājaslapu, pirmais iespaids rodas mazāk nekā sekundē. To nosaka ne tikai teksts, logotips vai attēli, bet arī tas, kā lapā ir izkārtots saturs.
Pārskatāma un līdzsvarota lapa apmeklētājam uzreiz parāda, kur skatīties, kas ir svarīgākais un ko darīt tālāk. Savukārt nepārskatāms izkārtojums rada apjukumu un neapmierinātību. Rezultātā apmeklētājs var aiziet, pat neiepazinis tavu uzņēmumu.
Mozello zinām, ka mazo uzņēmumu īpašnieki vēlas profesionālu un sakārtotu mājaslapu arī tad, ja nekad nav izmantojuši dizaina rīkus. Tāpēc Mozello mājaslapu veidotājā tiek izmantoti gatavi un pārdomāti satura bloki ar jau iestatītām atstarpēm un izmēriem. Tas ļauj tev koncentrēties uz saturu, neiedziļinoties sarežģītos izkārtojuma iestatījumos.
Šajā ceļvedī uzzināsi, kā pareizi izkārtot un līdzsvarot mājaslapas saturu. Tajā atradīsi skaidrus skaidrojumus, praktiskus piemērus un iesācējiem piemērotus padomus.
Kas ir lapas izkārtojums un kāpēc tas ir svarīgs
Lapas izkārtojums nosaka, kā mājaslapā ir izvietots teksts, attēli, atstarpes un aicinājumi uz darbību. Tā uzdevums ir vadīt apmeklētāja uzmanību un palīdzēt saprast saturu.
Skaidrs izkārtojums vada apmeklētāju soli pa solim:
- Vispirms skaties šeit.
- Tad pievērs uzmanību šim.
- Iepazīsti papildu informāciju.
- Veic nākamo darbību.
Veids, kā cilvēki pārskata lapu, ir tikai viena izkārtojuma daļa. Tomēr tas palīdz saprast, kāpēc virsrakstu, attēlu, pogu un sadaļu izvietojums ir tik svarīgs.
Bez pārdomāta izkārtojuma apmeklētājam pašam jācenšas saprast, kurš saturs ir vissvarīgākais. Tas rada apjukumu un var likt pamest mājaslapu.
Kāpēc izkārtojums ir svarīgs
- Tas izceļ svarīgāko saturu.
- Tas dabiski vada apmeklētāju cauri tavam stāstam.
- Tas padara mājaslapu profesionālu un viegli lasāmu.
- Tas palīdz veidot uzticību un pārvērst vairāk apmeklētāju par klientiem.
Iztēlojies izkārtojumu kā gidu. Bez skaidrām norādēm apmeklētāji var apjukt, bet pārdomāts izkārtojums palīdz viņiem iepazīt mājaslapu tieši tādā secībā, kādu esi iecerējis.
Kas ir vizuālais svars
Ne viss mājaslapā ir vienlīdz svarīgs. Daži elementi dabiski piesaista vairāk uzmanības nekā citi. Dizainā to sauc par vizuālo svaru.
Elementa vizuālo svaru palielina:
- lielāks teksts un virsraksti;
- spilgtas vai kontrastējošas krāsas;
- izvietojums lapas augšpusē;
- cilvēku vai produktu attēli;
- pogas un citi klikšķināmi elementi;
- brīvā vieta ap elementu, kas palīdz to izcelt.
Izmantojot Mozello, tev šīs detaļas nav jāaprēķina pašam. Katrā satura blokā jau ir iestrādātas pārdomātas atstarpes un elementu līdzinājums.
Augšējās un apakšējās atstarpes vari pielāgot, izvēloties kādu no vienkāršiem iestatījumiem: Mazs, Vidējs vai Liels. Tas palīdz radīt pietiekami daudz brīvās vietas un vienmērīgu satura ritmu bez īpašām dizaina zināšanām.
Arī lielajiem attēlu jeb baneru blokiem ir iepriekš iestatīti izmēri: Mazs, Vidējs un Liels. Tie palīdz saglabāt attēlus un galvenās sadaļas proporcionālas un vizuāli līdzsvarotas.
Rezultātā ar minimālu piepūli vari izveidot sakārtotu un profesionālu mājaslapu.
Četri galvenie lapas izkārtojuma veidi
Dizaineri izmanto vairākus pārbaudītus izkārtojuma veidus, lai saturs būtu vizuāli pievilcīgs un viegli uztverams. Pat ja mājaslapu veido pirmo reizi, šādus izkārtojumus noteikti jau esi redzējis. Ar Mozello satura blokiem tos vari viegli izmantot arī savā mājaslapā.
1. Simetrisks izkārtojums
Kas tas ir: abās lapas pusēs saturs ir vizuāli līdzsvarots. Teksts un attēli bieži ir centrēti, bet sadaļas izvietotas vienmērīgi.
Kādu iespaidu tas rada: mierīgu, profesionālu un uzticamu.
Vislabāk piemērots:
- konsultāciju pakalpojumu sniedzējiem
- uzņēmumu mājaslapām
- labsajūtas un SPA pakalpojumiem
- augstākās klases zīmoliem
Daudzas Mozello galvenās sadaļas un teksta bloki jau pēc noklusējuma ir simetriski. Izvēlies līdzsvarotas atstarpes Mazs, Vidējs vai Liels, lai iegūtu tīru un profesionālu izskatu.
Piemērs: centrēts virsraksts, īss apakšvirsraksts, attēls un aicinājuma uz darbību jeb CTA poga.
Bieža kļūda: garas rindkopas simetriskā blokā var radīt saspiestu iespaidu. Izmanto īsu un kodolīgu tekstu.
2. Asimetrisks izkārtojums
Kas tas ir: saturs abās lapas pusēs nav vienāds, taču joprojām veido līdzsvarotu kopskatu. Piemēram, vienā pusē var atrasties attēls, bet otrā teksts.
Kādu iespaidu tas rada: dinamisku, mūsdienīgu un saistošu.
Vislabāk piemērots:
- radošiem uzņēmumiem
- portfolio
- produktu vai pakalpojumu prezentācijām
Izmanto blokus "attēls pa kreisi, teksts pa labi" vai "attēls pa labi, teksts pa kreisi". Iebūvētie atstarpju iestatījumi palīdz saglabāt līdzsvaru arī tad, ja vienā pusē ir vairāk satura.
Piemērs: liels produkta attēls kreisajā pusē, bet īss virsraksts, apraksts un CTA poga labajā pusē.
Bieža kļūda: pārāk garš teksts var nomākt attēlu un izjaukt līdzsvaru. Izmanto īsus un skaidrus aprakstus.
3. Mozaīkas izkārtojums
Kas tas ir: dažāda izmēra un veida satura bloki, kas kopā veido kolāžai vai žurnālam līdzīgu izkārtojumu.
Kādu iespaidu tas rada: stilīgu, izteiksmīgu un radošu.
Vislabāk piemērots:
- fotogrāfu portfolio
- ar rokām gatavotu produktu veikaliem
- dzīvesstila zīmoliem
Mozello padoms: pamīšus izmanto teksta un attēlu blokus vai galerijas. Lai saglabātu vienotu kopskatu, izvēlies savstarpēji saskaņotus attēlus.
Piemērs: attēli mijas ar īsām teksta sadaļām un soli pa solim izstāsta zīmola vai produkta stāstu.
Bieža kļūda: krasi atšķirīgu attēlu stilu un izmēru sajaukšana var padarīt lapu haotisku.
4. Vertikāls izkārtojums
Kas tas ir: satura bloki ir izvietoti viens zem otra skaidrā un secīgā kārtībā.
Kādu iespaidu tas rada: tiešu, skaidru un viegli uztveramu.
Vislabāk piemērots:
- pakalpojumu lapām;
- produktu lapām;
- mērķlapām, piemēram, reklāmas kampaņu vai īpašo piedāvājumu lapām.
Mozello padoms: izkārto saturu šādā secībā:
Galvenā sadaļa → problēma un ieguvums → priekšrocības → atsauksmes → CTA
Bieža kļūda: nevajadzīgu dekoratīvo bloku vai ar galveno tēmu nesaistīta satura pievienošana izjauc lapas plūsmu.
Kā soli pa solim izveidot līdzsvarotu lapu ar Mozello
1. solis: nosaki lapas mērķi
Pajautā sev:
"Kāda ir galvenā darbība, ko vēlos, lai apmeklētājs veiktu?"
Piemēram:
- rezervēt konsultāciju
- nopirkt produktu
- uzzināt vairāk par pakalpojumiem
- sazināties ar uzņēmumu
2. solis: sāc ar galveno sadaļu
Izvēlies galvenās jeb pirmās sadaļas bloku, kurā ir:
- skaidrs virsraksts;
- īss apakšvirsraksts;
- aicinājums uz darbību jeb CTA;
- attēls, ja tas nepieciešams.
3. solis: pievieno saturu loģiskā secībā
- Paskaidro, kādu problēmu tu atrisini un kādu ieguvumu piedāvā.
- Parādi galvenās priekšrocības, produktus vai pakalpojumus.
- Iekļauj klientu atsauksmes vai citus uzticību veicinošus piemērus.
- Ja nepieciešams, pievieno galeriju vai attēlu blokus.
4. solis: pielāgo atstarpes vienmērīgai satura plūsmai
- Izvēlies Mazu, Vidēju vai Lielu atstarpi starp blokiem.
- Atstāj pietiekami daudz brīvās vietas, lai saturs būtu viegli pārskatāms.
- Pielāgo attēlu un baneru bloku izmērus, lai svarīgākie elementi būtu labi pamanāmi.
5. solis: noslēdz lapu ar skaidru CTA
- Atkārto galveno darbību, ko vēlies, lai apmeklētājs veiktu.
- Parūpējies, lai CTA izceltos uz pārējā satura fona.
Ievērojot šos soļus un izmantojot Mozello satura blokus ar gataviem atstarpju iestatījumiem, arī iesācējs var izveidot pārskatāmu un profesionālu lapu.
Līdzsvarotas lapas kontrolsaraksts
Pajautā sev:
- Vai uzreiz ir skaidrs, kur skatīties vispirms?
- Vai rindkopas ir īsas un viegli lasāmas?
- Vai starp satura blokiem ir pietiekami daudz brīvās vietas?
- Vai attēli ir savstarpēji saskaņoti?
- Vai galvenais CTA ir labi pamanāms?
- Vai katram satura blokam ir skaidrs mērķis?
Ja uz lielāko daļu jautājumu vari atbildēt ar "jā", lapas izkārtojums ir skaidrs un līdzsvarots.
Biežākās iesācēju kļūdas un kā no tām izvairīties
- Pārāk daudz teksta vienā blokā. Veido īsas rindkopas un sadali garāku tekstu vairākās sadaļās.
- Nesaskaņots attēlu izvietojums. Izmanto savstarpēji saskaņotus attēlu stilus un izmērus.
- Pārāk daudz dažādu CTA pogu stilu. Izvēlies vienu vai divus stilus un lieto tos konsekventi visā mājaslapā.
- Pārāk maz atstarpju. Izmanto Mozello atstarpju iestatījumus, lai starp satura blokiem saglabātu pietiekami daudz brīvās vietas.
- Nav pārdomāta satura secība. Vadi apmeklētāja uzmanību loģiskā kārtībā: no virsraksta uz galveno saturu un pēc tam uz CTA.
Kāpēc ar Mozello ir viegli izveidot līdzsvarotu lapu
Atšķirībā no rīkiem, kuros katrs elements brīvi jāvelk un jānovieto, Mozello izmanto strukturētus satura blokus ar gataviem iestatījumiem. Tie:
- palīdz saglabāt vienādu elementu līdzinājumu un proporcijas;
- piedāvā pārbaudītus atstarpju un baneru izmērus;
- automātiski saglabā līdzsvarotu izkārtojumu, vienlaikus ļaujot veikt vienkāršus pielāgojumus;
- labi darbojas gan datorā, gan mobilajās ierīcēs.
Tas ļauj tev koncentrēties uz saturu un sava uzņēmuma stāstu, netērējot laiku sarežģītai izkārtojuma veidošanai.
Noslēgumā: līdzsvarots izkārtojums veido uzticību
Līdzsvarota lapa ir viegli lasāma, pārskatāma un vizuāli pievilcīga. Tā dabiski vada apmeklētāja uzmanību, palīdz veidot uzticību un skaidri parāda, ko darīt tālāk.
Ar Mozello satura blokiem un gatavajiem atstarpju iestatījumiem līdzsvarotu lapu var viegli izveidot arī iesācējs. Tev tikai jāizvēlas piemērotākie bloki, jāiestata atstarpes Mazs, Vidējs vai Liels un jāsakārto saturs loģiskā secībā.
Labs dizains nav nekas sarežģīts. Tā pamatā ir skaidrība, kārtība un skaidrs mērķis.
Ar Mozello to var panākt ikviens mazais uzņēmums arī bez iepriekšējas dizaina pieredzes.
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.