Embed Size (px)
Citation preview
USTANOVA: Umjetnička akademija u Splitu
ODSJEK: Dizajn vizualnih komunikacija
KOLEGIJ: Mediji i društvo
GODINA / SEMESTAR: III / V
tehnička i oblikovna analiza
MENTOR: STUDENT:
Sandi Vidulić, predavač Luka Vidoš
Split, 4. siječanj 2008.
1
Sadržaj 1. Uvod ............................................................................................................................ 3
2. HTML.......................................................................................................................... 4
3. Logotip ........................................................................................................................ 6
4. Boje ............................................................................................................................. 7
5. Tipografija ................................................................................................................... 8
6. Tipovi stranica............................................................................................................. 9
7. Opis postupka redizajna .............................................................................................. 10
8. Opis postupka redizajna .............................................................................................. 11
9. Zaključak..................................................................................................................... 13
2
1. Uvod Web stranica dvotjednika za kulturna i društvena zbivanja „Zarez“ je više nego zastarjela, kako tehnički, tako i dizajnerski. Nisam često zalazio na ovu stranicu, ali snaći se u njoj je gotovo nemoguće - osim nepostojanja pretraživanja, loše riješene arhive i sl.
Ovu ću analizu pokušati napraviti što temeljitije, počevši sa tehničkom te na kraju i oblikovnom. Smatram da je ovaj dio posla od najveće važnosti za razumijevanje cijelog procesa „redizajna“ weba - jer taj pojam ne obuhvaća isključivo vizualni dio, već i sve ostalo.
3
2. HTML Obično moj prvi pogled kada procjenjujem stranicu ide „ispod haube“. Uvijek možemo reći kako nešto lijepo izgleda, ali, mene uvijek zanima što se nalazi iza.
Prva stvar koju dobra web stranica mora imati je kvalitetan opis u glavi (<head>). Ova stranica ima naslov, charset i style.
Ono što moram pohvalit je žilavost onih koji su dodavali novi sadržaj - naime svaki title je „aktivan“, ovisno gdje se nalazite - no ne i na kategorijama. Zašto kažem pohvaliti, zato što je ovo rađeno ručno, svaki HTML file zasebno - što zahtijeva veliku preciznost i pažnju, ali i sporo je.
Charset je klasičan, određen za windowse, što je logično za stranicu koja je namijenjena tržištu gdje ipak prevladava windows platforma. Logičan izbor za html stranice, jer UTF-8 se tek odnedavno izraženo koriste.
Style (CSS) koji je tu povezan je... pa dobro, prepun različitog stajlanja linkova i hrpe fontova. Nesređeno i neoptimizirano čak za jednu takvu upotrebu.
Ovaj dio je očito bio drastično nedorađen - jer osim ovih stvari tu bi minimalno trebale biti meta oznake za opis, ključne riječi, robote; zatim link poveznice na autora, kopirajt i sl. Taj dio značajno utječe na to kako pretraživači gledaju na stranicu - jer oni nemaju oči - oni su matematički algoritmi.
4
Zatim krenemo na tijelo stranice i vidimo da je <body> oznaka puna margina i pozadinske boje - što je najočitiji znak da se nije radilo na olakšavanju HTML koda prebacivanjem tih elemenata u CSS datoteku.
Kada kremo niže, vidimo more tablica. Čak šest tablica se nalazi jedna u drugoj. Ovakav tip dizajna zahtijeva maksimalno 2 umetnute (radi izbornika), ali ne više od toga. Naravno, rješenje na kojemu će biti isključivo tableless design.
Kratka digresija s koda - kada gledamo naslovnicu, vidimo da scrollbar sa desne strane ide poprilično ispod, a ništa ne vidimo. U kodu je lako prepoznati gomilu nabacanih praznih paragrafa koji imaju još oznake za naglašavanje (razne kombinacije štoviše) - potpuno bespotrebno i beskorisno. Razlog tome - nepoznat. Slobodna pretpostavka bi bila da su htjeli da im se scrollbar vidi na svakoj rezoluciji, no sasvim nepotrebno za stranicu koja je postavljena lijevo.
Gledajući kroz ovaj dio koda, vidim da se oznaka za unutarnje ograničene elemente koristi učestalo, a da se slike koriste umjesto okvira (linije).
Još bih samo spomenuo da me isto čudi što je stranici dodan DOCTYPE - jer po svemu ostalome bi sudio da se nije nimalo razmišljalo dok se radilo ovu stranicu.
Tehnička analiza je rađena na naslovnici - no potpuno ista priča se proteže kroz sve stanice, čak i na broju 120...
5
3. Logotip Za početak bih komentirao logotip - budući da se na njemu bazira i časopis. Koliko sam uspio vidjeti, 95% naslovnica je bilo u kombinaciji crni tekst „zarez“ na narančastoj podlozi, dok je na web stranici crna boja za osnovne okvire, a tekst narančasti na bijelome.
Logotip je tipografski riješen - serifni font, kojemu je centralno slovo, slovo „r“ naglašeno - veličinom, masnoćom i sjenom. Mene osobno zbunjuje, jesu li oni „za rez“, ili su „rez za“ ili su „zaez r“ ili čak „r zaez“. Način prenaglašavanja jednog slova mi ne govori „što je pjesnik htio reći“. Četiri zareza ispod naslova tek daju naglasak da bi to ipak mogao biti „zarez“. Čemu baš četiri zareza, zašto ne 3 ili 5, ponovno ostaje iz ove faze nerazjašnjeno.
Četiri zareza ujedno označavaju četiri najvažnije teme koje se uvijek izdvajaju, pa se očito broj tema izvodi od toga (jer mislim da bi bilo sasvim nepotrebno obrnuto).
Sam logotip nije dovoljno snažan za novinu, ne dozvoljava ikakvo „šetanje“ po naslovnicama, te zbog zahtjeva pozadine, često narušava fotografiju na naslovnici (koje, budimo iskreni, često nisu specijalne).
Dobra strana trenutnog logotipa - ujednačeno je korišten kroz sve naslovnice koje su mi vidljive na internetu, ista forma, iste boje, isto sve, samo se mijenjala fotka.
6
4. Boje Slijedeći detalj kojeg bih se dotaknuo su boje korištene kroz web. Crna, bijela i nijanse sive kao akromatske boje, te narančasta - osim toga, ništa više. Držali su se identiteta postavljenog u početku, i mislim da bi taj detalj trebala biti prva poveznica sa redizajnom, i na tome polju napraviti samo blage promjene.
Mislim da narančasta boja kao takva ovdje zapravo odgovara temi. Ona nije agresivna, u sebi sadržava i žutu i crvenu, i nalazi jedan dobar balans uz izvrsnu vidljivost - čime se lako definira određen naglasak elementima.
Kažu da narančasta boja potiče mentalne aktivnosti i da je dobro prihvaćena među mladima. Također je boja jeseni i žetve. Kada gledamo kroz heraldičke značaje ona predstavlja snagu i izdržljivost. Sve ovo su obilježja društva, ali i kulture.
7
5. Tipografija Nakon ovih osnovnih elemenata, dolazi jedan od najvažnijih segmenata weba - tipografija. Prva stvar koju uzimamo u obzir je da je logotip sastavljen od serifne tipografije, samim time se na stranici postavlja oprečna tipografija - neserifna. No, zbog kojeg razloga baš Verdana. Ona ima prevelik razmak među slovima, uz ovako zbijene redove se jedva čita. Možda bi trebalo pokušati s Arialom, ili Tahomom ako će se ići na malena slova.
Izbornik je cijeli u verzalu - uz ovako gust tekst je potrebno naglasiti nekako - bold + verzal, možda nepotrebno. Možda je potrebno bolje naznačiti izbornik.
Naslovi su veći, podebljani i NAKOŠENI - čemu toliko pretjerivanje?
Ista stvar vrijedi za autora, s time da je on u Times New Romanu, podebljan i nakošen - sasvim nepotrebna količina naglašavanja.
Podnaslovi su onda veći od standardnog teksta, ali opet s previše razlike.
Početno slovo - premala razlika, a ne daje željeni efekt.
Svakako se vidi da nije bilo pretjerano rada na tipografiji. Posebno ako uzmemo u obzir da je cijeli web baziran na gomili teksta.
Meni se javlja pitanje - bi li možda logotip mogao ići u neserifno izdanje, a tekst u serifno. Svakako bi se poboljšala čitljivost, znatno bolje igre se dobivaju sa aksenderima i desenderima. Posebno zato što sam (zbog svoje zaboravnosti da odem u knjižnicu) našao na internetu presscut koji prikazuje dvije stranice zareza - koji koristi serifnu tipografiju za glavni tekst, a za naslove, podnaslove i navode neserifnu tipografiju.
8
6. Tipovi stranica Informacije koje se daju na stranicu su, nakon tehničke i oblikovne, slijedeći korak. Naime, treba uvidjeti različite tipove stranica koje će se pojavljivati, i nakon toga proučiti hijerarhiju.
Prvi tip kojeg vidimo svaki put kad se pojavimo na stranici je - naslovnica. Sadržaj trenutne naslovnice prikazuje četiri glavne teme, naslovnicu trenutnog broja i izbornik. Statično. Jedina promjena koja se vrši je ta. Što potiče pitanje - zar nema nikakvih informacija koje bi mogle posjetitelja vratiti u nekom trenutku unutar ta dva tjedna. Koji je razlog da ova stranica daje isključivo arhivu (koju ne možemo niti pretraživati), ako bi se već nadograđivala - trebala bi se pretvoriti u portal. Na tome ću temeljiti svoju osnovnu ideju za redizajn.
Drugi tip kojega vidimo je arhiva. Sadržava isključivo popis brojeva - bez datuma izlaska, bez ikakvih drugih obilježja koje bi nam mogle pomoći kad već nemamo pretraživanje.
Treći tip kojega vidimo je pojedini broj u arhivi - koji izgleda identično kao naslovnica, samo što se pojavi i izbornik koji je loše sređen (sadržaj spojen sa naslovnicom, ostatak odvojen - izraz naslovnica nas vodi na odabrani broj, a ne na naslovnicu.
Četvrti tip kojega nalazimo je sadržaj pojedinog broja sa linkovima prema svim člancima.
Peti tip kojega vidimo je sadržaj rubrike. Kratak opis svakog od članaka koji se nalaze na webu unutar tog broja. Ipak pohvala pokušaju odvajanja sa naizmjeničnim mijenjanjem sive i bijele.
Šesti tip je sam članak. Vidimo koji smo broj i datum u zaglavlju, rubrika je iznad naslova i tek onda članak. Nemogućnost vraćanja kroz neki izbornik ili „breadcrumbse“ stvara poteškoću kroz rad. Ne sviđa mi se ni to što se izbornik koji bi trebao biti glavni i na vrhu stavlja na dno, mijenja se njegova pozicija da bi se dalo prednost onome iz arhive.
Sedmi i posljednji tip je stranica sa nekakvim sadržajem (pretplata, o nama, e-mail, linkovi) - od kojih su se ne mogli integrirati na naslovnicu, u podnožje stranice ili čak na naslovnicu (pretplata, e-mail, pa čak i cijeli onaj jedan link na posebnoj stranici).
9
7. Opis postupka redizajna Iz trenutnih podataka koje sam obradio - već se uviđaju nužne promjene. No ono čime bih ovdje započeo je slijedeće:
- iskoristio bih barem 940px površine i time dao priliku ljudima koji danas masovno imaju monitore veće od 14“
- time dobivam površinu i za dodatan vertikalni izbornik, dodatne mogućnosti (npr. vezani članci, članci iz iste kategorije i sl.), ili jednostavno površinu na koju mogu staviti sporedne informacije
- od isključivo vertikalnog izbornika, pokušao bih varijante sa kombiniranim, ili možda čak dva vertikalna
- dodao bih podnožje, sa osnovnim obavijestima, kontakt podacima redakcije kojima je potrebna veća važnost
- pokušao bih smanjiti ulazak u dubinu da bi došli do članka
- svakako bih išao s pristupom da se cijeli web pretvara u stvarni CMS pokretan web sajt, sa „punom opremom“
- dodao bih mogućnosti koje potrebne da bi se korisnika malo duže zadržalo na stranici - registraciju korisnika, mailing liste, komentare
- razmišljao bi u pogledu da stranica ponekad može poslužiti i kao „produžetak“ statičnoj novini - uz foto galerije i video
- svakako bi trebalo ići s razmišljanjem da ovakva količina arhive zahtijeva i pretragu - posebno što to na ovoj stranici nedostaje
Time, osim samih „vizualnih“ promjena, ovdje treba uzeti u obzir i ove tehničke nadogradnje. Kao dizajneri, uvijek moramo težiti cjelovitoj promjeni nečega, a ne samo krpanju postojećih. Zato sam si uzeo više vremena za analizu weba, nego na odlazak u Photoshop i brljanju bez nekog razloga. Sada samo treba odrediti smjer. Za početak bi razradio početnu ideju logotipa, iz koje bih dalje slagao identitet weba...
10
8. Opis postupka redizajna Prema komentarima koje sam ranije naveo, i bez daljnjeg duženja ovog seminara, redizajn je zasad u ovoj fazi:
Ispravljene mane koje je stari sajt imao, idejno gledajući dodane nove mogućnosti, i smjer u kojem bi se kretao ovaj web. Svakako portal na koji bi se moglo češće navratiti.
11
12
13
9. Zaključak Web je promjenjiv teren - ukoliko se ne slijede tehnologije, ideje, načini funkcioniranja - vrlo brzo stranica postaje mrtva točka, teret kojega zapravo ponekad prati samo mala ograničena skupina ljudi, a nove grupe „odustaju“ na početku.
Ovo je jedno idejno rješenje, i još uvijek u fazi skice, koje ima potencijala, kako tematski, tako i izvedbeno. Ovaj zadatak sam dobio u predmetu Elementi web oblikovanja, ali sam ga odlučio razraditi do kraja, tako da i mene samog zanima kako će to na samom kraju ispasti.
Over 'n' out.
