Sadržaj
Puni vodič za učenje osnova vizuelnog dizajna.
Pitanje od milion dolara: koja je tajna dobrog dizajna?
O ovome možemo ići filozofski , ali općenito govoreći, poslovična 'tajna' dobrog dizajna leži u načinu na koji organizirate svoje vizualne elemente, u odnosu na vaše platno, i međusobno. U suštini, upravo smo opisali dizajn izgleda. Što je, kada razmislite, svuda gdje pogledate.
Uzmite izgled časopisa, na primjer. Njihov dizajn prati klasični grid sistem (sve o mrežama ćemo naučiti za minut). Sve je obično poravnato lijevo, desno i na dnu. Kolone posebno imaju jasno opravdano poravnanje koje stranicu čini ne samo vizuelno privlačnom, već i lakom za čitanje i autoritativnom. Veliki naslovi privlače pažnju gledaoca, dok podnaslov dolazi kao kontrast u veličini kako bi se stvorila vizuelna hijerarhija informacija.
Linda Gaom, Behance
Svi ovi kvaliteti čine stranicu dizajn je čist, strukturiran i lak za čitanje, a usklađeni su sa savjetima o kojima ćemo dalje govoriti. Ali prvo, hajde da shvatimo više o samom dizajnu izgleda.
Šta je dizajn izgleda?
Dizajn izgleda odnosi se na raspored grafičkih elemenata kako bi privukao pažnju čitatelja i prenio određenu poruku na vizualno privlačan način .Dakle, ne razgovaramoodmorište, dok drugi elementi daju smjer.
Jednostavan način da to shvatite je da uzmete primjer naše web stranice, na primjer. Grafika je jasno odvojena od teksta, kao i pozivi na akciju, tako da se pažnja gledaoca kreće od jedne grupe informacija do sljedeće.
Princip #5. Koristite kontrast
Uvjerite se da imate dovoljno kontrasta u svom dizajnu.
Kontrast pomaže u organizaciji vašeg dizajna i uspostavit će prijeko potrebnu hijerarhiju i staviti naglasak na ono što je važno.Više od toga, dobra upotreba kontrasta takođe dodaje vizuelni interes kroz vaš dizajn. Suočimo se s tim, izgled u kojem je sve iste veličine, oblika ili boje će izgledati dosadno. Kontrast začinjava stvari.
Vaša prva pomisao bi mogao biti kontrast boja, kao što je toplo nasuprot hladnom, tamno nasuprot svijetlo, plavo naspram narandžaste. Ali dok je boja izuzetno bitan princip kontrasta, postoje i kontrasti tipa, poravnanja i veličine. I zapamtite, kontrast je takođe relativan. Ima značenje samo u usporedbi s drugim elementima.
Evo nekoliko primjera izgleda koji koriste ovo pravilo na pametan i lijep način. Obratite pažnju na kontrast u tipografiji, boji, pa čak i kontrast u veličini između elemenata.
Izvor: IAG akcioni plan pomirenja
Princip #6. Ponavljanje, uzorak, ritam
Kada razmišljamo o ponavljanju, mislimoiznova i iznova istog elementa.
Ali dizajn je drugačiji. Definitivno nije tako dosadno. Kada se pravilno koristi, ponavljanje zapravo može osnažiti vaš dizajn.
Pokušajte identificirati i ponovo upotrijebiti motiv u cijelom rasporedu tako da se različita područja osjećaju povezanima i dijelom iste kompozicije. To će pomoći vašem dizajnu da ima temu. Ponavljanjem elemenata ne samo da isporučujete u skladu sa očekivanjima vaše publike, već ćete poboljšati i korisničko iskustvo. Dosljednost čini da se korisnici osjećaju ugodnije.
To možete učiniti ponavljanjem oblika ili simbola. Ili čak šemu boja, tip slova i isti stil općenito.
Dobra navika za ulazak je korištenje fontova u velikoj porodici. Ograničite različit broj uzoraka, težine/stilova linija i boja i ponavljajte sve. Takođe, pokušajte da stil slika i grafike ostane isti. Na primjer, koristite ilustracije istog umjetnika.
Izvor: Thepentool.co
To je to. Ovo je šest principa koji će vam pomoći da organizirate svoj dizajn i postignete čišći, profesionalniji i uravnoteženiji izgled.
Ali vaše putovanje se ovdje ne završava. Grafički dizajn nije egzaktna nauka i ne bi trebao biti ograničen na savjete i principe. Kao što je istina u svim oblastima stvaranja, ne postoji čvrsto pravilo. Izbijanje ovih savjeta na suptilne načine će dodati dubinu i raznolikostVaši dizajni.
Ipak, oni su odlična polazna tačka i preporučujemo vam da ih isprobate. I javite nam kako su funkcionirali!
Preuzmite Vectornator da biste započeli
Podignite svoje dizajne na sljedeći nivo.
Preuzmite datoteku
o dizajnu logotipa ovdje. Ali dizajn štampanog materijala, poput novina, časopisa, postera i njihovih digitalnih pandana, kao i dizajn weba, aplikacija ili UX/UI.Riječ 'izgled' nam daje mnogo savjeta. To znači raspored unaprijed određenih elemenata na stranici.
Kada je izgled efikasan, izgleda dobro i vodi gledatelja da razumije poruku koju dizajn pokušava prenijeti. Razumijevanje izgleda je stoga ključno u stvaranju zanimljivih, učinkovitih, jednostavnih i ugodnih kompozicija.
Ako izgled ne prenosi dobro svoju poruku publici, ili drugim riječima, ne "čita se dobro ", dizajn će biti neefikasan bez obzira koliko moderno izgledao. U području dizajna izgleda, sadržaj zamjenjuje trendove i trikove.
Svrha dizajna izgleda
Brzo prenijeti poruku
Ovo je ključno. Dizajn rasporeda uspostavlja odnos između grafičkih sredstava kako bi se postigao nesmetan tok pokreta oka za maksimalnu efikasnost i uticaj.
Za stvaranje ravnoteže
Korišćenje principa dizajna izgleda je najjednostavniji način za kreiranje osjećaj ravnoteže i simetrije u vašim dizajnerskim projektima bez da postane dosadan.
Za stvaranje kohezivnosti
Izgled vam pomaže da uredite mnoge elemente vašeg dizajna na lako probavljiv, kohezivan i logičan način.
Stvoriti ljepotu
Uravnoteženost i struktura prirodno stvaraju ljepotu.Ako je vaš dizajn izgleda pravilno napravljen, automatski će postati vizualno privlačan gledaocu. Što manje truda gledaoci treba da ulože da bi razumjeli poruku, to će vaš dizajn izgledati privlačnije.
Dizajner Franka Philippina za njegovu knjigu 'Nekada sam bio student dizajna: Onda - Sad.' Izvor: DesignBoom
Elementi dizajna izgleda
Tekst
Ovo uključuje ne samo tijelo teksta ili pasuse, već i naslove, podnaslove, zaglavlja i podnožja. Vaš izbor tipografije, boje i veličine će postići različite efekte na to kako će se vaš izgled prevesti vašoj publici.
Slika
Najčešći tipovi slika su fotografije, ilustracije ili infografike.
Oblici
Oblici mogu biti geometrijski, koji su vrlo ugaoni, ili mogu biti organski, oponašajući prirodni svijet. Mogu biti i apstraktne. Apstraktni oblici bili su vrlo trendi u protekloj godini, jer smo vidjeli da ih web dizajneri ugrađuju u složene i prostrane kompozicije.
Oblici mogu zamijeniti sliku. Ili se mogu koristiti za dodavanje grafičkih elemenata na stranicu, isticanje teksta ili razgraničenje prostora između ostalih vizuelnih elemenata.
Beli prostor
Svaki dizajn izgleda će imati određenu količinu belog prostora koji će omogućiti vašim elementima da dišu i ističu se sami.
Zlatni principi dizajna izgleda
Primijetit ćete da principidizajna izgleda prate mnoge osnovne principe dizajna. Kao korištenje boje na određeni način, tipografije, ponavljanja, kontrasta, hijerarhije i balansa.
Princip #1. Koristite mreže
Mreže pomažu dizajnerima da pozicioniraju različite elemente dizajna poput teksta i slika na način koji izgleda koherentno i lako za praćenje.
One pružaju osjećaj reda, sprečavaju elemente da nadjačaju jedni druge , i što je najvažnije, mreže će također ispraviti vaše poravnanje. Učinite vaš rad čistijim i profesionalnijim.
Izvor: hgmlegal.com
Anatomija mreža
Možda mislite da su to samo vertikalne i horizontalne linije, ali mreža se sastoji od nekoliko delova. Mnogi, zapravo. Evo najvažnije terminologije koju trebate znati u osnovnoj mreži:
- Format je cijelo područje vašeg konačnog dizajna. Dakle, ako dizajnirate nešto za print, format je stranica, a ako ste web dizajner, format je web stranica ili prozor preglednika.
- Margine su namjerni prazni prostori između formata i dizajna.
- Linije toka su horizontalne linije koje razdvajaju vaš izgled u paralelne dijelove. Protočne linije pomažu u čitljivosti vašeg dizajna i usmjeravaju čitaoca da ispravno prati sadržaj.
- Moduli su blokovi koji su formirani od horizontalnih i vertikalnih linijaprotočne linije bilo koje mreže. Ako razmislite o tome, oni su građevni blokovi svake mreže. Svi vaši vertikalni moduli kreiraju vaše kolone, dok sve vaše horizontalne mreže kreiraju vaše redove.
- Regije su grupe povezanih modula, bilo vertikalnih ili horizontalnih. Ne postoje pravila o tome kako odlučite da ih organizirate.
Izvor: Radversity
Vrste mreža
Greške rasporeda su prvo korištene za uređenje rukopis na papiru.
Oni datiraju još iz 13. stoljeća, kada je francuski umjetnik Villard De spojio sistem mreže sa zlatnim rezom kako bi proizveo odštampane rasporede stranica s marginama. Ovaj mrežni sistem možete vidjeti i dan-danas, što dokazuje većina tiskanih izgleda knjiga i časopisa. Izdavači, urednici i dizajneri radije koriste standardne mreže ne samo zato što izgledaju dobro, već i zato što su čitatelji očekivali da se određeni elementi dizajna nalaze na određenom mjestu.
Mreže se mogu dizajnirati na dva načina: simetrične ili asimetrično. Simetrične mreže prate središnju liniju, gdje su vertikalne i horizontalne regije jednake jedna drugoj; i kolone imaju istu širinu.
U asimetričnoj mreži , kao što ime kaže, margine i kolone nisu svi identični.
Na osnovu ove klasifikacije postoji pet glavnih tipova mreža rasporeda koje se koriste širom svijeta na koje se možete osloniti:
Rukopisgrids su najčešća vrsta mreže za dokumente. Oni odvajaju zaglavlje, podnožje i margine i u osnovi stvaraju pravougaonik unutar formata (ili stranice) koji pruža granice vašem tekstu. Oni su osnova za časopise, novine i knjige. Dakle, vjerovatno je to raspored koji vam je najpoznatiji.
Izvor: UXplanet
Izvor: Radversity
Mreže kolona su još jedan favorit u izdavanju časopisa. Tipičan izgled časopisa koristi mreže kolona za razdvajanje teksta u odeljke koji se lako čitaju. Ali vrlo su popularni i za web stranice. Možete koristiti bilo šta od dvije do šest mreža. Više je moguće, ali nije uobičajeno. Vrlo važna stvar u vezi sa mrežama stupaca je da su razmaci između stupaca, odnosno oluka, podjednako udaljeni jedan od drugog.
Simetrične rešetke stupaca koriste novine, na primjer, dok se asimetrična mreža stupaca preferira u web dizajnu .
Izvor: UX Planet
Izvor: Radversity
Modularne mreže su slične rešetki kolona, ali oni takođe uzimaju u obzir horizontalne protočne vodove. Ova vrsta mreže je potrebna kada morate organizirati različite elemente u svom rasporedu, a mreže stupaca jednostavno nisu dovoljne.
Modularne mreže imaju module jednake veličine što olakšava vizualizaciju vaših prostornih zona na različite načine.
Izvor: UXPlanet
Izvor: Radversity
Osnovne mreže su fantastične za kompozicije zasnovane na tekstu. Osnovna linija je linija na kojoj se nalazi tekst kada kucate, a vodeći je razmak između dvije osnovne linije. Pitate se koliki bi trebao biti vaš naslov ili podnaslov?
Mreže osnovnih linija su tu da pomognu da vašem tekstu date tečan ritam.
Izvor: UX Planet
Vidi_takođe: Koji su bili prvi animirani filmovi?
Izvor: Fragaria
Vidi_takođe: Kako prijaviti greške u VectornatoruHijerarhijske mreže manje liče na mrežu nego svi njihovi kolege. Bez obzira na to, oni su vrlo korisni kada organizirate elemente dizajna prema njihovom redoslijedu važnosti. Hijerarhijske mreže mogu biti bazirane na modularnim mrežama, ili čak možete kreirati vlastite. Web stranice često koriste ovu mrežu, posebno digitalni časopisi i novine imaju tendenciju da se više oslanjaju na hijerarhijske mreže, a ne na mreže kolona u svojoj tranziciji ka digitalizaciji.
Izvor: UX Plane
Princip #2. Koristite negativan prostor
Često mislimo da su praznina, tišina ili nedostatak boje loša stvar. Ali ne razmatramo kako su oni čvrsta osnova kontrasta.
Takođe se naziva i bijeli prostor, negativni prostor je ono područje u vašem dizajnu koje nema stvarne elemente. To je područje koje je ostalo prazno. Ne okružuje samo vašu imovinu, već stvara i potrebne veze između njih. Zbog toga je negativni prostor pravi element dizajna i ima ogroman uticaj na to koliko je vaš raspored efikasandizajn je.
Dobar naspram lošeg negativnog prostora
Negativan prostor će vam pomoći da odvojite različite oblasti u vašem dizajnu, a istovremeno će omogućiti vašem izgledu da diše. Pomaže u vizualnoj hijerarhiji i vizualnoj ravnoteži; postavlja fokus korisnika na ključne elemente; smanjuje nivo ometanja; i konačno, dodaje stil i eleganciju vašem dizajnu.
Neiskusni dizajneri mogu imati tendenciju da popune što je moguće više svog platna, povećavajući tekst ili dižući logotip ili sliku. Ali davanje prostora vašim elementima omogućava gledaocu da brže i udobnije izabere određene informacijske znakove.
Ako sve vikne na pažnju vašeg gledaoca, ništa se ne čuje.– Aaron Walter, 'Dizajn za emocija'
Jednostavan način da odredite svoj negativni prostor je korištenje modularne mreže. Postavljanjem toga na vrh vašeg dizajna možete lako vizualizirati koji moduli mogu ostati prazni, a koji bi trebali biti popunjeni.
Designer by Brunswicker, Izvor: Codesignmag.com
Princip #3. Odaberite jednu fokusnu tačku
Da li vas je klijent ikada zamolio da povećate logo? A onda da naslov bude još veći?
Ne možete sve naglasiti. Pobeđuje poentu dobrog dizajna. Kao i vrijeme, fokus je relativan. Da bi se jedan element istakao, drugi mora poslužiti kao pozadina. Neki elementi moraju dominirati drugima kako bi se vaš dizajn mogao prikazativizuelna hijerarhija.
Fokalna tačka u dizajnu je jedan element sa najvećom vizuelnom težinom. To je element koji prvi privlači pogled, više od bilo čega drugog u vašem rasporedu.Fokalna tačka će objaviti vašoj publici gdje počinje njihov put gledanja na vašem dizajnu. Dakle, to je početak priče koju pričate.
To se obično može postići korištenjem velike slike ili velikog izvora tipografije. Obratite pažnju na to koliko je efikasna fokusna tačka u nastavku
Dizajnirao Braulio Amado za Bloomberg Businessweek, Izvor: Lepo je da
Ali dok će fokusna tačka privući pažnju vaše publike, sljedeće pravilo će vam pomoći da ga vodite.
Princip #4. Misli na blizinu i protok
Princip blizine je jednostavan. Pobrinite se da elementi koji su međusobno povezani budu postavljeni zajedno.
Neposredna blizina označava da su vizuelna sredstva povezana i postaju jedna vizuelna jedinica koja pomaže u organizaciji vašeg izgleda.Dakle, samo sredstva za dizajn klastera koja imaju međusobnu vezu i koriste džepove informacija o vašem dizajnu kako biste vašu publiku usmjerili na dio relevantnog sadržaja koji treba da konzumira. Ovo se također naziva princip protoka.
Izvor: Satori Graphics
Dizajn s dobrim protokom će s lakoćom voditi oko gledatelja kroz izgled, od elementa do elementa. Vaše fokusne tačke će povući oko i postati
