+ 381 64 17 39 157 office@cyclopdesign.com
Loš web dizajn: pogled na najurnebesnije užase web sajtova sa cele mreže

Loš web dizajn: pogled na najurnebesnije užase web sajtova sa cele mreže

Da li ste nailazili na sajtove dizajnirane tako da vas nateraju da se glasno nasmejete? Ne mislimo da se nasmejete zbog toga što je sadržaj sajta zabavan, već zbog dizajna samog sajta koji je urnebesno užasan.

Potrebno je mnogo vremena i napora da bi neko naučio kako da valjano dizajnira sajt. Postoji mnoštvo sajtova koji pokazuju da njihovi dizajneri nisu prihvatili i primenili neke od osnovnih principa zanata. Neka su blagosloveni. Na sledećim stranicama razmotrićemo neke primere  web grozote. Za početak ćemo pogledati na osnovu kojih principa je vršena procena.

 

PRINCIPI DIZAJNA

– lako razumljiva navigacija

– prigodna upotreba boja

– prigodna upotreba animacija

– layout lak za korišćenje

– prijatnost oku

– dizajn odgovarajući datoj temi

– elementi dizajna ne smetaju sadržaju

– odličan sadržaj, lak za nalaženje, navigaciju, konzumiranje i šerovanje

 

DA RAZJASNIMO NEŠTO PRE NEGO ŠTO PRISTUPIMO SECIRANJU

 

Za početak bismo vas zamolili da se ne uvredite ukoliko ste dizajner nekog od dole navedenih sajtova. Namera ovih redova nije izazivanje bola i nevolje, niti je to ismevanje. Ovi sajtovi samo predstavljaju primere na kojima pokazujemo šta je pogrešno i kako da to ispravimo. Ne radi se o nepoštovanju nečijeg rada. Neki od ovih sajtova su delo početnika u svetu dizajna. Svi su morali jednom da počnu odnekle, što ne znači da ćete imati priliku da vidite neke od naših prvih radova.

Takođe nismo tražili samo stare sajtove. Sajtovi koji nisu apdejtovani godinama nam sada izgledaju grozno, ali znamo da su dizajnirani uz upotrebu elemenata korišćenih u to doba. Ako smo naveli neki stariji sajt na listi to nije bilo samo zato što je star – već zato što u svom dizajnu sadrži neke grozote koje nisu smele da budu primenjene ni u vreme kada je taj sajt nastajao. Naravno da su mnogi od tih sajtova tu već dugo vremena, ali to ne znači i da su dobri.

 

DA POČNEMO

Pretražili smo net u potrazi za sajtovima koji izazivaju kiseo izraz lica praćen kikotanjem. Premda je mreža prepuna primera kako se sajtovi ne prave, jednostavno nije bilo moguće navesti ni mali procenat tog mnoštva. Ipak, ovi koji slede su uspeli da se istaknu.

 

Blinkee.com

Blinkee.com

Ovaj sajt prodaje stvarčice koje svetlucaju ili trepere u mraku. Da bi istakao tu poentu sajt je mračan, dok svi proizvodi trepere. Osnovna tema je da je sve u mraku i da flešuje u vašem pravcu. Postoji nekoliko poteškoća ovde. Pod jedan, slike su isuviše sitne. Proizvodi su ti na koje bi sajt trebalo da bude usredsređen. Kao drugo, sve je animirano. Nekoliko animacija tu i tamo su u redu, ali kada je sve animirano sajt postaje naporan. Boje su sledeći problem. Svi mi volimo boje, ali pogledajte tekst i recite koliko možete da ga čitate na toj crnoj pozadini?

