10 sjajno inovativnih dizajna izbornika web stranica

Kada sastavljate web stranicu, ne može se dovoljno naglasiti važnost vašeg navigacijskog dizajna. Jednostavno rečeno, uspjeh vaše web stranice ovisit će o tome koliko je korisna i koliko je posjetiteljima lako da se kreću od jednog odjeljka do drugog.

Redoviti, vodoravni izbornici i mali padajući okviri dobro funkcioniraju na mnogim web mjestima. No, dizajniranje navigacije može postati pravi izazov za web stranice koje imaju ogromnu količinu sadržaja ili puno različitih kategorija kojima treba lako pristupiti.

To je problem s kojim se suočavaju sve vrste web lokacija, od web aplikacija do novina i internetskih trgovina. Iako postoji mnogo primjera web mjesta koja su nezgodna i do kojih je teško navigirati, ima i nekoliko vrlo promišljenih primjera. Istaknuli smo izbor sjajno dizajniranih izbornika koji svi izvrsno rade omogućujući korisnicima navigaciju ili prijavu i odjavu na način koji je lagan i bez trenja. Nadamo se da će vam ovi primjeri biti koristan izvor inspiracije za sljedeći projekt dizajna web mjesta.



01. Čuvar

Unatoč tome što postoji toliko različitih podkategorija, nikad nisu udaljeni više od dva klika bilo gdje na web mjestu

Unatoč tome što postoji toliko različitih podkategorija, nikad nisu udaljeni više od dva klika bilo gdje na web mjestu

Web stranica novina Guardian ima velik broj različitih kategorija, uključujući 'Kultura', 'Posao' i 'Putovanja', a svaka od tih kategorija ima brojne podkategorije.

Prava briga i pažnja uloženi su u dizajniranje navigacije za svaku od njih na način koji je dostupan i trenutno intuitivan. Unatoč postojanju toliko različitih podkategorija, nikad ih više od bilo kojeg mjesta na web mjestu ne dijeli više od dva klika.

Svaka kategorija, poput 'Kultura', također dobiva svoju boju, a sve što uključuje, kao što su 'Film' i 'Glazba', obojano je u skladu s tim, što pomaže u lijepom povezivanju kategorija.

kako stvoriti logo u afinitetnom dizajneru

02. Srednji

Prelazak kursora iznad logotipa otvara izbornik, uredno uvučen

Prelazak kursora iznad logotipa otvara izbornik, uredno uvučen

Medium je nova izdavačka platforma koju je izgradio Evan Williams, koji je također stvorio Blogger i Twitter. Fokus svake stranice je na sadržaju i nevjerojatno je radio na uklanjanju svih smetnji. Čak je i izbornik skriven, iza logotipa u gornjem lijevom kutu. Prelazak kursora iznad logotipa otvara izbornik, uredno uvučen.

Još jedna pametna značajka izbornika Medium otkriva se kada je prozor preglednika mali. Umjesto da se logotip (s izbornikom skrivenim iza njega) preklapa s tekstom, on jednostavno nestaje i ponovno se pojavljuje tek kad se pomaknete na vrh stranice.

03. Svbtle

Svbtle spaja lijepo izrađeni blog CMS s odabranim izborom najboljih postova

kako napraviti sloj zamućen u photoshopu
Svbtle spaja lijepo izrađeni blog CMS s odabranim izborom najboljih postova

Svbtle je kreacija Dustina Curtisa i naplaćuje se kao nova vrsta časopisa. Pametno spaja lijepo izrađen CMS bloga s odabranim izborom nekih od najboljih postova.

Curtis je poznat po stvaranju lijepih korisničkih iskustava i po tome što ima pažljivu, pomalo opsesivnu pažnju prema detaljima. Ponekad su poboljšanja koja on napravi toliko suptilna da ih možda nećete primijetiti, ali kad se pojave, definitivno poboljšavaju korisničko iskustvo.

Izvrsni primjer za to je izbornik Svbtlea: kada zadržite pokazivač iznad padajuće ikone, izbornik se proširuje kako biste očekivali. Međutim, kad pomaknete pokazivač od izbornika, on ostaje na mjestu sekundu ili dvije - tek toliko da se pomakne kursor natrag ako ste ga slučajno pomaknuli predaleko. Iako se to čini jednostavno, činjenica da je razmišljao o kodiranju pokazuje koliko je strasti i pažnje prema detaljima uloženo u njegov rad.

04. Cvrkut

Kada je odabran, Twitter

Nakon što je odabran, Twitterov izbornik ostaje do zatvaranja

Twitter se rješava gore spomenutog problema držeći aktiviran padajući izbornik. Loša strana ovdje je što morate kliknuti ikonu postavki da biste aktivirali izbornik - ako se aktivirao i ostao otvoren samo držanjem miša iznad njega, bio bi nezgrapno aktiviran cijelo vrijeme - ali kad je odabran, ostaje sve dok se ne zatvori. Pametno su odvojene i određene radnje, poput 'Pomoć' i 'Tipkovni prečaci'. Grupiranjem povezanih odjeljaka može biti lakše pronaći ono što tražite.

05. B&O Play

Izbornik pod

Izbornik pod 'Proizvodi' dobiva puno dodatnih razmaka uz jednostavnu ilustraciju svakog proizvoda

