11 veebisaidi paigutust, mis muutis sisu 2017. aastal säravaks

Miks inimesed tõesti veebisaite külastavad? Enamasti on iga külastuse peamine põhjus sisu. Sisu on ülimalt tähtis ja iga disainer soovib seda esitada kõige kasulikumal ja intuitiivsemal viisil. Pole siis üllatav, et oma sisu jaoks küljenduse valimine on üks esimesi asju, mida disainerid uue projekti alustamisel teevad.

Paljud disainerid usuvad, et iga töötava veebisaidi paigutus peaks projekti eesmärkide saavutamiseks olema täiesti ainulaadne - see pole tõest kaugeltki. Kui külastate populaarseid veebisaite, märkate, et paljud neist kasutavad sarnaseid paigutusi. See pole juhus ega tehtud laiskusest, sest neil paigutustel on kolm olulist eelist:

  • Need on kasutatavad. Ühised paigutused on muutunud nii tavaliseks, kuna need on tõestanud, et kasutajad saavad nendega töötada.
  • Nad on tuttavad. Hea kasutajakogemuse loob kasutajate tundmise suurendamine. Külastajad tunnevad meeldivat deja-vu tunnet, kui nad näevad tuttavaid jooni, nagu nad eeldaksid. Selle tulemusel kulutavad inimesed rohkem aega sisu seedimisele, selle asemel et keskenduda lehe ainulaadsele kujundusele.
  • Nad säästavad raha. Olemasolevate paigutuste taaskasutamine on aja kokkuhoid. Disainerid kulutavad vähem aega paigutuse katsetamisele ja keskenduvad rohkem visuaalsele hierarhiale ja muudele disaini aspektidele, millel on otsene mõju kasutajakogemusele.

Kuigi iga projekt on ainulaadne ja nõuab individuaalset lähenemist, on abiks tavaliste paigutustega tutvumine. Selles artiklis vaatleme 11 väga levinud paigutust, mille leiate täna lugematul hulgal saitidel.

1. Üks veerg.

Üksikute veergude paigutused esitavad põhisisu ühes vertikaalses veerus. Seda tüüpi paigutus on selles loendis võib-olla kõige lihtsam ja kasutajatel on kõige lihtsam navigeerida. Külastajad lihtsalt kerige allapoole, et näha rohkem sisu.

Vaatamata lihtsusele on üheveerulised paigutused paljude veebisaitide seas üsna populaarsed. Seda tüüpi paigutuse populaarsusele avaldas mõju ka mobiilirevolutsioon - üheveerulised paigutused sobivad mobiiliekraanidele ideaalselt.

Millal seda kasutada.

See paigutus leiab rakendust paljudes isiklikes ajaveebides, mis põhinevad minimalistlikel disainiprintsiipidel. See on tavaline paigutus selliste mikroblogide jaoks nagu Tumblr.

Populaarne ajaveebiplatvorm Medium kasutab oma lugude esitamiseks sellist paigutust. Kõik keskmist käsitlevad artiklid on esitatud ühe veeru paigutusena.

Kujunduse näpunäited

  • Mõelge pikkade lehtede kleepuvatele menüüdele. Kuna ühe veeru paigutust kasutatakse sageli pika kerimisega lehtede jaoks, on oluline hoida navigeerimine alati silma peal. Kleepuv navigeerimine aitab teil vältida seda, et külastajad peaksid navigeerimiseks liikuma tagasi lehe ülaossa.
Pildi allikas: codemyui

2. Jagatud ekraan

Jagatud ekraan (või üks ekraan, mis on jagatud kaheks) paigutus sobib suurepäraselt lehe jaoks, millel on kaks peamist sama tähtsusega sisu. See võimaldab disaineritel kuvada mõlemat eset korraga, pöörates samas tähelepanu neile.

Kaks keskset elementi kuvatakse üheaegselt. Pildi allikas: 62 mudelit

Millal seda kasutada

Jagatud ekraanipaigutused on ideaalsed, kui teie sait pakub kasutaja teekonnal kahte dramaatiliselt erinevat varianti, näiteks kahte tüüpi juhiseid, nagu näeme allpool olevas Dropboxi näites.

