Htmli kujunduse üldpõhimõtted
Alates teisest praktikumist ei tohi sinu leht näha välja väga jube. Kogemuste või huvi puudumine kujunduse osas ei ole õigustus: loe ja lähtu alltoodust!
Kõige kindlam põhimõte kujunduse juures on see, et mingeid kindlaid reegleid ei ole: kõiki "põhimõtteid" võib rikkuda, kui sa tead mis teed, ja teed seda meelega.
Kui sa aga ei pea ennast eriliseks veebikujundaks, siis järgi neid põhimõtteid:
- Kõige olulisem: kasuta igal pool proportsionaalseid sans-serif fonte (arial, helvetica jne). Brauseri vaikimisi font ei ole sans-serif, nii et pead fondi ise määrama.
- Ära kasuta menüüdes vaikimisi, muutmata lingistiili. Selle asemel kaota - enamasti - ära allajoonimine ja tee üldjuhul lingi underline "on hover" (a:hover {text-decoration: underline;}). Eeskätt menüüdes tasub muuta ka lingiteksti värvi, kuid lihtsalt tekstis olevad lingid on enamasti hea jätta siniseks.
- Ära kasuta enamuse tekstide jaoks päris musta (vaikimisi) tekstivärvi. Kasuta erinevaid tumedaid halltoone (näiteks #333333), tüüpiliselt menüüdes ühed, sisus teised. Mõnel pool sobib ka must, mis halliga kontrastis mõjub nagu leebe bold.
- Vaata, et erinevad lehe osad (menüüd, tabelite sisud jne) ei oleks päris üksteise seljas, et tekstid ei hakkaks kohe lehekülje või tabeli äärest (hea mitu pikselit peab alati vahet jääma).
- Ära, vastupidi, jäta menüükirjete ja muude tekstiosade vahele jube palju ruumi: liiga sõre ja hõre väljanägemine ja suured tühjad augud ei ole ka hea.
- Tee kujundustabelid/kastid, mis on mõeldud paigutuseks või asjade grupeerimiseks, ilma raamideta või siis ehita nende ümber ise pikselilaiune leebe ja õrna tooniga raam.
- Kui tahad kujundustabeli (menüü, nupud vms) selgelt välja tuua, siis pane talle taustaks väga neutraalne ja leebe värv (hele hall, sinine, roheline) või eralda ta muust ühe peene tabelisuuruse horisontaal- või vertikaaljoonega
- Enamasti on hea mõte paigutada kogu leht brauseriakna keskele, kas mingi konkreetse pikselites öeldud laiusega või protsentuaalse laiusega, nii et väga suures brauseriaknas ei oleks lehe sisu vasakust äärest paremale äärde välja.
- Ära kasuta intensiivse värviga üldtausta ja ära kasuta taustapilte, välja arvatud lehe keskosa ümber, kasutamata äärte katmiseks (ka seal ei ole taust tihti vajalik, ning kole taust on halvem kui puhas valge taust).
- Ei ole hea mõte kasutada lehel palju pilte. Enamasti on sobiv mõte kasutada näiteks ühte/kahte logo või nupu moodi kena pilti ja mitte rohkem.
- Jälgi joondust!!!
Veidi pikemalt saad lugeda siit:
- vana õpetus, aga põhimõtted kehtivad
- 7 rules for creating gorgeous UI: esimene osa ja ... teine osa
- google disanipõhimõtted: material ja muud
- material design
Suhteliselt lihtne on hakatuseks kasutada twitteri või google minimalistlikku stiili, näiteks bootstrapi abil. Hoiatus: päris algajale on bootstrap tõenäoliselt veidi keeruline kasutada.
Mis veel: HTML-i standardina kasuta HTML5-t (päises <!DOCTYPE HTML>) ja kirjuta kõik tagid väikeste tähtedega, sest nii on kombeks.
