Ruudustiku esimene kujundus: kuidas luua vertikaalset rütmi ja harmooniat
Kui kuulete ruudustikku, mis kõigepealt meelde tuleb? Enamiku disainerite jaoks on see sageli horisontaalne kontseptsioon, mille veerud üle lõuendi asuvad. See kehtib eriti veebi- ja digitaalse disaini projektide peale mõeldes.
Aga kuidas on vertikaalsete võredega? Sama oluline on luua voog ka lehe üles ja alla. Ja võrgusüsteemidega saab seda teha mitmel viisil.
Uurige Envato elemente
Miks kasutada vertikaalset ruudustikku?
Kui te ei mõtle projekteerimisprojektides juba vertikaalsetele võredele, võiksite küsida, miks see on oluline. Vertikaalne ruudustik aitab saavutada lehel vertikaalset rütmi ja harmooniat.
Võrgustik aitab määrata ja kehtestada nii trükitud kui ka digitaalse kujunduse reegleid. See struktuur hõlbustab kujunduse joonistamist ja pakub juhiseid lõuendil oleva teksti ja muude objektide vahekauguseks, elementide paigutamiseks ja suuruse määramiseks. Vertikaalne ruudustik loob ka veebisaidil rütmilise mustri ja voo, kui kasutajad kerivad. (See võib olla eriti oluline väiksemates seadmetes.)
Üldine efekt on kujundus, mis juhul, kui te selle visandate, on traatkarkassi stiilis voolav välimus. Elemendid on paigutatud hästi, üleminekud on hõlpsasti nähtavad ja arusaadavad ning kujunduse erinevad osad on eesmärgipärased ja osa plaanist.
Vaadake ainult ülaltoodud raamiraami. Saate joonistada visandile jooni nii, et iga element joondub samal tasapinnal. See visuaalne voog on täpselt see, mida soovite saavutada.
Ruudustik teksti jaoks
Vertikaalne ruudustik on eriti oluline teksti puhul. Seda saab koopiate voo loomiseks kasutada mitmel viisil. See kõik taandub teie põhivõrgule.
Baasvõre on kujuteldav võrdselt paigutatud horisontaaljoonte komplekt - mõelge, et valitsetud paber, mida kasutasite klassikoolis - see tekst joondub. Tähtede põhi (lähtejoon) asetseb nendel ridadel nii, et tekstiridade vahel oleks võrdsed vahekaugused ja et ka tekstiveerud asetseksid üksteisega reas.
Siin on paar rakendust:
- Looge kaks veergu ja hoidke oma tüüp algtasemel.
- Kasutage matemaatikat, et joondada igat tüüpi, sõltumata suurusest, algtasemega.
Aga kuidas sa seda teed? See algab väikese “tüpograafia matemaatikaga”. (Mõiste on prinditud või digitaalprojektide puhul enam-vähem sama.)
- Valige põhiteksti font ja suurus.
- Seadistage ruutjooned või tekstiridade vaheline suurus.
- Kasutage sama proportsiooni ka muude disainilahenduse vahede korral.
- Elementide jaoks võite kasutada ka lähtejoone ruudustikku. Nii et kui teie kehatekst on 16 punkti, võib suurem tekst olla kahekordne rea kõrgusega.
See põhivõrgu matemaatika teeb ka midagi muud. See aitab teil luua tüpograafiahierarhiat, kuna iga uus teksti tase on virnastatud võrdeliselt teiste teksti tasanditega.
Ekraanide või paneelide võred
Vertikaalsed ruudustik on üks olulisi vahendeid lehekülgede kaupa kujundamisel, näiteks veebisaidid, millel on parallaksi kerimise funktsioonid. Iga leht peab olema ühesuurune ja tundma sama, et iga uus leht oleks pidev osa samast loost ja esteetiline.
Enamik disainereid teeb seda värvi või animatsiooni abil, et ekraanid iga kerimisega oma kohale klõpsaksid. Kui elemendid on joondatud ideaalses vertikaalses orientatsioonis, on iga ekraan vaadeldav korraga ja pole poole peal, poolel ekraanil. See vertikaalne ruudustik loob õige harmoonia ja aitab kaasa korralikule loetavusele ning soovitavamale kasutajakogemusele.
Selle kujundusstiili raamistik sõltub heast vertikaalsest voolust. Elemendid peavad olema paigutatud sarnaselt kasutaja kerimisega. Tüüp peaks langema sarnases veeruvormingus ning tähtede ja elementide suurus ja vahekaugus peaksid olema ekraanilt erinevad.
Need väikesed näpunäited on lõime, mis hoiab kasutaja tähelepanu keskpunktis ja loob visuaalse mõistmise ning voolab ühest teabejaotusest teise.
Kaardivõred
Kaardilises kujunduses on aasta üks populaarsemaid ja trendielemente ning need töötavad tänu vertikaalsele võrele. Vertikaalne ruudustik aitab teil luua ühes konteineris kaardi, millel on selgelt eristatav tunne, õige vahekaugus ja mugav koht mitme elemendi jaoks.
Mõelge kaardiga vertikaalse võre kasutamiseks kõikidele kohtadele:
- Kaartide vahe kujunduses. (Üks kaart mobiilseadmete ekraani kohta).
- Kaardi sisepiiride vahe selliste elementide vahel nagu pildid, tekst või nupud.
- Iga elemendi suurus.
- Tekstihierarhia ja suurus.
Võrgud e-kaubanduse jaoks
Vertikaalsed (ja horisontaalsed) võred on e-kaubanduse veebisaitide jaoks populaarne valik, kuna neil on erinev organisatsiooniline voog. Esemeid saab paigutada kõrvuti, et kasutajad saaksid enne ostu sooritamist võrrelda ja valikuid teha.
Vaadake tähelepanelikult ja tõenäoliselt leiate, et ka ülejäänud veebisaidi raamistik järgib sama vertikaalset rütmi. Peene võrgu kasutamine on mugav ja paneb ostjad tundma end mugavalt, tänu toredale korraldusele usaldab disaini ja loodetavasti teeb ostu.
Võrgustikud üldiseks korraldamiseks
Sellepärast, et kasutate võre, ei pea kujundus olema müüritise ega võrepõhise ilme. Kasutage võre mitmeks ja pooleks, et luua huvitavaid elementide kombinatsioone, mis langevad harmooniasse.
Ja lõhkige ruudustik iga natukese aja tagant. Mõnikord satute olukorda, kus ruutvõrk lihtsalt ei paista õigesti, eriti kui kirjutada puuduvaid tõusjaid või laskumisi. See on ok, kui seda siis natukene näpistada. Pidage meeles, et isegi kui kasutate võrku ja see tundub naljakas, häirib see harmooniat ja voolu. Tehke need visuaalsed parandused ja korrigeerimised vastavalt vajadusele.
Järeldus
Miks on vertikaalne rütm ja ruudustik nii olulised? Teksti puhul aitab see kasutajal lugemist väsitavalt hoida. Muude elementide jaoks loob see selge harmoonia ja voolavuse.
Inimestele meeldib oma olemuselt organisatsioon ja nad soovivad, et kujundused oleksid hõlpsasti arusaadavad. Hea võrgusüsteem aitab teil seda hõlpsalt saavutada. Kui ruudustik on loodud, on elementide paigutusi, suurusi ja kujundeid hõlpsam ette kujutada, kuna saate need juba joonistatud raami külge sobitada.
Pildi allikas: baldiri.