Jagatud ekraanipaigutused sobivad ideaalselt ka kontrastsuseks ja seetõttu kasutavad disainerid seda paigutust sageli kahe üksuse üksteise vastu asetamiseks.

Duaalsuse vastandlikud omadused (vastupidised värvid). Kujutise allikas: Google Star Warsi kliendid

Kujunduse näpunäited.

  • Vältige jagatud sektsioonides liiga palju sisu kasutamist. Jagatud ekraanikujundus ei laiene koos sisu kasvamisega hästi, seetõttu on parem vältida seda tüüpi paigutuse valimist, kui peate jagatud lõikudena esitama palju teksti- või visuaalset teavet.
  • Kaaluge animatsiooni lisamist. Animeeritud detailide kaasamisega saate luua dünaamilisema kogemuse.
Kujutise allikas: Tšehhov on elus

Asümmeetria on paigutuse kahe poole vahelise võrdsuse puudumine. Asümmeetria on kunstimaailmas juba pikka aega lemmiktehnika ja see on viimasel ajal populaarseks saanud veebidisainerite seas.

Paljud inimesed ajavad asümmeetria segamini tasakaalustamatusega, kuid tegelikult on asümmeetria eesmärk luua tasakaal, kui kahe sektsiooni võrdse kaalu kasutamine on võimatu või mitte soovitav. Asümmeetria kasutamine võimaldab luua pingeid ja dünaamilisust ning asümmeetria hõlbustab skannimiskäitumist, keskendudes kasutaja tähelepanu üksikutele objektidele (fookuspunktidele). Iga asümmeetrilise sisutüki laiuse, ulatuse ja värvi muutmisega soovitab disainer külastajal visuaalselt silma jääda.

Millal seda kasutada.

Seda tüüpi paigutust saab kasutada siis, kui disainerid soovivad luua huvitavaid ja ootamatuid paigutusi, pakkudes samal ajal suunavat rõhku. Nõuetekohaselt rakendatud asümmeetria võib luua aktiivse ruumi, mis suunab silma ühelt elemendilt teisele, isegi üle tühjuse. Mõelge, kuidas Dropbox näitab allolevas näites selgelt fookuspunkte.

Asümmeetria muudab Dropboxi kodulehe energilisemaks.

Kujunduse näpunäited.

  • Veenduge, et teie sisu oleks võimalik esitada asümmeetriliselt. Asümmeetriline paigutus pole iga saidi jaoks otstarbekas. Tõenäoliselt töötab see kõige paremini minimalistlike paigutuste korral.
  • Lisage fookus värviga. Asümmeetria juured on idees, et visuaalsema kaaluga objekt pöörab sellele kõigepealt tähelepanu. Kujunduse konkreetsetele osadele visuaalse kaalu lisamiseks võite kasutada kõrge värvikontrastiga elemente.
Suur värvikontrastsus lisab disaini konkreetsetele osadele visuaalse kaalu. Pildi allikas: Kultuur PL

4. Kaartide võrk.

Kaardid on suurepärased mahutid klõpsatava teabe saamiseks - - need võimaldavad disaineritel esitada suure hulga teavet seeditaval viisil. Hammustuse suurusega eelvaated (tavaliselt pilt ja lühikirjeldus) aitavad külastajatel leida sisu, mis neile meeldib, ja sukelduda kaardi klõpsamisel või koputamisel üksikasjadesse.

Kaardivõrgu juures on kõige olulisem, et seda tüüpi paigutusega saaks peaaegu lõpmatult manipuleerida. Võrede suurus, suurus ja veergude arv võivad erineda ning kaartide stiil võib erineda vastavalt ekraani suurusele (kaarte saab ümber kohandada, et need sobiksid ükskõik millise ekraaniga). Sellepärast töötavad kaardivõrgud nii hästi reageerivate kujundustega.

Millal seda kasutada.

Kaardivõre paigutus sobib hästi sisukate saitide jaoks, kus kuvatakse palju võrdse hierarhiaga üksusi.

YouTube'il on range ruudustiku paigutus; sirged kaardiridad on rühmitatud kategooriatesse.Iga nööpnõel Pinterestis on esindatud kaardina.