Sledeća stavka su frejmovi. Postoje dva frejma na ovom sajtu. Zašto? Nemamo pojma. Onaj sa leve strane ispunjen je sadržajem, dok je desni prazan. Jođ jedan problem proizilazi iz toga što je sve sitno. Trebalo je da zumiramo stvari na 200% da bi dostigle ono što bismo mogli nazvati prirodnom veličinom. Sve kategorije su izlistane na desno. Ponekad vas gledanje detalja odvede na drugi ekran. Drugi put vas klik na sliku odvede na ekran sa svim slikama iz te kategorije. Ne postoji dobro struktuiran meni za laku navigaciju. Sajtovi eCommerce tipa bi trebalo da vas navedu da se zadržite na njima i da razgledate. Stavke na prodaju bi trebalo da budu čeono i centralno postavljene. Sajt je isuviše fokusiran na sopstveno svetlucanje u mraku. Svrha radnje je da prodaje robu, ali ovaj sajt vas tera da ga napustite.

 

High School Sports in Mississippi

High-School-Sports-in-Mississippi

Snapshot je urađen pri 100% zumu. Na takvom setingu nemoguće je videti sve na ekranu. Da biste videli punu širinu sajta potrebno je spustiti zum na 67%, kada tekst postaje isuviše sitan za čitanje. Kombinacija boja izaziva bol kada je pogledate. Nikada nemojte da stavljate tamnocrveni tekst na tamnoplavu pozadinu. Uz to, ovde postoji i plavi tekst preko crvene.

Blokovi informacija su nabacani preko stranice čije skrolovanje unedogled pokazuje samo tablu sa rezultatima. Ovakav layout jednostavno ne radi posao.

Ovako izgleda zumiran pogled na stranicu:

High-School-Sports-in-Mississippi-2

Za početak, svaki od ovih blokova bi trebalo da bude zasebna stranica. Nema potrebe za pružanjem svih informacija na homepage-u. Sadržaj je sasvim dovoljan. Navigacijski meni na vrhu je dobra stvar. Međutim klik na jedan od linkova vodi na sledeću stranicu sa sličnim layout-om koji sadrži individualne boksove informacija smeštene na stranicu. Neki od boksova smešteni su sa strane i neprimetni su dok ne zumirate celu stranu.

Pogledajmo Odbojku:

High-School-Sports-in-Mississippi-3

Ovom sajtu je preko potreban WordPress sa temom magazina. Morali biste da se dobro potrudite da biste našli WordPress temu koja bi vas navela na ovako loš layout.

US House of Representatives Judiciary Committee

US-House-of-Representatives-Judiciary-Committee

Nije sve loše dizajnirano na ovom sajtu. Štaviše, sam sajt je lepo urađen, ima lep, jasan layout sa dobrom navigacijom. Izgleda prikladno za US House of Representatives. Između svih stranica sa političkim žargonom ova nas je naterala da je dobro razmotrimo.

Animacije su divna stvar, kao i animirani gif-ovi. Ali prisustvo Dženifer Lorens koja pita „What?“ na sajtu nateralo nas je da glasno ponovimo to „What?“. Zatim skrolovanjem silazimo da Arieline brade uronjene u dlan, i nekolicine drugih sa iznenađenim izrazima lica kako nešto pokazuju naokolo. Nijedan od ovih animiranih gifova ne odgovara temi stranice. A potrebno je samo dvadesetak sekundi da uznemirenost ovim preraste u iritiranost. Probajte i složićete se.                          

Članak je lista numerisana sa 10 brojeva. O čemu se radi? IDK je nešto u vezi pravne regulative. Nečitljivo je. Možda je u tome i poenta? U tom slučaju, upalilo im je. Dizajneri dizajniraju stranice kao i layout-e, a ovo pokazuje da čak i dobro dizajniran layout može da bude ruiniran neadekvatno dizajniranom stranicom. Ništa na ovoj stranici se ne uklapa u temu sajta. Pogled na to čini da nam oči zasuze.

Trebalo je da upotrebe nekoliko gifova i više jpeg-ova. Tekst je trebalo da bude veći. To je sadržaj koga želite da vaši posetioci pročitaju. Trebalo bi da se ističe. Ovako je isuviše mali i gubi se među ometajućim gifovima. Slike bi trebalo da budu udaljenije da bi tekstu ostavile više prostora za disanje.

 

Suzanne Collins Books

Suzanne-Collins’-Books

