Tilpasset webdesignteknikker for uvanlig navigering

Sidenavigering er uten tvil det viktigste aspektet på ethvert riktig konstruert nettsted. Hvor lett besøkende kan reise fra side til side vil påvirke den generelle følelsen og brukergrensesnittet på nettstedet ditt.

Flotte nettdesignere holder alltid en overraskelse rundt hvert hjørne, og navigasjonsmenyer kan inneholde denne store tiden. Fra hele siden til hjørnekoblinger har jeg delt noen gode eksempler på uvanlig navigasjon på nettstedet. Forhåpentligvis kan disse ideene stimulere til en kreativitet i deg selv og fremtidige prosjekter.

Utforsk designressurser

Noen fancy animasjoner

Tilbake da Adobe (Macromedia) Flash styrte nettet, var det ikke uvanlig å se rare navigasjonsanimasjoner. Men disse falt på veien da HTML / XHTML-standarder begynte å utvikle seg på de siste 2000-tallet. Siden har vi sett dramatisk økende støtte for HTML5 og CSS3-effekter, i tillegg til full nettleserstøtte for JavaScript og enda viktigere jQuery.

Gutta over på jQuery har laget tilpasset webanimasjon som lek. Alle som forstår det grunnleggende om skripting, kan modellere et flott nettsted rundt jQuery-biblioteket og komme med rungende positive tilbakemeldinger. Nedenfor har jeg tatt med en skjermdumping av Cooper Design, som gir en strålende overraskelse for navigasjonen deres.

Når du klikker gjennom de øverste koblingene, får du flyr horisontalt om siden gjennom jQuery-effekten. Alternativt vil dette åpne en undermeny med kategorier basert på overskriften din. Når du velger mellom disse, vil du legge merke til sideeffekter som ruller loddrett også!

Nettstedet deres er et brett for animasjoner som gir en fantastisk demonstrasjon av kraften i webdesign i dag. Alternativt kan du bla loddrett som normalt og gå over til venstre / høyre ved å klikke på kolonnene side om side.

Et annet nettsted Janette D. Council kan skryte av en unik navigasjon som omorganiserer porteføljeartiklene hennes basert på spørringsdata. Som standard vil du se alle prosjekter, men du kan målrette utskrifts-, logo- og illustrasjonsarbeid individuelt.

I tillegg åpnes bilder og nettstedinformasjon på samme side. Dette betyr at hvis du kjører full JavaScript-støtte, trenger du aldri å laste inn nettleseren din på nytt! Gitt ytterligere inspeksjon av koden hennes viser at det ikke er noen alternative sider for Google å gjennomsøke. Dette er ikke helt en dårlig ting, siden all sideinformasjon er strengt tatt inne i en fil!

Omsorg for hel side

Når du tenker på uvanlig sidenavigering, må disse neste eksemplene ta med seg pokalen. heartshapedwork er tilsynelatende en full portefølje som kjører via WordPress. Når du kommer inn på hjemmesiden din, vil du legge merke til store horisontale søyler som faller ned på siden. Disse viser store sveveeffekter og fører til eksterne artikler og porteføljebilder.

Du vil merke at hver stolpe har prosjekttittelen i fet skrift med undertekst som inneholder typen arbeid som er utviklet. Dette inkluderer nettsteder, illustrasjoner, mobil og mer. Porteføljen deres er uttømmende og faktisk ganske morsom å bla gjennom.

Et annet flott eksempel er nettstedet Work Life Balance Center. Senteret ble grunnlagt i 1991 og har sett noen få oppdateringer til nettstedet deres på den tiden. For tiden kjører på Flash, alle navigasjonsfunksjonene ved å forstørre det nåværende fokuserte navigasjonsobjektet.

Så mens du blar gjennom, vil du legge merke til store stolper med fokus på enkeltsider og undersider med koblinger inkludert. Disse koblingene kommer ikke noe særlig sted, bare drar deg gjennom Flash-oppsettet. Interessant nok ble denne effekten sett tidligere på Coopers nettsted, alt konstruert med jQuery.

