Fullständigt förståelse för kontrast i design
Vanligtvis är ämnet av kontrast reserverat för nybörjare. Böcker kommer att säga "svartvitt har kontrast, röd och orange inte" - men det finns så mycket mer till det.
Nybörjare böcker brukar bara röra på färgkontrast, men hur är det med storlek och formkontrast? Ofta är det enklaste sättet att berätta en amatördesigner från en professionell att titta på deras användning av kontrast.
Att skapa en struktur av betydelse med hjälp av storlek, form och färg är vad som ger en sidokollision och läsbarhet för läsaren.
I det här inlägget ska vi titta på kontrast i detalj, undersöka stor typografi, funky former, tydliga uppdelningar, bilder och hur de passar perfekt tillsammans med kontrast för en bra användarupplevelse.
En introduktion till kontrast
Kontrast kan vara definierad som "skillnaden i visuella egenskaper som gör ett objekt (eller dess representation i en bild) som kan särskiljas från andra objekt och bakgrunden." På vanlig engelska kan det beskrivas på sin mest grundläggande nivå som "saker som skiljer sig från varandra. ”
För designers i alla samhällsskikt, men särskilt webbdesigners, står kontrast till roten till stort sett allting. Vi försöker ständigt skapa viktiga hierarkier, dra människor till vissa sidor av en sida och kommunicera ett tydligt och kortfattat budskap i hjärtat av vårt arbete. Att skapa relationer mellan olika element i en design handlar bara om det viktigaste du kan göra. Du har förmodligen gjort det mycket, medvetet eller inte.
Tydliga exempel på kontrast är svarta och vita, stora och små, snabba och långsamma, tjocka och tunna. Motsatser är det enklaste sättet att förstå vilken kontrast som är, men när man tillämpar kontrast mot designarbete är det aldrig lika svart och vitt. Om du undrade, det är där man säger att ett "svartvitt" förhållande kommer ifrån, vilket också leder till att något är ett "grått område". I design jämför vi ofta saker som är olika men inte motsatta, till exempel en H1 och en h1, eller en "add to cart" -knapp och en "checka ut" -knapp. Det här är där större kontrastnivåer spelar in.
Låt oss ta en titt på de olika typerna av kontrast och några exempel på hur de används i webbdesign.
Färgkontrast
Det vanligaste exemplet på allt, det här är ganska mycket där allt börjar. Om två färger skiljer sig från varandra (säg svart och vitt) har de hög kontrast, men om de är mycket lika (röda och orange) så har de låg kontrast.
TekRoc använder mycket uppenbar färgkontrast här genom att överla en ljus och vibrerande bild ovanpå en mycket mörk bakgrund. Den ljusa orange och blåen sticker tydligt ut och ögonen dras omedelbart till dem över alla andra saker på sidan.
Tim Van Damme gör utmärkt användning av färgkontrast i GoWalla webbdesign. Inte bara visar den mångfärgade gränsen högst upp på sidan och skapar visuellt intresse genom att vara annorlunda än den bleka bakgrunden, men han har också lagt till extremt subtila 1px drop shadows till texten på knapparna. Den något mörkare orange hjälper verkligen till att skapa kontrast mellan den vita texten och den orange bakgrunden.
Envato är mästarna i subtil kontrast och trenden med att använda 1px-gränser för detta kan förmodligen sänkas till dem mer än någon annan. Alla deras webbplatser har flera enkla pixelgränser för att skapa kontrast mellan sektioner. I skärmbilden ovan kunde de två innehållsområdena ha delats av bara utrymme, eller en enda linje, men med hjälp av två linjer (ett mörkt, ett ljus) skapar de subtil kontrast mellan de två sektionerna, vilket är extremt effektivt.
Storlekskontrast
Nästa vanligaste form av kontrast använder storlek. Något stort bredvid något litet indikerar generellt att det större objektet är betydligt viktigare. Det stämmer, vi säger att storleken är viktig!
MadeByWater är designportföljen av Jordan Vitanov. Han använder storlekskontrast med extremt stor typografi för att omedelbart förmedla ett citat av Bruce Lee som definierar varför han har valt att märka sig med MadeByWater-namnet.
28Thiers är en attraktiv exklusiv bar i Frankrike. Deras hemsida gör stor nytta av storlekskontrast för att dra din uppmärksamhet omedelbart till Martins stora fotografi med olika ingredienser som omger det. Det är omedelbart klart att detta är det viktigaste elementet på sidan och designern vill att du ska titta på den bilden och bli såld på det faktum att det är en mycket elegant anläggning.
SlideScreen gör flera användningar av storlekskontrast på deras webbplats. Förutom att deras produkt visas med en stor skärmdump, använder de också mycket stora knappar för sina primära samtal till handling. De vill att du ska titta på videon av deras produkt i åtgärd, och sedan vill de att du ska ladda ner den. Dessa är de viktigaste elementen på sidan så att de är väsentligt större än de andra sakerna som omger dem.
Form kontrast
Formkontrast innebär att saker är anmärkningsvärda med sin skillnad i fysisk form jämfört med andra saker på sidan. På sin mest grundläggande nivå kan det användas i saker som att lägga rundade hörn till knappar, men i mer extrema nivåer kan det locka mycket mer uppmärksamhet.
Anebstar använder formkontrast för att visa tre viktiga bilder i rubriken. Eftersom de flesta saker på webben är rektangulära, är ett av de enklaste sätten att nå formkontrast att använda en cirkel. Självklart har det här exemplet även en liten kontrast blandad ihop, men du kan tydligt se hur de cirkulära elementen sticker ut från allt annat på sidan.
Carbonmade är en fantastisk plats med en riktig blandning av underbara illustrationer och väl presenterat innehåll. En enkel påminnelseknapp här skulle ha fungerat, men storlek och färgkontrast hade antagligen inte sett det tillräckligt för sig från den upptagna bakgrunden. Att lägga till en vänlig bläckfisk bakom knappen ger det verkligen den skillnaden i form för att dra ögat direkt mot det.
WireframePlus använder en enkel men extremt effektiv bit av kontrast för att lyfta fram priset på sina tjänster. De vill att du ska läsa deras innehåll men framförallt försöker de sälja dig till deras bra pris genom att sätta en stor cirkel bakom den.
Positiv kontrast
Att skapa kontrast i positionering är ett mycket snyggt sätt att skapa en hierarki av element rent genom att använda olika inriktningar. På senare tid har denna teknik blivit populär bland personer som Elliot Jay Stocks, som använde det ytterst på sin senaste portföljplats.
Elliot Jay Stocks använder ett detaljerat rutnät för att definiera inriktningen av alla element på hans webbplats. Uppmärksamhet kallas till specifika områden genom att de indrages åt vänster respektive höger respektive. I den här skärmbilden står det inledande stycket riktigt ut eftersom det ligger längst till vänster, där ögat ser först ut för att läsa något. Denna typ av anpassning har "inspirerat" många andra designers under de senaste tolv månaderna för att skapa mönster med positionskontrast i samma stil.
SimpleBits är det varumärke som Dan Cederholm arbetar med, du kanske känner honom från projekt som Dribbble . Vid första intryck tycks inte SimpleBits-webbplatsen ha någon positionskontrast, men när du börjar bläddra blir allt klart. När vissa människor använder en fast bakgrundsbild för att skapa en snygg stilistisk effekt, har Dan gjort sin logotyp och navigering helt fixerad så att oavsett var du bläddrar, ligger de alltid kvar på samma plats på skärmen. Detta är ett utmärkt exempel på icke-standard positionskontrast.
SquaredEye är designbutiken som drivs av Matthew Smith och casestudierna i hans portfölj gör en fantastisk användning av positionskontrast. Du måste se hela sidan för att verkligen få idén, men i grunden har Matthew noggrant skapat specifik positionering för varje sektion av sidan. Detta skapar en fantastisk kontrast mellan sektioner och skapar en hel del visuellt intresse för läsaren utan att vara alls distraherande.
Kontrast Konklusion
Det är så mycket mer att kontrast än bara "ljust och mörkt" - det är en av de viktigaste principerna i design och du kan nästan aldrig ha för mycket av det, förutsatt att du använder det ordentligt.
Att ta dina mönster till nästa nivå handlar inte om att hitta nästa bandvagn för att hoppa på att använda rundade hörn och släppa skuggor för allt, det handlar om att hitta bättre och effektivare sätt att kommunicera budskapet bakom designen.
Att utforska kontrast i detalj och använda den till sin fulla potential är ett av de bästa sätten att göra detta.
Vad tror du? Hur mycket uppmärksamhet betalar du för kontrast i dina mönster? Är det något du tänker på hela tiden eller är det något som kommer naturligt?