Postoji scena u Hunger Games koja je sigurno razbesnela sve koji su čitali knjigu. Zbog toga ovaj sajt ima potencijal da nas takođe razbesni. Dizajniran je za zum od 200%. Probajte, na tom uvećanju izgleda kao blog. Zumirajte ga nazad i videćete da se sve pomera ka spoljnim ivicama ekrana. White space je u redu, ali ipak…

Klikom na koricu knjige se ništa ne dešava. Upravo propuštena prilika. Klikom na Works odlazite na sličan ekran sa koricama knjiga, nagradama, kritikama, ali bez opisa. Zatim kliknite na Mockingjay i još uvek vam se neće ukazati prilika da kupite knjigu. Zatim se vratite pa kliknite na Gregor the Overlander, knjiga prva. Ovo vas odvodi na stranicu sa klikabilnom koricom gde je moguće kupiti knjigu. Takođe je tu i lista nagrada i kritika. Takođe je tu i Word dokument koji možete da downloadujete pod imenom Children’s Choice Award Nominations. Razumemo da želite da prikažete da ste dobili nagrade, ali zbog čega bi neko od čitalaca želeo to da downloaduje kao zaseban dokument?

Na dnu stranice u desnom uglu je spisak online radnji u kojima možete kupiti njene knjige. Umesto da vas vodi na njenu autorsku stranicu, stranicu sa njenim knjigama ili čak da uključi srodni link, ovo vas samo vodi na homepage radnje. Klikni Amazon i otići ćeš tamo. To je to. Još jedna propuštena prilika.

 

Patimex

Patimex

Malo je nedostajalo pa da se ovaj sajt ne nađe na listi. Na prvi pogled izgleda samo kao da se diskutabilna grafika zumira in and out na ekranu. Neki od ispisa su takođe u fade-in i fade-out modu, dok su reči iznad roštilja u plamenu. Sve ovo možda i nije toliko loše dok ne shvatite da su vam zvučnici mutirani, a da na ekranu postoji i malena muzička nota. Pojačavanje zvučnika je ovaj sajt dovelo direktno na ovu listu.

Bilo šta od navedenog samo za sebe ne predstavlja toliki problem. Ali sve zajedno uz dodatak onakve muzike… e pa to je baš loše. Analiza dizajna nameće mnoga pitanja. Zbog čega se đavo autogriluje u plutajućem roštilju? Čemu ta muzika? Zašto, zbilja stvarno zašto?

Barem navigacija funkcioniše fino. Izuzev kompanijskog logotipa koji pulsira. Zbog čega biste nam privukli pažnju pulsirajućim logotipom na koji nije moguće kliknuti? A ona melodija nam se još mota po glavi. Đavolska su to posla, uz to su još i na roštilju.

 

Yale University School of Art

Yale-University-School-of-Art

Od sajta umetničke škole bi se dalo očekivati da reflektuje vrstu obrazovanja koju ta ustanova nudi budućim polaznicima. U tom smislu od visoko rangiranih škola bi trebalo da očekujemo samo najbolje. Ovo je Yale. Ozbiljno. Njihov Unverzitet umetnosti. Ovaj sajt je programiran pomoću Ruby on Rails i zapravo je wiki, što će reći da studenti i fakultet mogu da unose promene do određenog stepena. Često je apdejtovan. Fakultet dodaje raspored predavanja, mape razreda itd, ali šta se događa sa background-om? Fotografija koja se stalno ponavlja ne bi trebalo da bude toliko očigledno ponavljajuća. Ova je baš to. Takođe, stranica bi mogla da bude proširena na ostatak ekrana, umesto situacije u kojoj smo ostavljeni sa sadržajem na manje od polovine ekrana.

Navigacija radi kao što smo i očekivali. Izbor boja i slučajan layout čine je teškom za praćenje. Ako volite mange samo skrolujte na dole.

Yale-University-School-of-Art-2

Sada možemo da vidimo o čemu se radi u ovoj školi. Ali da li je to pokriveno programom nastave? Proverili smo i:

