Kako dizajneri mogu koristiti vizualnu hijerarhiju

Nazovite nas površnima, ali kada je u pitanju grafički dizajn, zapravo je sve o izgledu.

Grafički dizajn je sve o vizualnim elementima, a važno je koristiti svoje dizajnerske vještine i znanje kako biste bili sigurni da rad je lako probavljiv i estetski ugodan.

Jedan od načina da to učinite je da slijedite pravila vizuelne hijerarhije. Vizuelna hijerarhija osigurava da vaši dizajni kreiraju glatko korisničko sučelje za stvarne korisnike na webu ili mobilnom uređaju.

Trendovi dizajna dolaze i odlaze, ali osnove dizajna i korisničko iskustvo su zauvijek.

Ovaj članak će raspravljati o vizualnoj hijerarhiji, dati nekoliko savjeta za dizajn za njegovu upotrebu, i pružite neke primjere dizajna i dodatne resurse koje možete provjeriti.

Šta je to vizualna hijerarhija?

Vizualna hijerarhija je princip raspoređivanja pojedinačnih elemenata po njihovom važnost u dizajnu ili umjetničkom djelu.

Slijedeći ovaj ključni princip, dizajneri organiziraju vizualne komponente i elemente kako bi osigurali da gledaoci mogu lako razumjeti njihovo značenje.

Kada se urade ispravno, vizualna hijerarhija će utjecati kako korisnici percipiraju i razumiju vaš rad i elemente dizajna i vode ih da poduzmu određene radnje.

Gestaltvažnost.

Saznajte više o vizualnoj hijerarhiji

Grafički dizajneri, kao i svaka druga profesija, neprestano uče i jačaju svoje vještine.

Osnovni elementi dizajna poput minimalističkog dizajna se vjerojatno neće iznenada promijeniti, ali uvijek postoje novi načini pristupa vašem dizajnu i kreativnom pristupu.

• Naučite o osnovama teorije boja, koje se mogu koristiti za poboljšanje vaše vizualne hijerarhije u dizajnu.
• Naučite dodatne informacije o bojama kontrasti.
• Visme je kreirao ovaj vizualni vodič za korištenje hijerarhije u dizajnu.
• Pogledajte odličan vodič za korištenje hijerarhije u dizajnu web stranice.
• Ova besplatna e-knjiga ide dublje u vizualnu hijerarhiju i kako to može utjecati na vaše dizajne i daje neke primjere.

S ovim resursima i vašim znanjem o vizualnoj hijerarhiji, sigurno ćete stvoriti neke zapanjujuće i vizualno lijepe dizajne.

Verovatno ste već sada željni da ovo znanje upotrijebite u stvarnom dizajnu, pa na posao! Preuzmite Vectornator besplatno danas! Jedva čekamo da vidimo šta kreirate.

Preuzmite Vectornator da biste započeli

Podignite svoje dizajne na sljedeći nivo.

(Naslovna slika Izvor: Unsplash )

Dizajneri bi trebali biti svjesni i koristiti ove principe prilikom kreiranja reklama, web stranica i digitalnih sučelja.

Prema za geštalt psihologiju, vizuelna hijerarhija stvara obrasce u vizuelnom polju gledalaca koji čine da se neki elementi ističu ljudskom oku. To je ono što sugerira ili stvara vizualnu hijerarhiju od važnosti.

Sada razgovarajmo o tome zašto je vizualna hijerarhija važna za dizajnere.

Zašto je vizualna hijerarhija važna

Sada kada znate šta je vizualna hijerarhija, vjerovatno postaje jasno zašto bi dizajneri trebali znati i koristiti ovaj princip u svom radu.

Grafički dizajn je oduvijek bio digitalna umjetnost, ali u posljednje vrijeme cijela industrija postaje više „online“, što znači da se grafički dizajni često vide i distribuiraju online putem web stranica, društvenih medija ili oglasa.

Korisničko iskustvo je ključni faktor koji treba imati na umu kada kreirate grafički dizajn za internet. Za razliku od bilborda ili tiskanog djela, online dizajni se često koriste funkcionalno da vode korisnike kroz web stranicu, podstaknu ih da kliknu na gumbe za kupovinu i ohrabre ih da kliknu na druge veze.

Evo sjajnog primjera kako tipično oko bi putovalo preko aodredišna stranica ili web stranica zasnovana na zakonima vizualne hijerarhije.

Korisničko iskustvo u dizajnu je cjelokupno iskustvo korisnika u interakciji s proizvodom kao što je web stranica ili aplikacija, posebno u smislu koliko je funkcionalno korištenje.

Način na koji kupac stupa u interakciju i doživljava korisničko sučelje drastično mijenja njihovo mišljenje o brendu ili proizvodu.

To znači da dizajn mobilnih uređaja i dizajn web stranica moraju biti visoko optimizirani i jedan od najboljih načina da to učinite je korištenje osnovnih principa vizualne hijerarhije.

Dakle, hajde da uđemo u srž vizualne hijerarhije i razgovarajmo detaljno o svakom od principa i kako se oni odnose na rad grafičkog dizajna.

