Ako zvládnuť návrh rozloženia

Úplná príručka, ktorá vám pomôže naučiť sa základy vizuálneho dizajnu.

Otázka za milión dolárov: aké je tajomstvo dobrého dizajnu?

Môžeme o tom filozofovať, ale všeobecne povedané, príslovečné "tajomstvo" dobrého dizajnu spočíva v spôsobe, akým organizujete vizuálne prvky vo vzťahu k plátnu a medzi sebou navzájom. V podstate sme práve opísali dizajn rozloženia. Ktorý, keď sa nad tým zamyslíte, je všade, kam sa pozriete.

Vezmite si napríklad rozvrhnutie časopisu. Ich dizajn sa riadi klasickým mriežkovým systémom (o mriežkach sa o chvíľu dozvieme všetko). Všetko je zvyčajne zarovnané vľavo, vpravo a dole. Najmä stĺpce majú výrazné zarovnanie na základe princípu justified, vďaka ktorému je stránka nielen vizuálne príťažlivá, ale aj ľahko čitateľná a autoritatívna. Veľké nadpisy priťahujú pozornosť diváka.pozornosť, zatiaľ čo podnadpis je kontrastný a vytvára vizuálnu hierarchiu informácií.

Linda Gaom, Behance

Všetky tieto vlastnosti robia dizajn stránky čistým, štruktúrovaným a ľahko čitateľným a sú v súlade s tipmi, o ktorých budeme hovoriť ďalej. Najskôr si však povedzme viac o samotnom dizajne rozloženia.

Čo je návrh rozloženia?

Nehovoríme tu teda o dizajne loga, ale o dizajne tlačených materiálov, ako sú noviny, časopisy, plagáty a ich digitálne náprotivky, ako aj o dizajne webu, aplikácií alebo UX/UI.

Slovo "layout" nám veľa napovie. Znamená usporiadanie vopred určených prvkov na stránke.

Keď je rozvrhnutie efektívne, vyzerá dobre a vedie diváka k pochopeniu posolstva, ktoré sa dizajn snaží odovzdať. Pochopenie rozvrhnutia je preto kľúčom k vytváraniu pútavých, efektívnych, používateľsky prívetivých a príjemných kompozícií.

Ak rozloženie dobre neprenáša svoje posolstvo na publikum, alebo inými slovami, "nečíta sa dobre", dizajn bude neúčinný bez ohľadu na to, ako moderne vyzerá. V oblasti dizajnu rozloženia je obsah nadradený trendom a trikom.

Účel návrhu rozloženia

Rýchle odovzdanie správy

Je to kľúčové. Návrh rozloženia vytvára vzťah medzi grafickými prostriedkami, aby sa dosiahol plynulý tok pohybu očí pre maximálnu účinnosť a vplyv.

Vytvorenie rovnováhy

Používanie princípov dizajnu rozloženia je najjednoduchší spôsob, ako vytvoriť pocit rovnováhy a symetrie vo vašich dizajnových projektoch bez toho, aby ste sa stali nudnými.

Vytvorenie súdržnosti

Rozloženie vám pomôže usporiadať mnohé prvky vášho návrhu ľahko stráviteľným, uceleným a logickým spôsobom.

Vytvárať krásu

Vyváženosť a štruktúra prirodzene vytvárajú krásu. Ak je váš návrh rozloženia urobený správne, automaticky sa stane pre diváka vizuálne príťažlivým. Čím menej úsilia musia diváci vynaložiť na pochopenie správy, tým príťažlivejší sa bude zdať váš návrh.

Dizajnér Frank Philippin pre svoju knihu "I Used to Be a Design Student: Then - Now." Zdroj: DesignBoom

Prvky návrhu rozloženia

Text

Patrí sem nielen telo textu alebo odseky, ale aj nadpisy, podnadpisy, hlavičky a päty. Výberom typografie, farby a veľkosti dosiahnete rôzne účinky na to, ako sa vaše rozloženie bude premietať na publikum.

Obrázok

Najbežnejšími typmi obrázkov sú fotografie, ilustrácie alebo infografiky.

Tvary

Tvary môžu byť geometrické, ktoré sú veľmi hranaté, alebo môžu byť organické, napodobňujúce svet prírody. Môžu byť aj abstraktné. Abstraktné tvary boli v minulom roku veľmi trendy, pretože sme videli, ako ich weboví dizajnéri začleňovali do zložitých a rozľahlých kompozícií.