Kujunduse näpunäited.

  • Klõpsake kogu kaarti, mitte ainult konkreetseid osi. Kasutajatega suhtlemine kaardiga on palju mugavam, kui kasutajad ei pea sisu üksikasjadele juurdepääsemiseks täpselt kaardi pealkirjal või pildil klõpsama.
  • Kui teie kaart sisaldab pilti, kaaluge, kuidas see väiksema ekraaniga välja näeb. Pilt, mis ei ole piisavalt mõõtkavas ja muutub väikestel ekraanidel loetamatuks, loob halva kasutajakogemuse.
  • Pöörake tähelepanu kaartide vahelisele tühikule, kuna see mõjutab seda, kuidas külastajad sirvivad. Rohkem kaartide vahelist ruumi muudab sirvimise aeglasemaks, kuid külastajad pööravad igale kaardile suuremat tähelepanu. Minimaalne ruum võimaldab kiiret skannimist, kuid suurendab ka riski, et külastajad võivad mõne sisu tähelepanuta jätta.
  • Võimalik on lisada animeeritud tagasisidet. Kaart kuvatakse klõpsatava elemendina.
Smashing Magazine pakub oma kaartide kohta suurepärast animeeritud tagasisidet.

See on võib-olla kõige keerulisem paigutus, mida selles postituses mainiti. Nagu nimigi ütleb, populariseerisid seda paigutust ajalehed ja ajakirjad, kellel oli probleem esitada lugejale tohutul hulgal teavet hõlpsasti jälgitaval viisil. Trükidisainerid kasutasid selleks ruudustussüsteemi. Paigutus on üles ehitatud modulaarse ruudustiku abil, mis võimaldab paindlikkust - mitmeveeruline paigutus kasutab teabe tähtsuse seadmiseks erinevat visuaalset kaalu.

Ajakirja paigutus võimaldab lugejatel skaneerida, lugeda. ja saate lehest kiiresti aru. Pildi allikas: New York Times

Sarnaselt paberajakirjadega kasutavad ka digitaalsed ajakirjad mitmeveerulist ruudustikku, mis võimaldab teil luua keeruka hierarhia ning integreerida teksti ja illustratsioone. Peamine eesmärk on sama - külastajad peavad saama lehte kiiresti skaneerida, lugeda ja sellest aru saada. Disainerid püüavad luua visuaalset rütmi. Nad püüavad hõlbustada silmal lehe lõikude skaneerimist ja võimaldavad silmal loomulikult liikuda ühest plokist teise. Samal ajal püüab disainer takistada erinevate plokkide konkureerimist tähelepanu pärast.

Millal seda kasutada.

Ajakirjade küljendus on hea valik trükiste jaoks, millel on keeruline hierarhia, kus lehel on palju sisu. Ilma ruudustiku tõhusa kasutamiseta näib kogu kodulehe sisu tõenäoliselt segasem ja vähem korraldatud.

Ajakirjade kujundus on kõige parem uudistesaitidele, millel on palju regulaarselt värskendatavat sisu mitmes kategoorias.

Kujunduse näpunäited.

  • See paigutus rõhutab pealkirju ja pilte. Pealkirja / pildi suurus on otseselt seotud tähelepanu juhtimisega. Silmatorkavamad elemendid tõmbavad kasutaja tähelepanu kiiremini kui vähem silmapaistvad. Võtame näiteks New York Timesi - lehe kõige olulisemal sisul on suuremad pisipildid, suuremad pealkirjad ja üksikasjalikum tekst.
New York Times kasutab olulisuse mõistmiseks teksti jaoks erinevat suurust - teksti suurused varieeruvad visuaalse hierarhia loomiseks.
  • Ruudustiku paigutamine nõuab tähelepanu nii horisontaalsele kui ka vertikaalsele rütmile ning need on võrdselt olulised, kui soovite luua hea paigutuse. Mõelge järgmiste näidete erinevusele. Esimeses näites on ruudustik kooskõlas veeru laiuse ja horisontaalse vahega, kuid erinev vertikaalne vahe loob visuaalset müra. Teisel juhul on horisontaalne veergude vahe ja vertikaalne elementide vaheline kaugus ühesugused ning see muudab sisu visuaalset tarbijat kasutava kasutaja jaoks üldise struktuuri puhtamaks ja mugavamaks.

6. Karbid.

