Kritika web dizajna # 80: Nova responzivna web stranica WebAppers
Vrijeme je za novu fantastičnu kritiku web dizajna, gdje ćemo pogledati pravu web stranicu i analizirati dizajn. Izdvojit ćemo oba područja koja su dobro učinjena, osim onih koja bi mogla koristiti neko djelo. Na kraju, završit ćemo traženjem da pošaljete svoje povratne informacije.
Današnje web mjesto je WebAppers, odlično mjesto za pronalaženje web izvora otvorenog koda. Uskočimo unutra i vidimo što mislimo!
Istražite elemente Envatoa
Ako želite poslati svoju web stranicu kako bi je predstavili u budućoj dizajnerskoj kritici, potrebno je samo nekoliko minuta. Naplaćujemo 49 USD za kritiku vašeg dizajna - znatno manje nego što biste platili za savjetnika da pogleda vašu stranicu! Više možete saznati ovdje.
O webAppersima
„WebAppers je blog posvećen svakodnevnoj razmjeni vrhunskih resursa otvorenog koda za web programere i web dizajnere. Kao web dizajner, naći ćete neke od najboljih besplatnih ikona, fotografija, četkica, fontova i nadahnuća za dizajn. Kao web programer, također ćete pronaći neke od najboljih Javascript i Ajax komponenti poput modalnih prozora, izbornika, galerija, savjete, grafikone, kalendare i dodatke. "
Evo snimka zaslona početne stranice:
Prvi dojam
Ako se pitate vrijedi li kritika Design Shack, ne morate tražiti dalje od ponovljenih kupaca. WebAppers zapravo je bio kupac za našu 14. kritiku web dizajna i ponovno su nam se obratili na njihovo potpuno novo, potpuno redizajnirano responzivno mjesto.
Moje prve misli o novom dizajnu vrlo su pozitivne. Ovo nije malo ažuriranje, stranicu su preuzeli u potpuno novom vizualnom smjeru i stvarno mislim da je bolje za to. Staro je mjesto imalo sličan izgled, nalik na razne neskladne resurse. Novi dizajn je, nasuprot tome, vrlo čist i profesionalan i dolazi kao potpuno prilagođeno djelo. I odgovara na dizanje!
Još smo jako rani u evoluciji weba, tako da moj šešir ide svima koji zapravo preuzimaju inicijativu za uklanjanje RWD-a iz ugodnog područja teorije i njegovo stavljanje u stvarnu svjetsku praksu.
Kopajmo dublje u dizajn web mjesta i vidjeti što dobro funkcionira i što bi moglo poboljšati.
Novi logotip
Stari logotip WebAppers imao je ovakvu privlačnost rockera iz 80-ih godina. Bila je neka vrsta mačke, nekih oblika rasvjetnih vijaka; bilo je čudno, ali zabavno.
Uvijek sam smatrao da je logo pomalo zbunjujući. Nikada ne bih mogao točno reći jesu li oblik munje trebali biti upravo takvi ili su možda lavlju grivu. I što je uopće imalo veze s tim izvorima s otvorenim kodom?
Novi logotip koristi jednostavniji, tekstualni pristup. Zapravo volim vizualni prikaz krivulje stranice "W", čiji centar također služi kao "A". To je samo ravna ideja koja se uspješno povukla.
Također mi se sviđa što logotip jasno govori o čemu se radi na web mjestu. Čim učitam početnu stranicu, pogled mi se odlijeva prema logotipu i znam što stranica mi nudi. To je izuzetno važno i sve je previše često u ovim kritikama da dizajneru kažem suprotno (da je teško vidjeti o čemu se radi na njihovoj web lokaciji).
raspored
Kao što sam gore spomenuo, novi izgled je responzivan, a pod tim mislim da koristi medijske upite za obnavljanje izgleda na već određenoj prijelomnoj točki. Kako bi bili "potpuno responzivni" neki kažu da se i web lokacija mora graditi na fluidnoj mreži poput one viđene u Smashing Magazine, projektu koji je bez sumnje na neki način inspirisao ovaj.
WebAppers se ne dopušta svakom minutom promjene širine preglednika (barem do najmanjeg ponavljanja), i da budem iskren, dok se igram s njim, mislim da je to u redu. To je još uvijek izuzetno fleksibilan dizajn koji se dobro prilagođava svim vrstama različitih veličina zaslona, što je puno više nego što većina web lokacija može tvrditi.
U širokoj verziji postoje četiri osnovna stupca. S lijeva na desno su navigacija, primarni sadržaj, bočna traka sekundarnog sadržaja i oglašavanje. Dvije bočne trake dizajnirane su tako da izgledaju gotovo poput ladica koje se izvlače iz glavnog sadržaja, što je savršena metafora s obzirom da se urušavaju kako se širina sužava.
Dok sužavamo prozor dolje, spuštamo stupac za oglašavanje na desnoj strani. Sadržaj u ovom trenutku ne nestaje samo, već se oglasi prikazuju iznad desne bočne trake, gurajući taj sadržaj prema dolje. Ovo je elegantno rješenje koje izgleda sjajno i još uvijek održava većinu originalnog sadržaja.
Nakon toga slijedi suptilni skok koji malo sužava glavni stupac sadržaja. Spremnik postaje uži, veličina teksta se smanjuje, a slike smanjuju njihovu širinu. Ako još više suzimo prozor, dobit ćemo najznačajniji pomak izgleda:
Ovdje možemo vidjeti da se treći stupac potpuno odbacio, a bilo koji sadržaj koji je bio u njemu postao je skriven. To znači da su oglasi u potpunosti nestali (Smashing Magazine radi isto), a bočna traka koja sadrži popularni sadržaj i polje za pretraživanje također je nestala.
Moj jedini stvarni problem ovdje je što se od ove točke na web mjestu čini da se ne može pretraživati. Sve sam za promjenu dizajna jer se veličina ekrana mijenja, ali funkcionalnost je tema osjetljivija i smanjenju treba pristupiti s oprezom. Pretraživanje mi se čini prilično osnovnom značajkom i vjerojatno bih bio frustriran što ne mogu obavljati ovaj zadatak na svom telefonu ili tabletu.
Na kraju se web mjesto razgrađuje na jedan stupac, a navigacija se sada pojavljuje u jednostavnom izvornom padajućem izborniku koji obično dobro funkcionira i na mobilnim i na stolnim uređajima.
Općenito, mislim da izgled djeluje vrlo dobro, a s izuzetkom funkcije pretraživanja, nisam siguran da bih se o tome puno promijenio.
Gledajući iza kulisa, možemo vidjeti da je ovom projektu pomogao Twitter Bootstrap, što je lijepo jer stranica uopće ne izgleda kao vaš tipični projekt za kopiranje / lijepljenje Bootstrap i dokazuje da taj alat možete koristiti pod haubom bez žrtvovanja prilagođeni dizajn.
Estetika
Sada kada smo raspravljali o načinu na koji struktura ili kosti funkcioniraju na mjestu, pogledajmo glazuru na vrhu. Stranica poprima uglavnom sivu shemu boja s suptilnim bojama tu i tamo. Čvrsto koristi atraktivne, minimalne ikone i naravno Helveticu kao svoj primarni i gotovo ekskluzivni font.
Moj najmanje omiljeni aspekt cijele ove stranice je nedostatak kontrasta. Sve na stranici ima svojevrsni monoton osjećaj, a ništa se zapravo ne ističe. Mogu vidjeti kako je prigušeni izgled jednostavan za oči, ali dovoljno je blag da se gotovo osjeća pomalo nategnutim.
Što se mene tiče, rješenje za to je tako jednostavno da uključuje samo zamjenu jedne datoteke: pozadinske teksture. Zgrabio sam tamnu teksturu sa suptilnih obrasca i dao joj probnu vožnju na web lokaciji WebAppers sa sjajnim rezultatima.
Tamna pozadina dodaje potreban kontrast web mjestu i zaista ističe glavni sadržaj gurajući ga u prvi plan. Nevjerovatno je koliko razlike može malo napraviti ugađanje!
Još jedna sitnica koja me lagano gnjavi je efekt sjene naslova članka, prikazan na slici ispod:
Jedna ruka, mislim da je to cool efekt. S druge strane, mislim da to tekst znatno otežava čitanje. Možda bi se jednostavno smanjila neprozirnost sjene, a to bi bilo manje ometajuće.
Sažetak
Mislim da redizajn WebAppersa definitivno uspijeva. Stranica je ljepša nego ikad i lijepo je skočila prema agnostiku uređaja. Jednostavan je za upotrebu, brendiranje je logičnije i prezentiranje sadržaja zaista lijepo.
Moja velika briga je nedostatak vizualnog kontrasta, zabrinutost koja potpuno nestaje s uvrštavanjem tamnijeg pozadinskog uzorka. Skeptičan sam i zbog odluke da se funkcionalnost pretraživanja spusti na uže verzije izgleda. Mislim da posjet web-mjestu na mom iPhoneu ne mora nužno značiti da sam izgubio sposobnost pretraživanja.
Osim ovih pitanja, to je sjajno mjesto. Svakako se svratite i napravite testnu vožnju. Mislim da će vam se svidjeti ono što vidite.
Tvoj red!
Sada kada ste pročitali moje komentare, dodajte i pomozite dajući dizajnerima neke daljnje savjete. Javite nam što mislite o dizajnu i što mislite da bi moglo biti jače. Kao i uvijek, molimo da također poštujete dizajnera stranice i ponudite jasan konstruktivan savjet bez bilo kakvih oštrih uvreda.