Tvary môžu nahradiť obrázok alebo sa môžu použiť na pridanie grafických prvkov na stránku, zvýraznenie textu alebo vymedzenie priestoru medzi inými vizuálnymi prvkami.

Biely priestor

Každý návrh rozloženia bude mať určitý priestor, ktorý umožní prvkom dýchať a vyniknúť samostatne.

Zlaté princípy návrhu rozloženia

Všimnite si, že princípy dizajnu rozloženia sa v mnohom zhodujú so základnými princípmi dizajnu, ako je používanie farieb určitým spôsobom, typografia, opakovanie, kontrast, hierarchia a rovnováha.

Zásada č. 1. Používajte mriežky

Mriežky pomáhajú dizajnérom umiestniť rôzne prvky dizajnu, ako je text a obrázky, tak, aby vyzerali súvislo a ľahko sa sledovali.

Poskytujú pocit poriadku, zabraňujú tomu, aby sa prvky navzájom prekrývali, a čo je najdôležitejšie, mriežky tiež korigujú vaše zarovnanie. Vaša práca tak pôsobí čistejšie a profesionálnejšie.

Zdroj: hgmlegal.com

Anatómia mriežok

Možno si myslíte, že ide len o zvislé a vodorovné čiary, ale mriežka sa skladá z viacerých častí. V skutočnosti z mnohých. Tu je najdôležitejšia terminológia, ktorú potrebujete poznať pri základnej mriežke:

• Formát je celá plocha vášho konečného návrhu. Ak teda navrhujete niečo pre tlač, formátom je stránka, a ak ste webový dizajnér, formátom je webová stránka alebo okno prehliadača.
• Marže sú zámerné prázdne miesta medzi formátom a dizajnom.
• Prietokové linky sú vodorovné čiary, ktoré rozdeľujú vaše rozloženie na paralelné časti. Flowlines pomáhajú pri čitateľnosti vášho návrhu a vedú čitateľa k správnemu sledovaniu obsahu.
• Moduly sú bloky, ktoré sú tvorené horizontálnymi čiarami a vertikálnymi tokmi akejkoľvek mriežky. Ak sa nad tým zamyslíte, sú to stavebné kamene každej mriežky. Všetky vaše vertikálne moduly vytvárajú stĺpce, zatiaľ čo všetky vaše horizontálne mriežky vytvárajú riadky.
• Regióny sú skupiny prepojených modulov, buď vertikálne, alebo horizontálne. Neexistujú žiadne pravidlá, ako sa ich rozhodnete usporiadať.

Zdroj: Radversity

Typy mriežok

Rozkladacie mriežky sa prvýkrát použili na usporiadanie rukopisu na papieri.

Vznikli už v 13. storočí, keď francúzsky umelec Villard De spojil systém mriežky so zlatým rezom, aby vytvoril rozvrhnutie tlačených strán s okrajmi. Tento systém mriežky môžete vidieť dodnes, čo dokazuje väčšina rozvrhnutí tlačených kníh a časopisov. Vydavatelia, redaktori a dizajnéri uprednostňujú používanie štandardných mriežok nielen preto, že dobre vyzerajú, ale aj preto, že čitatelia si zvykliočakávať, že určité prvky dizajnu budú na určitom mieste.

Mriežky môžu byť navrhnuté dvoma spôsobmi: symetrické alebo asymetrické. Symetrické mriežky sledujú stredovú čiaru, pričom vertikálne a horizontálne oblasti sú navzájom rovnaké a stĺpce majú rovnakú šírku.

V asymetrická mriežka , ako naznačuje názov, okraje a stĺpce nie sú všetky rovnaké.

Na základe tejto klasifikácie existuje päť hlavných typov rozvrhovacích mriežok používaných na celom svete, na ktoré sa môžete spoľahnúť:

Mriežky rukopisov sú najbežnejším druhom mriežky pre dokumenty. Oddeľujú hlavičku, pätu a okraje a v podstate vytvárajú obdĺžnik vo vnútri formátu (alebo stránky), ktorý poskytuje hranice pre váš text. Sú základom pre časopisy, noviny a knihy. Je to teda pravdepodobne rozvrhnutie, ktoré poznáte najlepšie.

