Paano Mag-master ng Layout Design

Isang buong gabay para matutunan ang mga pangunahing kaalaman sa visual na disenyo.

Ang milyong dolyar na tanong: ano ang sikreto sa magandang disenyo?

Maaari tayong maging pilosopo tungkol sa isang ito , ngunit sa pangkalahatan, ang kasabihang 'lihim' sa magandang disenyo ay nakasalalay sa paraan ng pag-aayos mo ng iyong mga visual na elemento, kaugnay ng iyong canvas, at sa isa't isa. Karaniwan, inilarawan lang namin ang disenyo ng layout. Kung saan, kapag naisip mo, ay nasa kahit saan ka tumingin.

Kunin ang layout ng isang magazine, halimbawa. Ang kanilang disenyo ay sumusunod sa isang klasikong sistema ng grid (matututuhan natin ang lahat tungkol sa mga grid sa isang minuto). Ang lahat ay karaniwang nakahanay sa kaliwa, kanan, at sa ibaba. Ang mga column ay partikular na may natatanging makatwirang pagkakahanay na ginagawang hindi lamang kaakit-akit sa paningin ang pahina, ngunit madaling basahin, at makapangyarihan. Ang malalaking heading ay nakakaakit ng atensyon ng manonood, habang ang subheading ay nagmumula bilang isang contrast sa laki upang lumikha ng isang visual na hierarchy ng impormasyon.

Linda Gaom, Behance

Tingnan din: Paano Gamitin ang Digital Image Masking para sa Mas Magandang Disenyo

Lahat ng mga katangiang ito ay gumagawa ng pahina malinis, balangkas, at madaling basahin ang disenyo, at naaayon ang mga ito sa mga tip na pag-uusapan natin sa susunod. Ngunit una, unawain muna natin ang tungkol sa mismong disenyo ng layout.

Ano ang Disenyo ng Layout?

Ang disenyo ng layout ay may kinalaman sa pagsasaayos ng mga graphical na elemento upang maakit ang atensyon ng mambabasa at maihatid ang isang partikular na mensahe sa paraang nakakaakit sa paningin. .

Kaya hindi kami nag-uusapang lugar ng pahingahan, habang ang ibang mga elemento ay nagbibigay ng direksyon.

Ang isang simpleng paraan upang maunawaan ito ay sa pamamagitan ng pagkuha ng halimbawa ng aming website, halimbawa. Ang mga graphic ay malinaw na nakahiwalay sa text, at gayundin ang mga call to action, kaya ang atensyon ng manonood ay nagna-navigate mula sa isang kumpol ng impormasyon patungo sa susunod.

Prinsipyo #5. Gamitin ang Contrast

Tiyaking mayroon kang sapat na contrast sa iyong disenyo.

Nakakatulong ang Contrast na ayusin ang iyong disenyo at magtatatag ng isang kinakailangang hierarchy at magbibigay-diin sa kung ano ang mahalaga.

Higit pa riyan, ang mahusay na paggamit ng contrast ay nagdaragdag din ng visual na interes sa kabuuan ng iyong disenyo. Aminin natin, ang isang layout kung saan ang lahat ay magkapareho ang laki, hugis, o kulay ay magmumukhang boring. Pinapaganda ng contrast ang mga bagay-bagay.

Maaaring contrast ng kulay ang una mong iniisip, gaya ng mainit laban sa malamig, madilim laban sa maliwanag, asul laban sa orange. Ngunit habang ang kulay ay isang napakahalagang prinsipyo ng contrast, mayroon ding mga contrast ng uri, pagkakahanay, at laki. At tandaan, ang kaibahan ay kamag-anak din. Mayroon lamang itong kahulugan sa paghahambing sa iba pang mga elemento.

Narito ang ilang halimbawa ng mga layout na gumagamit ng panuntunang ito sa matalino at magandang paraan. Pansinin ang contrast sa typography, kulay, at maging ang contrast sa laki sa pagitan ng mga elemento.

Source: IAG Reconciliation Action Plan

Prinsipyo #6. Pag-uulit, Pattern, Rhythm

Kapag iniisip natin ang pag-uulit, iniisip natinng parehong elemento nang paulit-ulit.

Ngunit iba ito sa disenyo. Ito ay tiyak na hindi kasing boring nito. Kapag ginamit nang tama, ang pag-uulit ay maaaring aktwal na magbigay ng kapangyarihan sa iyong disenyo.

