Kazalo
Celovit vodnik za učenje osnov vizualnega oblikovanja.
Vprašanje za milijon dolarjev: v čem je skrivnost dobrega oblikovanja?
O tem lahko filozofsko razmišljamo, vendar je na splošno pregovorna "skrivnost" dobrega oblikovanja v tem, kako organizirate vizualne elemente glede na platno in med seboj. V bistvu smo pravkar opisali oblikovanje postavitve, ki je, če pomislite nanj, povsod, kamor pogledate.
Vzemimo na primer postavitev revije. Njihova zasnova sledi klasičnemu mrežnemu sistemu (o mrežah se bomo naučili vse v naslednjem trenutku). Vse je običajno poravnano levo, desno in spodaj. Zlasti stolpci imajo izrazito utemeljeno poravnavo, zaradi katere stran ni le vizualno privlačna, temveč tudi lahko berljiva in avtoritativna. Veliki naslovi pritegnejo gledalčevo pozornost.pozornost, medtem ko je podnaslov v nasprotju z velikostjo, da se ustvari vizualna hierarhija informacij.
Linda Gaom, Behance
Zaradi vseh teh lastnosti je zasnova strani čista, strukturirana in enostavna za branje, kar je v skladu z nasveti, o katerih bomo govorili v nadaljevanju. Najprej pa spoznajmo več o sami zasnovi postavitve.
Kaj je oblikovanje postavitve?
Oblikovanje postavitve se nanaša na razporeditev grafičnih elementov, da bi pritegnili pozornost bralca in prenesli določeno sporočilo na vizualno privlačen način.Ne govorimo torej o oblikovanju logotipa, temveč o oblikovanju tiskanih materialov, kot so časopisi, revije, plakati in njihovi digitalni ustrezniki, pa tudi o oblikovanju spletnih strani, aplikacij ali UX/UI.
Beseda "postavitev" nam daje veliko namigov. Pomeni razporeditev vnaprej določenih elementov na strani.
Če je postavitev učinkovita, je videti dobro in vodi gledalca k razumevanju sporočila, ki ga želi posredovati oblikovanje. Razumevanje postavitve je zato ključno pri ustvarjanju privlačnih, učinkovitih, uporabniku prijaznih in prijetnih kompozicij.
Če postavitev občinstvu ne prenaša dobro svojega sporočila ali, z drugimi besedami, če se ne "dobro bere", bo oblikovanje neučinkovito, ne glede na to, kako modno je videti. Na področju oblikovanja postavitve je vsebina pomembnejša od trendov in trikov.
Namen oblikovanja postavitve
hitro posredovanje sporočila
To je ključnega pomena. oblikovanje postavitve vzpostavlja razmerje med grafičnimi elementi, da se doseže nemoten tok gibanja oči za največjo učinkovitost in učinek.
Ustvarjanje ravnovesja
Uporaba načel oblikovanja postavitve je najbolj enostaven način za ustvarjanje občutka ravnovesja in simetrije v oblikovalskih projektih, ne da bi postali dolgočasni.
Ustvarjanje povezanosti
Postavitev vam pomaga razporediti številne elemente vašega oblikovanja na razumljiv, skladen in logičen način.
Ustvariti lepoto
Ravnovesje in struktura naravno ustvarjata lepoto. Če je oblikovanje postavitve pravilno izvedeno, bo samodejno postalo vizualno privlačno za gledalca. Manj ko se mora gledalec potruditi, da bi razumel sporočilo, bolj privlačna se mu bo zdela vaša zasnova.
Oblikovalec Frank Philippin za svojo knjigo "I Used to Be a Design Student: Then - Now." Vir: DesignBoom
Elementi oblikovanja postavitve
Besedilo
To ne vključuje le osnovnega besedila ali odstavkov, temveč tudi naslove, podnaslove, glave in noge. Z izbiro tipografije, barve in velikosti boste dosegli različne učinke na to, kako se bo vaša postavitev prenesla na občinstvo.
Slika
Najpogostejše vrste slik so fotografije, ilustracije ali infografike.
Poglej tudi: Kako narisati diamantOblike
Oblike so lahko geometrijske, ki so zelo oglate, ali organske, ki posnemajo naravni svet. Lahko so tudi abstraktne. Abstraktne oblike so bile v zadnjem letu zelo modne, saj so jih spletni oblikovalci vključevali v zapletene in obsežne kompozicije.
Oblike lahko nadomestijo sliko ali pa jih uporabite za dodajanje grafičnih elementov na stran, poudarjanje besedila ali določanje prostora med drugimi vizualnimi elementi.
Beli prostor
Vsaka zasnova postavitve bo vsebovala določeno količino belega prostora, ki bo elementom omogočil, da zadihajo in izstopajo sami po sebi.
Zlata načela oblikovanja postavitve
Opazili boste, da načela oblikovanja postavitve sledijo številnim temeljnim načelom oblikovanja, kot so uporaba barv na določen način, tipografija, ponavljanje, kontrast, hierarhija in ravnovesje.
Načelo #1. Uporabite mreže
Mreže oblikovalcem pomagajo pri umeščanju različnih elementov oblikovanja, kot so besedilo in slike, tako da so videti skladni in enostavni za sledenje.
Zagotavljajo občutek reda, preprečujejo, da bi elementi prevladali drug nad drugim, in kar je najpomembneje, mreže popravijo tudi vašo poravnavo. Vaše delo je tako čistejše in bolj profesionalno.
Vir: hgmlegal.com
Anatomija mrež
Morda mislite, da gre le za navpične in vodoravne črte, vendar je mreža sestavljena iz več delov. Pravzaprav iz več delov. Tukaj je najpomembnejša terminologija, ki jo morate poznati pri osnovni mreži:
- Format je celotna površina vašega končnega oblikovanja. Če torej oblikujete nekaj za tisk, je format stran, če ste spletni oblikovalec, pa je format spletna stran ali okno brskalnika.
- Robovi so namerno prazni prostori med obliko in dizajnom.
- Pretočne cevi so vodoravne črte, ki vašo postavitev ločujejo na vzporedne dele. tekoče črte pomagajo pri berljivosti vaše zasnove in bralca usmerjajo, da pravilno sledi vsebini.
- Moduli so bloki, ki jih tvorijo vodoravne in navpične tokovne črte katere koli mreže. Če pomislite, so to gradniki katere koli mreže. Vsi vaši navpični moduli tvorijo vaše stolpce, vse vaše vodoravne mreže pa vaše vrstice.
- Regije so skupine vertikalno ali horizontalno povezanih modulov. ni pravil o tem, kako jih organizirati.
Vir: Radversity
Vrste mrež
Mreže za razporeditev so bile najprej uporabljene za urejanje rokopisov na papirju.
Izvirajo že iz 13. stoletja, ko je francoski umetnik Villard De združil mrežni sistem z zlatim rezom, da bi ustvaril postavitve tiskanih strani z robovi. Ta mrežni sistem lahko vidite še danes, kar dokazuje večina postavitev tiskanih knjig in revij. Založniki, uredniki in oblikovalci raje uporabljajo standardne mreže, ne le zato, ker so videti dobro, temveč tudi zato, ker so se bralci navadili napričakujejo, da bodo določeni elementi oblikovanja na določenem mestu.
Mreže so lahko zasnovane na dva načina: simetrično ali asimetrično. Simetrične mreže sledijo središčni črti, pri čemer sta navpična in vodoravna območja med seboj enaka, stolpci pa so enako široki.
V asimetrična mreža , kot pove že ime, robovi in stolpci niso vsi enaki.
Na podlagi te razvrstitve obstaja pet glavnih vrst postavitvenih mrež, ki se uporabljajo po vsem svetu in na katere se lahko zanesete:
Mreže za rokopise so najpogostejša vrsta mreže za dokumente. Ločujejo glavo, nogo in robove ter v bistvu ustvarjajo pravokotnik znotraj formata (ali strani), ki določa meje besedila. So osnova za revije, časopise in knjige. To je verjetno postavitev, ki jo najbolje poznate.
Vir: UXplanet
Vir: Radversity
Mreže stolpcev so priljubljene tudi pri izdajanju revij. Tipična postavitev revije uporablja mrežo stolpcev za ločevanje besedila v pregledne dele. Zelo priljubljene so tudi na spletnih straneh. Uporabite lahko od dveh do šestih mrež. Več je mogoče, vendar ne pogosto. Zelo pomembno pri mreži stolpcev je, da so razmiki med stolpci ali žlebovi enako oddaljeni drug od drugega.drugo.
Simetrično mrežo stolpcev uporabljajo na primer časopisi, asimetrična mreža stolpcev pa je zaželena pri spletnem oblikovanju.
Vir: UX Planet
Vir: Radversity
Modularne mreže so podobne mreži stolpcev, vendar upoštevajo tudi vodoravne tekoče linije. Ta vrsta mreže je potrebna, kadar je treba v postavitvi urediti različne elemente in mreža stolpcev preprosto ne zadostuje.
Modularne mreže imajo enako velike module, kar omogoča enostavno vizualizacijo prostorskih območij na različne načine.
Vir: UX Planet
Vir: Radversity
Osnovne mreže Osnovna črta je črta, na katero se besedilo pri pisanju opira, vodilna črta pa je razmik med dvema osnovnima črtama. Zanima vas, kako velik naj bo naslov ali podnaslov?
Osnovne mreže so tu zato, da besedilu dajo tekoč ritem.
Vir: UX Planet
Poglej tudi: Zastave ponosa
Vir: Fragaria
Hierarhične mreže so videti manj podobne mreži kot vse njihove primerjave. Kljub temu so zelo uporabne pri urejanju elementov oblikovanja po vrstnem redu pomembnosti. Hierarhične mreže lahko temeljijo na modularnih mrežah, lahko pa ustvarite tudi svoje lastne. Spletne strani veliko uporabljajo to mrežo, zlasti digitalne revije in časopisi se pri prehodu v hierarhične mreže bolj kot na stolpčne mreže zanašajo na hierarhične mreže, saj so postalidigitalno.
Vir: UX Plane
Načelo #2. Uporaba negativnega prostora
Pogosto mislimo, da so praznina, tišina ali pomanjkanje barv nekaj slabega. Vendar ne upoštevamo, kako so trdni temelji kontrasta.
Negativni prostor, imenovan tudi beli prostor, je tisto območje v oblikovanju, ki nima nobenih dejanskih elementov. To je območje, ki ostane prazno. Ne le, da obdaja vaše elemente, temveč ustvarja tudi potrebne vezi med njimi. Zaradi tega je negativni prostor upravičen element oblikovanja in ima velik vpliv na to, kako učinkovito je oblikovanje vaše postavitve.
Dober in slab negativni prostor
Negativni prostor bo pomagal ločiti različna področja v vaši zasnovi, hkrati pa bo omogočil dihanje. Pomaga pri vizualni hierarhiji in vizualnem ravnovesju, uporabnika osredotoča na ključne elemente, zmanjšuje stopnjo odvračanja pozornosti ter dodaja slog in eleganco vaši zasnovi.
Neizkušeni oblikovalci so morda nagnjeni k temu, da zapolnijo čim več svojega platna, tako da povečajo besedilo, logotip ali sliko. Toda če dajo svojim elementom prostor, lahko gledalec hitreje in udobneje zazna določene informacijske namige.
Če vse kriči za pozornost gledalca, se nič ne sliši.- Aaron Walter, "Oblikovanje za čustva
Negativni prostor lahko preprosto določite z uporabo modularne mreže. Če jo postavite na vrh svoje zasnove, si lahko enostavno predstavljate, kateri moduli lahko ostanejo prazni in katere je treba zapolniti.
Oblikovalec: Brunswicker, Vir: Codesignmag.com
Načelo #3. Izberite eno osrednjo točko
Ali vas je stranka kdaj prosila, da povečate logotip in nato še naslov?
Ne morete poudariti vsega, saj bi s tem izničili smisel dobrega oblikovanja. Tako kot čas je tudi poudarek relativen. Da bi en element izstopal, mora drugi služiti kot ozadje. Nekateri elementi morajo prevladovati nad drugimi, da bi vaše oblikovanje pokazalo vizualno hierarhijo.
Osrednja točka v oblikovanju je element z največjo vizualno težo. Je element, ki najprej pritegne pogled, bolj kot kar koli drugega v vaši postavitvi.Osrednja točka bo vašemu občinstvu sporočila, kje se začne njihova pot gledanja na vaši zasnovi. Gre torej za začetek zgodbe, ki jo pripovedujete.
To je običajno mogoče doseči z uporabo velike slike ali velikega vira tipografije. Opazite, kako učinkovita je spodnja osrednja točka
Oblikoval Braulio Amado za Bloomberg Businessweek, Vir: Lepo je, da
Čeprav bo osrednja točka pritegnila pozornost občinstva, jo bo usmerjalo naslednje pravilo.
Načelo #4. Razmišljajte o bližini in pretočnosti
Načelo bližine je preprosto. Zagotovite, da so elementi, ki so med seboj povezani, nameščeni skupaj.
Bližina pomeni, da so vizualni elementi povezani in postanejo ena vizualna enota, ki pomaga organizirati postavitev.Zato združujte le oblikovne elemente, ki so med seboj povezani, in uporabite žepe z informacijami na oblikovanju, da občinstvo pripeljete do ustrezne vsebine, ki jo mora porabiti. To se imenuje tudi načelo pretoka.
Vir: Satori Graphics
Oblikovanje z dobrim tokom bo z lahkoto vodilo oko gledalca skozi celotno postavitev, od elementa do elementa. Osrednje točke bodo pritegnile pogled in postale kraj počitka, medtem ko bodo drugi elementi dajali smer.
To lahko preprosto razumemo na primeru naše spletne strani. Grafike so jasno ločene od besedila, prav tako tudi pozivi k ukrepanju, tako da se pozornost gledalca pomika od enega sklopa informacij k drugemu.
Načelo #5. Uporabite kontrast
Poskrbite, da bo vaša zasnova dovolj kontrastna.
Kontrast pomaga organizirati zasnovo in vzpostavi prepotrebno hierarhijo ter poudari tisto, kar je pomembno.Poleg tega dobra uporaba kontrasta dodaja vizualno zanimivost celotnemu oblikovanju. Priznajmo si, da bo postavitev, v kateri je vse enake velikosti, oblike ali barve, videti dolgočasna. Kontrast stvari popestri.
Najprej boste morda pomislili na barvni kontrast, na primer toplo proti hladnemu, temno proti svetlemu, modro proti oranžnemu. Toda čeprav je barva izjemno pomembno načelo kontrasta, obstajajo tudi kontrasti tipa, poravnave in velikosti. Ne pozabite, da je kontrast tudi relativen. Pomen ima le v primerjavi z drugimi elementi.
Tukaj je nekaj primerov postavitev, ki to pravilo uporabljajo na pameten in lep način. Opazite kontrast v tipografiji, barvah in celo kontrast v velikosti elementov.
Vir: akcijski načrt za uskladitev IAG
Načelo #6. Ponavljanje, vzorec, ritem
Ko pomislimo na ponavljanje, pomislimo na isti element vedno znova.
Vendar je pri oblikovanju drugače. Vsekakor ni tako dolgočasno. Ob pravilni uporabi lahko ponavljanje dejansko okrepi vaše oblikovanje.
Poskusite določiti in ponovno uporabiti motiv v celotni postavitvi, da se bodo različna območja počutila povezana in del iste kompozicije. Tako bo vaša zasnova imela temo. S ponavljanjem elementov ne boste le izpolnili pričakovanj svojega občinstva, temveč boste izboljšali tudi uporabniško izkušnjo. Zaradi doslednosti se uporabniki počutijo bolj udobno.
To lahko storite tako, da ponavljate oblike ali simbole ali celo barvno shemo, pisavo in enak slog na splošno.
Dobra navada je, da uporabite pisavo z veliko družino. Omejite različno število vzorcev, linijskih uteži/slogov in barv ter jih povsod ponavljajte. Prav tako poskušajte ohraniti enak slog slik in grafik. Uporabite na primer ilustracije istega umetnika.
Vir: Thepentool.co
To je vse. To je šest načel, ki vam bodo pomagala organizirati oblikovanje in doseči čistejšo, bolj profesionalno in uravnoteženo postavitev.
Vendar se vaša pot tu ne konča. Grafično oblikovanje ni eksaktna znanost in se ne sme omejiti na nasvete in načela. Kot velja za vsa področja ustvarjanja, tudi tu ni trdnega pravila. Izstopanje iz teh nasvetov na subtilne načine bo vašim oblikovanjem dodalo globino in raznolikost.
Kljub temu so odlična izhodiščna točka, zato vam priporočamo, da jih preizkusite. In nam sporočite, kako so se obnesli!
Prenesite Vectornator in začnite
Svoje oblikovanje lahko dvignete na višjo raven.
Prenesite datoteko
