Kako koristiti kontrast u web dizajnu: saveti i primena

Podelite:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Kontrast u web dizajnu je klasičan način da se osigura da različiti elementi dizajna dobro funkcionišu zajedno uprkos njihovim razlikama. Saznajte kako i zašto umetnost kontrasta može poboljšati dizajn vašeg web sajta.

Neka od prvih pitanja za mozganje koja postavljamo sebi kao kreatori web-a su: šta je moj identitet brenda? Koji „stil“ najviše odgovara mom sadržaju i njegovim porukama? Da li ima smisla koristiti minimalističku, belu i crnu šemu boja, ili neutralniju paletu boja sa različitim nijansama bež i smeđe boje? Da li slike brenda mog web sajta treba da koriste jednoličnu ili različitu veličinu?

Mnogo je okvira za vizuelni dizajn koji treba označiti tokom ovog procesa donošenja odluka. Mnogi od ovih procesa dotaknuće se odnosa naših dizajnerskih elemenata. Iako nesvesno, odlučujući između formata galerije slika, koliko fontova da koristite, kako će se sadržaj u prvom planu odnositi na pozadinu – svi ovi izbori vizuelnog dizajna dotiču se kontrasta.

Kontrast u dizajnu weba i interfejsa smatra se jednim od pet osnovnih principa vizuelnog dizajna. Zajednička osnova između ovih principa je da oni predstavljaju kako elementi dizajna zajedno rade kako bi formirali vizuelni entitet koji korisnici percipiraju i sa kojim komuniciraju.

Dakle, od ovih pet principa, šta kontrast čini toliko značajnim za vizuelni dizajn?

Važnost upotrebe kontrasta u web dizajnu

„5 principa vizuelnog dizajna u UKS“ Nielsen Norman Group

Šta je kontrast?

Kontrast je odnos između dva ili više elemenata dizajna čije su dramatične razlike naglašene kada su oba elementa prikazana zajedno. Stepen kontrasta između ovih elemenata nesrazmeran je stepenu njihove sličnosti: što su manje slične dve stavke, to je veći kontrast između njih. Na primer, svetlo plava ili bilo koja druga pastelna boja ne bi bila naročito istaknuta na interfejsu sa drugim bojama sličnih nijansi. Ali, ako bi se pastelni elementi uporedili sa tamnijim, podebljanim elementima poput duboke boje patlidžana, razlika između tamne i svetle boje bi bila izražena.

Zašto koristiti kontrast u web dizajnu?

Jedna od ključnih vrlina kontrasta u web dizajnu leži u njegovom uticaju na vizuelnu hijerarhiju. Kao što smo pomenuli, kontrast se može stvoriti promenom veličine, oblika, boje ili drugih karakteristika. Naglašavanje dihotomije važnosti između dva elementa dizajna ne zavisi od vrste kontrasta koji postoji – već od stepena polarnosti između njih. Najefikasniji način upotrebe kontrasta u web dizajnu je upoznavanje mnogih vrsta kontrasta koji mogu postojati. Kada pređete ovu osnovnu liniju, možete intuitivno primeniti sofisticirane oblike kontrasta na svoje dizajne.

6 tipova kontrasta u web dizajnu

1. Boja

Kontrasti boja su najpoznatija vrsta kontrasta u dizajnu. Jedna od najvećih tvrdnji o kontrastu boja je ta što je to jedna od najosnovnijih načina za omogućavanje pristupačnosti sadržaja na ekranu. Najosnovniji razlog za to je što se čitljivost teksta oslanja na postojanje značajnog kontrasta sa njegovom pozadinom. Dostupne šeme boja negiraju razlike između načina na koji ljudi sa oštećenjima vida ili oštećenim vidom boje komuniciraju sa digitalnim interfejsima. Ali kako kreatori weba mogu da kreiraju kontraste u bojama na svojim web sajtovima na otmen, elegantan način?

Kontrolišite kontraste boja sa pozadinama slika

Prekrivači pozadinske slike (kao i jednobojni ili obloženi obrasci) mogu omogućiti jasan kontrast između pozadine i naslova postavljenog direktno ispred nje. Ova tehnika se široko koristi za hero section, kao način dramatizovanja hero teksta ili sadržaja. Poluprozirno prekrivanje crne pozadine primenjeno na hero sliku u predlošku Elementor (prikazano gore) stvara suptilan kontrast i vizuelni balans između slike i belog naslova. Nijansa crne je dovoljno prozirna da stvarna fotografija i njeni detalji i dalje budu čitljivi i lako vidljivi.