Subukang tukuyin at muling gamitin ang isang motif sa kabuuan ng iyong layout upang ang iba't ibang bahagi ay madama na konektado at bahagi ng parehong komposisyon. Makakatulong ito sa iyong disenyo na magkaroon ng tema. Sa pamamagitan ng pag-uulit ng mga elemento, hindi ka lamang naghahatid ayon sa mga inaasahan ng iyong madla, ngunit mapapabuti mo rin ang karanasan ng gumagamit. Ang pagiging pare-pareho ay nagiging mas komportable sa mga user.

Magagawa mo ito sa pamamagitan ng pag-uulit ng mga hugis o simbolo. O kahit na isang scheme ng kulay, isang typeface, at parehong estilo sa pangkalahatan.

Ang isang magandang ugali na dapat gawin ay ang paggamit ng isang typeface na may malaking pamilya. Limitahan ang iba't ibang bilang ng mga pattern, mga timbang/estilo ng linya, at mga kulay, at ulitin sa kabuuan. Gayundin, subukang panatilihing pareho ang istilo ng mga imahe at graphics. Halimbawa, gumamit ng mga ilustrasyon ng parehong artist.

Source: Thepentool.co

Iyon lang. Ito ang anim na prinsipyo na tutulong sa iyong ayusin ang iyong disenyo at makamit ang mas malinis, mas propesyonal, at balanseng layout.

Ngunit hindi dito nagtatapos ang iyong paglalakbay. Ang graphic na disenyo ay hindi isang eksaktong agham at hindi ito dapat limitado sa mga tip at prinsipyo. Tulad ng totoo sa lahat ng mga lugar ng paglikha, walang mahigpit na panuntunan ng hinlalaki. Ang paglabas sa mga tip na ito sa mga banayad na paraan ay magdaragdag ng lalim at pagkakaiba-ibaang iyong mga disenyo.

Gayunpaman, ang mga ito ay isang mahusay na panimulang punto at hinihikayat ka naming subukan ang mga ito. At ipaalam sa amin kung paano sila nagtrabaho!

I-download ang Vectornator para Magsimula

Itaas ang iyong mga disenyo.

I-download ang file tungkol sa disenyo ng logo dito. Ngunit ang disenyo ng print material, tulad ng mga pahayagan, magazine, poster, at mga digital na katapat nito, pati na rin ang disenyo ng web, app, o UX/UI.

Ang salitang 'layout' ay nagbibigay sa amin ng maraming pahiwatig. Nangangahulugan ito ng pagsasaayos ng mga paunang natukoy na elemento sa isang page.

Kapag epektibo ang isang layout, mukhang maganda ito, at ginagabayan nito ang manonood na maunawaan ang mensaheng sinusubukang ihatid ng disenyo. Samakatuwid, ang pag-unawa sa layout ay susi sa paglikha ng nakakaengganyo, epektibo, user-friendly, at kasiya-siyang komposisyon.

Kung ang isang layout ay hindi naihatid nang maayos ang mensahe nito sa madla, o sa madaling salita, hindi ito "nababasa nang mabuti ", hindi magiging epektibo ang disenyo kahit gaano pa ka-uso ang hitsura nito. Sa larangan ng disenyo ng layout, pinapalitan ng content ang mga uso at gimik.

Ang Layunin ng Disenyo ng Layout

Upang maihatid ang isang mensahe nang mabilis

Ito ang susi. Ang disenyo ng layout ay nagtatatag ng ugnayan sa pagitan ng mga graphic na asset upang makamit ang isang maayos na daloy ng paggalaw ng mata para sa maximum na bisa at epekto.

Upang lumikha ng balanse

Ang paggamit ng mga prinsipyo ng disenyo ng layout ay ang pinakasimpleng paraan upang lumikha isang pakiramdam ng balanse at simetrya sa iyong mga proyekto sa disenyo nang hindi nagiging boring.

Upang lumikha ng pagkakaisa

Tumutulong ang layout sa iyong ayusin ang maraming elemento ng iyong disenyo sa isang madaling natutunaw, magkakaugnay, at lohikal na paraan.

Upang lumikha ng kagandahan

Ang balanse at istraktura ay natural na lumikha ng kagandahan.Kung ginawa nang tama ang iyong disenyo ng layout, awtomatiko itong magiging kaakit-akit sa viewer. Ang mas kaunting pagsisikap na kailangang gawin ng mga manonood upang maunawaan ang isang mensahe, mas magiging kaakit-akit ang iyong disenyo.

