Plānojums un kompozīcija

Tā vietā, lai ķertos pa taisno pie web dizaina un krāsu teorijas, būtu prātīgāk koncentrēties uz plānojuma un kompozīcijas pamata principu apgūšanas. Ir svarīgi saglabāt līdzsvaru un sagatavoties dažādiem monitora izmēriem ar fiksētu, plūstošu vai elastīgu plānojumu palīdzību atkarībā no vajadzības. Tu vari izveidot savu režģa plānojumu vai arī izmantot savas metodes.

Vizuālais līdzsvars

Neatkarīgi no tā, vai tiek izmantots simetrisks vai asimetrisks dizains, līdzsvara saglabāšana radīs vizuāli patīkamāku mājas lapu un vairāk piesaistīs apmeklētāju uzmanību. Melnā suņa attēlu līdzsvaro pelēks X – uzmanīgi veidots dizains palīdzēs radīt līdzsvaru.

Bloga grafiskajā dizainā izmantota sabalansēta simetrija. Lielāka daļa dizaineru pieturas pie simetrijas, izmantojot saskaņotus elementus un trīs punktu metodi vai trešdaļu likumu un vadoties pēc zelta griezuma. Trīs punktu metode ir maģiska elementu kombinācija pa trim, kas vizuāli rada iespaidu par vienu, kopēju elementu, tajā pašā laikā ļaujot izdalīt informāciju pa visu lapu. Izmantojot trešdaļu likumu, divas trešdaļas lapas tiek aizpildītas ar saturu, bet viena trešdaļa atstāta tukša. Lapas sabalansēšana pa trešdaļām palīdz radīt vairāk enerģijas un padara lapas kompozīciju interesantāku.

Šeit izmantota trīs punktu metode, izceļot lapas elementu numurus un arī mazāk svarīgo elementu izkārtojumā.

Ņem vērā apmeklētāju viedokli

Tā kā lapas apmeklētāju iespējas ir atšķirīgas, ieskaitot arī to monitora izšķirtspēju, tas ir jāņem vērā, veidojot lapas dizainu. Dizains jāveido nevis mazākajam ekrāna izmēram, bet gan vidējam interneta lietotājam. 2009. gada janvārī izplatītākā monitora izšķirtspēja bija vairāk 1024×768, kas pieejams 57% lietotāju un 1024×768, ko lieto 36% lietotāju. Paturot prātā šo informāciju un atņemot vietu, ko aizņem pārlūka interfeiss, iegūstam aptuveni 1000×650 pikseļu lielu apskates logu, kurā tiks aplūkota vietne. Apskates loga elastīgumu var regulēt ar fiksētu, plūstošu vai elastīgu plānojumu palīdzību. Ar šo dažādo plānojumu tipu palīdzību tu vari nodrošināt, ka vidējais lietotājs varēs aplūkot vietni tā, kā tu to esi ieplānojis, tajā pašā laikā neliedzot nevienam citam pieeju savai lapai.
Fiksētajiem plānojumiem ir iepriekš noteiktas dimensijas (parasti pikseļi), kas nosaka vietnes platumu. Ja fiksētās vietnes platums ir 960 pikseļu, tad neatkarīgi no lietotāja pārlūka platuma, vietne vienmēr būs šādā platumā un ne lielāka. Ar šāda plānojuma palīdzību iespējams nodrošināt, ka galvenā satura zona saglabājas noteiktā izmērā un attēlu pozīcijas teksta zonā nemainīsies.

The CodeIgniter mājas lapai izmantots fiksēts 927 pikseļu plats plānojums un tas nemainīsies atkarībā no lietotāja monitora izšķirtspējas. Vietnē izmantots gradients attēls, lai pielāgotos lielākiem apskates logiem.
Plūstošo plānojumu dimensijas ir atkarīgas no izmēra lietotāju apskates loga izmēram, atkarībā no iepriekš noteiktā procentuālā apjoma. Ja plūduma apjoms ir 90%, tad neatkarīgi no lietotāja pārlūka platuma, vietne vienmēr aizpildīs 90% no kopējā platuma un ne vairāk. Izmantojot šāda veida plānojumu, iespējams nodrošināt, ka galvenā satura zona palielināsies, lai piepildītu pieejamo zonu.

Stuff and Nonsense mājas lapā izmantotais plānojums atstāj vietu zemāk redzamajam saturam, ja tas aplūkots, izmantojot lielāku ekrāna izšķirtspēju.
Elastīgie plānojumi ir fiksēto un plūstoši plānojumu krustojums. Šajā gadījumā vietnes saturs samazināsies vai palielināsies atkarībā no lietotāja izvēles. Palielinoties, viss plānojums saglabā proporcionalitāti tekstam.

Clearleft mājas lapā izmantots elastīgais plānojums, kas pielāgo teksta izmēru mazākai izšķirtspējai. Pēc palielinātā attāluma starp logo un navigācijas joslu, kā arī atšķirīgajām atstarpēm sākuma paragrāfos tas ir skaidri saskatāms.