Prilagođene tehnike web dizajna za neobičnu navigaciju

/2016-07-12 22:16:05/
Isaiah
/Programi/

Navigacija stranicama zasigurno je najvažniji aspekt bilo koje pravilno izgrađene web stranice. Kako lako posjetitelji mogu putovati sa stranice na stranicu utjecati će na cjelokupnu emociju i korisničko sučelje vaše web stranice.

Sjajni web dizajneri uvijek održavaju iznenađenje iza svakog ugla, a navigacijski izbornici mogu sadržavati ovo veliko vrijeme. Od punih stranica do kutnih veza podijelio sam nekoliko sjajnih primjera neobične navigacije web stranicama. Nadamo se da ove ideje mogu pobuditi kreativnost u sebi i na svim budućim projektima.

Istražite dizajnerske resurse

Neke fantastične animacije

Kad je Adobe (Macromedia) Flash vladao Internetom, nije neuobičajeno vidjeti neobične navigacijske animacije. Ali oni su pali na stranu kada su se HTML / XHTML standardi počeli razvijati u drugoj 2000-im. Od tada vidimo dramatično povećanje podrške za HTML5 i CSS3 efekte, kao i punu podršku preglednika za JavaScript i još važnije jQuery.

Dečki iz jQueryja napravili su prilagođenu dječju igru web animacije. Svatko tko razumije osnove skriptiranja može oblikovati sjajnu web stranicu oko biblioteke jQuery i izaći sa snažno pozitivnim povratnim informacijama. Ispod sam uvrstio snimku zaslona Cooper Design koja nudi sjajno iznenađenje za njihovu navigaciju.

Klikom na gornje poveznice bit ćete poslani vodoravno oko stranice kroz jQuery efekt. Inače će se otvoriti podizbornik s kategorijama na temelju stranice vašeg naslova. Kad odaberete između ovih, primijetit ćete i efekte stranica kako se vertikalno kreću!

Njihova stranica je puzzle ploča animacija koja pruža zadivljujuću demonstraciju snage u web dizajnu danas. Možete se pomicati i vertikalno kretati se po stranici lijevo / desno klikom na stupce jedan pored drugog.

Još jedno web mjesto Janette D. Council ima jedinstvenu navigaciju koja preuređuje stavke portfelja na temelju podataka upita. Prema zadanim postavkama gledat ćete sve projekte, ali možete ciljati ispis, logotip i ilustracijski rad pojedinačno.

Uz to se sve njezine slike i informacije o web mjestu otvaraju na istoj stranici. To znači da ako imate punu podršku za JavaScript nikad ne trebate ponovno učitavati preglednik! Daljnja inspekcija njezinog koda pokazuje da nema alternativnih stranica za Google kako bi pretražili. To nije posve loše, jer se sve informacije o stranici strogo nalaze u jednoj datoteci!

Cijelokupno preuzimanje stranice

Kada mislite na neobičnu navigaciju po stranici, sljedeći primjeri moraju odnijeti trofej kući. Hearthapedwork je očito pun portfelj koji se pokreće putem WordPressa. Nakon ulaska na njihovu početnu stranicu primijetit ćete velike vodoravne trake koje kaskadno padaju prema dolje. Svi ti prikazi pokazuju velike efekte lebdećih efekata i dovode do vanjskih članaka i portfeljskih snimaka.

Primijetit ćete da svaka traka ima naziv projekta podebljanim slovima s podtekstom koji sadrži vrstu razvijenog rada. To uključuje web stranice, ilustracije, mobilne uređaje i još mnogo toga. Njihov portfelj je iscrpan i zapravo je prilično zabavno prelistavati ga.

Još jedan sjajan primjer je stranica Centra za ravnotežu radnog života. Centar je osnovan 1991. godine i u to je vrijeme vidio nekoliko ažuriranja njihove web stranice. Trenutno rade na Flash-u, a njihove se čitave navigacijske funkcije uvećavaju trenutno fokusiranim navigacijskim objektom.