Sellel paigutusel on suur päiselaiusega kast ja paar väiksemat kasti, millest igaüks võtab osa suurema kasti ekraanipinnast. Väiksemate kastide arv võib varieeruda kahest viieni. Iga kast võib olla link, mis viib suurema, keerukama lehe juurde.

Millal seda kasutada.

See on üsna mitmekülgne paigutus, mida saab kasutada nii üksikute portfellitaoliste saitide kui ka ettevõtete / e-kaubanduse veebisaitide jaoks.

Pildi allikas: mrporter

Kujunduse näpunäited.

  • Ühendage kastid loo jutustamiseks. Suurt kasti saab kasutada toodete tutvustamiseks, samas kui väiksemad kastid pakuvad toote kohta lisateavet.
Kujutise allikas: Microsoft Surface

Navigeerimine on mis tahes veebisaidi kriitiline osa - peamenüü on esimene asi, mida enamik kasutajaid navigeerimise soovimisel otsib. Lisaks ülaosas asuvale horisontaalsele navigeerimisele on menüüvalikuid võimalik silma peal hoida, paigutades need fikseeritud külgribale. Külgriba on vertikaalne veerg lehe vasakus või paremas osas. Selle paigutuse korral jääb külgriba liikumatuks ja jääb alati nähtavaks, kui ülejäänud leht muutub, kui kasutajad lehte kerivad. Nii jääb navigeerimine juurdepääsetavaks.

Millal seda kasutada.

See paigutus sobib hästi veebisaitidele, millel on suhteliselt piiratud arv navigeerimisvalikuid. Eelistatav on, et kui kasutaja lehele siseneb, on kõik valikud nähtavad.

Pildi allikas: mõõdupuu

Kujunduse näpunäited.

  • Külgribad võivad sisaldada ka muud sisu peale menüü või lisaks sellele, näiteks sotsiaalmeedia linke, kontaktteavet või midagi muud, mida soovite külastajatelt hõlpsalt leida.
Trefecta pakub külgribal keele ja lehe jagamise valikuid.

See paigutus põhineb ideel, et piltide kasutamine disainis on kiireim viis toote müümiseks. Piltidel on võimalus luua külastajatega emotsionaalne seos - suur, julge foto või objekti illustratsioon annab tugeva avalduse ja loob rabava esmamulje.

Millal seda kasutada.

See paigutus on suurepärane, kui peate demonstreerima ainult ühte toodet / teenust ja keskenduma kogu kasutaja sellele.

Muude elementide puudumine selles paigutuses juhib kasutaja tähelepanu täielikult tootele.

Seda tüüpi paigutust kasutades on võimalik luua tõeliselt ümbritsev, emotsionaalne kogemus. Üks suurepärane näide on liik tükkides, mis pakub rikkalikku kogemust ja suurendab teadlikkust ohustatud liikidest.

Pildi allikas: liigid tükkides

Kujunduse näpunäited.

  • Veenduge, et teie graafiline pilt oleks piisavalt nähtav. Pilt, foto või illustratsioon peaks olema asjakohane nii edastatava sõnumi jaoks kui ka kvaliteetne.
  • Mõelge tüpograafiale. Tüpograafia on pildiga kaasas. Suurus, kirjatüübi kaal ja värv on kõik kirjatüübi omadused, mida tuleb kasutada kujunduse tugevdamiseks.

9. F-kujuline paigutus.

Seda tüüpi paigutus loodi selle põhjal, kuidas kasutajad veebis sisu loevad. F-kujuline skannimismuster, mille algselt määratles NNGroup, väidab, et kasutajad skannivad tavaliselt raskeid sisuplokke mustrina, mis näeb välja nagu täht F või E. Meie silmad algavad lehe paremast ülanurgast, skaneeritakse horisontaalselt, seejärel rippuge järgmisele reale ja tehke sama uuesti ja uuesti, kuni leiame midagi, mis meie tähelepanu köidab (huvitav sisu). See skannimismuster on asjakohane mitte ainult lauaarvuti kasutajatele, vaid ka mobiilikasutajatele.

Millal seda kasutada.