Napravite sopstvenu šemu kontrasta sa efektima filtera

Efekti filtera su još jedan delikatan način za dodavanje kontrasta unutar same slike ili elementa dizajna. Elektorske efekte filtera omogućavaju CSS filtri koji vam omogućavaju da na slike primenite grafičke efekte poput zamućenja ili promene boje. Ovi efekti filtera uključuju zamućivanje, osvetljenost, kontrast ili zasićenje. Svaka od ovih tehnika pruža odličan način za izdvajanje elementa dizajna kada korisnik stupa u kontakt sa njim. Primer filtra u sivim tonovima koji vidimo gore na web sajtu Metal and Gas kreira način da se podebljani, beli logotip i hero tekst prikažu u celini, uprkos tome što im je fotografija pozadine. Smanjivanje osvetljenosti i zatamnjenje tonova fotografije naglašavaju kontrast u njoj, a bela boja fonta uravnotežuje doživljaj čitanja.

Savet: Uverite se da se odabrani efekat filtra podudara sa bojama celokupnog web sajta. Izbor filtera smatrajte prirodnim delom šeme boja i slika brenda.

2. Veličina

Elementor Product Page Template

Korišćenje kontrastnih veličina u dizajnu web stranice može značajno uticati na njegovu informacionu arhitekturu. Ovo važi za vašu šemu tipografije (naslovi, dugmad, pasuse tela, itd.), Kao i za vaš vizuelni sadržaj (kolekcije slika, vektorska grafika, dugmad, elementi menija itd.). Posetioci će najverovatnije prvo pročitati vaš naslov kada je znatno veći od okolnih titlova i teksta. Zbog toga je naslov na ovoj stranici proizvoda ključni pokazatelj dodane vrednosti proizvoda. Korisniku govori kakva će biti korist i iskustvo jedenja tog kolača, podstičući ga da se prepusti udobnoj hrani koju možete da pružite.

Veličina kolona prema vizuelnoj hijerarhiji

Kontrast veličine i rasporeda na početnoj stranici Atlantic-a ukazuje na hijerarhiju informacija između predstavljenih i sekundarnih članaka. Ova mreža sa tri kolone poznata je kao asimetrična mreža, jer se kolone razlikuju u širini. Jasno je da je najznačajniji središnji, najširi stub, a sa svake strane slede dva uža stuba. Svaka sličica članka unutar leve kolone viša je od one u desnoj koloni, što je još jedna suptilna upotreba kontrasta koja govori da kraće sličice čine najmanje značajnu kolonu.

Savet: Uverite se da su vaše razlike u veličini konačne i prepoznatljive, a ne suptilne. Što je razlika očiglednija, to bolje.

3. Razmak

Razmak u svrhu kontrasta uglavnom se postiže u web dizajnu korišćenjem negativnog prostora oko ili između elemenata. Praznina oko elementa – bilo da ga stvara razmak ili bilo koja druga vrsta vizuelnog razmaka, naglašava kontrast između pozadine elementa i detalja dizajna koji ga okružuju.

Koristite razmak da biste istakli detalje

ETQ je holandska kompanija za patike specijalizovana za visokokvalitetne, basic patike minimalističkog dizajna. ETQ ima prodavnicu cigli i maltera u centralnom Amsterdamu, kao i sveobuhvatnu online prodavnicu. Gornja slika se nalazi na njihovoj stranici „Nega cipela“, promovišući dobavljača sa kojim rade kako bi obezbedio ekološke formule za čišćenje svojih proizvoda od cipela. Postoje dva oblika kontrasta koja se nalaze na stranici Nega cipela. Polovina patike prikazana je u „prljavom stanju“, a druga polovina u kristalno čistom stanju: tehnika kontrasta boja koja prikazuje efekte rastvora za čišćenje pre i posle. Obilje prostora oko patike (u svim pravcima) centrira pojedinačnu sliku kao jedini fokus tela stranice. To je ono što pleni posetioca u iskustvu koliko je efikasno rešenje za negu.

Za povećanje razmaka koristite padding i margine

