Üksiku lehe veebikujundus: 10 näpunäidet + ideed
Elagu ühe lehe veebisaidi kujundus! Väikesemahulistel veebisaitidel, mis sobivad ühele lehele, on midagi peaaegu maagilist. Need võivad olla graatsilised, hõlpsalt navigeeritavad ja suletud ruumis optimaalsed kasutajakogemused.
Kui kunagi oli üksikute lehtede veebisaitide juurest eemale hoidmine, võtsid kasutajad neid omaks (aitäh, mobiil!) Ja ka teie peaksite seda tegema.
Vaatame kümmet näpunäidet, ideed, näiteid ja soovitusi, mis aitavad teil inspiratsiooni anda teie järgmise veebidisaini töö jaoks. Võib-olla on just õige aeg seda lihtsana hoida ja võtta vastu üheleheline strateegia!
Tutvuge disainiressurssidega
1. Mõelge lehele
Ühtse veebisaidi kujunduse kujundamisel mõelge „lehtedes“.
Iga kerimine peaks andma ühele elemendile keskenduva lehelaadse kogemuse. See loob veebisaidi kujundusele selge organisatsiooni ja voolavuse.
Cote teeb seda ilusti “lehtedega”, millel on vahelduvad heledate ja tumedate (või tervete fotode) eraldused. Kasutaja teab visuaalselt kerides, kus üks natuke sisu lõpeb ja järgmine algab.
2. Pikemal lehel navigeerimine ajaskaalal
Kui tegemist on üheleheliste veebisaitidega, siis pole nende sisu alati kerge. Mõned parimatest ühelehelistest kujundustest on pikema kerimise ja pikema vorminguga veebisaidid.
Nende projektide puhul kaaluge ajajoonel navigeerimist, et kasutajad teaksid alati, kus nad sisuvoogus asuvad. Selle abil on lihtne jälgida, kus te olete ja kuidas tagasi saada, kui seal on sisu, mida saaksite uuesti läbi vaadata.
UV Hero teeb selle ilusa töö väga visuaalse ajaskaala abil, mis näitab nähtava valguse spektri kõiki värve kujunduse sisu osas. Ja parim osa? Võite klõpsata mis tahes värvil ja liikuda paremale selle sisu juurde.
3. Navigeerimine lehel
Ühel lehel asuvatel veebisaitidel ei pea puuduma tavalisi kasutajaliidese elemente, näiteks menüü, ehkki paljud näivad.
Saate siiski kaasata traditsioonilise välimusega menüü (see võib aidata nii kasutajal vooguda kui ka otsida). Erinevus on selles, et menüülingid hüppavad ühelehekujunduse konkreetsetele jaotistele. Kasutajatele, kellele meeldib sel viisil navigeerida, ei tea nad isegi, et olete selle vahva triki loonud.
Happy Tools näeb välja nagu mitmeleheline sait, kuid see kõik asub ühel lehel. Menüü töötab erakordselt hästi ja annab kasutajatele navigeerimisvalikud.
4. Muutke see väga interaktiivseks
Kui soovite, et kasutajad jätkaksid kerimist, võivad seda tegevust julgustada interaktiivsed elemendid.
Interaktiivsus võib videost paralleeliefektidest kuni animatsiooni või mänguasja puudutusteni julgustada kohapeal suuremat liikumist ja aega. See kehtib eriti üheleheliste kujunduste puhul.
Lobods on rohke interaktiivsusega unine stiil. Seal on hõljutavaid animatsioone, libistatavaid ja hüpitavaid elemente ning kerimisteksti. See kõik tuleb kokku viisil, mis aitab kasutajatel sisu hõlpsalt liikuda. (Veel üks boonus selle kujunduse juures? See sisaldab palju ruumi, nii et peeneid liigutusi ja koostoimimist oleks lihtsam näha.)
5. Kõik ühel ekraanil
Kui teil pole palju sisu, võib üheleheline kujundus, mis on kõik ühel ekraanil, pakkuda kena kasutajakogemust.
Käsitlege seda veebisaidi kujundust nagu suurt navigatsioonielementi koos mõne teabe ja seejärel saidiväliste või kontaktlinkidega. See sobib hästi varsti ilmuvate kujunduste või lihtsate portfelli sihtlehtede jaoks.
Sylvain Theyssens teeb seda oma portfelli kujundamiseks. (Sellel on tegelikult kaks lehte: armas “ekraanisäästja stiilis” animatsioon, mis muutub hiire liigutusega põhikujunduseks.) Leht on lihtne, informatiivne ja muljetavaldav. Ühe ekraaniga kujundus annab teile kõik, mida peate teadma, ilma et midagi täiendavat takistaks.
6. Peatselt kujundus
Peatselt saabuvatest veebisaitidest rääkides on see ideaalne lahendus üheleheliste kujunduste jaoks.
Enamikul juhtudel pole peatselt saabuvatel lehtedel palju sisu - võib-olla lihtsalt logo ja sissejuhatus või kontaktteave. Enamasti mahub see ühele lehele hästi ja on kasutaja aja efektiivne kasutamine kuni põhisaidi käivitamiseni.
Roheline kameeleon teeb täpselt seda. Üks = lehekujundus on eriti tore laheda animatsiooni ja huvitava tekstikasutuse tõttu. See loob ootustunde ja kutsub esile uudishimu - just seda asja, mida võiksite loota peatselt ilmuval lehel.
7. Ole väike funky
Üksiku lehe veebisaidid võivad olla suurepäraseks mänguväljakuks, kui soovite proovida midagi pisut teistsugust või funky-d. Ebatavaline kuvar töötab väiksemate kujundustega hästi, sest te ei tee "trikki" üle.
Rou Hun Fan kasutab oma teabe, portfelli ja töö esiletõstmiseks spetsiaalset kirjatüüpi ja taustvõrku. Loomingulisest väljapanekust ja minimaalsest stiilist piisab lühikeseks kerimiseks, mis sobib ideaalselt portfelliks.
8. Andke kasutajatele midagi teha
Kaasamise hoidmiseks ja kasutajate disaini vastu huvi tundmiseks andke neile ühe lehe veebisaidil palju teha.
Üks tõrge, mis paljudel neist kujundustest on, on see, et need on vaid pikad teabe kerimised. Jagage see klikkitavate elementide, tegevusele kutsumise ja vajalike tegevustega. Need elemendid mitte ainult ei aita teil välja mõelda, mida kasutajad disainilahendusest soovivad (ja kui nad vastavad teie seatud eesmärkidele), vaid aitavad neil ka pikema aja jooksul suhelda.
Paljusus purustab pika sirvimislehe rohkete kaardilooliste nuppudega, et reisipakette reserveerida. Järjepideva kasutajakogemuse loomiseks märgitakse kõik need klikkide interaktsioonid noolega.
9. Hoidke see korrastatuna
Kuna kogu veebisaidi sisu on ühel lehel, on kujundusel lihtne käest pääseda. Kuid see võib luua ka sisu jaoks korraldatud lõuendi.
Ühe lehega töötamisel võib teie parim vahend olla tihe ruudustik ja ühtlane struktuur. Kasutage neid sisu korraldamiseks ja rühmitamiseks viisil, mis on kasutajatel hõlpsalt navigeeritav ja arusaadav.
Taskuhäälingusaated Repo teeb seda suurepäraselt, pakkudes suurepärast taskuhäälinguvõrku, mille vahel valida. Sait on selle ruudustiku ja stiiliga piisavalt paindlik, et kasvada nii paljuks sisuelementideks, kui vaja, ilma et sellest üle jõu käiks.
10. Kasutage ruumi targalt
Pikema kerimise või üheleheline kujundus on üks olulisemaid kaalutlusi ruumi kasutamisel. Sisu tuleb paigutada selliselt, et sisu muudatused oleksid selgelt kindlaks tehtud, toimingud tuvastatavad ja kõik oleks hõlpsasti loetavad. (Pidage meeles, et liiga suur kerimine võib põhjustada teatud määral silmade väsimist.)
Werneri värvide nomenklatuur on ühe sisuga veebisait. Sait on tegelikult 1821. aastast pärineva raamatu koopia. Kosmos paneb selle kujunduse toimima.
Selge ruudustiku ja rohke tühimikuga kategooriad ja alajaotused parandavad loetavust ja skannimist. Siin on palju, kuid tänu ruumi kasutamisele tundub see üsna ligipääsetav.
Järeldus
Üheleheline veebisaidi kujundus võib olla just see asi, mida peate katkestama mõne raskema projekti, mille kallal olete töötanud. See stiil sobib kõigile, alates peagi saitidest kuni portfellideni. See sobib iga veebisaidi jaoks, millel pole palju sisu.
Kas teil on lahedaid ühelehelisi veebisaitide kujundusi, mida näidata? Vaatame neid. Jagage neid meiega Twitteris. Märgistage @designshack ja @carriecousins koos lingiga sellele postitusele ja me retweedime oma lemmikuid.