Yale-University-School-of-Art-3 (1)

Klik na Kurseve vodi vas na ekran sa uvrnutom animacijom u background-u, sa spiskom svih predavanja. Može li neko da nam objasni o čemu se ovde radi? Još uvek je nejasno da li predavanja obuhvataju manga umetnost. Možda je samo fora u pitanju? Lista časova je dugačka ali na njoj nema ni web dizajna. Što nam daje ideju…

 

Ling’s Cars

Lings-Cars

Au, šta ovaj sajt radi našim očima! I zbog čega taj Mercedes pulsira direktno u mene? Tek muzika… jednostavno je nemoguće prestati sa gledanjem. Da li je ono pile? Scrollovanjem na dole pojavljuju se Titanik (zbog čega biste želeli da vaš sajt bude asocijativno povezivan sa potonulim brodom?), Dalek web kamera (to je cool), projektil i Kentucky Fried Panda i vau, vau, baš vauuu. Postoji čak i intro film koji ćete sigurno odgledati više puta ako jednom kliknete na njega.

Tu su i lažne reklame, lažni novinski izveštaji, karaoke, kviz o kolima, online igrica i ko zna kakva još čudesa. Svrha ovog sajta je lizing automobila, ali to je nemoguće primetiti. Uz sve ovo ludilo koje privlači vašu pažnju niko i ne shvata zašto je uopšte tu stigao. Sve ove distrakcije oštećuju upotrebnu vrednost sajta. Ono što je sigurno je da sajt nije dosadan. Reč koja ga najbolje opisuje je verovatno „random“.

 

Penny Juice

Penny-Juice

Penny Juice je koncentrat voćnog soka proizveden namenski za centre za brigu o deci, predškolske ustanove i sl. Prva stvar koju morate da uradite po ulasku na sajt je biranje između HTML i Flash verzije. Budite mudri.

Penny-Juice-2

Svakako da se oni nadaju da će cool klinci izabrati Flash. Kada ste izabrali, prelazite na sledeću stranicu gde se nalazi jednostavna meni struktura. Videćete plutajuće oblake iza duge, novčiće koji se vrte(?) i animirane reči. Postoji i napomena o copywright-u iz 2001-2002. Možda tu leži objašnjenje.

Sve ovo još uvek deluje nedužno dok ne kliknete sledeći put, kada vam ekran eksplodira.

Penny-Juice-3

Oči bole do i od nečitljivosti. Boje su u stvari pametan dizajnerski element zasnovan na Penny Juice ukusima:

Penny-Juice-4

Kapiramo vezu između brenda i dizajna (to je duga uzbudljivih ukusa…), ali nemojte. Jednostavno nemojte. Postoje bolji načini na koje možete mudro iskoristiti marketinške elemente u vašem dizajnu. Možete upotrebiti boje duž strane raspršene u pozadini, na način od kojih ničije oči neće prokrvariti. Možete ih iskoristiti za buttons-e u meniju. Samo ih ne stavljajte iza teksta. Nikada. Naročito ne sve odjednom na istom ekranu.

Otarasite se Flash/HTML homepage ekrana za selekciju. Dajte korisnicima jedinstvenu HTML homepage. Rotirajući novčići na ekranu nisu nikome potrebni. Zastareli dizajn i kopiji čine da se posetioci zapitaju da li je sajt apdejtovan. Počinju da sumnjaju u cene i podatke vezane za proizvode. Niko ne bi trebalo da se bavi tim stvarima kada baci pogled na dizajn vašeg sajta. To je upravo suprotan efekat od onoga što želite da postignete.

 

REZIME

Bilo je zabavno. Brz pogled na urnebesno grozne sajtove je zabavan i sjajan način za učenje na tuđim greškama. Nije loša ideja da s vremena na vreme malo razgledate po netu i da vidite da li vas nešto uznemirava, a zatim da pronađete način da to poboljšate. Shvatajući šta vam se dopada a šta ne, na najbolji način učite šta žele vaši klijenti i korisnici njihovih sajtova.

Pin It on Pinterest