Stranica sa arhivom proizvoda na web sajtu ueno.store prikazuje detaljne, profesionalne fotografije njihovih proizvoda, svaku postavljenu u obojeni kvadratni oblik. Ovi kvadrati pružaju konzistentnost između različitih slika proizvoda, omogućavajući da se svaki ugao i detalj predmeta proziru. Svaki kvadrat koristi boju pozadine koja je u suprotnosti sa predmetom unutar njega, a svaki je prekriven ulošcima i marginama za prostor između kvadrata. Prostor oko svakog kvadrata naglašava njihove razlike, omogućavajući posetiocima da cene pojedinačne boje, detalje, oblik i strukturu svakog predmeta.

Savet: Vodite računa o responzivnom dizajnu. Jedinice prostora će različito uticati na svaku veličinu ekrana, pa bi to uvek trebalo da bude faktor veličine prostora koji koristite ili ne koristite.

4. Prvi plan i pozadina (Foreground and Background)

Bilo koji digitalni ili fizički interfejs, čak i mala tačka mastila na papiru, automatski ima elemente prvog i pozadinskog plana. Jedinstveno za web dizajn nisu samo ogromne mogućnosti tipova pozadine, već i činjenica da se pozadina može dinamički menjati dok posetilac stranice sa njom komunicira. Isto važi i za prvi plan. Svaki takav element može da izabere da bude statičan ili interaktivan – samostalno se dinamički menja ili pokreće interakcijom korisnika.

Koristite Parallax za stvaranje kontrasta između pozadine i prvog plana

NASA Prospect je zajednički projekat web dizajna i razvoja koji su kreirali studenti dizajna na Univerzitetu Južna Dakota i program Humans in Space Art. Web sajt koristi pomeranje za vizualizaciju kratke priče o Prospektoru u svemiru. Astronaut prati posetioca niz stranicu tokom celog njegovog vertikalnog skrola, zadržavajući njegov izgled (sa suptilnim promenama tokom putovanja) dok leti kroz razne ponovo pojavljujuće se i nestajuće uzorke pozadine i elemente u svemiru tokom puta. A da ne pominjemo da je ilustracija astronauta kreirana pomoću ravnog dizajna, fiksirana u istom položaju na pozadini u boji gradijenta tokom opsežnog iskustva pomicanja.

Podmladite pozadinu stranice živim slikama

Početna stranica na web sajtu NYT Cooking digitalna knjiga kuvara tačno predstavlja bogatu raznolikost udobne hrane predstavljene u internet knjizi kuvara, pružajući detaljnu perspektivu sastojaka i tekstura predstavljenih jela. Mesto uparuje fotografiju tamnih tonova na sivoj pozadini sa malo skrivenih elemenata u hero odeljku. Ono što ovde vidimo je bogata, detaljna fotografija u kontrastu sa jednostavnim, čitljivim crno-belim tekstovima, povezana ujednačenim jednobojnim oblicima pozadine.

Savet: Ne zanemarujte faktore poput performansi i brzine prilikom odabira vrsta pozadine. Video zapisi ili slike kojima učitavanje predugo traje može izgubiti svrhu privlačnog korisničkog iskustva.

5. Vrste elemenata

Web kreatori u svim disciplinama znaju koliko izbora postoji za tipove medija koje možete da učitate ili ugradite na svoj web sajt. Odluka koja vrsta najbolje odgovara vašem sadržaju i ciljevima web sajta zapravo može biti složenija nego što zvuči. Ponekad su fotografije relevantnije, ponekad ilustracije ili čak ručno nacrtane skice. Teškoća ovog postupka odabira može se lako rešiti mešanjem različitih tipova elemenata unutar jedne stranice ili područja. Ovaj nivo kontrasta može se pohvaliti kreativnošću, veštinom i sposobnošću za pripovedanje.

Kombinujte grafiku sa fotografijama da biste dramatizovali pripovedanje priča

Asanin alat za upravljanje projektima na mreži je digitalni interfejs koji koriste kolege i članovi tima za tok posla i saradnju zadataka. Jedna razumna dilema koja se tada javlja je: da li njihov web sajt treba da naglasi svoje digitalne kvalitete ili treba da prikaže i ljudski faktor? Ovde umetnost kontrasta dokazuje svoju sposobnost da zaokupi sve aspekte priče, a ne jedan. Hero slika Asane prikazuje stvarne ljude koji koriste njegov SaaS i isečke iz njegovog digitalnog interfejsa. Dodana vrednost alata koji je materijalizovan u digitalnom interfejsu, a koji ljudi doživljavaju u stvarnom životu – saopštava se kroz jedinstveni vizuelni kontrast.