Designer ni Frank Philippin para sa kanyang aklat na 'I used to Be a Design Student: Then - Ngayon.' Source: DesignBoom

The Elements of Layout Design

Text

Kabilang dito hindi lang ang text body o mga talata, kundi pati na rin ang mga headline, subheading, header, at footer. Ang iyong pagpili ng typography, kulay, at laki ay makakamit ng iba't ibang mga epekto sa kung paano isasalin ang iyong layout sa iyong audience.

Larawan

Ang pinakakaraniwang uri ng mga larawan ay mga larawan, ilustrasyon, o infographics.

Mga Hugis

Ang mga hugis ay maaaring geometriko, na napaka-angular, o maaari silang maging organiko, na ginagaya ang natural na mundo. Maaari rin silang maging abstract. Napaka-uso ng mga abstract na hugis noong nakaraang taon, dahil nakita namin ang mga web designer na isinasama ang mga ito sa mga kumplikado at malawak na komposisyon.

Maaaring palitan ng mga hugis ang isang larawan. O maaaring gamitin ang mga ito upang magdagdag ng mga graphic na elemento sa isang page, i-highlight ang text, o i-delineate ang espasyo sa pagitan ng iba pang visual na elemento.

White space

Anumang disenyo ng layout ay magkakaroon ng partikular na halaga ng white space. na magbibigay-daan sa iyong mga elemento na huminga at tumayo nang mag-isa.

The Golden Principles of Layout Design

Mapapansin mo na ang mga prinsipyong disenyo ng layout ay sumusunod sa maraming pangunahing mga prinsipyo ng disenyo. Tulad ng paggamit ng kulay sa isang partikular na paraan, typography, pag-uulit, contrast, hierarchy, at balanse.

Tingnan din: Paano Pangasiwaan ang Malikhaing Pagpuna bilang isang Designer

Prinsipyo #1. Gumamit ng Grids

Tinutulungan ng mga grids ang mga designer na iposisyon ang iba't ibang elemento ng disenyo tulad ng text at mga larawan sa paraang mukhang magkakaugnay at madaling sundin.

Nagbibigay sila ng pakiramdam ng kaayusan, pinipigilan nila ang mga elemento na madaig ang isa't isa. , at higit sa lahat, itatama din ng mga grids ang iyong pagkakahanay. Ginagawang mas malinis at mas propesyonal ang iyong trabaho.

Source: hgmlegal.com

The anatomy of grids

Maaaring isipin mo na vertical at horizontal lines lang ito, ngunit ang isang grid ay binubuo ng ilang bahagi. Marami, sa katunayan. Narito ang pinakamahalagang terminolohiya na kailangan mong malaman sa isang pangunahing grid:

• Format ay ang buong bahagi ng iyong huling disenyo. Kaya kung magdidisenyo ka ng isang bagay para sa pag-print, ang format ay ang pahina, at kung ikaw ay isang web designer, ang format ay ang web page o ang browser window.
• Mga Margin Ang ay ang mga sinadyang walang laman na espasyo sa pagitan ng format at ng disenyo.
• Flowlines ay ang mga pahalang na linya na naghihiwalay sa iyong layout sa magkatulad na mga seksyon. Tumutulong ang mga flowline sa pagiging madaling mabasa ng iyong disenyo at ginagabayan ang mambabasa na sundin nang tama ang nilalaman.
• Ang mga module ay ang mga bloke na nabuo ng mga pahalang na linya at patayomga flowline ng anumang grid. Kung iisipin mo, sila ang mga bloke ng gusali ng anumang grid. Ang lahat ng iyong vertical na module ay gumagawa ng iyong mga column, habang ang lahat ng iyong pahalang na grid ay gumagawa ng iyong mga row.
• Mga Rehiyon ay mga pangkat ng mga konektadong module, patayo man o pahalang. Walang mga panuntunan kung paano ka magpasya na ayusin ang mga ito.

Source: Radversity

Mga uri ng grids

Ang mga layout grid ay unang ginamit upang ayusin sulat-kamay sa papel.

