Fuldstændig forståelse af kontrast i design
Normalt er motivet i kontrast forbeholdt nybegyndere. Bøger vil sige "sort og hvid har kontrast, rød og orange ikke" - men der er så meget mere til det.
Begynderbøger plejer kun at berøre farvekontrast, men hvad med størrelse og formkontrast? Ofte er den nemmeste måde at fortælle en amatørdesigner fra en professionel at se på deres brug af kontrast.
At skabe en struktur af betydning ved hjælp af størrelse, form og farve er, hvad der giver en sidebeslag og læsbarhed til læseren.
I dette indlæg vil vi se på kontrast i detaljer, undersøge stor typografi, funky figurer, klare skillelinjer, billeder og hvordan de passer perfekt sammen med kontrast til en god brugeroplevelse.
En introduktion til kontrast
Kontrast kan være defineret som "forskellen i visuelle egenskaber, der gør en genstand (eller dens repræsentation i et billede), der kan skelnes fra andre objekter og baggrunden." På almindeligt engelsk kunne det på det mest grundlæggende niveau beskrives som "ting, der ser anderledes ud end hinanden. ”
For designere i alle samfundslag, men især webdesignere, står kontrast til grunden for stort set alt. Vi forsøger konstant at etablere hierarkier af betydning, trække folk til bestemte områder af en side og kommunikere en klar og præcis besked i hjertet af vores arbejde. At skabe forhold mellem forskellige elementer i et design handler kun om det vigtigste, du kan gøre. Du har sikkert gjort det meget allerede, bevidst eller ej.
Tydelige eksempler på kontrast er sort og hvid, stor og lille, hurtig og langsom, tyk og tynd. Modsætninger er den nemmeste måde at forstå, hvilken kontrast der er, men når man bruger kontrast til designarbejde, er det aldrig lige så sort og hvidt. Hvis du undrer dig over det, er der her tale om, at der er tale om en situation, der er "sort og hvid", hvilket også fører til, at noget er et "gråt område". I design sammenligner vi ofte ting, der er forskellige, men ikke modsatte, for eksempel en H1 og en h1, eller en "add to cart" -knap og en "check out" -knap. Det er her, hvor større niveauer af kontrast kommer i spil.
Lad os tage et kig på de forskellige typer kontrast og nogle eksempler på, hvordan de bruges til webdesign.
Farvekontrast
Det mest almindelige eksempel på alle, dette er stort set hvor det hele starter. Hvis to farver er forskellige til hinanden (siger sort / hvid) har de høj kontrast, mens de er meget ens (rød og orange), så har de lav kontrast.
TekRoc bruger meget indlysende farvekontrast her ved at overlejre et lyst og levende billede på toppen af en meget mørk baggrund. Den lyse orange og blå skiller sig tydeligt ud og øjet straks trækkes over dem over alle andre ting på siden.
Tim Van Damme gør fremragende brug af farvekontrast i GoWalla site design. Ikke kun står den flerfarvede kant øverst på siden ud og skaber visuel interesse ved at være forskellig fra den blegne baggrund, men han har også tilføjet ekstremt subtile 1px drop shadows til teksten på knapper. Den lidt mørkere orange hjælper virkelig med at skabe kontrast mellem den hvide tekst og den orange baggrund.
Envato er mestre af subtil kontrast, og trenden med at bruge 1px-grænser til dette kan nok blive sat ned til dem mere end nogen anden. Alle deres websteder har flere enkelt pixelgrænser for at skabe kontrast mellem sektioner. I ovenstående skærmbillede kunne de to indholdsområder have været delt med bare plads eller en enkelt linje, men ved at bruge to linjer (et mørkt, et lys) skaber de en subtil kontrast mellem de to sektioner, som er ekstremt effektiv.
Størrelse Kontrast
Den næste mest almindelige form for kontrast bruger størrelse. Noget stort ved siden af noget lille indikerer generelt, at det større element er langt vigtigere. Det er rigtigt, vi siger, at størrelse betyder noget!
MadeByWater er designporteføljen af Jordan Vitanov. Han bruger størrelseskontrast med ekstremt stor typografi til øjeblikkeligt at formidle et citat af Bruce Lee, som definerer hvorfor han har valgt at mærke sig med MadeByWaternavnet.
28Thiers er en attraktiv, eksklusiv bar i Frankrig. Deres hjemmeside gør stor brug af størrelseskontrast for straks at henlede opmærksomheden på det store fotografi af Martini med forskellige ingredienser der omgiver det. Det er straks klart, at dette er det vigtigste element på siden, og designeren vil have dig til at se på dette billede og blive solgt på, at det er en yderst elegant virksomhed.
SlideScreen gør flere anvendelser af størrelseskontrast på deres websted. Udover at have deres produkt vist med et stort skærmbillede, bruger de også meget store knapper til deres primære opkald til handling. De vil have dig til at se videoen af deres produkt i aktion, og så vil de have dig til at downloade den. Disse er de vigtigste elementer på siden, så de er væsentligt større end de andre ting omkring dem.
Shape Contrast
Form kontrast betyder at gøre ting bemærkelsesværdigt af deres forskel i fysisk form i forhold til andre ting på siden. På sit mest grundlæggende niveau kan dette bruges i ting som at tilføje afrundede hjørner til knapper, men i mere ekstreme niveauer kan det tiltrække meget mere opmærksomhed.
Anebstar bruger formkontrast til at fremvise tre vigtige billeder i overskriften. Fordi de fleste ting på nettet er rektangulære, er en af de nemmeste måder at opnå formkontrast at bruge en cirkel. Selvfølgelig har dette eksempel også en lille størrelse kontrast blandet ind, men du kan tydeligt se, hvordan de cirkulære elementer skiller sig ud fra alt andet på siden.
Carbonmade er et fantastisk sted med en rigtig blanding af smukke illustrationer og godt præsenteret indhold. En simpel tilmeldingsknap her ville have arbejdet, men størrelse og farvekontrast ville nok ikke have set det fra hinanden nok fra den travle baggrund. Tilføjelse af en venlig blæksprutte bag knappen giver det virkelig den forskel i form for at trække øjet direkte til det.
WireframePlus bruger en simpel men ekstremt effektiv smule formkontrast til at fremhæve prisen på deres tjenester. De vil have dig til at læse deres indhold, men frem for alt forsøger de at sælge dig til deres fantastiske pris ved at sætte en stor cirkel bag den.
Positional Contrast
Oprettelse af kontrast i positionering er en meget pæn måde at skabe et hierarki af elementer rent ved at bruge forskellige justeringer. I nyere tid er denne teknik blevet populær blandt folk som Elliot Jay Stocks, der brugte det yderst på hans seneste porteføljeside.
Elliot Jay Stocks bruger et detaljeret net til at definere justeringen af alle elementerne på hans websted. Opmærksomhed kaldes til specifikke områder ved at være indrykket henholdsvis til venstre eller højre. I dette særlige skærmbillede skiller det indledende afsnit sig virkelig ud, fordi det er justeret længst til venstre, hvor øjet ser først ud for at læse noget. Denne type af tilpasning har "inspireret" mange andre designere i de sidste tolv måneder til at skabe design med positionskontrast i samme slags stil.
SimpleBits er det mærke, som Dan Cederholm arbejder under, du kan kende ham fra projekter som Dribbble . Ved første indtryk ser webstedet SimpleBits ikke ud til at have nogen positionskontrast, men når du begynder at rulle, bliver alt klart. Hvor nogle mennesker bruger et fast baggrundsbilde for at skabe en pæn stilistisk effekt, har Dan lavet sit logo og navigation helt fast i position, så uanset hvor du ruller hen, forbliver de altid på samme sted på skærmen. Dette er et godt eksempel på ikke-standard positionskontrast.
SquaredEye er designbutikken ledet af Matthew Smith, og casestudierne i hans portefølje gør fantastisk brug af positionskontrast. Du skal se hele siden for virkelig at få ideen, men i det væsentlige har Matthew omhyggeligt oprettet specifik positionering for hver sektion af siden. Dette skaber fantastisk kontrast mellem sektioner og skaber en stor visuel interesse for læseren uden at være i det hele taget distraherende.
Kontrast Konklusion
Der er så meget mere at kontrast end bare "lys og mørk" - det er et af de vigtigste principper i design, og du kan næsten aldrig have for meget af det, forudsat at du bruger det korrekt.
Hvis du tager dine designs til næste niveau, handler det ikke om at finde den næste bandetvogn til at hoppe på ved hjælp af afrundede hjørner og drop skygger for alt, det handler om at finde bedre og mere effektive måder at kommunikere budskabet bag designet.
At udforske kontrast i detaljer og bruge det til sit fulde potentiale er en af de bedste måder at gøre dette på.
Hvad synes du? Hvor meget opmærksomhed betaler du for kontrast i dine designs? Er det noget du tænker hele tiden, eller er det noget der kommer naturligt?