Kuidas rikkuda võrku segamini ajamata
Võrgustik on peaaegu iga veebisaidi kujunduse alus. Need nähtamatud jooned aitavad luua rütmilist ruumi ja visuaalset voogu, nii et iga projekt kannab endas korralduse ja harmoonia tunnet.
Kuid te ei pea 100 protsenti ajast võrku kinni pidama. Võite isegi aeg-ajalt ruudustikku lõhkuda, tegemata täielikku jama. Siit saate teada, kuidas seda teha, hoides samal ajal veebisaiti, mida on rõõm kasutada!
Võrgusüsteemide mõistmine
Enne ruudustiku purunemist peate mõistma, miks see on olemas. Sõltumata sellest, millist tüüpi süsteemi te kasutate, on ruudustik projekteerimisprotsessi oluline osa. Ruudustik aitab teil otsustada, kuhu paigutada elemente, kuidas elemendid võivad erinevatel ekraanisuurustel puruneda või virnastada, ning aitab üldiselt asju korrastada.
Võre on nähtamatu vundament, mis aitab teil kujundada midagi, mis tundub korrastatud, puhas ja mida kasutajatel on lihtne jälgida.
Disainerid on võrke kasutanud peaaegu igavesti. Minge tagasi ja vaadake vanu ajalehti ja raamatuid - tekst on veergudesse rivistatud. Isegi vanad kirjutised tahvelarvutitel sisaldavad seda harmoonilist ülesehitust.
Võred saavad teha järgmist:
- Hoidke sisu korrastatud ja voolav. Kasutajad on harjunud elementidega, mis joonduvad horisontaalselt ja vertikaalselt ning järgivad vasakult paremale (ja tagasi), ülalt alla lähenemist lugemisele.
- Muutke projekteerimistöö efektiivsemaks, sest näete lihtsalt, kuhu paigutada elemendid ja nendevaheline ruum.
- Aidake veebisaidil ühelt lehelt järjekindel välja näha.
- Looge elementide vahel just õige ruum, nii et disain jääks muutumatuks.
- Tasakaal on vähem väljakutsuv. Järgige ruudustikku ja elemendid langevad peaaegu paika, kui skaleerite elemente määratud parameetrite piires.
Miks te siis mõtleksite isegi võrgu katkestamisele?
Võre purustamine võib konkreetsele elemendile lisa rõhku panna. See on üks neist kujundusreeglitest, mis võib kerge vaevaga purunemisel projekti tähendust paremaks muuta. Võre purustamisel on oluline järgida paljusid teisi disaini “reegleid”. (Kasutage seda kõige paremini ära.)
Kihtide loomine
Kihielemendid võimaldavad teil ruudustikust eemalduda, säilitades disaini ühtsuse. Kuna elemendid puudutavad ja ristuvad tasapindadega, tunnevad nad end ühe ja sama osana.
See tehnika on viimasel ajal üsna populaarseks saanud tänu Material Design mõjutustele ja rohkematele disaineritele, kes kasutavad võimalusi ekraanil olevate elementidega. See võib olla keeruline; elemendid, mis mingil viisil kattuvad, peavad efektiivse töö tagamiseks eristuma.
Cmmnty teeb seda laia joone ja tekstiga, luues omamoodi nihke tasakaalu, kasutades tüpograafiat ja tühikut. Kujunduses võite peaaegu näha mitut pisikest ruudustikku, näiteks vasakul asuvate tekstielementide navigeerimine ja joondamine, kuid puudub ühtlane muster. See ruudustiku purustamine on täiesti tasakaalustatud ja kasutajale hõlpsasti arusaadav.
Kujundamine eesmärgipärane valge ruum
Võrgustiku teelt eemaldumise üks põhjus on luua rohkem valget ruumi, rõhutades õigeid kohti. See võib olla tekstielementide või kaubamärgi või tähtkujutise esiletõstmiseks.
Üks asi, mida tihti võrevõrgust eemaldamisel eksitakse, on paaritu joondamine. Kui õmblusteta joondamine võib olla ruutvõrgu kasutamise lahutamatu osa - horisontaalselt või vertikaalselt -, saab elemente ruudust eemale liikudes joondada.
Kui tühikut ruudu lisamiseks tühja ruumi lisamiseks kaaluge, et kõik muu oleks joondatud. See aitab luua elementide klastri, mis tõmbab tähelepanu, näiteks tekst ja üleskutse ettevõttele Surfers Against Rewage, kus on piisavalt ruumi, et element oleks teistest olulisem. Ülaltoodud näide töötab suurepäraselt, kuna tühik aitab kasutajaid tegevusele kutsuda.
Pange elemendid konteinerisse
Kui elemendid on mingil viisil suletud, tunnevad nad end koos isegi siis, kui võre on katki. See võib hõlmata värvilise tausta kasutamist, elementide kastidesse panemist või foto või video teksti kihistamist, nagu näiteks ülaltoodud näites.
Tore asi mis tahes konteinerielemendi juures on see, et see annab kasutajatele näpunäite, et kõik see on mingil moel seotud. Elemendid seovad.
Võrgust lahti minnes konteineri stiilis on visuaalselt huvitav viis puruneda, mis sageli välja näeb mängukaardina. Paljud konteineri stiilis kujundused on lõpuks täiesti sümmeetrilised; Võrgust lahti laskmine on kindel viis disaini sädeme lisamiseks ja monotoonsuse purustamiseks.
Mängi konkreetsete elementidega
Parim viis võrgust lahti minna on lihtsa detailiga. Kui kogu kujundusel puudub võrgusüsteem, siis on teil tõenäoliselt jama. (Ja just seda me üritame vältida.)
Alustage tähelepanu juhtimiseks tausta- või aktsendielemendiga. Lahedad luiged või huvitavad kujundid on hea koht alustamiseks. Elemendi esiletõstmiseks kaaluge ka julge värvi lisamist.
Nodimaa teeb seda tõhusalt paksude nurkade all, et näidata kasutajatele kogu veebisaidi müüki. Need jooned sisalduvad mõnikord piltides ja ristavad mõnikord tühikud piltideks. Variatsioon on visuaalselt huvitav ja tagab, et aeg-ajalt võre katkemine on piisavalt ebatavaline tähelepanu juhtimiseks, kuid sobib ülejäänud kujundusega piisavalt, et tunneksite, nagu see kuulub.
Liigutage see ümber
Kasutage liikumist ja liikumist, et võtta elemendid ruudustikust välja või võib-olla isegi natuke seda nihutada. Lihtsad animatsioonid või elemendid, mis töötavad koos videoga, võivad muuta ruudustiku vähem ruudukujuliseks.
See kontseptsioon töötab tõesti hästi kujundusega, mis keskendub ühele elemendile.
Ülaltoodud Trippeo rõhk on reisikulude graafikul. See ei muuda asukohta kogu saidi kujunduse ulatuses. Kuid kõik muu selle ümber liigub, alates avaekraanil olevast videost kuni teabeni rakenduse kohta, mis suumib klõpsatava parallaksi kerimise abil. See element hoiab kokku ülejäänud tasakaalust väljas, ruudustikuta stiili ja moodsa kapriisi ja elegantsi.
Looge võrgu murdmise illusioon
Võre saab puruneda ilma seda üldse purustamata.
Kasutage väikest vertikaalset ruudustikku, et luua ruudul püsides huvitavaid kujundite ja joonduste kombinatsioone (isegi kui see ei näe välja).
Tore, et seda tüüpi kujunduse loomisel võrku ei purune, on see, et säilitate kõik võrgupõhise kujunduse eelised, tehes samal ajal midagi, mis on pisut erinev. Parimate valikute hulka kuuluvad sageli kujundused, mis töötavad ruudustikuna mitu korda - kolm, viis, seitse jne - nii, et kujundid ei joonduks kunagi täpselt, kuid tunneksid end alati sarnastena.
Marche Notre Dame, ülal, kasutab seda kontseptsiooni, et näidata pilte oma asukohast. Võrguvälist ruudustikku kasutatakse vertikaalselt ja horisontaalselt, et luua kollaaž, millel on just õige valge ruum. See on hea viis murda välja samad-vanad müüritise mustrid fotode jaoks, mis näivad olevat praktiliselt kõikjal.
Järeldus
Võre purustamine pole alati lihtne. Mitu korda võib see muutuda üsna segaseks.
Parimaid kasutusviise rakendatakse ühele lehele või elementide komplektile, et kujundus käest ei pääseks. See on abiks ka reageerimisvõime mõtlemisel ja selle kohta, kuidas tulla toime elementidega, mis väiksematele ekraanidele ei pruugi hästi sobida, kuna teil pole nii palju veidrusi, millega hakkama saada.
Võre purustamine - kui see on hästi tehtud - võib olla lõbus ja kaasahaarav viis proovida midagi muud.