B&O Play, dio audio stručnjaka Bang & Olufsen, nudi brojne proizvode koje možda nećete moći prepoznati samo iz njihovog imena, ali biste ih možda mogli prepoznati kako izgledaju. Primjerice, A8 je vrlo prepoznatljivo oblikovana podnožja zvučnika koja izgleda potpuno drugačije od A9, ali bilo bi lako pomiješati ih na temelju njihovih imena.

Kako bi se pomoglo u suzbijanju ovog problema i kako bi njihova navigacija postala puno intuitivnija i korisnija za preglednike, izbornik pod 'Proizvodi' dobiva puno dodatnog prostora s jednostavnom ilustracijom svakog proizvoda. Iako ovaj pristup nije prikladan za svaku web lokaciju (posebno onu s širokim spektrom proizvoda) u slučaju B&O Play, sjajna je ideja koja je izvršena besprijekorno.

06. Jabuka

Jabuka

Appleova web stranica jednako je lijepo izrađena kao i njihovi proizvodi

Apple je svjetski lider u dizajnu i ne čudi što je njegova web stranica jednako lijepo izrađena kao i njihovi proizvodi. Glavna navigacija, poput B&O Play, prikazuje svaki proizvod, zajedno sa zabavnom, kliznom animacijom za svaki kada se klikne novi odjeljak (za one s modernim preglednicima).

Prikazivanje svakog proizvoda u navigaciji pomoću visoko detaljnih slika visoke kvalitete znači da se lako možete kretati bez potrebe za razmišljanjem.

najbolje računalo za adobe creative cloud

07. Vimeo

Vimeo u navigaciju uključuje puno opisa

Vimeo u navigaciju uključuje puno opisa

Web mjesto za razmjenu videozapisa Vimeo odlučio je u navigaciju uključiti malo više opisa. Zadržavanje pokazivača iznad 'Stvori' ili 'Gledanje' vodi do brojnih drugih opcija, poput 'Video škola'. Budući da će mnogi ljudi biti nepoznati što je Vimeova video škola, dodali su mali naslov koji govori: 'Naučite kako napraviti bolje videozapise', koji brzo i sažeto objašnjava što će se dogoditi prije nego što kliknete.

08. Google plus

Google

Googleova društvena mreža može se pohvaliti lijepo dizajniranom navigacijom koja se okomito spušta lijevom stranom preglednika

Google Plus, suparnik pretraživačkog diva za Facebook, ima lijepo dizajniranu navigaciju koja se okomito spušta niz lijevu stranu preglednika. Okomiti izbornik pomaže osloboditi prostor za najvažnije zaglavlje, a istovremeno čini svaki odjeljak lako dostupnim.

Svaka se ikona također može prilagoditi povlačenjem i ispuštanjem na svoje mjesto, pa ako ste ljubitelj igara nego što ste fotografija, možete preurediti navigaciju po svom ukusu.

09. Bez niti

Veliki, podebljani vizualni elementi donose Threadless

Veliki, hrabri vizualni elementi oživljavaju navigaciju Threadlessa

Bez ikakvih proizvoda, tvrtka majica s masovnim izvorom koju vole dizajnerska i umjetnička publika, u navigaciji koristi velike, hrabre vizuale.

Cijeli koncept koji stoji iza Threadlessa prilično je specijaliziran i ima nekoliko prilično različitih grupa korisnika. Postoje oni koji su tu da predaju svoja umjetnička djela, drugi će možda biti tamo da glasaju za svoje omiljene dizajne, dok drugi žele biti dio zajednice, pregledati nadolazeća umjetnička djela i razgovarati s drugima, dok će drugi možda još uvijek biti tu da kupuju .

Pažljivo su razmotrili svaki od ovih slučajeva korištenja i grupirali svaki odjeljak u 'Izrada', 'Odabir', 'Reprodukcija' i 'Kupnja' - a zatim prelazak kursorom miša iznad ovih opcija dovodi do lijepo dizajniranih opcija ispod svakog.

kako nacrtati afričkog lava

10. Kvadratni prostor

Kvadratni prostor

Okomita navigacija Squarespacea ne smeta njegovim prekrasnim slikama

Squarespace je platforma za hosting i CMS koja pomaže ljudima da prikladno pokreću vlastite web stranice. Web mjesto koristi velike, vodeće slike za zaglavlje, ali na stranici ima toliko odjeljaka da bi njihovo uključivanje svih u padajuću navigaciju zaklonilo slike i učinilo ih pretrpanima.

Njihovo je rješenje uključiti malu opciju 'Izbornik' u gornjem desnom kutu. Klikom na gumb dolazi do klizanja ploče - pomicanjem cijele stranice s njom - da bi se otkrila okomita navigacija. Ljepota ove metode je u tome što ne ometa slike, a oni imaju puno prostora za uključivanje i najopsežnijih navigacijskih opcija.

Riječi : Alex Black

Alex piše za PrintExpress.co.uk . U slobodno vrijeme uživa u proučavanju dizajna weba i tiska te uči kodirati. Možete ga pratiti na @iamalexblack .

Sviđa li vam se ovo? Pročitajte ovo!

Postoje li primjeri promišljeno dizajniranih, lijepo izrađenih i elegantnih opcija izbornika koje biste trebali uvrstiti u naš pregled? Voljeli bismo čuti što ste pronašli u komentarima.