Disaini põhimõtted
D
isaini põhimõtete kontseptsioone on mitmeid. Need jaotuvad erinevatesse kategooriatesse sõltuvalt filosoofiast või õppemeetodist. Püüan siin need lahti seletada organiseeritud kujul.
Me saame põhimõtted jaotada kahte kategooriasse: printsiibid ja elemendid. Sellest räägime edaspidi veel. Pead lihtsalt aru saama, et veebidisain pole lihtsalt html elementide teineteise külge liitmine. Põhiprintsiipe järgides saad luua midagi ilusat ja kasulikku.
Vaatame kõigepealt järgmisi printsiipe:
Tasakaal
Tasakaalu määravad rasked ja kerged, suured ja väiksed disaini elem. veebilehel.
Kontrast
Esimene asi mis meelde tuleb kuuldes sõna kontrast on must ja valge värv. Peale nende on veel mitmed kontrastsuse elemendid. Näiteks suured ja väiksed, ümmargused ja nurgelised, pehmed ja tugevad elemendid.
Rõhk
Rõhutamine disainis annab tulemuseks pildi milles vaataja silm eristab kohe teatud detaile. Tihti kaldutakse rõhutama võimalikult palju elemente. Tulemuseks on labane ja maitsetu vorming. Selle vältimiseks tuleb asjad viia mingisse hierarhilisse süsteemi ja vastavalt sellele määrata rõhuasetused.
Rütm
Nimetatakse ka korduvuseks. Ta muudab disaini terviklikuks. Veebilehed mis sisaldavad korduvaid mustreid on kasutajale kergemini hoomatvad.
Ühtsus
Kasutatakse ka väljendit ligidus. Tegemist on printsiibiga mille abil hoitakse disaini elemendid koos.
Tasakaal
Tasakaal on disaini läbiv element. Ta määrab visuaalsel kujul nö. raskusastme ja meeleolu. Näiteks suured ja tumedad kujundid muudavad pildi raskeks e. tõsiseks. Väiksed ja heledad kujundid annavad disainile kergust. Tasakaalustamiseks on kolm peamist moodust:
- sümmeetriline tasakaal
- asümmeetriline tasakaal
- tasakaalutu e. ebakõlaline
Sümmeetriline
Asümmeetriline
Tasakaalutu
Tasakaalu elemente leiame kõigis veebilehtedes. Tasakaal määrab kindlaks veebilehe kompositsiooni e. millisena me näeme seda brauseris. Tihti on probleemiks veebilehe kujundamisel muganduvus. S.t. esialgne disain on küll tasakaalustatud kuid teistes brauserites võib osa disaini elemente kaduda (fold ).
Tasakaal veebidisainis
Kõige rohkem kasutatakse tasakaalustuse printsiipe veebilehtede küljendamisel e. vormindamisel ( layout ).
Samuti saab kasutada elementide positsioneerimiseks nn. ujuvat ( float ) stiili.
Sümmeetriline tasakaal disainis tähendab seda, et veebilehe kõik elemendid on omavahelises proportsioonis. Näiteks lehekülje vasakus ääres olev tekst on eriti suur. Sellisel puhul on vaja lehekülje paremale poolele paigutada sobiva suurusega pilt v. tekst. Populaarne meetod sümmeetrilise lehekülje kujundamisel on viia disaini elem. keskele. Sellega peab siiski olema ettevaatlik sest tsentreeritud lehekülje vorming kipub tihti olema lamedavõitu ja igav. Seega on parim viis sümmeetrilise disaini loomiseks on hoida disaini elemendid proportsioonis.
Asümmeetriline tasakaal pakub rohkem võimalusi ja on disainerile väljakutseks kuna puudub elemente ühendav keskne telg. Näiteks lehekülje mõttelise telgjoone lähedal asetseb suur element, siis asümmeetrilise tasakaalu saavutamiseks on vaja väiksem element viia telgjoonest kaugemale. Palju aitab kaasa erinevate värvide kasutamine kuna tumedad värvid muudavad pildi raskeks ja heledad kergeks. Niimoodi elemente ja värve ümber lehekülje raskuspunkti paigutades saab luua tasakaalustatud asümmetrilise kompositsiooni.
Tasakaalutu disain on mõnikord kasulik. Ta tekitab vaatajas erinevaid emotsioone ja seda omadust kasutavad disainerid mingile objektile tähelepanu juhtimiseks. Kui vaatajat sunnitakse sellise disaini abil mõtlema siis on tasakaalutu disain oma ülesande täitnud.
Kontrast
Kontrast disainis tähendab elementide erinevuse rõhutamist. Näiteks teksti read on kõik ühepikkused. Siin kontrast puudub. Kui üks rida on teistest tunduvalt pikem, siis muutub ta teiste ridade suhtes kontrastseks elemendiks.
Kontrastsuse kasutamisel veebis mõtle peale värvide ka teistele disaini elementidele. Näiteks teksti suurus, vormingu suurus, pildid, joonised jne. jne. Ainult värvidega manipuleerides saavutad tulemuse mis on vaatajale lihtsalt väsitav.
Rõhk
Rõhk on üks veebidisaini elemente mis võimaldab välja tuua kontekstist olulise. Selle elemendi kasutamisel eksitakse tihti sellega, et püütakse rõhutada võimalikult palju. Vägisi tahetakse jätta muljet nagu kõik rõhutatud kohad oleksid äärmiselt olulised. Parimal juhul saavutatakse sellega ülekoormatud veebileht mis on kasutajale väsitav või lihtsalt igav. Selleasemel on hea kasutada erinevaid HTML elemente mis on juba omadustelt omavahel hierarhiliselt seotud.
Rütm
Rütmi abil muudame disaini veebilehe külastajale mõistetavaks. Inimese aju on mustritele vastuvõtlik ja seega kergesti mõistetav. Tänu sellele me ei koorma oma pead liigselt ning saame keskenduda olulisele. Korduvus esineb harva iseseisva disaini elemendina. Tema ülesandeks on muuta veebileht meeldivaks külastajale ja meelitada teda sellega lähemalt tutvuma.
Veebidisainis saab rütmi e. korduvust kasutada praktiliselt kõigi disaini elementide juures. Saame korrata teksti kujundeid, piltide ja jooniste paigutusi. Saame luua erinevaid taustu veebilehele, kasutades oma enda stiili.
Ühtsus
See kontseptsioon loob sidususe üksikute elementide ja kogu kompositsiooni vahel.
Ükskõik milline on sinu disaini metodoloogia, tuleb sul alustada valgelt lehelt. Hea disainer mõtleb enne läbi milline peaks välja nägema tulevane veebileht ja alles siis alustab elementide paigutamist lehele aga mitte vastupidi. Enne kui alustad tee endale selgeks järgnevad momendid:
- millised saavad olema kasutatavad elemendid
- kuidas elemendid seonduvad üldise kompositsiooniga
- kuidas elemendid seonduvad omavahel
Fold.
Fold e. lehekülje vaade mida me näeme enne kerimist. Osad veebilehe loojad peavad lehekülje positsioneerimist oluliseks ja paigutavad kõige tähtsama info ülesse. Ülejäänud materjal jääb allapoole
( below the fold ).
Layout:
See on termin veebilehe kompositsiooni e. vormingu kohta. Kui disain on vilets ja töötab halvasti, siis ei ole loota, et keegi seda lehekülge külastab.
Float:
Ujuv e. hõljuv ( float ) element veebidisainis. Määrab veebilehe graafiliste ja tekstilise elementide omavahelise paigutuse. Näiteks saame paigutada teksti pildi alla, ülesse, vasakule, paremale jne.