Ang mga ito ay nagsimula noong ika-13 siglo, nang pinagsama ng French artist na si Villard De ang grid system na may golden ratio upang makagawa ng mga naka-print na layout ng pahina na may mga margin. Maaari mong makita ang grid system na ito hanggang sa araw na ito, dahil ang karamihan sa mga naka-print na layout ng libro at magazine ay nagpapatunay. Mas gusto ng mga publisher, editor, at designer na gumamit ng mga karaniwang grids hindi lamang dahil maganda ang hitsura nila, ngunit dahil inaasahan ng mga mambabasa na nasa isang partikular na lugar ang ilang elemento ng disenyo.

Maaaring idisenyo ang mga grid sa dalawang paraan: simetriko o walang simetrya. Ang mga simetriko na grid ay sumusunod sa isang centerline, kung saan ang patayo at pahalang na mga rehiyon ay pantay sa isa't isa; at ang mga column ay may parehong lapad.

Sa isang asymmetric grid , gaya ng iminumungkahi ng pangalan, ang mga margin at ang mga column ay hindi lahat ng magkapareho.

Batay sa klasipikasyong ito, mayroong limang pangunahing uri ng mga layout ng grid na ginagamit sa buong mundo na maaari mong asahan:

Manuscriptgrids ay ang pinakakaraniwang uri ng grid para sa mga dokumento. Pinaghihiwalay nila ang header, footer, at mga margin, at karaniwang gumagawa ng isang parihaba sa loob ng format (o ang pahina) na nagbibigay ng mga hangganan sa iyong teksto. Sila ang batayan para sa mga magasin, pahayagan, at aklat. Kaya marahil ito ang layout na pinakapamilyar sa iyo.

Source: UXplanet

Source: Radversity

Column grids ay isa pang paborito sa pag-publish ng magazine. Ang isang karaniwang layout ng magazine ay gumagamit ng mga grids ng hanay upang paghiwalayin ang teksto sa mga seksyon na madaling basahin. Ngunit ang mga ito ay napaka-tanyag para sa mga website pati na rin. Maaari kang gumamit ng anuman mula sa dalawa hanggang anim na grid. Mas marami ang posible, ngunit hindi karaniwan. Ang isang napakahalagang bagay tungkol sa mga column grid ay ang espasyo sa pagitan ng mga column, o ang mga gutters, ay pantay na distansiya sa isa't isa.

Ang simetriko na column grid ay ginagamit ng mga pahayagan, halimbawa, habang ang isang asymmetric na column grid ay mas gusto sa web design .

Source: UX Planet

Source: Radversity

Modular grids ay katulad ng column grid, ngunit isinasaalang-alang din nila ang mga pahalang na flowline. Ang ganitong uri ng grid ay kailangan kapag kailangan mong ayusin ang iba't ibang elemento sa iyong layout at ang mga column grid ay sadyang hindi sapat.

Ang mga modular grid ay may pantay na laki ng mga module na ginagawang napakadaling mailarawan ang iyong mga spatial zone sa iba't ibang paraan.

Pinagmulan: UXPlanet

Source: Radversity

Ang mga baseline grids ay napakaganda para sa mga komposisyong nakabatay sa text. Ang baseline ay ang linya kung saan nakapatong ang text kapag nagta-type ka, at ang nangunguna ay ang spacing sa pagitan ng dalawang baseline. Nag-iisip kung gaano kalaki dapat ang iyong heading o mga subheading?

Narito ang mga baseline grid upang makatulong na bigyan ang iyong teksto ng isang dumadaloy na ritmo.

Source: UX Planet

Source: Fragaria

Hierarchical grids mukhang hindi gaanong grid kaysa sa lahat ng kanilang mga katapat. Gayunpaman, ang mga ito ay lubhang kapaki-pakinabang kapag nag-aayos ng mga elemento ng disenyo sa kanilang pagkakasunud-sunod ng kahalagahan. Ang mga hierarchical grid ay maaaring batay sa modular grids, o maaari ka ring gumawa ng sarili mo. Madalas na ginagamit ng mga website ang grid na ito, lalo na ang mga digital magazine at pahayagan ay mas umaasa sa hierarchical grids kaysa sa column grids sa kanilang paglipat sa pagiging digital.

Source: UX Plane

Principle #2. Gumamit ng Negative Space

Madalas nating iniisip na ang kawalan ng laman, katahimikan, o kawalan ng kulay ay isang masamang bagay. Ngunit hindi namin isinasaalang-alang kung paano sila ang matibay na pundasyon ng kaibahan.

