Fullstendig forståelse av kontrast i design
Vanligvis er gjenstanden for kontrast reservert for nybegynnere. Bøker vil si "svart og hvitt har kontrast, rødt og oransje ikke" - men det er så mye mer til det.
Nybegynnere bøker vanligvis bare berøre fargekontrast, men hva med størrelse og formkontrast? Ofte er den enkleste måten å fortelle en amatørdesigner fra en profesjonell å se på deres bruk av kontrast.
Å skape en struktur av betydning ved å bruke størrelse, form og farge er det som gir en sidevirkning og lesbarhet til leseren.
I dette innlegget skal vi se på kontrast i detalj, undersøke stor typografi, funky figurer, klare skillelinjer, bilder og hvordan de passer perfekt sammen med kontrast for en god brukeropplevelse.
En introduksjon til kontrast
Kontrast kan være definert som "forskjellen i visuelle egenskaper som gjør et objekt (eller dets representasjon i et bilde) skiller seg fra andre objekter og bakgrunnen." På vanlig engelsk kan det beskrives på sitt mest grunnleggende nivå som "ting som ser annerledes ut enn hverandre. ”
For designere i alle turer av praksis, men spesielt webdesignere, er kontrast til roten til stort sett alt. Vi prøver hele tiden å etablere hierarkier av betydning, trekke folk til bestemte områder av en side og formidle en klar og kortfattet melding i hjertet av vårt arbeid. Å skape relasjoner mellom ulike elementer i et design er omtrent det viktigste du kan gjøre. Du har sikkert gjort det mye allerede, bevisst eller ikke.
Tydelige eksempler på kontrast er svart og hvitt, stort og lite, raskt og sakte, tykt og tynt. Motsatser er den enkleste måten å forstå hva kontrast er, men når man bruker kontrast til designarbeid, er det aldri like svart og hvitt. Hvis du lurte på det, kommer det fra det som sier at en situasjon som er "svart og hvit" kommer fra, noe som også fører til at noe som er et "grått område". I design sammenligner vi ofte ting som er forskjellige, men ikke motsatte, for eksempel en H1 og en h1, eller en "add to cart" -knapp og en "sjekk ut" -knappen. Dette er hvor større nivåer av kontrast kommer inn i spill.
La oss ta en titt på de forskjellige typer kontrast og noen eksempler på hvordan de brukes i webdesign.
Fargekontrast
Det vanligste eksemplet på alt, dette er ganske mye hvor alt starter. Hvis to farger er forskjellige for hverandre (si svart og hvitt), har de høy kontrast, men hvis de er svært like (rød og oransje) så har de lav kontrast.
TekRoc bruker veldig åpenbar fargekontrast her ved å overlegge et lyst og levende bilde på toppen av en veldig mørk bakgrunn. Den lyse oransje og blåen skiller seg klart og øyet trekkes straks til dem over alle andre ting på siden.
Tim Van Damme gjør flott bruk av fargekontrast i GoWalla nettsteddesign. Ikke bare forstår den flerfargede grensen øverst på siden og skaper visuell interesse ved å være forskjellig fra den bleke bakgrunnen, men han har også lagt til ekstremt subtile 1px drop shadows til teksten på knappene. Den litt mørkere oransjen bidrar til å skape kontrast mellom den hvite teksten og den oransje bakgrunnen.
Envato er mestre av subtil kontrast, og trenden med å bruke 1px grenser for dette kan sannsynligvis bli lagt ned til dem mer enn noen andre. Alle nettstedene har flere enkeltpikselgrenser for å skape kontrast mellom seksjoner. I skjermbildet ovenfor kunne de to innholdsområdene vært delt på bare plass, eller en enkelt linje, men ved hjelp av to linjer (ett mørkt, ett lys) skaper de en subtil kontrast mellom de to seksjonene som er ekstremt effektiv.
Størrelse Kontrast
Den neste vanligste form for kontrast bruker størrelse. Noe stort ved siden av noe lite indikerer generelt at det større elementet er langt viktigere. Det stemmer, vi sier at størrelsen er viktig!
MadeByWater er designporteføljen av Jordan Vitanov. Han bruker størrelseskontrast med ekstremt stor typografi for å umiddelbart formidle et sitat av Bruce Lee som definerer hvorfor han har valgt å merke seg med MadeByWater-navnet.
28Thiers er en attraktiv, eksklusiv bar i Frankrike. Deres nettside gjør stor bruk av størrelseskontrast for å trekke oppmerksomheten din umiddelbart til det store fotografiet av Martini med ulike ingredienser som omgir den. Det er umiddelbart klart at dette er det viktigste elementet på siden, og designeren vil at du skal se på bildet og bli solgt på det faktum at det er et ekstremt stilig etablissement.
SlideScreen gjør flere bruksområder av størrelseskontrast på deres nettsted. I tillegg til at de har et stort skjermbilde, bruker de også svært store knapper for deres primære oppfordringer. De vil at du skal se videoen av deres produkt i aksjon, og da vil de at du skal laste den ned. Dette er de viktigste elementene på siden, så de er vesentlig større enn de andre tingene som omgir dem.
Shape Contrast
Form kontrast betyr å gjøre ting bemerkelsesverdig i av deres forskjell i fysisk form sammenlignet med andre ting på siden. På sitt mest grunnleggende nivå kan dette brukes i ting som å legge avrundede hjørner til knapper, men tatt til mer ekstreme nivåer kan det tiltrekke seg mye mer oppmerksomhet.
Anebstar bruker formkontrast til å vise tre viktige bilder i overskriften. Fordi de fleste ting på nettet er rektangulære, er en av de enkleste måtene å oppnå formkontrast, å bruke en sirkel. Selvfølgelig har dette eksemplet også en liten størrelse kontrast blandet inn, men du kan tydelig se hvordan de sirkulære elementene skiller seg ut fra alt annet på siden.
Carbonmade er et fantastisk sted med en ekte blanding av flotte illustrasjoner og godt presentert innhold. En enkel påmeldingsknapp her ville ha jobbet, men størrelsen og fargekontrast ville nok ikke ha satt den fra hverandre nok fra den travle bakgrunnen. Å legge til en vennlig blekksprut bak knappen gir det virkelig den forskjellen i form for å trekke øyet direkte til det.
WireframePlus bruker en enkel, men ekstremt effektiv bit av formkontrast for å markere prisen på sine tjenester. De vil at du skal lese innholdet, men fremfor alt prøver de å selge deg til en god pris ved å sette en stor krets bak den.
Posisjonskontrast
Å skape kontrast i posisjonering er en veldig fin måte å lage et hierarki av elementer rent ved å bruke forskjellige justeringer. I nyere tid har denne teknikken blitt populær blant folk som Elliot Jay Stocks, som brukte det ytterst på sitt nyeste porteføljeside.
Elliot Jay Stocks bruker et detaljert rutenett for å definere justeringen av alle elementene på hans nettsted. Oppmerksomhet henvises til bestemte områder ved at de inngås til venstre eller høyre henholdsvis. I dette spesielle skjermbildet skiller det innledende avsnittet seg virkelig fordi det er justert lengst til venstre, hvor øyet ser først ut for å lese noe. Denne typen tilpasning har "inspirert" mange andre designere de siste tolv månedene for å skape design med posisjonskontrast i samme stil.
SimpleBits er det merket som Dan Cederholm jobber med, kanskje du kjenner ham fra prosjekter som Dribbble . Ved første inntrykk synes ikke SimpleBits-siden å ha noen posisjonskontrast, men når du begynner å rulle, blir alt klart. Når noen bruker et fast bakgrunnsbilde for å skape en pen stilistisk effekt, har Dan gjort sin logo og navigasjon helt fast på plass slik at uansett hvor du ruller til, forblir de alltid på samme sted på skjermen. Dette er et godt eksempel på ikke-standard posisjonskontrast.
SquaredEye er designbutikken drives av Matthew Smith, og casestudiesidene i porteføljen hans gjør en fantastisk bruk av posisjonskontrast. Du må se hele siden for å virkelig få ideen, men i hovedsak har Matthew omhyggelig opprettet spesifikk posisjonering for hver del av siden. Dette skaper fantastisk kontrast mellom seksjoner og skaper en stor visuell interesse for leseren uten å være i det hele tatt distraherende.
Kontrast Konklusjon
Det er så mye mer å kontrastere enn bare "lys og mørk" - det er en av de viktigste prinsippene i design, og du kan nesten aldri ha for mye av det, forutsatt at du bruker det riktig.
Å ta designene til neste nivå handler ikke om å finne den neste bandet vognen å hoppe på ved å bruke avrundede hjørner og slippe skygger for alt, det handler om å finne bedre og mer effektive måter å kommunisere meldingen bak designet.
Å utforske kontrast i detalj og bruke den til sitt fulle potensial er en av de beste måtene å gjøre dette på.
Hva tror du? Hvor mye oppmerksomhet betaler du for kontrast i designene dine? Er det noe du tenker på hele tiden, eller er det noe som kommer naturlig?