Tijekom pregledavanja primijetit ćete velike trake koje se fokusiraju na pojedine stranice i podstranice s uključenim vezama. Te veze ne idu posebno nigdje, već vas povlače kroz Flash izgled. Zanimljivo je da je ovaj efekt viđen ranije na Cooperovom web mjestu, a sve napravljeno pomoću jQueryja.

Grip Limited možda je još jedan primjer navigacije preko cijelog ekrana. Nakon učitavanja web mjesta primijetit ćete trake za prikaz novih podataka i veza na stranicu. Možete klikati kroz zaglavlja na vrhu svake trake da biste urušili sadržaj i prikazali više prostora na zaslonu.

Možda nije najbolja upotreba navigacije, iako je apsolutno jedinstvena. Na samom vrhu je traka pod nazivom Otvori izbornik koja vam ostavlja još više veza ispred vašeg lica. To uključuje osnovne stranice tvrtke i veze slučaja.

Obscure Design

Kad stvarno počnete proučavati web, mnogi se portfelj ističu kao običan tajni. Yuna Kim ima osobni portfelj koji uistinu vodi svoj život. Izgradila je cjelokupnu navigaciju kroz jQuery i CSS pozicioniranje.

Za svaku stavku portfelja ona je označila simbol koji predstavlja projektni rad. Kvadrat za digitalni rad, Trokut za markiranje i Krug za ispis. Dok se krećete prema dolje primijetit ćete da je svaka poveznica projekta šareni oblik koji označava njezin rad.

Uz to, navigacija se kreće prema dolje dok se krećete po gornjim vezama. Tri opcije zdravo, tweeti i kontakti prikazat će različit sadržaj na temelju vašeg mjesta. Da budemo precizniji, tweetovi i kontakti ispuštaju iste podatke: njezino najnovije ažuriranje na Twitteru, zajedno s kontaktima e-pošte i telefona. zdravo će ponuditi kratki uvod Yunu Kim i njezinoj web stranici. Prilično cool stvari!

Big Kid je blog na kojem se vodi WordPress koji prikazuje pojedinačne blokove sadržaja. Možete sami provjeriti njihovu stranicu kako biste vidjeli što mislim. Navigacija nije baš neuobičajena, iako je prilično neobična za izgled bloga. Velik dio svih postova su ažuriranja portfelja kroz koje možete sortirati.

Ono što stvarno volim je individualnost koju podrazumijeva njihov izgled. Gotovo je najunikatnija upotreba blok obrazaca koje sam ikad vidio na webu. Iz perspektive korisničkog iskustva vrlo je lako se kretati kroz sve i sortirati projektne radove na temelju osobnih interesa. To je također vrlo lagana web stranica, brzo se učitava u mnogim preglednicima koje sam isprobao (uključujući Internet Explorer i Safari za Windows).

Galerija stranica

Budući da je toliko čudnih i neobičnih stilova navigacije za pokrivanje, sastavio sam malu galeriju mojih osobnih omiljenih. Ove web stranice sadrže čudne stilove u koje se nikada nisam susreo ni s kim drugdje na webu.

Popularnost nezgodnog dizajna web stranica dramatično je porasla u posljednjih nekoliko godina. Čudni i neobični izgled stranica zajedno s obzirom na ispravno korisničko sučelje potaknuli su neke sjajne projekte. Ako znate za slične dizajne, molim da ponudite svoje ideje u odjeljku za diskusiju ispod.

Amore

Amore ima jednu šarenu pozadinu. Brza učitavanje, navigacija stranicama nalazi se u pravcu dna prema sredini. Kako se krećete iz svakog bloka područje se proširuje i uključuje informativni tekst o stranici. Sve se njihove informacije otvaraju u prozoru okvira okvira, što sprečava problem pri ponovnom učitavanju svakog prikaza stranice.

Organska rešetka

Michael McDonald je tvorac Organic Grid-a, izgrađenog preko Flash-a. Aplikaciji je potrebno neko vrijeme kako bi se učitale sporije veze, ali mislim da ćete zaista cijeniti njegov stil dizajna. Svako se područje za navigaciju prikazuje kao vodoravna traka koja vas dovodi do prikaza portfelja na cijeloj stranici. Ovdje je potrebno puno posla, a poboljšane vizualne slike sjajno se slažu s UX dizajnom.

