Kako svladati dizajn izgleda

Potpuni vodič za učenje osnova vizualnog dizajna.

Pitanje od milijun dolara: koja je tajna dobrog dizajna?

Možemo ići filozofski o ovome , ali općenito govoreći, poslovična 'tajna' dobrog dizajna leži u načinu na koji organizirate svoje vizualne elemente, u odnosu na svoje platno i međusobno. Uglavnom, upravo smo opisali dizajn izgleda. Što se, kad bolje razmislite, vidi kamo god pogledate.

Uzmimo, na primjer, izgled časopisa. Njihov dizajn slijedi klasični rešetkasti sustav (za minutu ćemo naučiti sve o rešetkama). Obično je sve poravnato lijevo, desno i dolje. Stupci posebno imaju jasno poravnato poravnanje koje stranicu čini ne samo vizualno privlačnom, već i lako čitljivom i autoritativnom. Veliki naslovi privlače pozornost gledatelja, dok podnaslov dolazi kao kontrast u veličini kako bi se stvorila vizualna hijerarhija informacija.

Linda Gaom, Behance

Sve ove kvalitete čine stranicu dizajn je čist, strukturiran i lak za čitanje, te su u skladu sa savjetima o kojima ćemo dalje govoriti. Ali prvo, shvatimo više o samom dizajnu izgleda.

Što je dizajn izgleda?

Dizajn izgleda odnosi se na raspored grafičkih elemenata kako bi se privukla pozornost čitatelja i prenijela određena poruka na vizualno privlačan način .

Dakle, ne razgovaramomjesto odmora, dok drugi elementi daju smjer.

Jednostavan način da to shvatite je na primjeru naše web stranice. Grafika je jasno odvojena od teksta, kao i pozivi na akciju, tako da se pažnja gledatelja kreće od jedne skupine informacija do druge.

Princip #5. Koristite kontrast

Provjerite imate li dovoljno kontrasta u svom dizajnu.

Kontrast pomaže organizirati vaš dizajn i uspostavit će prijeko potrebnu hijerarhiju i staviti naglasak na ono što je važno.

Više od toga, dobro korištenje kontrasta također dodaje vizualni interes cijelom dizajnu. Suočimo se s tim, raspored u kojem je sve iste veličine, oblika ili boje izgledat će dosadno. Kontrast začinjava stvari.

Vaša prva pomisao može biti kontrast boja, poput toplog naspram hladnog, tamnog naspram svijetlog, plavog naspram narančastog. Ali dok je boja iznimno bitno načelo kontrasta, postoje i kontrasti tipa, poravnanja i veličine. I zapamtite, kontrast je također relativan. Ima značenje samo u jukstapoziciji s drugim elementima.

Evo nekoliko primjera izgleda koji koriste ovo pravilo na pametan i lijep način. Primijetite kontrast u tipografiji, boji, pa čak i kontrast u veličini između elemenata.

Izvor: IAG akcijski plan za pomirenje

Načelo #6. Ponavljanje, uzorak, ritam

Kada razmišljamo o ponavljanju, mislimoistog elementa iznova i iznova.

Ali je drugačijeg dizajna. Definitivno nije tako dosadno. Kada se pravilno koristi, ponavljanje zapravo može osnažiti vaš dizajn.

Pokušajte identificirati i ponovno upotrijebiti motiv kroz svoj izgled tako da se različita područja osjećaju povezanima i dijelom iste kompozicije. To će pomoći da vaš dizajn ima temu. Ponavljanjem elemenata ne samo da isporučujete u skladu s očekivanjima vaše publike, već ćete i poboljšati korisničko iskustvo. Ako ste dosljedni, korisnici se osjećaju ugodnije.

To možete učiniti ponavljanjem oblika ili simbola. Ili čak shema boja, tip slova i općenito isti stil.