Grip Limited er muligens et annet symbol på navigering på fullskjermside. Når du laster inn nettstedet, vil du merke barer som utspiller seg for å vise ny informasjon og sidelinker. Du kan klikke gjennom overskriftene på toppen av hver stolpe for å kollapse innholdet og vise mer skjermrom.

Kanskje ikke den beste bruken av navigasjon, selv om den er helt unik. Helt øverst er det en stolpe med tittelen Åpen meny som slipper enda flere lenker foran ansiktet ditt. Disse inkluderer kjernebedriftssider og lenker til casestudier.

Uoversiktlige design

Når du virkelig begynner å undersøke nettet, skiller mange porteføljer seg ut som bare arkane. Yuna Kim har en personlig portefølje som virkelig tar et eget liv. Hun har bygget hele navigasjonen gjennom jQuery og CSS-posisjonering.

For hver porteføljeelement har hun betegnet et symbol for å representere prosjektarbeidet. Firkantet for digitalt arbeid, trekant for merkevarebygging og sirkel for trykk. Når du blar nedover, vil du merke at hvert prosjektlink er en fargerik form som markerer arbeidet hennes.

I tillegg dropper overskriften hennes når du beveger deg gjennom topplenker. De tre alternativene hei, tweets og kontakter vil vise forskjellig innhold basert på hvor du er. For å være mer spesifikk, vil tweets og kontakter slippe den samme informasjonen: hennes siste oppdatering på Twitter sammen med e-post og telefonkontakt. hei vil tilby en kort introduksjon til Yuna Kim og nettstedet hennes. Ganske kule greier!

Big Kid er en blogg som kjører WordPress som viser individuelle blokker med innhold. Du kan sjekke ut nettstedet deres selv for å se hva jeg mener. Navigasjonen er ikke altfor uvanlig, selv om den er ganske uvanlig for en blogglayout. Mye av alle innleggene er porteføljeoppdateringer som du kan sortere gjennom.

Det jeg virkelig liker er individualiteten underforstått med utformingen deres. Det er nesten den mest unike bruken av blokkmønstre jeg noen gang har sett på nettet. Fra et brukeropplevelsesperspektiv er det veldig enkelt å bla gjennom alt og sortere prosjektarbeid basert på personlige interesser. Det er også et veldig lett nettsted, raskt å laste i mange av nettleserne jeg prøvde (inkludert Internet Explorer og Safari for Windows).

Nettstedsgalleri

Siden det er så mange rare og uvanlige navigasjonsstiler å dekke, har jeg satt sammen et lite galleri med mine personlige favoritter. Disse nettstedene har rare stiler som jeg aldri har opplevd andre steder på nettet.

Populariteten til vanskelig design på nettstedet har økt dramatisk de siste årene. Merkelige og uvanlige sideoppsett kombinert med hensyn til riktig brukergrensesnitt har ansporet noen gode prosjekter. Hvis du kjenner til lignende design, kan du tilby ideene dine i diskusjonsdelen nedenfor.

Amore

Amore har en fargerik bakgrunn. Sidenavigering er raskt lastet inn, og vises faktisk direkte i bunnen av midten. Når du beveger deg fra hver blokkering, utvides området til å inkludere informasjonstekst om siden. All informasjonen deres åpnes i et lysboksvindu, og sparer problemer med å laste inn hvert sidevisning på nytt.

Organisk rutenett

Michael McDonald er skaperen av Organic Grid, alt over Flash. Det tar litt tid å bruke applikasjonen på tregere tilkoblinger, men jeg tror du virkelig vil sette pris på designstilen hans. Hvert navigasjonsområde vises som en horisontal bjelke som fører deg til en helsides porteføljedisplay. Det er mye arbeid å presentere her, og det forbedrede billedet appellerer strålende til UX-design.

TinyTeam

