Marko DuporLicia Ljubisavljević

Damir Vičević

Analiza web sjedišta

Porin – dobar dizajn

Porin – dizajn informacija (1/8)

Anketa na naslovnoj stranici

Porin – dizajn informacija (2/8)

Informacije su podjeljene u sljedeće glavne kategorije:

Porin – dizajn informacija (3/8)

Informacije na svim stranicama organiziranje su kronološki od novijih prema starijima i na način da posjetiteljima nude sažet pregled u određenu novost, najavu ili događanje.

Porin – dizajn informacija (4/8) Starije informacije nalaze se na

samom dnu stranice i ne nude sažet pregled već samo naziv vijesti/najave/događanja i taj naziv ujedno predstavlja poveznicu na koju posjetitelj može kliknuti i koja ga preusmjerava na opširniji opis dotične novosti.

Porin – dizajn informacija (5/8)

Na samom dnu svih stranica nalaze se neke novosti koje sadrže multimedijske sadržaje (video ili fotogalerije).

Porin – dizajn informacija (6/8) Na samom dnu svih stranica nalaze se i poveznice na YouTube i

društvene mreže Facebook i Twitter, te poveznica na Institut hrvatske glazbe.

Porin – dizajn informacija (7/8) S desne strane nalaze

se 3 do 4 nasumičnih vijesti, najava ili događaja koji sadrže fotografiju, opis i poveznicu na opširniji sadržaj.

Porin – dizajn informacija (8/8)

S desne strane u svakom trenutku nalaze se i rubrike Medijski partneri, Pogledajte još..., Utemeljitelji Porina, Gradovi domaćini i Partneri.

Porin – grafički dizajn (1/3)

Kvalitetan raspored elemenata, te upotrebu boja koje ne iskaču iz kompletnog ugođaja stranice.

Opći vizualni dojam je ugodan, boje nisu napadne i ne odvraćaju pažnju od sadržaja.

Na samom vrhu nalazi se pretraživač sadržaja, funkcionalan i diskretan ukoliko nam ne treba.

Prostor ispod toga zauzima transparentni banner koji sadrži logo (ovogodišnjeg) 19. Porina, gradove domaćine, te zgodno odbrojavanje dana do održavanja, izvedeno preko flasha.

Porin – grafički dizajn (2/3) Glavni dio stranice je klasična kombinacija crnog na bijelom, Calibri font veličine 11 koji se

lijepo uklapa u sadržaj. Postoje samo dvije varijacije fonta kroz cijelu stranicu, a to je font podebljanog tipa (bold)

koji se upotrebljava ne bi li se istaklo nešto u tekstu, te plava boja fonta za poveznice. Glavni dio stranice je podijeljen u dva paralelna stupca, od kojih je lijevi namijenjen

sadržaju pojedine stranice, i sukladno s tim je i širi, a desni je dio za medijske pokrovitelje, nasumične vijesti i dr.

Porin – grafički dizajn (3/3) Reklamni baneri su

diskretni te ne odvraćaju pažnju od sadržaja web sjedišta.

Porin – dizajn sučelja (1/3)

Porin – dizajn sučelja (2/3)

Porin – dizajn sučelja (3/3) Dio stranice u kojem se prikazuje sav sadržaj je fiksne širine i iznosi točno

1000 px, te se ne mjenja promjenom veličine prozora web preglednika. Sučelje je izvedeno kroz klasičnu upotrebu HTML-a, te CSS-a za

oblikovanje stranica. Krećući se kroz web sjedište, može se primjetiti da je dizajn sučelja

konzistentan, te da se za grupiranje elemenata uglavnom koristi pravilo 7 (plus/minus 2).

Jedina metafora na cijelom web sjedištu nalazi se na samom dnu stranice i predstavlja poveznicu na vrh stranice.

Porin – dizajn navigacije (1/2)

Navigacija se odvija podjednako preko menija na vrhu stranice, te preko poveznica koji prate svaku pojedinu stranicu.

