Yksisivuisten verkkosivustojen esittely
Kun suunnittelet verkkosivuja, joissa on pieni määrä sivuja eikä sisältöä, yhden sivun muotoilu voi olla innovatiivinen tapa sijoittaa sivusto erilleen.
Yhden sivun verkkosivustot käyttävät usein JavaScript- ja Flash-tiedostoja sekä HTML- ja CSS-sivuja, jotta sivuun lisätään enemmän sisältöä ilman huomattavasti kuormitusajankohtaa.
Navigointiin on kiinnitettävä erityistä huomiota yhden sivun sivustoihin, jotta kävijät voivat palata sivun kotisivuun ilman numeroita ja siirtyä mistä tahansa osasta mihin tahansa muuhun osaan. Tämä tapahtuu usein tahmeilla otsikoilla tai toistuvilla navigoinnilla kussakin osassa.
Alla olevat sivut ovat erinomaisia esimerkkejä yksisivuisista verkkosivustoista. Ne ovat sekä käyttökelpoisia että esteettisesti miellyttäviä ja hyödyntävät yksisivuisen muodon täysimääräisesti.
Roaaar
Roaaarin verkkosivuilla on jokaisen osion alareunassa "paluu ylöspäin" -linkki, joka helpottaa kävijöiden selviytymistä otsakkeen navigointiin.
Ricardo Mestron Duplos
Duplos-sivustolla on erilainen lähestymistapa, jossa pääsisältö on sivun alareunassa. Navigointi vie sinut sivun yläpuolelle eikä alas.
Grzegorz Kozak
Majakkamalli täällä kulkee koko sivun pituuden, joka kulkee avaruudesta alas maanpinnan tasolle. Majakat, jotka houkuttelevat ikkunoista majakasta, palaavat sinut sivun yläosaan, jossa navigointi on.
kaleidoskooppi
Kaleidoskooppiverkko käyttää eri taustakuvia ja tekstuureita sivuston jokaisen osan taakse. Tämä erottaa kunkin sisältöalueen toiselta sisällön alueelta.
Dan Scotton
Tämäntyyppiset lyhyet sivut, joilla on vain vähän sisältöä, toimivat erityisen hyvin. Navigointi pysyy sivupalkissa, kun vierität sivua alaspäin.
Viktor Shvaiko
Tämä sivusto käyttää horisontaalista liukusäädintä lataamaan uutta sisältöä, liu'uttamalla muita sisältöä päästäksesi sivulle, johon olet siirtynyt. Navigointipalkki pysyy päällä riippumatta siitä, millä sivulla olet.
Jon Rundle
Yksinkertaiset, henkilökohtaiset profiilisivustot sopivat erinomaisesti yhden sivun muotoiluun. Kuvakkeet ja aksentti värit lisäävät hieman visuaalista kiinnostusta muotoiluun, joka on muuten hyvin neutraali.
Jason Reed
Käyttämällä harmonista vaikutusta uuden sisällön näyttämiseksi toimii hyvin, kun sisältö ei ole liian pitkä. Kuvattu otsikkokuva sekä harmaa ja oranssi värimaailma tekevät sivuston erottuvan.
Tweet CC
Tekstuurien ja yksinkertaisten kuvioiden avulla Tweet CC-sivusto on visuaalisesti houkutteleva, mutta se on myös yksinkertainen monokromaattisella värimallilla.
PSD-asettelu
Sivustoja, jotka tarjoavat suoraviivaisia palveluja, voivat toimia erityisen hyvin yhden sivun muodossa. Tarjoamiselle ei ole liikaa tietoa ja yhden sivun pitäminen on helppoa, jotta mahdolliset asiakkaat voivat nopeasti löytää tarvitsemansa.
Feelwire
Feelwire-sivusto pitää asiat yksinkertaisina ja tarjoaa lisätietoa työkaluvinkeillä. Valkoinen tausta pitää sen minimalistisena ja rohkeat kuvakkeet lisäävät visuaalista kiinnostusta.
Hot Meteor
Hot Meteor-sivusto käyttää typografiseen keskittynyttä, harmaaa ja punaista muotoilua. Yläosa on tahmea pitämällä navigointi sivun ylälaidassa.
Mia Makila
Mia Makilan sivusto on hieman erilainen kuin useimmat muutkin tässä sivustossa, käyttämällä perinteisempää 3-sarakkeen muotoilua. JavaScript-toimintoa käytetään kuvataulujen näyttämiseen kussakin luokassa.
Costas Theoharis
Tämä sivusto käyttää mielenkiintoista liukusäädintä, ja jokainen osa (otsikko, pää sisältö ja alatunniste) liukuu erikseen toisistaan.
Javan Makhmali
Tässä käytettyä verkkosuunnittelua ei näy usein usein yksisivuisilla malleilla. Mutta runsaalla valkoisella tilalla se toimii hyvin ja sisältää paljon eri sisältöä hyvin virtaviivainen muotoilu.
Team Nomad
Suunnittelu on yksinkertaista ja suoraviivaista, ja 2 sarakkeen rakenne sopii hyvin lisää sivun sisältöä tekemättä sitä näyttäväksi.
Jorge Fino
Jorge Finon sivusto kiinnittää huomiota malleihin. Navigointi ei ole olemassa (muuten kuin vieritys) ja yhteystiedot sisältyvät sekä otsikkoon että alatunnisteeseen.
Moly Yim
Tässä on toinen sivusto, jossa ei ole navigointia. Se on pidetty kohtuullisessa ajassa, joten se ei ole ongelma.
Justin Tsang
Navigointi on hieman erilainen. Jokaisen projektin ja sisältöalueen vieressä olevat painikkeet eivät sisällä painikkeita, jotka vievät sinut takaisin ylhäältä tai navigoinnin jokaisella näytöllä. Yläosassa on myös navigointipalkki siirtyäksesi jokaiseen pääosaan.
Mogulista
Tilapäiset verkkosivut ovat hauskaa käyttää yhden sivun sivustoa. Tämä sivusto käyttää JavaScriptia ladattaessa uutta sisältöä jokaiselle sivustolle.
Chirag Solanki
Tämän sivuston navigointi yhdistää molempien päätoimintojen navigoinnin ja linkit, jotka palauttavat kävijät sivun yläosaan. Kuvatut työtulpat yhdistävät jokaisen osan, mikä antaa jatkuvuuden tunnetta koko sivulle.
Deluge Studios
Deluge Studios -sivuston ulkoasu on yksi ainutlaatuisimmista esillä täällä. Kaksi saraketta sisältää viisi sisältöaluetta, jotka kaikki linkittyvät ylhäältä. Sisältää pääosan sisältöosat pienemmällä "sivupalkilla" -tyylisellä sarakkeella tekee sivun huomattavasti lyhyemmäksi.
Stage 5 Studio
Stage 5 Studio-sivusto on lyhyt, ilman navigointia. "Lue lisää" -linkit välittävät lisää tietoa jokaisesta projektista, kun taas toista sisältöä pidetään "sivupalkissa".
SmartCube
SmartCube-sivusto käyttää tahmeaa otsikkoa pitääkseen navigoinnin näytöllä kaikkina aikoina. Se käyttää myös 1- ja 2-sarakkeen ulkoasuja, riippuen sisällöstä.
Eclectique mallit
Sisällön osiot erottuvat ainutlaatuisilla taustakuvioilla. Typografia vetää kaiken yhteen koko sivulle, ja JavaScriptia käytetään näyttämään lisää tuotteita ilman suurempaa tilaa.
Inside Secrets iPhone-sovellukseen
Tämä on yksi pidemmistä yksisivuisista verkkosivustoista, jotka ovat täällä. Se käyttää liikkumatonta otsikkoa, jonka avulla pääset helposti yhdestä osasta mihin tahansa muuhun.
Tappaa vuoto
Tämän kaltaisen hyväntekeväisyystoiminnan pitäminen on lyhyt ja siihen saakka lähes varmasti lisätään tulevien lahjoitusten määrää. Lihavoitu typografia, graafiset kuvat ja lahjoituslomakkeen sisällyttäminen alareunaan toimivat täydellisesti yhdessä.
Emily Whitesmith
Tässä on toinen sivusto, joka aloittaa sinut sivun alareunassa. Napsauttamalla Lisätietoja-linkkiä siirryt sivulle portin alueelle. Modaaliset ikkunat antavat lähikuvat kustakin kankaasta.
lentäjä
Sovellusverkkosivustot sopivat erinomaisesti yhden sivun malleihin, koska niillä on usein vain rajoitettu sisältö ja vain kuvakaappaus tai kaksi kuvaa.
Hayley Smith
Tässä on toinen hyvin pitkä sivu. Navigointi toistuu jokaisen osan yläosassa ja logo liukuu alas sivun vieressä.
Conway Anderson
Conway Andersonin sivusto käyttää sekoitus liukusäätimiä (noin ja yhteystiedot) sekä modaaliset ikkunat (työn) sisällön näyttämiseen. Yksinkertainen, ristikkopohjainen muotoilu ja monokromaattinen värimalli pitävät asioita yksinkertaisina ja nykyaikaisina.
Daniel Moir
Daniel Moirin kotisivut ovat yksinkertaisia ja niissä on vain vähän sisältöä eikä navigointia. 2-sarakkeen suunnittelu järjestää sivuston eri sisältötyyppejä ja pitää sen lyhyemmäksi.
Latte per päivä
Esitelaitteiden verkkosivut sopivat erinomaisesti yhden sivun malleihin, kuten tässä on esitetty. Monisivuisen sivuston perustelemiseksi ei ole vielä riittävästi sisältöä.
Mehiläisten markkinat
Tässä on toinen pidempi yhden sivun sivusto. Kirkkaan keltainen tausta ja mehiläiskuvitukset sitovat koko sivuston yhteen ja navigointi toistuu kunkin osan yläosassa.
Rubidine
Rubidine-sivustolla on tahmea otsikko, jossa on läpinäkyvä tausta, joka sekoittuu kunkin yksittäisen sisältöosion kanssa.
Jakub Szymanski
Tämä sivusto käyttää JavaScriptin uutta sisältöä ladattaessa ja liu'uttamalla sivua alas. Tyypillinen alatunniste ilmestyy kotiin "sivulle", jossa on "palaa alkuun" -linkki.
Tyler Termini
Tyler Terminin verkkosivusto on lyhyt, navigointi vain otsikossa. Koska se ei ole kovin pitkä sivu, ei todellakaan ole ongelma joutua selviytymään ylhäältä (tai vain selata jokainen osa ilman navigointia lainkaan).
Josh Sender
Harmaasävyinen värimalli täällä näyttää hyvältä. Näytettävät työt tulevat täyteen, kun niitä liikutetaan päälle, ja kun napsautetaan värimalli-ikkunaa, avautuu suurempi versio.
Kirjallinen ja koottu yksinomaan WDD: lle Cameron Chapman .
Mitä pidät parhaiten yhden sivun verkkosivustoista? Onko suosikkeja, joita ei ole tässä esillä? Jaa seuraavat kommentit ...