Valmis veebileht võib koosneda mitmetest erinevatest komponentidest:
HTML;
CSS;
programmeerimiskeeles kirjutatud scriptid;
andmebaas;
graafika- ja helifailid.

Veebis kasutatavad failiformaadid
*.gif – Graphic Interchange Format pakitud kadudeta n256 värvi (Windows’i süsteemivärvid) logod, taustad jt. väheste värvidega pildid
*.png – Portable Network Graphic  gif-formaadi edasiarendus (rohkem kui 256 värvi)
*.jpg (*.jpeg) – Joint Photographic Experts Group   pakitud kadudega  16 milj. värvi, näiteks fotod

GIF formaati kasutatakse logode, kujunduselementide, nuppude tegemiseks veebis.

JPEG formaati kasutatakse kvaliteetsete fotode, piltide näitamiseks veebis.

Veebilehe kasutaja silm märkab esimesena lehel kujundeid ja lehel olevat kontrasti. Seejärel teisi elemente, pealkirju ja teksti. Üldiselt võib graafilisi kujutisi kasutada Interneti lehekülgedel kahel otstarbel:

• taustakujutisena, millel asuvad kõik teised dokumendi põhielemendid;
• illustratsioonidena, mis asuvad dokumendis endas.

Põhilised graafilised elemendid veebilehel on:

• tagatausta pilt või värv;
• nupud;
• nummerdamine;
• vahepaneelid;
• logod (soovitatavad mõõdud 80 x 68 pikslit);
• pildid ja pildigaleriid.

Reeglid graafika kasutamiseks:

• Kasutage värvi oluliste asjade esiletõstmiseks.


• Kasutage graafilisi elemente, et saavutada lehe ühtne väljanägemine.


• Pildid peavad olema sobivad ja piiratud mahus.


• Kasutage üldtunnustatud pildiformaate .jpg ja gif. Teisi graafilisi formaate (peale GIF ja JPG) www serverites praktiliselt ei esine, kuigi nende kasutamine on võimalik. Nende formaatide kasutamist ei soovitata järgmistel põhjustel: Ainult formaatidele GIF ja JPG on olemas enamuse lehitsejate sisseprogrammeeritud tugi (teiste formaatide kuvamiseks tuleb kasutaja arvutil käivitada lisatarkvara). GIF ja JPG formaatide struktuur on failide edastamiseks Internetis väga hästi sobiv ja on sõltumatu platvormist (Windows, Unix, Linux, Mac jne).


• Pildi reaalse laiuse ja kõrguse sisestamine HTML koodis võimaldab lõppkasutajal, kes töötab graafika keelurežiimis saada ettekujutust allalaaditavate piltide reaalsetest mõõtmetest tühja ristküliku järgi, mis kuvatakse siis illustratsiooni asemel. Samas kiirendab see ka  dokumendi vormindamist ekraanil. Reeglina peavad lehitsejad alla laadima kõik kujutised enne, kui nad saavad kujundada teksti paigutust ekraanil. Kujutiste mõõtmete ette andmine võimaldab lehitsejal kujundada dokument juba enne graafikafailide täielikku allalaadimist. Kui mõõtmed ei ole ette antud siis kuvatakse sellise kujutise asemel algul väike ruuduke ja seega rikutakse kogu dokumendi kujundus, milles on arvestatud piltide reaalsete mõõtmetega.


• Graafikafailid peavad olema väiksed (näiteks 7 KB).


• Ärge kasutage keerulisi tagatausta pilte, see häirib teksti lugemist. Taustamuster HTML dokumendis täidab alati kogu tausta. Kui taustapildi mõõtmed on väiksemad kui kuva mõõtmed, siis "paljundatakse" taustapilt kuval nii, et tekib nn. "tapeet" või "mosaiik". Seepärast peab väikese taustapildi valima selliselt, et nende kuvamisel ei oleks silmaga nähtavaid "liitekohti". Harilikult kasutatakse foonimustrina väikeseid pildikesi, mille allalaadimine ei võta kaua aega.


• Esmapilgul võib tunduda, et taustavärvi määramine on liigne kui on kasutusel taustamuster. Tegelikult on kõik aga vastupidi. Kui määratakse taustamuster tuleb alati kasutada ka taustavärvi. Probleemi sisu seisneb selles, et dokumendi kuvamisel laaditakse Internetist eelkõige dokumendi sisuline tekstiline osa ja alles järgmise sammuna laaditakse kuvale ka pildid ja taustamuster. Seega tuleb taustavärv valida nii, et ei toimuks sellist järsku häirivat gammamuutust. Teiseks põhjuseks miks on alati soovitatav kasutada foonivärvi on, see et kasutaja võib graafika allalaadimise üldse välja lülitada, siis sellisel juhul ei laadita taustamustrit ka kuvale ja dokumendi fooniks jääbki parameetriga BGCOLOR määratud värv.


