Kontrast u web dizajnu: saveti i primeri

Kontrast i identitet brenda

Kada želite da zaposlite najbolje ljude da dizajnirajte svoju veb stranicu, najbolji stručnjaci u poslu će se najverovatnije prvo raspitati o vašem brendu. Koji je identitet vašeg brenda? Generalno, koji stil najbolje odgovara poruci vašeg brenda i sadržaju na mreži? Da li vaš brend ima imidž gde minimalistička, crno – bela šema boja može izazvati osećanja koja želite da probudite u svojoj publici? Ili, da li je prirodna paleta boja sa različitim nijansama način da poboljšate svoju poruku? Da li vam je potrebna uniforma ili različite veličine?

Kao što vidite, postoji mnogo različitih stvari koje morate označiti pre nego što dobijete konačni proizvod, a većina ovih procesa je manje – više isprepletena ili povezana.

Kontrast se, u suštini, smatra jednim od pet osnovnih principa vizuelnog dizajna u svetu veb dizajna, a svih ovih pet elemenata zajedno rade na stvaranju nezavisnog vizuelnog identiteta na mreži koji obuhvata suštinu vašeg brenda i komunicira sa vašom publikom.

Značaj kontrasta

Hajde da vidimo šta zapravo čini kontrast tako važnim.

Šta je kontrast?

Jednostavno rečeno, kontrast predstavlja odnos između dva (ili potencijalno više) dizajnerskih elemenata čije su različite vizuelne karakteristike naglašene kada su oboje prikazani zajedno. Generalno, stepen kontrasta između ova dva tela je nesrazmeran stepenu njihove sličnosti. To znači da što manje sličnosti dva tela dele, to je veći kontrast među njima.

Na primer, svetlo plava ne bi imala mnogo efekta na pastelnom interfejsu. Međutim, ako promenite svetlo plavu u tamnu boju (poput tamnog patlidžana), razlike bi bile izraženije i privukle bi pažnju posetilaca.

Zašto biste trebali koristiti kontrast?

Kontrast se može postići oblikom, bojom, veličinom itd. Generalno, oni mogu pomoći u stvaranju osećaja vizuelne hijerarhije. Naglašavajući razlike među elementima, ljudi mogu odmah reći na koje se delove veb stranice treba fokusirati i pomaže im da efikasnije razlikuju različite delove veb sajta i veb stranice.

Najbolji način da shvatite važnost kontrasta je učenje o različitim vrstama koje postoje, a zatim ih možete koristiti u svoju korist.

Vrste kontrasta

Boja

Najverovatnije, ovo su najpoznatiji i verovatno među najočiglednijim vrstama kontrasta u dizajnu. To je verovatno najjednostavniji način da sadržaj ekrana učinite prepoznatljivijim i pristupačnijim. Najosnovniji razlog za to je činjenica da se čitljivost teksta uglavnom oslanja na značajan kontrast sa pozadinom.

Dizajneri mogu stvoriti kontrast boja u svom dizajnu na nekoliko načina.

Za početak, postoji kontrast boja pomoću prekrivača slika koji mogu stvoriti jasan kontrast između naslova i pozadine. Ova metoda je prilično popularan način za filmsku sekciju ili za dramatizaciju glavnog sadržaja ili teksta.

S druge strane, takođe možete kreirati šeme kontrasta sa efektima filtera. Na primer, postoje delovi softvera za izradu veb stranica koji imaju svoj skup efekata filtera koji vam omogućavaju da primenite različite grafičke efekte od zamućenja, pomeranja boja, pa čak i slika. Sve ovo omogućava sjajne načine za isticanje elementa dizajna.

Kada ovo radite, jedna važna stvar koju treba zapamtiti je da se uverite da efekat filtera koji na kraju koristite odgovara paleti boja celokupnog veb sajta. To bi trebao biti prirodni deo šeme boja i slika vašeg brenda.

Veličina

Kontrast veličine će se uglavnom primenjivati na sve elemente dizajna na stranici. Pomislite na tastere, slike, tekstove, itd. Implikacije veličine koju na kraju odaberete za svaki od elemenata stranice mogu je napraviti manje ili više uspešnom. Kao takvi, morate biti oprezni pri određivanju veličine, jer odnos između vaših komponenti treba da bude prepoznatljiv i jasan.

Za početak, ako želite da dodate kontrast u veličini, trebali biste znati da veličina teksta može biti jedna od najosnovnijih stvari koje možete ispraviti. Ili zabrljati. Šeme tipografije i vizuelni sadržaj, poput naslova, tastera, pasusa teksta, elemenata menija, vektorske grafike, kolekcije slika i slično, svi imaju svoju arhitekturu informacija.

Kada posetilac dođe na vašu veb sajt, najverovatnije će početi da čita veća slova (u slučaju tekstova) pod pretpostavkom da je to naslov. Tek nakon toga preći će na podnaslove i tekst. To je jednostavan način za uvođenje informacione hijerarhije (od najvažnije do manje važne), a istovremeno pomaže čitaocu da se kreće kroz sadržaj.

Još jedna stvar koju možete da uradite sa dimenzionisanjem je kreiranje različitih kolona prema vizuelnoj hijerarhiji. To znači da možete i dizajnirati svoje kolone na osnovu hijerarhije informacija između glavnog i sporednog sadržaja. Na primer, ako vodite medijski veb sajt, glavna priča može biti najšira kolona koja se nalazi u centru, dok sporedni članci mogu biti sa strane osnovne tabele sa tri kolone.

Razmak

Da bi stvorili kontrast sa razmakom, većina veb dizajnera će obično koristiti negativan prostor između ili oko elemenata. Praznina oko navedenog elementa naglašava kontrast između detalja dizajna koji ga okružuju i sveukupne pozadine.