Zdroj: UXplanet

Zdroj: Radversity

Stĺpcové mriežky sú ďalším obľúbeným prvkom pri vydávaní časopisov. Typické rozloženie časopisu používa stĺpcové mriežky na rozdelenie textu do ľahko čitateľných častí. Sú však veľmi obľúbené aj pre webové stránky. Môžete použiť dve až šesť mriežok. Je možné použiť aj viac, ale nie je to bežné. Veľmi dôležitou vecou pri stĺpcových mriežkach je, že rozstupy medzi stĺpcami alebo žľaby sú od seba rovnako vzdialené.iné.

Zdroj: UX Planet

Zdroj: Radversity

Modulárne mriežky sú podobné stĺpcovej mriežke, ale zohľadňujú aj vodorovné línie. Tento typ mriežky je potrebný, keď je potrebné usporiadať rôzne prvky v rozložení a stĺpcová mriežka jednoducho nestačí.

Zdroj: UX Planet

Zdroj: Radversity

Základné mriežky Základná čiara je čiara, na ktorej spočíva text pri písaní, a vodiaca čiara je medzera medzi dvoma základnými čiarami. Zaujíma vás, aký veľký by mal byť váš nadpis alebo podnadpis?

Zdroj: UX Planet

Zdroj: Fragaria

Hierarchické mriežky vyzerajú menej ako mriežka než všetky ich náprotivky. Napriek tomu sú veľmi užitočné pri usporiadaní prvkov dizajnu podľa ich dôležitosti. Hierarchické mriežky môžu byť založené na modulárnych mriežkach, alebo si dokonca môžete vytvoriť vlastné. Webové stránky túto mriežku často používajú, najmä digitálne časopisy a noviny sa pri prechode na hierarchické mriežky spoliehajú skôr na stĺpcové mriežky než nadigitálne.

Zdroj: UX Plane

Zásada č. 2. Používajte negatívny priestor

Často si myslíme, že prázdnota, ticho alebo nedostatok farieb sú zlé. Neuvažujeme však o tom, že sú pevným základom kontrastu.

Dobrý a zlý negatívny priestor

Negatívny priestor pomôže oddeliť rôzne oblasti v dizajne a zároveň umožní vášmu rozvrhnutiu dýchať. Pomáha pri vizuálnej hierarchii a vizuálnej rovnováhe, sústreďuje pozornosť používateľa na hlavné prvky, znižuje úroveň rozptýlenia a napokon dodáva vášmu dizajnu štýl a eleganciu.

Neskúsení dizajnéri môžu mať tendenciu zaplniť čo najväčšiu časť plátna zmenšením textu alebo zväčšením loga či obrázka. Poskytnutie priestoru prvkom však umožňuje divákovi rýchlejšie a pohodlnejšie zachytiť určité informačné podnety.

- Aaron Walter, "Dizajn pre emócie

Jednoduchý spôsob, ako určiť záporný priestor, je použiť modulárnu mriežku. Jej umiestnením na hornú časť návrhu si môžete ľahko predstaviť, ktoré moduly môžu zostať prázdne a ktoré by sa mali vyplniť.

Dizajnér Brunswicker, zdroj: Codesignmag.com

Princíp č. 3. Vyberte si jedno ohnisko

Požiadal vás niekedy klient, aby ste zväčšili logo? A potom, aby ste ešte viac zväčšili nadpis?

Nemôžete zdôrazňovať všetko. To by bolo na úkor dobrého dizajnu. Rovnako ako čas, aj zameranie je relatívne. Aby jeden prvok vynikol, iný musí slúžiť ako pozadie. Niektoré prvky musia dominovať nad inými, aby váš dizajn zobrazoval vizuálnu hierarchiu.

Ústredný bod oznámi vášmu publiku, kde sa začína ich cesta za zobrazením vášho dizajnu. Je to teda začiatok príbehu, ktorý rozprávate.

To sa zvyčajne dá dosiahnuť použitím veľkého obrázka alebo veľkého zdroja typografie. Všimnite si, aký efektívny je nižšie uvedený ústredný bod

Navrhol Braulio Amado pre Bloomberg Businessweek, Zdroj: Je pekné, že

