Kui otsite veebilehe kujundusruudustikke, olete jõudnud õigesse kohta. Selles postituses oleme arutanud 5 erinevat veebisaidi kujundamise ruudustikku.
Võred on disaini selgroog; need aitavad teil korda luua ja teie kujunduse sisu korraldada. Selles postituses arutame, mis on ruudustik, miks peaksite seda veebidisainis kasutama ja kuidas seda teha.
Avate oma eelistatud kujundusrakenduse ja seal see on, tühi lõuend vaatab teile tagasi. See on kohati hirmutav.
Kuidas alustada? Millise positsiooni sa pealkirjaks annad? Kuhu te oma kunstiteoseid ja fotosid paigutate? Alustuseks on vaja ainult ruudustikku.
Ruudustik on kujunduse sisu korraldamiseks kasutatav struktuur; see loob joonduse ja korra.
Olenemata sellest, kas kujundate printimiseks (nt ajakirja) küljendust või ühendate sihtlehe loomiseks fotosid ja teksti, aitab ruudustik teil kujundusvalikuid teha ja pakkuda positiivset kasutuskogemust.
Mõelge, kuidas see sihtlehe kujundus kasutab oma komponentide korraldamiseks 12-veerulist ruudustikku. Ruudustiku kasutamine välistab võimaluse teha juhuslikke otsuseid.
Selle asemel, et tükke juhuslikult paigutada, saate ruudustikku õigesti kasutades täpselt teada, kuhu paigutada sellised elemendid nagu logo, menüüelemendid, pealkiri, keha sisu ja fotod. Lisaks aitab see teie projekteerimisprotsessi kiirendada.
Selles artiklis räägin teile kõigest, mida peate teadma ruudustiku kasutamise kohta veebidisainis. Nii et jääge minuga lõpuni.
Sisu
- Kust võred tulevad?
- Miks on võrgud veebidisainis olulised?
- 5 erinevat tüüpi võreid
- 4 parimat tava võrgustike kasutamiseks veebidisainis
- Võrgu anatoomia – mida peate teadma?
- Korduma kippuvad küsimused: Website Design Grids 2024
- 👉 Milline on parim ruudustik veebidisaini jaoks?
- ✅ Mis on ruudustiku paigutusega veebisait?
- 👉 Kuidas veebisaidi ruudustikud töötavad?
- 👀 Kuidas täiustab ruudustiku paigutus veebidisaini?
- ✅ Miks disainerid ruudustikke kasutavad?
- 👉 Mitu veergu peaks veebikujunduses ruudustikul olema?
- 💁 Miks me kasutame 12 veeruga ruudustikku?
- ✔️ Mis on 12 veeruga ruudustik?
- 👉 Kuidas sina ruudustikumalle kasutad?
- Järeldus: veebisaidi kujundamise ruudud 2024
Kust võred tulevad?
Enne kui hakkame uurima, kuidas ruudustikud tänapäeval veebidisaini mõjutavad, vaatame lühidalt võrkude ajalugu ja nende kasutamist. Ruudud on vajalikud tüpograafia korraldamiseks.
Võrke kasutati algselt käsikirjalistes paigutustes vastavalt tellimuse tüübile. Mõelge, kui järjestatud on see levik varasemalt tekstilehelt.
Trükiajaloo põhjalikuma ülevaate saamiseks vaadake meie esseed graafilise disaini ajaloost.
Kiirelt edasi tööstusrevolutsiooni ja masstootmise tulekuni, mille käigus toodeti suurtes kogustes ajalehti, plakateid, reklaame ja muid trükiseid.
Disaineritele meeldib Jan Tschichold ja Josef Muller-Brockmann lõi XNUMX. sajandil uued ruudustikusüsteemid, millest kujunes välja nn Šveitsi stiil või rahvusvaheline tüpograafia stiil.
Nad lõid modulaarse struktuuri, kus oli piisavalt tühikuid.
Miks on võrgud veebidisainis olulised?
Seoses veebidisaini protsessis rakendamisega aitab ruudustikusüsteem järjestikuste veergude ja ridade abil lehe komponente joondada.
Kui see hierarhiline alus on paigas, saame liideses järjestada teksti, graafikat ja praktiliselt kõiki muid kujunduselemente järjepidevalt ja järjestatult.
Veebi ja mobiili jaoks disainimisel on meie arendatavad lehed või liidesed mõeldud erinevate kasutajavoogude hõlbustamiseks.
Võred hõlbustavad võrreldavate saitide jaoks traatraamide, mallide või standardsete paigutuste kujundamist, kuna kasutajavood sisaldavad sageli mitut ekraani või akent, mis kordavad sarnaseid kujundusskeeme ja paigutusi.
Ruudud võimaldavad lehtede horisontaalset ja vertikaalset jaotamist ridade ja veergude kaudu. Võresüsteemid on süstemaatiline tehnika, mis võimaldab disaineritel paigutada esemeid korrapäraselt ja arendada komponente mitme lehe või paigutuse jaoks modulaarselt.
Lisaks loovad ruudud fikseeritud mõõtühikute standardiseeritud komplekti, mis määravad iga kujunduselemendi suuruse, vahekauguse ja joonduse.
Võrgupaigutused tekkisid trükikujunduses, kui neid kasutati koos tüpograafiaga käsitsi kirjutamise korraldamiseks paberil, eriti raamatutes ja ajalehtedes.
Sellest hoolimata tuginevad paljud kaasaegse disaini aspektid ruudustikupõhistele paigutustele ja arenevad nendel. See hõlmab veebidisaini, liidese kujundust ja, mis kõige tähtsam, tundlikku disaini.
Enne kui hakkame uurima, kuidas ja miks on ruudustikupõhised paigutused meie kui veebiarendajate kujundamisprotsessis nii hindamatuks tööriistaks, vaatame lähemalt ruudustikusüsteemist koosnevaid füüsilisi komponente.
5 erinevat tüüpi võreid
Võred jagunevad viide erinevasse kategooriasse. Kuigi mõned on veebidisaini jaoks sobivamad kui teised, olete peaaegu kindlasti kõiki viit oma loomingulise karjääri jooksul mingil ajal kasutanud.
1. Hierarhiline ruudustik:
Kõige levinum kasutamine hierarhilised ruudud tegeleb veebidisainiga. Nende võrgustike eesmärk on seada üksused prioriteediks. Need võivad olla kohandatavamad, kuid toetuvad korraldamisel ikkagi veergudele, ridadele ja moodulitele.
Need on loomulikult üles ehitatud nii, et esmalt paigutatakse lehel kõige olulisemad elemendid ja seejärel ümbritsetakse need ruudustikuga.
Uudiste ja meediaga seotud veebisaidid kasutavad sageli seda ruudustiku stiili, et aidata juhtida tähelepanu teatud artiklitele ja postitustele. Mõelge, kuidas The New York TimesileKoduleht kasutab hierarhilist võrgustikku.
2. Moodulvõrk:
Moodulvõrgud on sarnased veeruvõrkudele, kuid sisaldavad ridu. Kuigi ajalehed ja ajakirjad kasutavad materjali paigutamiseks sageli modulaarseid võrgustikke, võib neid kasutada ka veebisaitide ja rakenduste kujundamisel, näiteks tooteruudustiku jaotises.
Mõelge, kuidas Everlane korraldab oma teksakollektsiooni modulaarse ruudustiku abil. The Youtube koduleht on veel üks näide saidist, mis kasutab moodulvõrku.
Kuigi need sisaldavad vasakpoolset külgriba sagedaste linkide jaoks, nagu trendid ja tellimuste jaotised, on kogu videomaterjal üles ehitatud neljaveerulises modulaarses ruudustikus, et maksimeerida videote arvu, mida vaataja võib vaadatava sisu otsimise ajal vaadata.
3. Veeru ruudustik:
Veeruruudustikud aitavad korraldada teksti, pilte ja graafikat. Veebisaitidel võib sihtlehe laiust hõlmavate veergude arv ulatuda kahest kuni kaheteistkümneni või isegi kuueteistkümneni.
Tekst ja graafika võivad asuda ühes veerus või hõlmata mitut veergu. Vihmaveerennid on sammaste vahelised ruumid; need peaksid olema kõigis ühesuurused.
Veergude ruudud ei pea olema sümmeetrilised. Näiteks võite kasutada asümmeetrilist veergude ruudustikku, milles teatud veerud on teistest kitsamad, mis võib olenevalt teie kujunduse hierarhiast olla kasulik.
Asümmeetrilisi veeruruudustikke kasutatakse sageli ajaveebi veebisaitidel, kus esmane materjal sisaldub paigutuse suuremas kahe kolmandiku mahutis, samas kui väiksem kolmandik võib kuvada teavet ajaveebi ja selle autori kohta.
Mõelge, kuidas selle ajaveebi avaleht kasutab asümmeetrilist veergude võrgustikku.
4. Käsikirja vöö:
Kõik raamatud, ajalehed ja perioodilised väljaanded on üles ehitatud käsikirjade võrgustikule. Lisaks nimetatakse seda üheveeruliseks ruudustikuks, see on üks lihtsamaid ruudustiku mustreid ning sobib hästi suurte pidevate teksti- ja graafikaplokkide jaoks.
Sisuliselt on see tohutu ristkülikukujuline ruum lehe sees, mis toimib teksti piirdekastina.
5. Algtaseme ruudustik:
Lähteruudustik on veidi tehnilisem; selle määrab teksti asukoht. Sisuliselt viitab see juhtjoonele või tühikule lähtejoonte vahel.
See ruudustik aitab pakkuda lugejale positiivset lugemiskogemust, eriti kui lugeda on palju sisu. Kuigi see on trükikujunduse, näiteks raamatute küljenduse jaoks ülioluline, on see sama oluline ka veebikujunduse jaoks.
Mõelge reavahede mõjule sihtlehe loetavusele. Kui tekst on liiga tihe, võib kasutaja saidi täielikult hüljata. Säilitage sobiv teksti ja tühiku kombinatsioon.
4 parimat tava võrgustike kasutamiseks veebidisainis
Veebidisaini vallas on palju sõnu ja ideid, millega tutvuda ja millest aru saada, kuid mitte rohkem kui ruudustiku tähtsus veebidisainis.
Mitme ruudustiku struktuuri sisaldava komponendi, arvukate saadaolevate võrgutüüpide ja kognitiivsed protsessid Olles seotud teie sisu ja kujundusega kõige paremini sobiva ruudustikutüübi määramisega, on palju vaja arvestada.
1. Järgige kolmandate reeglit:
Teine veebidisaini kontseptsioon on Kolmeksjagamise, mis aitab disaineritel luua esteetiliselt tasakaalustatud ruudustiku paigutusi ja piltide paigutust.
See lähenemisviis katab ruudustiku, mis jagab kujundusala horisontaalselt ja vertikaalselt kolmandikuks. See jagab mis tahes pildi või lehe lõigu/ruumi üheksaks võrdseks segmendiks, mis on määratletud joonte lõikepunktidega.
Kolmandate reeglite kohaselt juhib "huviobjektide" asetamine pildi "kolmandikule" kasutaja tähelepanu neile võimsamal ja esteetiliselt atraktiivsemal viisil.
Veebikujunduses kasutavad disainerid sageli kolmandate reeglite järgimist, et aidata neil teha kõige kriitilisemaid ruudustiku- ja paigutusvalikuid.
2. Austage kuldset suhet:
Paljud disainerid kasutavad oma ruudustiku kujunduse skaala, tasakaalu ja paigutuse optimeerimiseks kuldse suhte nime all tuntud kontseptsiooni. The Kuldne suhe on proportsioon, mis kõige lihtsamal kujul võrdub 1.6180-ga.
Kuldne ristkülik on ristkülik, mille pikkus on 1.6180 korda laius kuldse suhte alusel. See näitab, et kui elemendi laius on 100 pikslit, on pikkus 161.80 pikslit.
See kehtib nii külgnevate piltide, objektide või vormide laiuse ja pikkuse kui ka üksiku kujundi või elemendi arendamise kohta.
Kuldse suhte abil saavad disainerid muu hulgas määrata, kuidas jagada lehe horisontaalset ruumi ja kui palju ruumi jätta igale tükile ja selle ümber.
Üks juhtum, kus see võib juhtuda, on veebisaidi kangelase jaotise arendamine. Kui valite täislaiuse paigutuse ja jagate selle vertikaalselt kaheks osaks: kangelase pilt ja kangelase tekst.
Lisaks peate selle mikrokujundusprotseduuri käigus otsustama pildi suuruse, teksti suuruse ja nii edasi.
Esmalt peate siiski otsustama veergude suhte üle, mis aitab teil määrata pildi ja kirjatüübi suurust, samuti seda, milliseid elemente soovite rohkem või vähem rõhutada või kas soovite igaühele võrdselt keskenduda.
See on siis, kui mängu tuleb otsustada, kuidas kangelase osa jagada, selle järgi, milline komponent peaks olema suurem või silmapaistvam. Siin on kuldne suhe kasulik.
See juhend võtab arvesse mitmesuguseid elemente, sealhulgas lehe laiust, sisu suurust ning moodulite arvu ja suurust, mida sisu ruudustikul vajab.
Ligipääsetavuse osas suunab Golden Ratio kasutaja tähelepanu teatud punktidele või asukohtadele ekraanil, mis on täpselt see, mida disainerid püüavad teha, kui nad kehtestavad ja rakendavad oma sisu- ja kujundusskeemi teabehierarhiat.
3. Tehke ruumi valgele ruumile:
Veebidisaineritena mõistame, kui kriitiline on tühi ruum loetavuse, teabe hierarhia, skaleeritavuse ja üldise hingamisruumi osas disainikomponentide ümber ja vahel.
Arvestades valge ruumi olulist rolli paigutuse kujundamisel, on loomulik, et veebisait ja paigutuse ruudustikud kasutavad seda.
Ruudustiku paigutust ei määra sisuliselt mitte ainult veergude ja ridade laius ja kõrgus, vaid ka nendevahelise tühiku laius ja kõrgus, mida nimetatakse vahekauguseks.
Näiteks üks ruudustikupõhine disainimeetod, mida veebidisainerid sageli kasutavad, on tuntud kui 8pt ruudustikusüsteem, mis on loodud Google'i materjalidisaini juhistes.
Materjalikujunduse meetod kasutab 8x8-punktilist ruudustikku. Iga veebisaidi element on praktikas kaheksaga kordne/jagatav.
Põnev on see, et see reegel ei kehti mitte ainult ruudustikuüksuste (nt fotod, nupud või tekst), vaid ka tühikuühikute kohta, mis peavad olema kaheksa kordajad.
Seetõttu peate veergude või ridade paigutamise kaalumisel ka kvantifitseerima ja määrama tühiku koguse, antud juhul kaheksa kordades.
See näitab, kui kriitiline on tühi ruum ruudustiku kujundamisel kuni selleni, et selle mõõtmed ja nõuded on sama olulised kui veerud ja read.
Elementor Expertsi koduleht näitab, kui võimas võib tühiruum olla, eriti veebisaidi avalehel.
Kuna kodulehe lõppeesmärk on sundida vaatajaid tegutsema ja platvormi Experts kohta tundma õppima, toetab tühik seda protsessi teabe prioriseerimisega.
See tähendab, et kuna platvormi väärtuspakkumine on avalehel niivõrd esile tõstetud ja “aeg särada”, saavad veebisaidi külastajad kohe aru, millist väärtust nad kogevad.
4. Tunnustatud disain:
Tundlik disain viitab lehe või saidi paigutuse ja sisu võimele kohanduda mitme seadme ja brauseri suurusega. See tähendab, et kui ekraani suurus muutub, muutub ka veergude arv ja loomulikult nende laius.
Siiski on standardsete disainivõrkude ja reageerimisvõimeliste võrestiku vahel olemuslik vahe.
Kuigi kujundusruudustikud on seatud lähteruudustikule, on reageerivad ruudustikud paindlikud, võimaldades ruudustiku veergudel muuta suurust ja asukohta olenevalt kasutaja vaateaknast.
Fikseeritud ruudustiku korral viib ekraani suuruse alandamine automaatselt järgmise murdepunktini ning ka külgmised veerised vähenevad automaatselt kuni järgmise katkestuspunktini.
Tundlik ruudustik ehk sujuv ruudustik on see, mida näete, kui üksused muutuvad dünaamiliselt vastuseks brauseri/ekraani kahanemisele. Reageerivad ruudustikud joondavad ja korraldavad teie materjali loogiliselt.
See tähendab, et kui vaateava väheneb, vähenevad proportsionaalselt ka paanid ja ruudustiku sisu.
Võrgu anatoomia – mida peate teadma?
Kõigil veebilehe kujunduse ruudustikul, olenemata nende suurusest või keerukusest, on teatud komponendid, mis iseloomustavad neid ruudustiku paigutustena:
1. Veerised:
Veerised on negatiivne ruum vormingu ja sisu välispiiri vahel, mida mõnikord nimetatakse "välisteks vihmaveerennideks". Mobiilseadmetes on külgmised veerised tavaliselt 20–30 pikslit laiad ning erinevad lauaarvuti ja mobiili vahel märkimisväärselt.
Margin võib olla tuttav HTML-i ja CSS-i keelepruugiga, kus seda kasutatakse atribuudina kujunduselemendi või konteineri ümber ruumi loomiseks. Pidage meeles, et veerise suurus ei mõjuta kõrvaloleva teksti suurust.
See lihtsalt määrab elemendi ümber oleva ruumi suuruse, mis paigutuse ruudustiku kontekstis viitab selgesõnaliselt ruumile vormingu ja sisu välispiiri vahel.
2. Vihmaveerennid:
Vihmarennid on jooned, mis jagavad veerud ja read üksikuteks üksusteks. 20 pikslit on üsna tüüpiline renni suurus. Vihmaveerennide eesmärk on jätta veergude ja ridade vahele (mis tahes suurusega) negatiivne ruum.
Kõige lihtsamas mõttes on vihmaveerennid veergude ja ridade vaheline ala. Vihmaveerennid on eriti olulised müüritise paigutuste puhul, kus renni laius on üks kriitilisemaid elemente.
3. Moodulid:
Moodulid on ruumitäitvad üksused, mis moodustuvad ridade ja veergude ristmikul. Moodulid ehk sisumoodulid, nagu neile sageli viidatakse, on lehe ehitusplokid, kuna iga kujunduselement (näiteks tekst, graafika ja nupud) mahub ruudustiku ristkülikukujuliste mustrite abil loodud moodulitesse.
4. Read:
Nagu võite arvata, on read ruudustiku horisontaalsed osad. Üllataval kombel jätab veebidisain sageli tähelepanuta ruudustiku ridade tähtsuse. See pole aga suurepärane tava.
5. Veerud:
Veerud on vertikaalsed tükid, mis katavad sisuala kõrgust ja mida peetakse ruudustiku "ehitusplokkideks". Veerud eristab see, et mida rohkem veerge ruudustikus on, seda paindlikumaks ruudustik muutub.
Käsitleme seda varsti üksikasjalikumalt. Kuigi veergude laiused on alati kujundaja otsustada, on levinud tava kohaselt 12 veergu lauaarvutis, 8 tahvelarvutis ja 4 mobiilis.
Enamiku ruudustiku veergude laiused on 60–80 pikslit. Veeru laius mõjutab oluliselt teie tegeliku sisu laiust.
Korduma kippuvad küsimused: Website Design Grids 2024
👉 Milline on parim ruudustik veebidisaini jaoks?
Bootstrap on libe, otsekohene ja võimas mobiilile mõeldud esiotsa raamistik, mis muudab veebiarenduse kiiremaks ja lihtsamaks. Meie jaoks on see kõige populaarsem valik. Sageli kaksteist veergu koos taandega. Standardiseeritud ja arusaadav meetod.
✅ Mis on ruudustiku paigutusega veebisait?
Veebisaidi ruudustik on tehnika lehel materjali järjestamiseks ja joondamiseks. See toimib teie kasutajaliidese luustiku või põhiraamistikuna. Veebisaidi ruudustikud aitavad disaineritel teha kujundusvalikuid ja luua positiivse kasutajakogemuse.
👉 Kuidas veebisaidi ruudustikud töötavad?
Ruudustikusüsteemid on veebidisainis kasutatavad nähtamatud raamistikud, mis koondavad kõik lehel olevad komponendid kokku. Ruudustik toimib raamistiku või armatuurina, mille ümber kujundaja saab paigutada visuaalsed komponendid (pildid, glüüfid, lõigud jne) loogiliselt ja kergesti omastatavalt.
👀 Kuidas täiustab ruudustiku paigutus veebidisaini?
Võred võivad märkimisväärselt lühendada ja pikendada teie projekteerimisaega, toimides juhisena objektide paigutamise, positsioneerimise ja skaleerimise kohta. Selle asemel, et osi meelevaldselt panna, kuni saate meeldiva koostise, peaks ruudustik aitama teil leida loomulikku lahendust.
✅ Miks disainerid ruudustikke kasutavad?
Võred muudavad disainerite jaoks ideede kallal koostöö tegemise lihtsamaks, tuues välja, kuhu tükid tuleks paigutada. Võrgusüsteemid aitavad lahti siduda liidese projekteerimistööd, võimaldades mitmel disaineril töötada paigutuse erinevate komponentidega, jäädes samas kindlaks, et nende töö on sujuvalt integreeritud ja järjepidev.
👉 Mitu veergu peaks veebikujunduses ruudustikul olema?
Kuigi veergude arvu järele pole formaalset vajadust, kasutab enamik veebisaitide ruudustiku arhitektuuri 12-veerulist võrgustikku. Lisaks sisaldab veebisaidi ruudustik veergude vahel tavalist ruumi, mida nimetatakse vihmaveerennideks, ja ruudustikust väljapoole jäävat vahet nimetatakse veeristeks.
💁 Miks me kasutame 12 veeruga ruudustikku?
Enamiku Bootstrapi versioonide jaoks on vaja ainult 12 veergu, et mahutada järgmist: Paigutuse loomine on lihtsustatud. Mobiilisõbralik paigutus. Proportsionaalsed plokid sümmeetria säilitamiseks.
✔️ Mis on 12 veeruga ruudustik?
Veebisaitide puhul võivad disainerid kasutada sihtlehe laiuse katmiseks kahte kuni kahteteist või isegi kuusteist veergu. Nad võivad paigutada teksti ja graafikat ühte veergu või mitmesse veergu.
👉 Kuidas sina ruudustikumalle kasutad?
Atribuut grid-template-areas määrab ruudustiku paigutuse alad. Saate ruudustiku üksusi nimetada, viidates neile atribuudis grid-template-areas atribuudi grid-area kaudu. Apostroofid tähistavad iga piirkonda. Nimeta ruudustikuobjektile viitamiseks kasutage punkti sümbolit.
Quick Links:
- Parimad võrguühenduseta veebisaitide koostajad
- Veebisaidi loomise kulud
- Kuidas teha isiklikku veebisaiti
Järeldus: veebisaidi kujundamise ruudud 2024
Nüüd, kui saate aru, miks ruudustikud on veebidisaini jaoks kriitilise tähtsusega ja kuidas neid oma veebisaidil kasutada, on aeg alustada mõõtmist ja joondamist.
Pidage meeles, et see põhimõte kehtib iga kujunduselemendi kohta: vidinate ja komponentide joondamine horisontaalselt ja vertikaalselt, tekstielementide joondamine lähtejoonega ja igat tüüpi sisu õige tsentreerimine veebisaidil.
Teie disainiprotsessi ja lõpptoodet hinnatakse väga ning ootame põnevusega, mis teil laos on.