Kao takvi, možete koristiti razmak za isticanje detalja, što je samo po sebi razumljivo, a takođe možete koristiti i margine za podešavanje da biste povećali razmak i istovremeno dodali kontrast.

Kada koriste prostor za dodavanje kontrasta, dizajneri moraju voditi računa o responzivnom dizajnu, jer će na svaku veličinu ekrana drugačije uticati jedinice prostora koje koristite, tako da uvek morate razmotriti i testirati svaki scenario kako biste bili sigurni da vaš dizajn neće izgubiti njegov efekat na drugom ekranu.

Pozadina i prednji plan

Što se tiče veb dizajna, kontrast pozadine i prednjeg plana nudi vam ogromne mogućnosti za eksperimentisanje. Za početak imate bezbroj tipova pozadine, a ista pozadina se može značajno promeniti kako posetilac sajta stupi u interakciju sa njom. I prednji plan je prilično sličan: bilo da odaberete statičke ili interaktivne elemente, korisnici će imati dramatično drugačije iskustvo sa celokupnim dizajnom i veb sajtom.

Da biste stvorili kontrast između ova dva elementa, možete koristiti Parallax.

S druge strane, uvek možete koristiti pozadinu sa dinamičnim i živopisnim slikama. Na primer, ako kreirate stranicu za knjigu na temu kuvanja, uvek možete izabrati da unutar knjige postavite pozadinu koja predstavlja neke od recepata.

Ono što je najvažnije ovde je da uvek imate na umu kako će različite vrste pozadine uticati na druge važne faktore kao što su brzina učitavanja i performanse veb sajta. Sjajne video slike mogle bi imati veliki uticaj na celokupni dizajn, ali ako se učitavaju predugo, mogu poraziti jedinu svrhu, a to je privlačenje korisnika.

Vrste elemenata

Kada gledate različite vrste medija koje možete da ugradite ili otpremite na svoj veb sajt, lako ćete videti da postoji bezbroj različitih opcija. Najteži deo je odlučivanje koje vrste (tipovi) najbolje odgovaraju vašem veb sajtu i i ciljevima sadržaja. Ovo često može biti izazovnije nego što zvuči.

Na primer, ponekad će fotografije biti vaša najbolja opcija, a ponekad bi vam moglo biti bolje sa jednostavnijim ilustracijama ili čak ručno nacrtanim skicama.

Međutim, možete izabrati i mešanje ovih različitih tipova elemenata sa jednom oblasti ili stranicom. I najzad, uspeli ste da napravite kontrast!

Da biste ovo izveli, i dalje morate to učiniti sa stilom i imati za to svrhu. Na primer, možete kombinovati fotografije sa različitim grafikama da biste dramatizovali pripovedanje. Takođe, možete koristiti različite tipove elemenata za vizualizaciju složenosti koja se dešava na stranici. To može biti jednostavno kao isticanje reči različitom tipografijom, bojom i animacijom radi stvaranja kontrasta.

Sve u svemu, eksperimentisanje sa različitim tipovima elemenata može biti odličan način da pokažete svoju kreativnost, međutim, imajte na umu svoju ciljnu publiku prilikom početka dizajniranja. Zapitajte se, hoće li oni shvatiti poruku? Da li ćete ih privući sa elementima koje želite da koristite ili biste se trebali držati tradicionalnijeg pristupa?

Oblici

Korišćenje različitih oblika i vizuelne različitosti je osnovni princip  u veb dizajnu jer može drastično pomoći u poboljšanju angažmana, a oblici vam takođe pružaju priliku da se poigrate vizuelnom hijerarhijom koja je kontrastna vrsta o kojoj smo već spomenuli ranije u tekstu.

Dakle, za početak možete jednostavno razlikovati različite elemente priče. Korišćenje različitih oblika da bi se napravila razlika između različitih delova na početnoj stranici. Korišćenje ovakve metode segmentacije može vam zapravo pomoći da postignete dva cilja: produživanje odeljka za pretraživanje dok otkrivaju celokupni dizajn i njegovo korišćenje, koje im  pomaže da identifikuju različite odeljke sadržaja.

Takođe, možete izabrati da svom okruženju dodate raznolikost, čak i najjednostavnije na stranici.

Na primer, uzmite pozadinu i na njoj napravite promenljive animacije koje se menjaju dok se korisnik pomera stranicu. Ovo je poput paralaksnog pomeranja ili predstavljanje multimedijalne priče pri pomeranju stranice, međutim, to je i odličan način da popunite inače dosadnu pozadinu i iskoristite najjednostavnije elemente.

Oblici pozadine/animacije takođe mogu poboljšati detalje dizajna prednjeg plana, stvarajući zanimljivu i povezanu sveukupnu prisutnost na mreži.

Kada eksperimentišete sa okruženjima i oblicima, možete eksperimentisati sa konturisanim oblicima, 3D efektima, efektima senki, ručno nacrtanim skicama i još mnogo toga.

Upotreba kontrasta za isticanje

Na kraju, svaki veb kreator radi na postizanju jednog glavnog cilja: stvoriti veb stranice koje se ističu i koje privlače pažnju ciljne publike i na taj način nadjačavaju konkurenciju.

Stvaranje takvih veb stranica može se postići kontrastom. Kada koristite elemente koji su međusobno kontrastni, u osnovi pokazujete svoje sposobnosti kao profesionalni dizajner, a dokazujete i da možete stvoriti veb stranice koje se ističu jer sadrže različite dizajnerske entitete i elemente koji, iako se ponekad potpuno razlikuju , zajedno mogu biti usklađeni.