See paigutus sobib lehtedele, kus tuleb esitada palju erinevaid võimalusi ja võimaldada kasutajatel neid kiiresti skannida. Külastajad reageerivad paremini F-mustri paigutusele, mis jäljendab looduslikku skannimismustrit. See on kasulik uudiste saidi avalehe või otsingutulemusi sisaldava lehe jaoks.

New Yorker kasutab oma kodulehel F-kujulist paigutust.

Kujunduse näpunäited.

  • Reguleerige sisu vastavalt skannimiskäitumisele. Tasub asetada kõige olulisem sisu lehe vasakule ja paremale küljele, kus kasutaja alustab ja lõpetab nende horisontaalse skaneerimise. Kui külastajad jõuavad rea lõppu, peatuvad nad enne järgmisele reale liikumist sekundiks ja see paus annab teile võimaluse sisu esitleda.
  • Kasutage külastaja juhendamiseks visuaalseid näpunäiteid. Kasutajate tähelepanu on võimalik koondada konkreetsele elemendile, pannes sellele rohkem visuaalset kaalu. Näiteks saate kasutaja tähelepanu juhtimiseks esile tõsta tekstis olevad märksõnad.

10. Z-kujuline paigutus.

Z-mustri paigutus jäljendab ka loomulikke skaneerimisharjumusi. Saidikülastajad (lääne kultuuridest) alustavad vasakpoolsest ülanurgast. Need skaneerivad vasakult ülalt paremale, moodustades horisontaalse joone. Järgmine samm on aga pisut teistsugune - selle asemel, et otse alla kukkuda, nagu F-kujulise mustri puhul, kõnnivad nende silmad allapoole ja lehe vasakule küljele, luues diagonaalse joone. Viimaseks - pilk jälle tagasi paremale, moodustades teise horisontaalse joone.

Millal seda kasutada.

Kuigi F-muster on parem palju sisu skannimiseks, sobib Z-muster paremini saitidele, millel on ainsad eesmärgid ja vähem sisu. See muster aitab tõhusalt suunata kasutaja tähelepanu konkreetsetele punktidele, kasutades hästi paigutatud visuaale, teksti ja CTA-sid.

See paigutus on suurepärane, kui saidil on konkreetne tegevuskava või tegevusele kutsumine, millega kasutajad peaksid suhtlema. Pildi allikas: Basecamp

Kujunduse näpunäited.

  • Kaasake kasutajad siksakilisse (või jätkuva Z-mustriga). Siksakimise loomiseks on kasutajaid võimalik skaneerida, vahetades teksti ja pilte paar korda.
Siksakiline muster on Z-muster, mida korratakse samal lehel paar korda. Zig-zags loob rütmi, mis hoiab külastajaid huvitatud. Pildi allikas: Evernote

Selle paigutuse põhielement on üks suur foto, mida kasutatakse lehe taustana. Seda kasutatakse külastajatele saidi sisu tutvustamiseks. Sellel paigutusel on võimalus luua tugev esmamulje ja see julgustab kasutajaid suhtlema.

Millal seda kasutada.

See paigutus on suurepärane, kui soovite vähem öelda ja rohkem näidata.

Pildiallikas: Süüria otsimine

Kujunduse näpunäited.

  • Valige hoolikalt taustpilt. Kuna paigutus põhineb ühel pildil, on oluline valida õige. Ebaoluline pilt võib külastajaid kergesti segadusse ajada.
  • Külastajate kaasamiseks kasutage piltide asemel videoid. Võib-olla tasuks foto asemel kasutada videot, eriti kui peate midagi tegevuses demonstreerima.
Video annab teile parema võimaluse meelitada oma külastajaid staatilise pildi külge. Pildi allikas: Tesla
  • Ärge laske kujundusel loetavust vähendada. Teksti, mida kasutate pildi ülekattena, peaks olema piisavalt kontrastset, et see oleks loetav. Kui tekst ei ole piisavalt kontrastset, kaaluge pildile ülekatte lisamist.
Kujutise allikas: Google Wallet

Saidi kujundamisel on oluline meeles pidada, et sisu on alati kuningas. Veebisaidi peamine eesmärk on endiselt kergesti seeditava sisu avaldamine. Paljude sisuvariantide hulgast on oluline valida see, mis paneb teie sisu särama.

Algselt avaldati aadressil theblog.adobe.com 13. detsembril 2017.