Det jeg liker mest med TinyTeam er kreativiteten deres i å bygge nettstedet. Det er ingen ekstra grafikk eller prangende illustrasjoner, og deres solide blå bakgrunn er fantastisk å begrense distraksjoner. Et annet nettsted bygget over Flash som demonstrerer hvor unik en sidemeny kan være. Hvis du klikker på midtboksen, åpnes et nytt sett med alternativer for å bla gjennom firmaporteføljen.

LoveBento

Ved første opptreden er LoveBento ikke lett på øynene. Det er mye innhold å konsumere og ingen direkte navigering. Langs øverst til høyre finner du nedtrekkspaneler, men de virkelige elementene er plassert langs venstre side. Under firmalogoen finner du en unik visning av bilder som brukes til å representere lenker. I tillegg er det nummererte lenker nederst til høyre for manøvrering mellom sider.

lucuma

Her har vi funnet en annen velstående bruk av horisontal rulling. Effektene deres er bygget under jQuery-biblioteket. Lucuma har også lenker under deres kjerneinnholdsområde som tilbyr XHTML og CSS validering. Når du designer porteføljer for nettet her, betyr de virkelig forretning!

Andreas Smetana

Andreas Photography utstillingsvindu bringer ordet uvanlig i høysetet. Når siden er fullastet, vil du få et varsel som forklarer hvordan du krysser miniatyrbildegalleriet. Ved å bruke musens rullehjul eller piltastene kan du manøvrere mellom de mange fotografikategoriene. I nedre venstre hjørne er et annet lite sett med menykoblinger som åpnes på siden av hvilken side du er på. Temmelig stilig!

cypher13 Design Studio

Her kommer vi til et annet designstudio med en tilsvarende porteføljesett i et svart-hvitt tema. Oppsettet er bygget med HTML / CSS og bruker jQuery-animasjonseffekter for å overføre mellom porteføljeartikler. Det flotte her er hvor elegant hver bevegelse blir. Du føler deg nådig tilbudt en guide når du blar gjennom porteføljen deres. Det er mulig å sortere elementer basert på klient og kategori, eller dra nytte av søkefeltet deres som viser resultater i sanntid.

Studioutgang

Studio Output gir en ny funksjon i porteføljeskjermen. Hjemmesiden har en vakker collage av prosjektbilder som kan klikkes for å få mer informasjon i en lysbokseffekt. De tilbyr mange eksempler på bilder og viser til og med relaterte prosjekter når det er mulig. Her har jeg klippet ut et stykke fra deres portefølje av noen SpongeBob-kunstverk og grafikk.

Duane King

Porteføljen til Duane King er et annet utmerket eksempel på tastaturstøtte. Når du er lastet på hjemmesiden, kan du bla mellom segmentene til venstre og høyre med piltastene. Du kan klikke på et prosjekt for å utvide bildet og vise litt mer informasjon. Dette er også et annet eksempel der porteføljeartikler ikke lastes inn på en ny side, og virkelig drar nytte av jQuery-biblioteket og funksjonelle plugins.

Sideshow Trykk

Det jeg virkelig liker med Sideshow Press er bruken av et hasjmerke (#) mellom sidene. Dette indikerer for søkemotorer at alt nytt innhold ikke er lastet inn på en ny side, men dynamisk kontrollert gjennom JavaScript. I dette tilfellet ser vi på en Flash-applikasjon, men dette er grunnen til at teknikken fungerer så bra. Sidnavigasjonen tilbyr noen fargerike animasjonseffekter på svevetilstand. Hver sideovergang viser en glidende effekt, veldig unik og perfekt sammensatt.

Konklusjon

Jeg håper du har hatt glede av disse eksemplene på uvanlige navigasjonsteknikker, og at de har inspirert deg til å lage dine egne unike eksperimenter.

Hvis du kjenner til noen vanvittige navigasjonsmenyer som vi savnet, legg igjen en kommentar med en lenke nedenfor slik at vi kan sjekke den ut!

© Copyright 2022 | computer06.com