Kujundus101: tugevate joonduste kasutamine
Täna uurime disaini ühte peamist põhimõtet: joondamist. See petlikult lihtne teema on tegelikult üsna keeruline ja kuulub tänapäeval disainerite seas kõige tähelepanelikumalt.
Kindel arusaam sellest, kuidas ja millal teatud joondusi kasutada, muudab teid koheselt paremaks disaineriks ja jääb põhialuseks kõigele, mida loote kogu ülejäänud karjääri jooksul.
Uurige Envato elemente
Sissejuhatus joondamisse
Paljudele võib arutelu joondamise üle kõlada meelevaldse harjutusena. Selline põhiline disaini teooria on kindlasti ainult nende inimeste jaoks, kes pole kunagi oma elus midagi kavandanud, mitte aga professionaalse kogukonna jaoks, kes selliseid saite kasutab. Õige?
Ma täiendaksin argumenti, et selline arutelu on mõeldud algajatele, väites, et visuaalse joonduse kindel mõistmine on igat tüüpi disainilahenduste jaoks ületamatu alus. See on omamoodi teadmine, mida kord omandatud kujunduse korral saate kasutada disainerina.
Hoolimata mõttest, et need kontseptsioonid on meie, disainerite, keskmes, näib, et joondamine on enamiku halva kujunduse esmane allikas, mida täna veebis näen.
Iseõppinud disaineritel on joondamiste kasutamise kohta sageli intuitiivne arusaam, kuid see võib ja õnnestub ilma selgesõnaliste teadmisteta selle varundamiseks.
Vooderda asjad üles
Joondamise peamine idee on meele tujukalt lihtne: joonda asjad omavahel kokku. Väljaspool orgaanilist disaini, mis on täiesti erinev teema, peaks iga elemendiga, mille te lehele panete, kaasnema loogiline mõttekäik selle paigutuse osas.
See on jällegi põhiline värk, eks? Kõik juba teevad seda ... eks? Vale. Mõelge järgmisele saidile, mis hiljuti esitati meie CSS-i galeriisse. Ma ei kasuta seda mitte meeleoluka näitena, vaid õppevahendina. Disainer on fantastiline tüüp, kes alles alustab oma tegevust. Ta täiendab oma oskusi iga päev ja on õpihimuline.
See näide on äärmiselt tüüpiline ja täpselt selline asi, mida me iga päev galerii esildistes näeme. Esteetiline väärtus pole siin halb. Erksad värvid ja huvitavad tekstuurid haaravad teie tähelepanu üsna hästi. Siinne joondus jättis aga tõesti märgi maha.
Siinsed probleemid võivad olla paljudele inimestele raskesti märgatavad. Sel põhjusel soovitan põhikujude uurimiseks alati kujundust lihtsustada. Näete mind seda tegema paljudes artiklites, mida ma disaini kohta kirjutan, ja kindlasti peaksite seda proovima mõne oma kujunduse osas.
Nüüd, kui näeme graafilisi objekte lihtsustatud olekus, saame paremini analüüsida nende poolt kasutatava ruumi mahtu ja lahendada kõik joondamisega seotud probleemid.
Pange tähele, et äkki näivad lehe elemendid hajutatud. Allosas asuv peamine sisuala ei ühti vasakus ülanurgas oleva rippuva ribaga ega paremas ülanurgas hajutatud elementidega. Veelgi enam, Facebooki logo näib olevat väike ja iseenesest luhtunud ning pealkiri on navigeerimise servast, mis on sisuservast eemale jäetud, eemale.
Ehkki see kujundus tundus üsna korralik, kui seda just välja tundsime, näeme nüüd, et see võiks kasutada palju ümberkorraldusi. Siit leiate kaks peamist asja, millega peate tegelema: Joondus ja negatiivne tühik.
Need mõisted on üksteisega äärmiselt tihedalt seotud. Negatiivse ruumiga töötamisel on palju pistmist lünkadele keskendumise ja põhilise sümmeetria rakendamisega. Negatiivse ruumi õige toimimisviisi kohta lisateabe saamiseks lugege minu juhendit negatiivse ruumi kohta kuues versioonis.
Selles artiklis liigume edasi, keskendudes rohkem sellele, kuidas keerukates paigutustes tuttavaid põhijooni kasutada.
Keskjoondamine
Tsentreeritud paigutused on valikumeetod peaaegu igale inimesele planeedil ... välja arvatud disainerid. Mingil põhjusel tundub üksuste tsentreerimine lehel lihtsalt see, mida te peaksite tegema. Kindlasti on disainerite peamine ülesanne lihtsalt esemete tsentreerimine!
Ma sattusin selle probleemiga mõni aasta tagasi, kui andsin arendajale loodud disainilahenduse kodeerimiseks. Kui ta mulle valmis versiooni näitas, oli kõik vasakult joondatud keskele joondatud! Ta selgitas lihtsalt, et ta on alati eelistanud keskpunkti joondamist kõike nii, et see näeks kena välja.
Reaalsus on see, et iga eseme tsentreerimine on kõige nõrgem joondusvalik, mida saate teha.
Järgida pole ühtegi kõva serva, nii et teie silmad peavad tegema palju rohkem tööd, et võtta nii üldine paigutus sisse kui ka konkreetset sisu imada.
Millal kasutada
See ei tähenda sugugi, et keskpunkti joondamist tuleks alati vältida. Olen ka ise neid selle saidi demosid kasutanud. Peamine on teada, millal neid kasutada.
Leian, et keskpunkti joondamine on parim võimalik stsenaarium, kui lehel on seda väga vähe. Mida keerulisem on paigutus, seda vähem töötab keskjoondus. Kui antud lehel pole palju käimas, võib keskpunkti joondamine anda võimsa avalduse.
Vasakpoolne joondamine
Vasakpoolne joondamine, ehkki vaieldamatult igav, on kindlameelne ja peaks olema teie vaikimisi kasutatav joondamine suure osa teie tehtud tööst.
Oleme harjunud nägema sisu vasakule joondatud viisil. Crack avage raamat või ajaleht ja leiate palju vasakpoolseid joondeid. Sirvige rämpsposti kuulutusi, jällegi palju vasakpoolseid joondusi. Näete neid Facebookis, Google'i otsingutulemustes, Twitteri voogudes ja kõigil muudel suurematel veebisaitidel.
Vasakpoolne joondamine valitseb maailma või vähemalt neid ühiskondi, mis loevad vasakult paremale. Te ei tohiks kõigest täielikult vasakpoolsest joondamisest sõltuda, lihtsalt teadke, et see on ohutu marsruut.
Millal kasutada
Kasutage igasugustes olukordades, kuid eriti siis, kui teksti on palju. Vaadake lihtsalt seda lehte, mida praegu loete. Kui see oleks joondatud keskele, oleks see õudusunenägu.
Pange tähele, et eriti veebis ei tähenda millegi vasakule joondamine seda, et te ei saa seda tsentreerida. Näiteks sisaldab HTML-divisjon sageli hunnikut vasakule joondatud lõike ja pilte, kuid koondatakse seejärel lehele CSS-i abil.
Parempoolne joondamine
Parem joondamine on tõenäoliselt kõige haruldasem. Kuna me loeme vasakult paremale, on lihtsalt imelik, kui midagi paremasse serva klammerdub.
Kuid see on täiesti tugev joondus, mida saab oma kujunduses, eriti trükis, põhjalikult kasutada (see kipub veebis veelgi ootamatumaks muutuma).
Millal kasutada
Sageli, ehkki mitte alati, annab õige joondamine ainulaadsuse tunde. Kui kavandate midagi, mis peab silma paistma ja tundma end teisiti, on õige joondamine hea koht alustamiseks.
Veebis joondamise õigustamine
Viimine, mille me välja jätsime, on ilmselgelt õigustatud. See tuleb mängu tugevalt, kui siduda kontseptuaalse elemendina terve sait kokku.
Veebi kujundamisel on huvitav see, et see hõlmab sageli ühtlustuste segu. Tõenäoliselt olete kuulnud, kuidas disainerid soovitavad joondamist mitte kunagi segada, kuid see nõuanne reaalses maailmas lihtsalt ei toimi.
Selle asemel peate tegema otsuseid nii lehe elementide kui ka lehe elementide kohta tervikuna. Pange tähele, kuidas ma seda arutelu alustasin, vaadates saidi tervikuna joondamise näidet, kuid arutasin siis üksikute üksuste joondamise üle.
Kui olete oma lehel teksti ja piltide joondumise üle otsustanud, tähendab selle kõige kokku panemine sageli, et kõik lehel olevad andmed õigustatud joondusele heidetakse. Ehkki teil võib olla kaltsakas serv, võib kõike õigustades lisada selle viimistluspuudutuse, mis algses näites puudus.
Pange tähele, kuidas ülaltoodud saidil on tugev vasakpoolne joondus, kuid kõik paremal küljel on ka ühtne, et luua ühtne õigustatud ilme. Pisike sisselogimisnupp joondub brauseri piltidega, mis asuvad kalendriikooni paremas servas.
See on puhas, professionaalne disain. See ei pruugi kõigi projektide jaoks sobida, kuid ma näen sageli disainereid, kes üritavad seda saavutada ja ebaõnnestuvad, ning tahtsin käsitleda mõnda tõenäolist põhjust.
See on üks põhjusi, miks võrgusüsteemid on nii populaarsed. Kõigi võrgule viskamine tagab, et teie joondused on jämedad ja hõlpsasti järgitavad.
Järeldus
Kokkuvõtteks, kui võimalik, kasutage tugevaid joondusi, mis lihtsustavad teie silmaga teabe liikumise jälgimist. Keskjoondus on vastuvõetav, kuid lehe sisu suurenedes on seda keerukam korralikult teostada.
Pidage meeles, et joondamine viitab nii konkreetsetele üksustele lehel kui ka objektide paigutusele tervikuna. Kulutas iga kujunduse jaoks aega, veendudes, et kõik teie elemendid sobiksid lehel olevatega õigesti. See kehtib vertikaalselt ja horisontaalselt kujunduse kõigist servadest.