TinyTeam

Ono što najviše volim kod TinyTeam-a je njihova kreativnost u izradi web mjesta. Ne postoje dodatne grafike ili blještave ilustracije, a njihova čvrsta plava pozadina prekrasna je za ograničavanje ometanja. Još jedna web stranica izgrađena na Flash-u koja pokazuje koliko jedinstveni izbornik stranica može biti. Klikom na središnji okvir otvorit će se novi niz mogućnosti pregledavanja portfelja njihove tvrtke.

LoveBento

Na prvi nastup LoveBento nije lak za oči. Postoji puno sadržaja za konzumiranje i izravne navigacije nema. Dugo gornje desno naći ćete padajuće ploče, ali stvarni predmeti nalaze se duž lijeve strane. Ispod logotipa tvrtke pronaći ćete jedinstveni prikaz slika koje se koriste za predstavljanje pokazivača veze. Uz to, u donjem desnom uglu su numerirane veze za manevriranje između stranica.

Lucuma

Ovdje smo pronašli još jednu uspješnu upotrebu horizontalnog pomicanja. Njihovi učinci izgrađeni su u biblioteci jQuery. Lucuma također ima veze ispod svog osnovnog područja sadržaja koji nude XHTML i CSS validaciju. Prilikom dizajniranja portfelja za web ovdje oni stvarno znače posao!

Andreas Smetana

Izložba Andreas Photography uistinu u prvi plan stavlja riječ neobična. Nakon što se stranica potpuno učita, dobit ćete obavijest s objašnjenjem kako zaobići galeriju njihovih sličica. Pomoću bilo kotača za pomicanje miša ili tipke sa strelicama možete manevrirati između mnogih kategorija fotografija. U donjem lijevom kutu nalazi se još jedan mali skup veza s izbornicima koji se otvaraju sa strane bilo koje stranice na kojoj se nalazite. Prilično uredno!

cypher13 dizajn studio

Ovdje dolazimo do drugog dizajnerskog studija s odgovarajućim portfeljem postavljenim u crno-bijelu temu. Izgled je izgrađen s HTML / CSS i koristi jQuery animacijske efekte za prijelaz između stavki portfelja. Sjajna stvar ovdje je kako svaki pokret postaje elegantan. Tijekom pregledavanja njihovog portfelja osjećate se graciozno ponuđenim vodičem. Stavke je moguće sortirati na temelju klijenta i kategorije ili iskoristiti njihovu traku za pretraživanje koja rezultate prikazuje u stvarnom vremenu.

Studio Izlaz

Studio Output donosi novu značajku u svom portfelju. Početna stranica ima prekrasan kolaž slika projekta na koji se može kliknuti kako bi se prikazalo više informacija u efektu lightbox-a. Nude puno i puno primjera slika, pa čak i prikaz povezanih projekata kad je to moguće. Ovdje sam izrezao dio iz njihovog portfelja nekih spongebob umjetnina i grafike.

Duane King

Portfelj Duane Kinga još je jedan odličan primjer podrške tipkovnice. Jednom učitani na početnoj stranici možete se kretati između segmenata lijevo i desno pomoću tipki sa strelicama. Možete kliknuti na projekt da biste proširili sliku i prikazali malo više informacija. Ovo je također još jedan primjer gdje se stavke portfelja ne učitavaju na novu stranicu, stvarno iskorištavajući jQuery knjižnicu i istaknute dodatke.

Pritisnite sporedni prikaz

Ono što mi se doista sviđa kod Sideshow Pressa je njihova upotreba oznake hash (#) između stranica. To pokazuje tražilicama da sav novi sadržaj nije učitan na novu stranicu, već se dinamički kontrolira kroz JavaScript. U ovom slučaju gledamo Flash aplikaciju, ali zato tehnika tako dobro funkcionira. Navigacija po stranici nudi neke živopisne efekte animacije na stanje lebdenja. Svaki prijelaz stranice također pokazuje klizni efekt, vrlo jedinstven i savršeno sastavljen.