• Kui kasutate animatsioone, siis selliselt, et seda näidatakse ühel korral kasutajale ja siis lülitatakse välja.


• Ärge kasutage pop-up aknaid.


• Ärge kasutage pilti, mis võib kasutajale tunduda nupuna.


• Otsimissüsteemid ei indekseeri graafikat. Seepärast kui teie leheküljel asuvad vaid illustratsioonid ilma tekstiliste selgitustega, siis lugejad kasutades tänapäevaseid otsimissüsteeme selliseid lehekülgi ei leia


• Paljud kasutajad töötavad Internetis graafika allalaadimiskeelu seadega, (lehitsejas saab graafika allalaadimise ära keelata) selleks et kiirendada Internetist allalaadimise kiirust. Üsna suur osa kasutajatest kasutab siiamaani ainult tekstipõhist lehitsejat. Mõlemal juhul jääb allalaaditavast dokumendist alles vaid tekstiosa, mis peab andma edasi informatsiooni dokumendi sisulise osa kohta.


• Üheks tagi <IMG> parameetriks on parameeter ALT, mis võimaldab sisestada alternatiivset teksti. Alternatiivne tekst annab võimaluse mittegraafiliste lehitsejate ja lehitsejate, kus on väljalülitatud graafika allalaadimine, kasutajatel saada HTML leheküljele sisestatud piltide kohta tekstiinformatsiooni.

Pildi skaleerimine
Kui on vaja veebis esitatavat pilti väiksemaks/suuremaks teha, siis kindlasti mõne graafikapaketiga skaleerides, mitte mingil juhul näidata suurt pilti HTML-märgendi atribuutide abil väiksemaks/suuremaks defineerituna.
Isegi heade graafikaredaktoritega skaleerides võib pildi kvaliteet halveneda. Kõige parem lahendus on teha pildid täpselt sellise suurusega, nagu neid veebis esitada kavatsetakse.

Animatsioonid
Väikese animatsiooni või videoklipiga  on võimalik kirjeldada veebilehel palju enam kui ühe tekstilõiguga.
Animatsiooni sisu ja eesmärk võib vastavalt kasutusvaldkonnale olla väga erinev. Animeeritud pilte kasutatakse rohkesti internetireklaamides.
Animatsiooni lisamisel veebilehele tuleb arvestada, kui suur on selle maht.

Animatsioonide tegemiseks on olemas mitmeid tarkvarasid. Nagu ikka, on need enamjaolt tasulised, kuid on ka suur valik vabavara.
            Animatsiooni saab teha erinevate vahenditega:
*.gif laiendiga animatsioon erinevate programmide abil
DHTML vahenditega
Macromedia Flash  programmiga

Värvide kasutamine
Veebis kehtib juba 500 aastat kehtinud lihtne reegel trükimeediast: valge on kõige eredam värv, sellel paistab kõige kontrastsemana must ja nende kahega harmoneerub hästi punane. Ka kõik teised värvid on lubatud, kuid mõistlikkuse piires. Internetis lisandub värvina ka sinine: vältida tasub kirjas sinise kasutamist, kui pole tegemist lingiga, sest see võib segadusse ajada ja panna lugeja arvama, et tegemist on lingiga.

Veebilehtedel kasutatakse RGB värviruumi. Kasutatavad värvitabelite näited internetis
http://www.w3.org/TR/REC-html40/types.html#h-6.5
http://www.w3schools.com/html/html_colors.asp
http://www.immigration-usa.com/html_colors.html
http://www.zone.ee/anukurm/palett.html

Põhjade(template) kasutamine
Peale veebilehe struktuuri planeerimist tuleb veebmeistril kavandada ka veebilehe põhi, mille komponentideks võivad olla pildid, tekst, lingid jne. Samasugust põhja kasutatakse tavaliselt enamus lehtedel. Muudetud on vaid vastavalt teemale iga lehe põhitekst.

Kasutatud allikad
http://www.kulbert.ee/index.php?id=3,98,86
http://www.cs.ut.ee/~kerstit/gimp/arvutigraafika.html
http://math.ut.ee/~taremaa/pildid/animatsioon/
http://www.securityspace.com/s_survey/data/index.html
http://kodu.neti.ee/~aulis/Opingud/AulisMag/
Macdonald, N. What is Web design?
A Roto Vison Book. 2003.