Dobra navika koju treba steći jest koristiti tip slova u velikoj obitelji. Ograničite različiti broj uzoraka, debljine linija/stilova i boja i ponavljajte cijelo vrijeme. Također, pokušajte zadržati isti stil slika i grafika. Na primjer, upotrijebite 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 ne završava ovdje. Grafički dizajn nije egzaktna znanost i ne bi trebao biti ograničen na savjete i načela. Kao što je istina u svim područjima stvaranja, ne postoji čvrsto pravilo. Odstupanje od ovih savjeta na suptilan način će dodati dubinu i raznolikostsvoje dizajne.

Usprkos tome, oni su odlična polazna točka i potičemo vas da ih isprobate. I javite nam kako su radili!

Preuzmite Vectornator da biste započeli

Podignite svoje dizajne na višu razinu.

Preuzmite datoteku o dizajnu logotipa ovdje. Ali dizajn tiskanog materijala, kao što su novine, časopisi, plakati i njihovi digitalni pandani, kao i dizajn weba, aplikacija ili UX/UI dizajna.

Riječ 'izgled' daje nam puno savjeta. To znači raspored unaprijed određenih elemenata na stranici.

Kada je izgled učinkovit, izgleda dobro i vodi gledatelja da razumije poruku koju dizajn pokušava prenijeti. Razumijevanje izgleda je stoga ključno u stvaranju privlačnih, učinkovitih, jednostavnih i ugodnih kompozicija.

Ako raspored ne prenosi dobro svoju poruku publici, ili drugim riječima, ne "dobro se čita ", dizajn će biti neučinkovit bez obzira koliko trendi izgledao. U području dizajna izgleda, sadržaj zamjenjuje trendove i trikove.

Svrha dizajna izgleda

Brzo prenijeti poruku

Ovo je ključno. Dizajn izgleda uspostavlja odnos između grafičkih sredstava kako bi se postigao glatki tijek pokreta očiju za maksimalnu učinkovitost i učinak.

Stvaranje ravnoteže

Korištenje načela dizajna izgleda najjednostavniji je način za stvaranje osjećaj ravnoteže i simetrije u vašim dizajnerskim projektima, a da ne postanete dosadni.

Za stvaranje kohezivnosti

Raspored vam pomaže rasporediti mnoge elemente vašeg dizajna na lako probavljiv, kohezivan i logičan način.

Za stvaranje ljepote

Ravnoteža i struktura prirodno stvaraju ljepotu.Ako je vaš dizajn izgleda ispravno napravljen, automatski će postati vizualno privlačan gledatelju. Što manje truda gledatelji trebaju uložiti da razumiju poruku, to će vaš dizajn djelovati privlačnije.

Dizajner Frank Philippin za njegovu knjigu 'I Used to Be a Design Student: Then - Sada.' Izvor: DesignBoom

Elementi dizajna izgleda

Tekst

Ovo ne uključuje samo tijelo teksta ili paragrafe, već i naslove, podnaslove, zaglavlja i podnožja. Vaš izbor tipografije, boje i veličine postići će različite učinke na način na koji će se vaš izgled prevesti vašoj publici.

Slika

Najčešće vrste slika su fotografije, ilustracije ili infografike.

Oblici

Oblici mogu biti geometrijski, vrlo uglasti, ili mogu biti organski, oponašajući svijet prirode. Mogu biti i apstraktni. Apstraktni oblici bili su vrlo moderni u protekloj godini, budući da smo vidjeli kako ih web dizajneri uključ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 ocrtavanje prostora između drugih vizualnih elemenata.

Bijeli prostor

Svaki dizajn izgleda imat će određenu količinu bijelog prostora koji će omogućiti vašim elementima da dišu i ističu se sami.

Zlatna načela dizajna izgleda

Primijetit ćete da načeladizajna izgleda slijedi mnogo temeljnih načela dizajna. Kao korištenje boje na određeni način, tipografija, ponavljanje, kontrast, hijerarhija i ravnoteža.

Načelo #1. Koristite rešetke

Mreže pomažu dizajnerima pozicionirati različite elemente dizajna poput teksta i slika na način koji izgleda koherentno i lako ih je pratiti.

Pružaju osjećaj reda, sprječavaju elemente da nadvladaju jedni druge , i što je najvažnije, rešetke će također ispraviti vaše poravnanje. Čini vaš rad čišćim i profesionalnijim.

