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 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 ilma raamideta või siis ehita nende ümber ise pikselilaiune leebe ja õrna tooniga raam, ära kasuta tabeli vaikimisi rämesuurt raami.
• Kui tahad kujundustabeli (menüü, nupud vms) selgelt välja tuua, siis pane talle taustaks väga neutraalne ja leebe värv (kerge hall, sinine, roheline) või eralda ta muust ühe peene tabelisuuruse horisontaal- või vertikaaljoonega (mitte aga tabelit ümbritseva kastiga)
• 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 värvilist üldtausta ja ära kasuta taustapilte, välja arvatud lehe keskosa ümber, kasutamata äärte katmiseks (ka sea 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.

Veidi pikemalt saad lugeda siit või googeldada tuhandeid erinevaid õpetusi.