Kým však ústredný bod pritiahne pozornosť vášho publika, ďalšie pravidlo vám ho pomôže usmerniť.

Zásada č. 4. Myslite na blízkosť a tok

Princíp blízkosti je jednoduchý. Zabezpečte, aby prvky, ktoré spolu súvisia, boli umiestnené spolu.

Preto zoskupujte len tie prvky dizajnu, ktoré spolu súvisia, a používajte informačné vrecká v dizajne, aby ste publikum naviedli k relevantnému obsahu, ktorý potrebuje skonzumovať. Tento princíp sa nazýva aj princíp toku.

Zdroj: Satori Graphics

Dizajn s dobrou plynulosťou povedie oko diváka v rámci celého rozloženia, od jedného prvku k druhému, s ľahkosťou. Vaše ústredné body pritiahnu oko a stanú sa miestom odpočinku, zatiaľ čo ostatné prvky udávajú smer.

Jednoduchý spôsob, ako to pochopiť, je napríklad na príklade našej webovej stránky. Grafika je jasne oddelená od textu a rovnako aj výzvy na akciu, takže pozornosť diváka prechádza od jedného zhluku informácií k ďalšiemu.

Zásada č. 5. Používajte kontrast

Uistite sa, že je váš dizajn dostatočne kontrastný.

Dobré využitie kontrastu navyše dodáva vášmu dizajnu vizuálnu zaujímavosť. Priznajme si, že rozloženie, v ktorom je všetko rovnako veľké, má rovnaký tvar alebo farbu, bude vyzerať nudne. Kontrast všetko okorení.

Ako prvé vás možno napadne farebný kontrast, napríklad teplý verzus studený, tmavý verzus svetlý, modrý verzus oranžový. Ale hoci je farba mimoriadne dôležitým princípom kontrastu, existujú aj kontrasty písma, zarovnania a veľkosti. A nezabudnite, že kontrast je tiež relatívny. Má význam len v komparácii s inými prvkami.

Tu je niekoľko príkladov rozložení, ktoré toto pravidlo využívajú inteligentným a krásnym spôsobom. Všimnite si kontrast v typografii, farbe a dokonca aj kontrast vo veľkosti jednotlivých prvkov.

Zdroj: Akčný plán zosúladenia IAG

Zásada č. 6. Opakovanie, vzor, rytmus

Keď myslíme na opakovanie, myslíme na ten istý prvok znova a znova.

V dizajne je to však iné. Rozhodne to nie je taká nuda. Ak sa opakovanie použije správne, môže váš dizajn skutočne posilniť.

Snažte sa určiť a opakovane používať motív v celom rozložení, aby sa rôzne oblasti cítili prepojené a boli súčasťou rovnakej kompozície. Pomôže to vášmu dizajnu mať tému. Opakovaním prvkov nielenže dosiahnete výsledky podľa očakávaní publika, ale zlepšíte aj používateľský zážitok. Vďaka konzistentnosti sa používatelia cítia pohodlnejšie.

Môžete to dosiahnuť opakovaním tvarov alebo symbolov. Alebo aj farebnou schémou, typom písma a rovnakým štýlom vo všeobecnosti.

Dobrým zvykom, ktorý si môžete osvojiť, je používať písmo s veľkou rodinou. Obmedzte rôzny počet vzorov, váh/štýlov čiar a farieb a opakujte ich v celom texte. Snažte sa tiež zachovať rovnaký štýl obrázkov a grafiky. Používajte napríklad ilustrácie od toho istého umelca.

Zdroj: Thepentool.co

To je všetko. Toto je šesť zásad, ktoré vám pomôžu usporiadať dizajn a dosiahnuť čistejšie, profesionálnejšie a vyváženejšie rozloženie.

Tu sa však vaša cesta nekončí. Grafický dizajn nie je exaktná veda a nemal by sa obmedzovať na tipy a zásady. Ako to platí vo všetkých oblastiach tvorby, neexistuje žiadne pevné pravidlo. Vybočenie z týchto tipov jemnými spôsobmi dodá vašim návrhom hĺbku a rozmanitosť.

Napriek tomu sú skvelým východiskovým bodom a odporúčame vám, aby ste ich vyskúšali. A dajte nám vedieť, ako fungovali!

Stiahnite si Vectornator a začnite

Posuňte svoje návrhy na vyššiu úroveň.