Tinatawag ding white space, ang negatibong espasyo ay ang lugar sa iyong disenyo na walang anumang aktwal na elemento. Ito ang lugar na iniwang walang laman. Hindi lang nito napapalibutan ang iyong mga asset, lumilikha din ito ng mga kinakailangang bono sa pagitan nila. Dahil doon, ang negatibong espasyo ay isang nararapat na elemento ng disenyo at may malaking epekto sa kung gaano kabisa ang iyong layoutang disenyo ay.

Maganda vs masamang negatibong espasyo

Ang negatibong espasyo ay makakatulong sa paghiwalayin ang iba't ibang bahagi sa iyong disenyo, habang pinapayagan din ang iyong layout na huminga. Nakakatulong ito sa visual hierarchy at visual na balanse; itinatakda nito ang pagtuon ng gumagamit sa mga pangunahing elemento; binabawasan nito ang antas ng pagkagambala; at sa wakas, nagdaragdag ito ng istilo at kagandahan sa iyong disenyo.

Maaaring may posibilidad na punan ng mga bagitong designer ang kanilang canvas hangga't maaari, sa pamamagitan ng pag-scale ng text o pagpapasabog ng logo, o isang imahe. Ngunit ang pagbibigay ng espasyo sa iyong mga elemento ay nagbibigay-daan sa manonood na pumili ng ilang partikular na mga pahiwatig ng impormasyon nang mas mabilis at mas kumportable.

Kung ang lahat ay sumisigaw para sa atensyon ng iyong manonood, walang maririnig.

– Aaron Walter, 'Idisenyo para sa emosyon'

Ang isang madaling paraan upang matukoy ang iyong negatibong espasyo ay sa pamamagitan ng paggamit ng modular grid. Sa pamamagitan ng paglalagay niyan sa itaas ng iyong disenyo, madali mong maisalarawan kung aling mga module ang maaaring manatiling walang laman, at kung alin ang dapat punan.

Designer ni Brunswicker, Source: Codesignmag.com

Prinsipyo #3. Pumili ng Isang Nag-iisang Focal Point

May kliyente na bang humiling sa iyo na palakihin ang logo? At pagkatapos ay para palakihin pa ang headline?

Hindi mo mabibigyang-diin ang lahat. Tinatalo nito ang punto ng magandang disenyo. Tulad ng oras, ang focus ay relatibo. Para mamukod-tangi ang isang elemento, kailangang magsilbing background ang isa pa. Ang ilang mga elemento ay kailangang mangibabaw sa iba upang maipakita ang iyong disenyoisang visual hierarchy.

Ang focal point sa isang disenyo ay ang isang elemento na may pinakamalaking visual weight. Ito ang elemento na unang umaakit sa mata, higit sa anupaman sa iyong layout.

Ang isang focal point ay mag-aanunsyo sa iyong madla kung saan magsisimula ang kanilang paglalakbay sa panonood sa iyong disenyo. Kaya ito na ang simula ng kwentong iyong ikinuwento.

Karaniwan itong makakamit sa pamamagitan ng paggamit ng malaking larawan o malaking source ng typography. Pansinin kung gaano kabisa ang focal point sa ibaba

Idinisenyo ni Braulio Amado para sa Bloomberg Businessweek, Source: Maganda iyon

Ngunit habang ang isang focal point ay kukuha ng atensyon ng iyong madla, ang susunod na panuntunan ay makakatulong sa gabay nito.

Prinsipyo #4. Isipin ang Proximity and Flow

Ang prinsipyo ng proximity ay simple. Tiyaking magkakaugnay ang mga elementong nauugnay sa isa't isa.

Isinasaad ng malapitan na ang mga visual asset ay konektado at naging isang visual na unit na tumutulong sa pag-aayos ng iyong layout.

Kaya ang mga asset ng cluster design lang na may kaugnayan sa isa't isa, at gumamit ng mga bulsa ng impormasyon sa iyong disenyo para gabayan ang iyong audience sa piraso ng nauugnay na content na kailangan nilang gamitin. Tinatawag din itong prinsipyo ng daloy.

Source: Satori Graphics

Ang isang disenyo na may mahusay na daloy ay magdadala sa mata ng mga manonood sa buong layout, mula sa elemento hanggang sa elemento, nang madali. Ang iyong mga focal point ay hihilahin ang mata at magiging