Osnovni principi vizualne hijerarhije

Principi vizualne hijerarhije su vrlo slični osnovnim principima grafičkog dizajna.

U suštini, želite da vaš dizajn bude estetski ugodan. Osnovni principi dizajna zahtijevaju pažljivu upotrebu boja, razmaka, kontrasta i uzoraka.

Osnovni principi vizualne hijerarhije koje smo odabrali za ovaj članak su slični, s nekim nijansama. Postoji, naravno, više principa koji utiču na vizuelnu hijerarhiju, ali ovo bi trebalo da bude odlično mesto za početak ako je ovo vaše prvo iskustvo da uđete u koncept vizuelne hijerarhije.

Postoji trenutna hijerarhija koju kreiraju ljudsko oko kada uzmete u obzir umjetničko djelo,tekst ili vizuelni dizajn. Određeni pojedinačni elementi će stajati na vama, a kao dizajneru, bitno je kontrolirati kako se vaš rad percipira.

Počnimo s našim prvim principom: boja.

Boja

Boja je jedan od glavnih elemenata dizajna. Brendovi koriste boje i simbole kako bi svoje proizvode učinili lako prepoznatljivim i nezaboravnim.

Pomislite na poznati McDonald'sov luk ili sliku Starbucks sirene. Ovo su primjeri kako određeni logotipi mogu postati ukorijenjeni u našem kolektivnom pamćenju.

Boja u vizualnoj hijerarhiji određuje područje kojem oko odmah gravitira u dizajnu.

Varijacija u boji je tipično najbolje, ali nemojte pretjerivati ​​s odabirom boja.

Previše kontrastnih boja ili svijetlih boja može biti neodoljivo i stvoriti haotično iskustvo dizajna. Ali previše prigušenih boja može spriječiti da se dizajn vizualno ističe.

Također je važno razmotriti teoriju boja i koristiti komplementarne kombinacije boja.

U vizualnoj hijerarhiji, tople boje obično dolaze do prednji dio dizajna, dok hladne boje padaju u pozadinu.

Međutim, ako svoj dizajn stavite na svijetlu pozadinu, ovaj efekat je obrnut. Miješanje temperatura boja i kreiranje dizajna sa hladnim i toplim bojama može stvoriti dubinu u dizajnu.

Znajući to, lako je razumjeti kako izbor boja može uvelikeutiču na to kako ljudsko oko percipira vaš dizajn.

Uzorci

Zabavna činjenica: svako ima obrazac gledanja koji koristi da apsorbuje informacije i sadržaj.

Dva najčešća oblika obrazaca gledanja su Z uzorak i F uzorak.

Z uzorak:

• Oko prati putanju kao što je Z, gore lijevo desno, zatim dolje lijevo i preko desno
• Najbolje se koristi za dizajn koji nije sadržajan
• Pomaže gledaocima da skeniraju elementi brzo

F uzorak:

• Oko prati putanju poput F, od gornjeg lijevog do gornjeg desnog , zatim dolje do sljedećeg reda s lijeva na desno i ponavlja se duž horizontalnih linija
• Najbolje za dizajne s velikim sadržajem
• Pomaže gledaocima da skeniraju slike i naslove

Kao dizajner, najveća stvar koju treba znati je da su stranice s velikim sadržajem najbolje u F-uzorcu, dok stranice s manje sadržaja najbolje čitaju sa Z-uzorkom.

Oba obrasca dizajna služe svrhu i iskoristiti prirodni obrazac koji oko prati prilikom čitanja informacija. Slijeđenje ovih obrazaca i njihovo korištenje u svoju korist pomoći će vašim gledateljima da bolje razumiju vaš sadržaj i namjere.

Kontrast

Koristite kontrastne boje i simbole najbolji je način da naglasite informacije i privlače pažnju na određeni dio dizajna.

Upotreba tamne pozadine ilisvijetla pozadina za naglašavanje informacija u vašim dizajnima je odličan način da se vizualna hijerarhija koristi na jednostavan, ali efikasan način.

Ovaj element vizualne hijerarhije igra vitalnu ulogu u tome kako se dizajn percipira i u velikoj je mjeri vezan za boju . Kontrast se često stvara korištenjem boje za isticanje.

Svaki istaknuti element koji želite naglasiti treba da bude u podebljanoj boji ili okružen prigušenim bojama kako bi se istakao.

Razmak

Lokacija, lokacija, lokacija.

Baš kao na tržištu nekretnina, lokacija je od vitalnog značaja za vaše dizajne. Gdje i kako ćete razmjestiti stvari u svom radu bit će od velike važnosti u tome kako će vaš komad biti konstruiran.

Bijeli prostor se može koristiti za kreiranje minimalističkog dizajna koji naglašava jednu stvar. Ovaj prazan prostor može biti odličan način za kontrastiranje podebljane središnje slike u vašem dizajnu.

Možete ići drugim putem i koristiti mnogo različitih objekata da kreirate maksimalistički dizajn. Kada se urade ispravno, ovi dizajni su privlačni i zabavni za gledanje.