Horizontalni meni na vrhu stranice je padajući te sadrži 6 glavnih kategorija. Do dodatnih poveznica dolazi se prelaskom strelice miša preko naziva kategorije.

Porin – dizajn navigacije (2/2)

Kretanjem kroz sadržaj web sjedišta pomaže nam i breadcrumb navigacija koja se nalazi iznad naslova sadržaja kojeg pregledavamo.

Porin – multimedija (1/4)

Primjer fotogalerije

Porin – multimedija (2/4)

Baner na vrhu koji odbrojava dane izveden je pomoću flash animacije.

Porin – multimedija (3/4)

Primjer zvučnih datoteka

Porin – multimedija (4/4)

Primjer video broja implementiranog na web sjedište pomoću YouTube-a

Porin – tehničke karakteristike

Web sjedište je isprobano u tri popularna web preglednika (Mozilla Firefox, Google Chrome, Internet Explorer) i u svakom funkcionira odlično!!!

Osnovna škola Bakar – LOŠ DIZAJN

DIZAJN INFORMACIJA

Informacije su podijeljene u kategorije:

O nama Informacije Vijesti Projekti Dokumenti Korisni linkovi

GRAFIČKI DIZAJN (1/2)

Sjedište je jako siromašno grafičkim dizajnom.

Cijelo web sjedište je sive boje Tekst je pisan različitim

fontovima, ne samo u različitim sadržajima, već i unutar jednog nailazimo na različit font.

GRAFIČKI DIZAJN (2/2)

Elementi od kojih se sastoji dizajn su u najvećem dijelu hipertekstualne veze, pokoja slika i kratki tekst.

Od ponešto složenijih elemenata tu su razne gif animacije smještene u kut stranica, koje nemaju nikakve veze sa sadržajem.

DIZAJN SUČELJA (1/2)

Sučelje, ako ga možemo uopće tako nazvati, je nepregledno i nekonzistentno.

Za kompletnu analizu sučelja, bilo bi potrebno analizirati svaku pojedinu stranicu zasebno, jer je svaka drugačije organizirana.

Ugrubo možemo podijeliti sučelje na naslovni dio na vrhu koji nam daje informacije o trenutnoj lokaciji.

DIZAJN SUČELJA (2/2)

S desne strane se nalazi meni, a središnji dio bi trebao služiti kao prostor za sadržaj, iako je prepun linkovima i loše razmještenim slikama.

DIZAJN NAVIGACIJE (1/2)

Navigacija na ovom web sjedištu nije dobro riješena. Kada se nalazimo na bilo kojoj stranici koja nije naslovna, ne možemo reći kojem web sjedištu ona pripada (nigdje se ne pojavljuje logo/naziv same stranice).

Navigacija je organizirana pomoću vertikalnog bloka, te vidimo podjelu samo na glavne kategorije. Pojavljuju se na svakoj stranici, uz dodatnu poveznicu na Home stranicu.

DIZAJN NAVIGACIJE (2/2) Ne postoje veze

između stranica jednakih hijerarhijskih razina, kao ni mapa sjedišta koja bi olakšala navigaciju.

Sa svake podrazine na višu razinu nije se moguće vratiti, niti postoji prikaz putanje gdje se trenutno nalazimo, već je dostupna veza samo na naslovnu stranicu.

MULTIMEDIJA Nisu prisutni skoro nikakvi elementi multimedije. Logo, baner i ostali, inače korišteni grafički elementi ne postoje.

Postoji nekoliko fotografija same škole, te učenika u pojedinim člancima, te već spomenute nepotrebne i sadržajno nebitne gif animacije na svakoj zasebnoj stranici.

TEHNIČKE I OSTALE KARAKTERISTIKE

Web 2.0. alati ne postoje. “Funkcionira” u svim web preglednicima Izvršni kod stranice nam otkriva lošu programersku stranu,

HTML kod je sastavljen bez ikakve "dublje" organizacije, i jedino se on od web programerskog dijela i koristi.

Kraj

HVALA NA PAŽNJI!