Vizuelizujte složenost pomoću različitih tipova elemenata

Illo je mali, eklektični dizajn studio sa sedištem u Torinu u Italiji. Njihova stranica O nama kombinuje mnoge kontrastne elemente i vrste medija: ilustracije, široke fotografije, redove tekstova, kvadratne portrete sa obojenim pozadinama i sveobuhvatnu kombinaciju zaobljenog crnog teksta na čvrstoj beloj podlozi. Ono što nam je zapelo za oko među bogatom raznovrsnošću sadržaja stranice je telo teksta na samom vrhu, koje uključuje kratki pasus od tri rečenice. Tri kontrastna odnosa postoje u samo šest redova, a najjedinstvenija je animirana reč „raznolik“. Ova slova su u boji, za razliku od ostatka crnog teksta. Ne samo da su slova koja menjaju boju animirana (uporedo sa statičkim tekstom), već postoji i kontrast između samih boja slova. Izbor reči koju ćete istaknuti u pasusu takođe nije slučajan, jer efekat promene boje koji se dešava unutar reči ilustruje raznolikost boja, slično raznolikom timu studija.

Savet: Identifikujte svoju ciljnu publiku. Koje vrste medija ili elemenata će im biti najugodnije? Da li će vaša poruka biti bolje preneta modernim ilustracijama ili su prave fotografije najefikasniji put?

6. Oblici

Odabir oblika vaših dizajnerskih elemenata jedan je od najvažnijih segmenata u procesu web dizajna – idealno bi bilo da se igra kada kreirate svoje žičane okvire. Svaki web kreator teži maksimalnom, prekomernom angažovanju, što možete lako postići koristeći vizuelnu raznolikost u svom dizajnu. Razlika između oblika takođe vam daje priliku da kreirate vizuelnu hijerarhiju ili da prenesete duboku razliku između dva elementa poruke.

Razlikovati elemente priče

Blush je Sketch i Figma dodatak koji uključuje alatku za kreiranje ilustracija direktno unutar interfejsa uređivača. Web sajt kompanije Blush koristi minimalističku šemu boja crno na belom i revitalizuje je raznobojnim oblicima u grafičkom stilu i potezima poteza. Početna stranica Blush-a koristi oblike da razlikuje svaki odeljak na stranici jedan od drugog. Ovo je odmah prepoznatljivo: između plavog trouglastog oblika iza hero odeljka, praćenog sa tri zaobljena pravougaonika, ilustracija slobodnog oblika, žutog ovalnog slova iza isečka korisničkog interfejsa, tekstova i dugmadi itd. Ovom segmentacijom postiže se dvostruki cilj: produženje sesije pregledanja posetioca vodeći ga do samog kraja, istovremeno usmeravajući njegovu pažnju na svaki pojedinačni odeljak sadržaja.

Dodajte raznolikost u najjednostavnija okruženja

Digitalna agencija Outsmart Labs pronalazi jedinstveni način da integriše asimetrične kružne oblike u čitavu svoju web sajt, koji se uglavnom sastoji od simetričnih, horizontalnih tekstova i dugmadi – svi dele crno-belu šemu boja. Raštrkana, spontana distribucija krugova koji se provlače kroz web stranicu dodaju osvežavajuće, gradijentne boje onome što bi inače bila potpuno monohromatska šema boja. Zahvaljujući upotrebi samo jednog oblika oblika, blokovi tekstova su poboljšani uzdižućim detaljima dizajna, ali šema web stranice održava kohezivnost i sveobuhvatno prisustvo tečnosti.

Savet: Istražite različite stilove i efekte dizajna prilikom izbora slika, kao što su: 3D, efekti senki, ručno nacrtane skice, ocrtani oblici i još mnogo toga.

Dizajn je rođen da se ističe

Šta je za web kreatore važnije: da naprave web sajtove koje se ističu ili da se razlikuju kao dizajner koji se ističe među njihovom konkurencijom? Možda niste shvatili, ali vaš način razmišljanja kao web profesionalca već ide u smeru kontrasta. Kada u dizajnerskom radu koristite kontrastne elemente, ne samo da naglašavate svoju sposobnost da se istaknete kao profesionalac. Dokazujete svoju sposobnost stvaranja dve različite celine dizajna i omogućavate im da zajedno rade na neobične, ali komplementarne načine.