Način na koji poravnavate tekst u dizajnu također ima veliki utjecaj na cjelokupni izgled vašeg sadržaja. Evo nekoliko primjera kako to može izgledati.

I, kao što možete vidjeti u nastavku, veličina i položaj objekata mogu učiniti da izgledaju veći i važniji ili manji i suptilniji.

Takođe je važno za postrojavanje objekata, njihovo organiziranje u oblik ili ostavljanjesporadično.

Kako koristiti vizualnu hijerarhiju u grafičkom dizajnu

Sada kada smo pokrili što je vizualna hijerarhija, pogledajmo neke primjere dizajna koji savršeno prikazuju vizuelni odnosi i vizuelna organizacija.

Dizajneri koriste osnove vizuelne hijerarhije sve vreme, kao što su beli prostor i namerno prigušene boje uparene sa vizuelno upečatljivim objektom.

U nastavku su neki primeri kako vizuelno hijerarhija djeluje u više oblika grafičkog dizajna: tipografija, infografika, web dizajn, reklame i štampani materijali.

Tipografija

Tipografija je ključni element dizajna koji može biti teško savladati.

Vrsta fonta, velika slova, veličina, naglasak i položaj mogu drastično utjecati na to kako gledatelj čita vaš tekst.

Često u oglašavanju ili web dizajnu, tekst je najvažnija stvar koju vaši gledaoci mogu shvatiti, tako da je važno da budete sigurni da je ispravno.

Ovaj primjer pokazuje kako možete kreativno postaviti tekst da biste naglasili i grupirali koncepte i riječi i napravili pobrinite se da se važne riječi pročitaju prve i da se lako razumiju.

Želite da gledaoci mogu brzo razumjeti ono što komunicirate, čak i ako samo pogledaju vaš dizajn na nekoliko sekundi.

Infografija

Infografija je odličan način za prikaz i organiziranje činjenica i informacija.

Kreiranje dizajna samješavina riječi i simbola čini informacije lakše probavljivim i zanimljivijim za gledanje.

Ali morate biti oprezni. Ne želite previše pojednostavljivati ​​i pretpostaviti da će vaša publika razumjeti određene nišne simbole.

A budući da koristite manje riječi, morate učiniti sve što možete da svoje činjenice istaknu na stranici. Evo sjajnog primjera kako to možete učiniti.

Možete vidjeti da su u prvoj iteraciji svi simboli jednobojni, što ne pomaže gledaocu da odmah shvati o čemu se govori.

U drugom primjeru, jedan od simbola je obojen mnogo svjetlijom bojom, stvarajući kontrast i naglasak koji odmah privlače vaše oko.

Ovo je način na koji možete kreirati efektne dizajne uz samo malo podešavanje boje za poboljšanje korisničkog iskustva.

Web dizajn

U web dizajnu je korisničko sučelje sve.

Ako posjetitelj vaše web stranice može' Ako se lako snađu, odmah će otići i nije vjerovatno da će se vratiti.

Ovdje stupaju u igru ​​mnogi principi vizuelne hijerarhije o kojima smo razgovarali. Kontrast, razmaci i obrasci mogu posjetiteljima olakšati (ili otežati) putovanje kroz web lokaciju.

Evo primjera dobre i loše vizualne hijerarhije na jednostavnoj odredišnoj stranici.

Naglašavanjem važnih elemenata i kreiranjem jasnog korisničkog putovanja, veća je vjerovatnoća da ćete to učinitivodite korisnike da kupe proizvod, pročitaju vaš sadržaj ili se prijave za uslugu.

Oglasi

Oglasi su svuda gdje pogledamo. Ali samo se neki ističu i ostavljaju utisak.

Da biste kreirali oglas koji ostavlja utjecaj na vašeg gledatelja, možete koristiti vizualnu hijerarhiju kako biste osigurali da odmah privučete njihovu pažnju i da je zadržite dovoljno dugo za komunikaciju svoju poruku.

Upotrebom svih elemenata o kojima smo gore govorili, možete osigurati da će se vaš oglas izdvajati od ostalih i biti lak za probavu i razumijevanje.

Evo sjajnog primjera kako razmaci , boja i kontrast mogu utjecati na način na koji se vaš dizajn percipira.

Slika je previše raširena u prvoj verziji, a boje nisu toliko upečatljive. Druga verzija rješava oba problema i stvara sveukupno upečatljiviju sliku.

Štampani materijali

Vizuelna hijerarhija nije samo za digitalne slike. Potreban je iu štampanim materijalima.

Štampani materijali kao što su posteri, vizit karte i časopisi koriste osnovna pravila vizuelne hijerarhije da privuku i informišu svoju publiku.

Evo primjera kako vizuelna hijerarhija menja izgled vizitkarte.

U prvom pokušaju, korišćeni razmaci i boje ne pomažu čitaocu da odmah identifikuje važne informacije na kartici. Jednom kada se fiksira, vaše oko odmah pronalazi ime na kartici i zna njegovo