Grafički dizajn

Web design

Elementi dizajna

TekstBojeSlike

Font i vrste fontova

Stil pisma na računaluOblik pisma (typeface)Svojstva ili stil (različita veličina, kurziv,

težina, itd.)Uspravan, normal, romanKurziv, italic, nagnut na desnoPodebljan, bold

Podjela fontova

Oblik pisma: Serifni

Times New RomanCourier New Century

SchoolbookPalatino

Bezserifni (Sans Serif)

ArialVerdana

Širina znakova Proporcionalni

Times

Neproporcionalni (monotyped)

Courier NewNew Courier

Metode prikazivanja fonta

BitmapniVektorski (scalable ili object oriented ili

outline fonts)

Faktori koji utječu na čitljivost

Razmak između znakova (k e r n i n g)Razmak između redaka – prored

(ledding ili line spacing)Dužina retka (60-70)X – visinaTežina (weigth)Bijeli prostor

Tri komponente boje

Ton (Hue)

Svjetlina (brightnes)

Zasićenost (saturation) - intenzitet

Klasifikacija boja

Kromatske – sve osim crne, bjele i siveNeutralne (akromatske) – crna bijela i

sivaMonokromatske – kombinacija dobivena

variranjem svjetline i zasićenja jednog tona

Podjela kromatskih boja

Primarne – crvena, plava i žutaSekundarne – miješanje primarnih

Narančasta – crv + žutLjubičasta – crv + plaZelena – pla + žut

Tercijarne – mješanjem prim i sek

Podloga i tekst

Najbolja čitljivost Crni tekst na

bijeloj pozadini Tamnozeleni tekst

na bijeloj pozadini Tamnoplavi tekst

na bijeloj pozadini Smeđi tekst na

bijeloj pozadini

Najgora čitljivost: Crveno na zelenom Zeleno na crvenom Zeleno na plavoj

Najbolja preglednost

Crveno na zelenom

Zeleno na crvenom

Zeleno na plavom

Crna na narančastoj

Crvena na bijeloj

Tamnoplava na žutoj

Modovi slika i njihova svojstva

mod svojstva

Bitmap 1 bit po pikselu (jednobojne slike)

Grayscale 8 bitova po pikselu, 256 sivih nijansi

Indexed mode

8 bitova po pikselu, 256 boja

RGB 3 kanala, 24 bita po pikselu, 16,7 mil. boja

CMYK 4 kanala, 32 bita po pikselu 16,7 mil.

Slike – veličina datoteke

Piksel dimenzijeFormat u kojem je zapisanaGustoća zapisa (dpi)Mod slike (koliko slojeva i tonova u

svakom sloju)Način kompresije: lossless i lossy

Načini iscrtavanja/kodiranja slike

Rasterska grafika Niz točkica

Vektorska grafika Mat. Definicije i

formule Koordinate i linije

Formati slika (načini pohranjivanja)

TIFF (tagged image file format) standard za sve vrste nekomprimiranih slika

BMP (Bitmap) – format Windowsa za slike

JPEG (joint photographic experts group) – standard za fotografije na webu

GIF (graphic interchange format) za slike na webu – 256 boja

PNG (portable network graphics)

JPEG

JPEG/JFIF

.jpeg ili .jpgStandard za digitalne fotografijeLossy24 bitaGeneracijska degradacijaKoristi se u PDF formatu

GIF

GIF (CompuServe)

8 bita - 256 bojaLossy/lossslessLogoi, jednostavne grafike i animacije

PNG

PNG

Open source nasljednik GIF-a8 ili 24 bitaAdam7-interlacing

TIFF

.tiff ili .tifŠiroko podržanStandard za grafičku struku24 ili 48 bitlossy/lossless

Rezolucija slike

piksel dimenzije – broj piksela horizntalno i vertikalno

rezolucija u ppi ili dpiza web 72 dpiza tisak 300 dpi

Rezolucija izlaznih jedinica

rezolucija monitora (dpi)rezolucija printera (dpi)

laserski 600 – 1200 ink jet do 600

Dizajn web stranica

Tri osnovne komponente

estetski elementi boje fontovi slike itd.

funkcionalnost navigacijska struktura kretanje po stranicama

ekonomičnost brzo učitavanje veličina dokumenta tehnologija itd.

Postupak dizajniranja web stranica

svrha i cilj web stranicekrajnji korisnik i njegove potrebeodređivanje zahtjeva:

sadržaj tehničke komponentenavigacijaestetski elementi

Sadržaj i dizajn

Vrsta i podjela stranica: ovisno o namjeni:

strana sa sadržajem strana za navigaciju strana za obavljanje nekog posla

ovisno o strukturi ulazne (pružaju sadržaj i pomoć pri kretanju) usputne (sadrže sadržaj i navigaciju) izlazne (npr. kod kupovina preko Interneta) uvodne

Tehnologija i dizajn

software (dreamweaver, photoshop, homesite)HTML, XHTML, DHTML java scriptCSS

browserioperativni sustavi

Navigacija

Oznaka strane i navigacije logo i naslov Home button izabrani link konzistentnost izgleda stranica unutar lokacije

Položaj navigacijskog sustava: u obliku stabla TLB

top – primarne left – sekundarne bottom - rezervne

Prototip stranice

svrha i cilj web stranicekrajnji korisnik i njegove potrebeodređivanje zahtjeva:

sadržaj tehničke komponentenavigacijaestetski elementi