Izvor: hgmlegal.com

Vidi također: 15 poznatih animatora koje bi svi trebali znati

Anatomija mreža

Možda mislite da su to samo okomite i vodoravne linije, ali rešetka se sastoji od nekoliko dijelova. Mnogi, zapravo. Ovdje je najvažnija terminologija koju trebate znati u osnovnoj mreži:

• Format je cijelo područje vašeg konačnog dizajna. Dakle, ako dizajnirate nešto za ispis, 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.
• Flowlines su vodoravne linije koje odvajaju vaš izgled na paralelne dijelove. Linije toka pomažu čitljivosti vašeg dizajna i usmjeravaju čitatelja da ispravno prati sadržaj.
• Moduli su blokovi koji se tvore vodoravnim i okomitim linijamavodovi bilo koje mreže. Ako bolje razmislite, oni su građevni blokovi svake mreže. Svi vaši okomiti moduli stvaraju vaše stupce, dok sve vaše vodoravne rešetke stvaraju vaše retke.
• Regije su grupe povezanih modula, okomitih ili vodoravnih. Ne postoje pravila o tome kako ćete ih organizirati.

Izvor: Radversity

Vrste rešetki

Raspored rešetki prvi put je korišten za raspoređivanje rukopis na papiru.

Oni datiraju još iz 13. stoljeća, kada je francuski umjetnik Villard De spojio mrežni sustav sa zlatnim rezom kako bi proizveo ispisane izglede stranica s marginama. Ovaj mrežni sustav možete vidjeti do danas, što dokazuje većina tiskanih prijeloma knjiga i časopisa. Izdavači, urednici i dizajneri radije koriste standardne rešetke ne samo zato što izgledaju dobro, već zato što čitatelji očekuju da određeni elementi dizajna budu na određenom mjestu.

Mreže se mogu dizajnirati na dva načina: simetrično ili asimetrična. Simetrične rešetke slijede središnju crtu, gdje su okomite i vodoravne regije međusobno jednake; i stupci imaju istu širinu.

U asimetričnoj mreži , kao što naziv sugerira, margine i stupci nisu svi identični.

Na temelju ove klasifikacije postoji pet glavnih tipova rešetki rasporeda koji se koriste diljem svijeta na koje se možete osloniti:

Rukopisrešetke su najčešća vrsta mreže za dokumente. Oni odvajaju zaglavlje, podnožje i margine te u osnovi stvaraju pravokutnik unutar formata (ili stranice) koji daje granice vašem tekstu. Oni su osnova za časopise, novine i knjige. Dakle, to je vjerojatno izgled koji vam je najpoznatiji.

Izvor: UXplanet

Izvor: Radversity

Vidi također: 10 uobičajenih pogrešaka ilustratora početnika koje trebate izbjegavati

Mreže stupaca još su jedan favorit u izdavanju časopisa. Tipičan izgled časopisa koristi mreže stupaca za razdvajanje teksta u odjeljke koji se lako čitaju. Ali vrlo su popularni i za web stranice. Možete koristiti bilo što od dvije do šest rešetki. Više je moguće, ali nije uobičajeno. Vrlo važna stvar kod rešetki stupaca je da su razmaci između stupaca, odnosno oluka, jednako međusobno udaljeni.

Simetrične rešetke stupaca koriste se primjerice u novinama, dok se asimetrična mreža stupaca preferira u web dizajnu .

Izvor: UX Planet

Izvor: Radversity

Modularne rešetke slične su mreži stupaca, ali oni također uzimaju u obzir horizontalne strujne vodove. Ova vrsta rešetke je potrebna kada morate organizirati različite elemente u svom izgledu, a rešetke 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 fantastične su za kompozicije temeljene na tekstu. Osnovna linija je redak u kojem se nalazi tekst dok tipkate, a početna linija je razmak između dvije osnovne linije. Pitate se koliki bi trebali biti vaši naslovi ili podnaslovi?

Osnovne rešetke su tu da vašem tekstu daju tekući ritam.

Izvor: UX Planet

