ANALIZA WEB SJEDIŠTAMULTIMEDIJSKI I HIPERMEDIJSKI SUSTAVI

Bartolić, Jokić, Močibob, Santrač Travanj, 2015.

PRIMJER DOBROG DIZAJNA

500px.com

Općenito o web sjedištu

- sjedište za fotografe i ljubitelje fotografije- društvena mreža + umjetničko web sjedište- dijeljenje i kupovanje fotografija- slike > tekst- čist i jednostavan dizajn- sjedište responzivno

Dizajn informacija (1/2)

- naslovnica- prijava / registracija- gumbi za prijenos i pretraživanje- galerije

- većina linkova u footeru- nakon prijave dostupno većina funkcija

- 3 naplatna plana (+ početni besplatni)- efekti prijelaza- hijerarhijska / mješovita struktura

- prije prijave glavna naslovnica- nakon prijave flow

Dizajn informacija (2/2)

- flow - predstavlja nove fotografije korisniku- automatski generira personaliziranu galeriju

- sjedište ažurno- 500px mobilne aplikacije- engleski jedini dostupni jezik- prijava i preko Fb / Twitter / Google računa- kvalitetna podrška- 500px ISO - članci i natječaji za fotografe

Grafički dizajn (1/2)

- opći vizualni dojam stranice je ugodan- različiti elementi stranice su dobro

raspoređeni i centrirani- simetričan dizajn- prevladavaju bijela, siva, plava i crna boja- kombinacija boja ugodna posjetitelju- linkovi su isti kao ostatak teksta, sive boje- mijenjaju se u svijetlo plavu kad prijeđemo

sa mišem preko njih

Grafički dizajn (2/2)

- koristi se Arial, Helvetica, sans-serifni font- prevladava 12px veličina teksta- pregledan i čitljiv tekst- naslovi su centrirani- paragrafi su poravnati ulijevo- jednaki gumbi, razlikuju se samo po boji- logo stranice je jednostavan i ovisno o

pozadini je u bijeloj ili sivoj boji- korištenje simbola na naslovnoj i ostalim

stranicama

Multimedija (1/2)

- jedini multimedijski element je slika- JPEG, PNG i GIF formati- na naslovnoj stranici galerija sa slikama

korisnika- slike nisu složene u fiksne rešetke, tj.

nemaju sve istu širinu / dužinu- složene u recima tako da svaki redak sadrži

više fotografija različitih širina

Multimedija (2/2)

- sklad nije narušen - suma svih slika daje istu ukupnu širinu retka

- dinamičniji i zanimljiviji prikaz galerije- može se odabrati željena kategorija slika- svaka slika je poveznica na punu veličinu i

profil osobe koja ju je objavila- slike fluidne

Dizajn sučelja

- responzivnost- raspoređivanje blokova- skrivanje sadržaja / elemenata

- HTML5, javascript- jedna .css datoteka (min)- flat design- deference- animacije

Dizajn navigacije

- “zaključan” centralni navigacijski element- nakon prijave na vrhu navigacijska traka- overscroll galerija - sticky header- ograničen broj kategorija na sticky headeru

kod malih zaslona- footer navigacija

Tehničke i ostale karakteristike (1/2)

- tehnički složen portfolio / Web 2.0 alat profesionalnih fotografija

- responzivno web sjedište izrađeno pomoću Ruby on Rails server backend tehnologije uz poneku implementaciju Go mikroservisa

- zadržava vizualni identitet i ispravnost prikaza na nizu različitih web-preglednika i platformi

Tehničke i ostale karakteristike (2/2)

- korištenje media-specific CSS stilskih predložaka iz vanjskih CSS datoteka

- efektivna podrška za uređaje sa zaslonom različite razlučivosti

- ugrađene Javascript klijentske skripte uz korištenje JSON-LD tehnologije

- jQuery AJAX metode za prijenos podataka na server

- integracija sa svim popularnim društvenim platformama

PRIMJER LOŠEG DIZAJNA

am-media.hr

Općenito o web sjedištu

- poslovno web sjedište - lokalni obrt- kopirnica, servis i prodaja računalne opreme

- nekonzistentno pisanje AM media- miješaju hrvatske i engleske riječi- na sjedištu opće informacije o obrtu

- nema tehničkog / informatičkog žargona- “jeftin” izgled- sjedište nije responzivno

Dizajn informacija (1/2)

- nema online trgovinu ni popisa artikala- informacije na sjedištu:

- o obrtu- o servisu i prodaji- (iscrpan) popis usluga- kontakt

- naslovnica nudi pregled sjedišta (sažeci)

Dizajn informacija (2/2)

- struktura:- hijerarhijska po navigacijskoj traci na vrhu- princip potpune mreže - sa svake stranice se može

doći na bilo koju drugu- 5 stranica grupiranih po vrsti informacija- hrvatski jezik- kontakt

- adresa- broj telefona i mobitela- kontakt forma + email adresa

Grafički dizajn (1/2)

- nije atraktivno- zastarjeli dizajn- prevladavaju tri osnovne boje: bijela, žuta i

crna- pozadina ne paše uz ostatak- 4 bloka na naslovnoj stranici

- dizajn prvog bloka odudara od ostalih- linkovi su crni, mijenjaju boju u narančastu

kad prijeđemo mišem preko njih

Grafički dizajn (2/2)

- Tahoma, Verdana, Arial sans-serifni font- svugdje jednak osim u navigaciji- veličina teksta 12px, veličina naslova 17px- paragrafi nemaju poravnanja- naslovi su podebljani i nakošeni- pregledan i čitljiv tekst

Multimedija

- jedini multimedijski element je slika- koristi se JPEG, PNG i GIF formati- najzastupljeniji je JPEG- slike su loše kvalitete, mutne- u slici zaglavlja nije se pazilo kod rezanja i

spajanja više slika u jednu

Dizajn sučelja

- Stranica nije responzivna i ne koristi HTML5- jedna .css datoteka- sadržaj u div (id centralBox)- centralBox se jedini mijenja- kategorije nisu dizajnerski ujednačene- gradijent- flash lokacijska mapa

Dizajn navigacije

- implementirana kao traka sa gumbima na vrhu stranice (nedostaje link prve razine)

- nepotreban navigacijski footer- dvije razine navigacije koja bi trebala postati

jedna- “prodaja” link na naslovnici vodi na “O nama”- loši linkovi do podržanih hardver partnera

Tehničke i ostale karakteristike

- HTML 4 tehnologija uz XHTML transitional DTD serviran kao “text/html” mime-type

- statičke web stranice bez podrške za responzivnost i 1 vanjsku CSS datoteku

- Javascript skripte uključen u HTML + 1 flash applet za lokaciju

- ispravan i validan markup koji se pravilno renderira

- web sjedište nema socijalnu integraciju i likove na dotične servise