Sidnavigering är förmodligen den viktigaste aspekten på någon korrekt konstruerad webbplats. Hur enkelt dina besökare kan resa från sida till sida kommer att påverka den totala känslan och användargränssnittet på din webbplats.
Stora webbdesigners håller alltid en överraskning runt varje hörn, och navigeringsmenyerna kan innehålla denna stora tid. Från hel sida till hörn länkar har jag delat några bra exempel på ovanlig webbplatsnavigering. Förhoppningsvis kan dessa idéer uppmana ett sken av kreativitet inom dig själv och eventuella framtida projekt.
Några Fancy Animationer
Tillbaka när Adobe (Macromedia) Flash styrde webben var det inte ovanligt att se konstiga navigeringsanimeringar. Men dessa föll till vägen eftersom HTML / XHTML-standarder började utvecklas under senare 2000-tal. Sedan dess har vi sett dramatiskt ökat stöd för HTML5- och CSS3-effekter, samt fullt webbläsarsupport för JavaScript och ännu viktigare jQuery.
Killarna på jQuery har gjort anpassade webbanimationer barnspel. Någon som förstår grunderna i scripting kan modellera en bra hemsida runt jQuery-biblioteket och komma ut med resoundingly positiv feedback. Nedan har jag tagit med en skärmdump av Cooper Design, som erbjuder en fantastisk överraskning för deras navigering.
När du klickar över de övre länkarna skickas du horisontellt över sidan via jQuery-effekten. Alternativt kommer detta att öppna en undermeny med kategorier baserade på din startsida. När du väljer mellan dessa märker du sidoeffekter som rullar vertikalt också!
Deras webbplats är ett pusselbräde av animationer som ger en fantastisk demonstration av kraften i webbdesign idag. Alternativt kan du rulla vertikalt som normalt och övergången mellan sidor kvar / höger genom att klicka på kolumnerna sida vid sida.
En annan webbplats Janette D. Council har en unik navigering som omarrangörar sina portföljartiklar utifrån sökfrågor. Som standard ser du alla projekt, men du kan rikta in sig på utskrifter, logotyper och illustrationer.
Dessutom öppnar hennes bilder och webbplatsinformation alla på samma sida. Det betyder att om du kör fullständig JavaScript-stöd behöver du aldrig ladda om din webbläsare! Beviljas ytterligare inspektion av hennes kod visar att det inte finns några alternativa sidor för Google att genomsöka. Det här är inte helt dåligt, eftersom all sidainformation strikt hålls inom en fil!
Full sida övertagande
När du tänker på ovanlig sidnavigering måste följande exempel ta hem trofén. heartshapedwork är uppenbarligen en komplett portfölj som körs via WordPress. När du kommer in på deras hemsida kommer du att märka stora horisontella staplar som går nedåt på sidan. Dessa visar alla stora svängverkningar och leder till externa artiklar och portföljbilder.
Du märker att varje stapel har projektets titel i fetstil med undertext som innehåller den typ av arbeten som utvecklats. Detta inkluderar webbplatser, illustrationer, mobil och mer. Deras portfölj är uttömmande och faktiskt ganska kul att bläddra igenom.
Ett annat bra exempel är webbplatsen för arbetslivsbalanscenter. Centret grundades 1991 och har sett några uppdateringar på deras hemsida under den tiden. För närvarande körs på Flash, hela navigeringen fungerar genom att förstora det aktuella fokuserade navigeringsobjektet.
Så när du bläddrar igenom märker du stora staplar som fokuserar på enskilda sidor och undersidor med länkar som ingår. Dessa länkar går inte någonstans, bara dra dig genom Flash-layouten. Intressant sågs den här effekten tidigare på Cooper hemsida, alla konstruerade med jQuery.
Grip Limited är möjligen ett annat uttryck för fullskärms sidnavigering. Vid lastning av webbplatsen kommer du att märka staplar som utvecklas för att visa ny information och sidlänkar. Du kan klicka genom rubrikerna ovanpå varje stapel för att kollapsa innehållet och visa mer skärmrum.
Kanske inte den bästa användningen av navigering, även om den är helt unik. Högst upp finns en bar med titeln Öppna menyn vilket sjunker ännu fler länkar framför ditt ansikte. Dessa inkluderar kärnbolagssidor och fallstudie länkar.
Obskure Designs
När du verkligen börjar undersöka webben ser du många portföljer som vanligt arcane. Yuna Kim har en personlig portfölj som verkligen tar ett eget liv. Hon har byggt hela navigeringen genom jQuery och CSS positionering.
För varje portföljartikel har hon betecknat en symbol för att representera projektarbetet. Square för digitalt arbete, Triangle för branding och Circle for print. När du rullar ner märker du att varje projektlänk är en färgstark form som markerar hennes arbete.
Dessutom går hennes navigeringsnavigering ner när du flyttar genom de bästa länkarna. De tre alternativen Hej, Tweets, och kontakter kommer att visa olika innehåll baserat på var du är. För att vara mer specifik kommer tweets och kontakter att släppa samma information: hennes senaste uppdatering på Twitter tillsammans med e-post och telefonkontakt. hej kommer att erbjuda en kort introduktion till Yuna Kim och hennes hemsida. Ganska coola saker!
Big Kid är en blogg som kör WordPress som visar enskilda block av innehåll. Du kan kolla in deras hemsida för dig själv för att se vad jag menar. Navigationen är inte alltför ovanlig, men ganska ovanlig för en blogglayout. Mycket av alla inlägg är portföljuppdateringar som du kan sortera igenom.
Vad jag verkligen gillar är den individualitet som medförde deras layout. Det är nästan den mest unika användningen av blockmönster som jag någonsin sett på webben. Ur ett användarupplevelseperspektiv är det mycket enkelt att rulla igenom allt och sortera projektarbete baserat på personliga intressen. Det är också en mycket lätt hemsida, snabb att ladda i många av de webbläsare jag försökte (inklusive Internet Explorer och Safari for Windows).
Webbplats Galleri
Eftersom det finns så många konstiga och ovanliga navigationsstilar att täcka, har jag lagt ett litet galleri med mina personliga favoriter.Dessa webbplatser har konstiga stilar som jag aldrig har stött på någon annanstans på webben.
Populariteten av obekväm webbdesign har ökat dramatiskt de senaste åren. Konstiga och ovanliga sidlayouter kombinerat med hänsyn till korrekt användargränssnitt har ansträngt några stora projekt. Om du känner till liknande mönster, vänligen ge dina idéer i diskussionsdelen nedan.
Amore
Amore har en färgstark bakgrund. Snabbt att ladda, sidnavigering är faktiskt presenterad direkt vid bottom-center alignment. När du flyttar från varje block expanderar området för att inkludera informationstext om sidan. All sin information öppnas i ett lightbox-fönster, vilket sparar besväret att ladda om varje sidvy.
Organiskt rutnät
Michael McDonald är skaparen av Organic Grid, allt byggt över Flash. Applikationen tar ett tag att ladda på långsammare anslutningar men jag tror att du verkligen kommer att uppskatta sin stil med design. Varje navigeringsområde visas som en horisontell streck som tar dig till en fullständig portföljdisplay. Det finns mycket arbete att presentera här och de förbättrade visualerna vänder sig briljant till UX-designen.
TinyTeam
Det jag gillar mest om TinyTeam är deras kreativitet att bygga webbplatsen. Det finns ingen extra grafik eller prickiga illustrationer, och deras solida blå bakgrund är underbar för att begränsa distraktioner. En annan webbplats byggd över Flash som visar hur unik en sidmeny kan vara. Genom att klicka på mittfältet öppnas en ny uppsättning alternativ för att bläddra i deras företagsportfölj.
LoveBento
Vid första utseendet är LoveBento inte lätt på ögonen. Det finns mycket innehåll att konsumera och ingen direktnavigering. Längst upp till höger hittar du rullgardinsmenyer, men de riktiga föremålen ligger längs vänster sida. Under företagslogotypen hittar du en unik bildvisning av bilder som används för att representera länkhovers. Dessutom finns det numrerade länkar längst ned till höger för manövrering mellan sidor.
Lucuma
Här har vi hittat en annan välmående användning av horisontell rullning. Deras effekter är byggda under jQuery-biblioteket. Lucuma har också länkar under deras kärninnehållsområde som erbjuder XHTML och CSS-validering. När du utformar portföljer för webben här menar de verkligen affärer!
Andreas Smetana
Andreas Photography showcase ger verkligen ordet ovanligt i framkant. När sidan är fullt laddad får du en anmälan som förklarar hur man går igenom deras miniatyrer galleri. Genom att använda antingen ditt mushjul eller piltangenter kan du manövrera mellan de många kategorierna av fotografier. I det nedre vänstra hörnet finns en annan liten uppsättning menylänkar som öppnas på sidan av vilken sida du än befinner dig. Ganska snyggt!
cypher13 Design Studio
Här kommer vi till en annan designstudio med en motsvarande portfölj i ett svartvitt tema. Layouten är uppbyggd med HTML / CSS och använder jQuery animeringseffekter för övergång mellan portföljobjekt. Det stora här är hur elegant varje rörelse blir. Du känner dig elegant utrustad med en guide när du bläddrar genom sin portfölj. Det är möjligt att sortera objekt baserat på klient och kategori, eller dra nytta av deras sökfält som visar resultat i realtid.
Studioutgång
Studio Output ger en ny funktion i portföljdisplayen. Hemsidan har en vacker bildkollage av projektbilder som kan klickas för att få mer information i en ljusboxeffekt. De erbjuder massor av exempelbilder och även visa relaterade projekt när det är möjligt. Här har jag klippt en bit från sin portfölj av några Spongebob konstverk och grafik.
Duane King
Duane Kings portfölj är ett annat utmärkt exempel på tangentbordsstöd. När du väl är laddad på hemsidan kan du bläddra mellan segmenten åt vänster och höger med piltangenterna. Du kan klicka på ett projekt för att expandera bilden och visa lite mer information. Det här är också ett annat exempel där portföljartiklar inte laddas på en ny sida, verkligen utnyttjar jQuery-biblioteket och med hjälp av plugins.
Sideshow Press
Vad jag verkligen gillar om Sideshow Press är deras användning av ett hash-märke (#) mellan sidor. Detta indikerar för sökmotorer att allt nytt innehåll inte laddas på en ny sida utan styrs dynamiskt via JavaScript. I det här fallet tittar vi på en Flash-applikation, men det är därför tekniken fungerar så bra. Sidnavigningen ger några färgglada animeringseffekter på svävarstillstånd. Varje sidövergång visar också en glidande effekt, mycket unik och sammansatt perfekt.
Slutsats
Jag hoppas att du har haft dessa exempel på ovanliga navigeringstekniker och att de har inspirerat dig att skapa dina egna unika experiment.
Om du känner till några galna navigeringsmenyer som vi missade, lämna en kommentar med en länk nedan så vi kan kolla in det!