Izvor: Fragaria

Hijerarhijske mreže manje nalikuju mreži nego svi njihovi pandani. Unatoč tome, oni su vrlo korisni kada se elementi dizajna organiziraju po važnosti. Hijerarhijske mreže mogu se temeljiti na modularnim mrežama ili čak možete izraditi vlastite. Web-mjesta često koriste ovu mrežu, posebno digitalni časopisi i novine imaju tendenciju da se više oslanjaju na hijerarhijske mreže nego mreže stupaca u svom prijelazu na digitalizaciju.

Izvor: UX Plane

Princip #2. Koristite negativni prostor

Često mislimo da su praznina, tišina ili nedostatak boje loša stvar. Ali ne uzimamo u obzir kako su oni čvrsti temelj kontrasta.

Također se naziva bijeli prostor, negativni prostor je ono područje u vašem dizajnu koje nema nikakvih stvarnih elemenata. To je područje koje je ostalo prazno. Ne samo da okružuje vašu imovinu, već također stvara potrebne veze među njima. Zbog toga je negativni prostor opravdan element dizajna i ima ogroman utjecaj na učinkovitost vašeg izgledadizajn je.

Dobar naspram lošeg negativnog prostora

Negativni prostor će vam pomoći odvojiti različita područja u vašem dizajnu, a istovremeno će vašem izgledu omogućiti da diše. Pomaže kod vizualne hijerarhije i vizualne ravnoteže; postavlja korisnikov fokus na ključne elemente; smanjuje razinu distrakcije; i konačno, dodaje stil i eleganciju vašem dizajnu.

Neiskusni dizajneri mogu imati tendenciju ispuniti što je moguće više svojeg platna, povećavajući tekst ili povećavajući logotip ili sliku. No davanje prostora vašim elementima omogućuje gledatelju da brže i ugodnije odabere određene informacije.

Ako sve privlači pozornost vašeg gledatelja, ništa se ne čuje.

– Aaron Walter, 'Dizajn za emocija'

Jednostavan način da odredite svoj negativni prostor je pomoću modularne mreže. Postavljanjem toga na vrh svog dizajna, možete jednostavno vizualizirati koji moduli mogu ostati prazni, a koji bi trebali biti popunjeni.

Dizajner Brunswicker, Izvor: Codesignmag.com

Načelo #3. Odaberite jednu žarišnu točku

Je li vas klijent ikada zamolio da povećate logotip? A onda da naslov bude još veći?

Ne možete sve naglasiti. To poništava smisao dobrog dizajna. Baš kao i vrijeme, fokus je relativan. Da bi se jedan element istaknuo, drugi mora poslužiti kao pozadina. Neki elementi moraju dominirati drugima kako bi se vaš dizajn prikazaovizualnu hijerarhiju.

Središnja točka u dizajnu je jedan element s najvećom vizualnom težinom. To je element koji prvi privlači poglede, više nego bilo što drugo u vašem izgledu.

Žarišna točka najavit će vašoj publici gdje njihovo putovanje gledanja počinje 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. Primijetite koliko je učinkovita donja žarišna točka

Dizajnirao Braulio Amado za Bloomberg Businessweek, Izvor: Lijepo je to

Ali dok će žarišna točka privući pozornost vaše publike, sljedeće pravilo će vam pomoći u tome.

Načelo #4. Mislite na blizinu i protok

Načelo blizine je jednostavno. Osigurajte da su međusobno povezani elementi postavljeni zajedno.

Neposredna blizina označava da su vizualna sredstva povezana i postaju jedna vizualna jedinica koja pomaže organizirati vaš izgled.

Dakle, grupirajte samo sredstva dizajna koja su međusobno povezana i koristite džepove informacija o svom dizajnu kako biste svoju publiku doveli do dijela relevantnog sadržaja koji trebaju konzumirati. Ovo se također naziva načelo protoka.

Izvor: Satori Graphics

Dizajn s dobrim protokom vodit će pogled gledatelja kroz raspored, od elementa do elementa, s lakoćom. Vaše žarišne točke povući će oko i postati