Volledig inzicht in het contrast in ontwerp
Meestal is het onderwerp contrast voorbehouden aan beginners. Boeken zullen zeggen "zwart en wit hebben contrast, rood en oranje niet" - maar er is zoveel meer aan de hand.
Beginnersboeken hebben meestal alleen betrekking op kleurcontrasten, maar hoe zit het met het contrast in grootte en vorm? Vaak is de gemakkelijkste manier om een amateur-ontwerper te vertellen van een professionele ontwerper door te kijken naar het gebruik van contrast.
Het creëren van een structuur van belang met behulp van grootte, vorm en kleur is wat een pagina impact en leesbaarheid geeft aan de lezer.
In dit bericht gaan we contrast in detail bekijken, onderzoeken we grote typografie, funky vormen, duidelijke scheidingen, beelden en hoe ze op de juiste manier in elkaar passen met contrast voor een goede gebruikerservaring.
Een inleiding tot Contrast
Contrast kan zijn bepaald als "het verschil in visuele eigenschappen die een object (of de afbeelding ervan in een afbeelding) onderscheidbaar maakt van andere objecten en de achtergrond." In gewoon Engels dat op het meest basale niveau beschreven kan worden als "dingen die er anders uitzien. ”
Voor ontwerpers in alle lagen van de praktijk, maar vooral voor webontwerpers, ligt contrast aan de basis van vrijwel alles. We proberen constant hiërarchieën van belang te vestigen, mensen naar bepaalde delen van een pagina te trekken en een duidelijke en beknopte boodschap over te brengen die de kern vormt van ons werk. Het creëren van relaties tussen verschillende elementen van een ontwerp is zo ongeveer het belangrijkste dat je kunt doen. Je hebt het waarschijnlijk al veel gedaan, bewust of niet.
Voor de hand liggende voorbeelden van contrast zijn zwart en wit, groot en klein, snel en langzaam, dik en dun. Tegenpolen zijn de gemakkelijkste manier om te begrijpen wat contrast is, maar bij het toepassen van contrast met ontwerpwerk is het nooit helemaal zo zwart en wit. Als je je afvraagt, is dat waar het gezegde dat een situatie "zwart en wit" is, vandaan komt, wat ook leidt tot het gezegde dat iets een "grijs gebied" is. In het ontwerp vergelijken we vaak dingen die anders zijn maar niet tegengesteld, bijvoorbeeld een H1 en een h1, of een "toevoegen aan winkelwagen" knop en een "afrekenen" knop. Dit is waar grotere niveaus van contrast in het spel komen.
Laten we eens kijken naar de verschillende soorten contrast en enkele voorbeelden van hoe ze worden gebruikt in webdesign.
Kleurcontrast
Het meest voorkomende voorbeeld van alles, dit is vrijwel overal waar het allemaal begint. Als twee kleuren van elkaar verschillen (bijvoorbeeld zwart en wit) hebben ze een hoog contrast, terwijl ze, als ze erg op elkaar lijken (rood en oranje), weinig contrast hebben.
TekRoc gebruikt hier een zeer voor de hand liggend kleurcontrast door een helder en levendig beeld over een zeer donkere achtergrond te leggen. Het fel oranje en blauw vallen duidelijk op en het oog wordt onmiddellijk naar hen getrokken boven alle andere dingen op de pagina.
Tim Van Damme maakt uitstekend gebruik van kleurcontrast in het ontwerp van de GoWalla-site. De veelkleurige rand boven aan de pagina valt niet alleen op door visuele interesse te creëren door te verschillen van de bleke achtergrond, maar hij heeft ook uiterst subtiele 1px slagschaduwen toegevoegd aan de tekst op knoppen. Het iets donkerder oranje helpt echt om contrast te creëren tussen de witte tekst en de oranje achtergrond.
Envato is de baas van subtiel contrast en de trend om hiervoor 1px-randen te gebruiken, is waarschijnlijk meer op hen van toepassing dan wie dan ook. Al hun sites hebben meerdere randen met één pixel om een contrast tussen de secties te creëren. In de bovenstaande schermafbeelding zouden de twee inhoudsgebieden kunnen zijn opgedeeld door slechts een spatie of een enkele lijn, maar door gebruik te maken van twee lijnen (een donkere, een lichte) creëren ze een subtiel contrast tussen de twee secties wat uiterst effectief is.
Grootte Contrast
De volgende meest voorkomende vorm van contrast is het gebruik van de grootte. Iets groots naast iets kleins geeft over het algemeen aan dat het grotere item veel belangrijker is. Dat klopt, we zeggen dat de grootte ertoe doet!
MadeByWater is de designportfolio van Jordan Vitanov. Hij gebruikt contrast in grootte met een extreem grote typografie om onmiddellijk een citaat van Bruce Lee over te brengen, dat aangeeft waarom hij heeft gekozen om zichzelf te markeren met de naam MadeByWater.
28Thiers is een aantrekkelijke chique bar in Frankrijk. Hun website maakt veel gebruik van groottecontrast om uw aandacht meteen te vestigen op de grote foto van de Martini met diverse ingrediënten eromheen. Het is meteen duidelijk dat dit het belangrijkste element op de pagina is en de ontwerper wil dat je naar dat beeld kijkt en wordt verkocht vanwege het feit dat het een uiterst stijlvolle onderneming is.
SlideScreen maakt meerdere gebruiksmogelijkheden voor contrast op hun site. Naast het feit dat hun product wordt weergegeven met een grote schermafbeelding, gebruiken ze ook zeer grote knoppen voor hun primaire calls-to-action. Ze willen dat je de video van hun product in actie bekijkt en dan willen ze dat je het downloadt. Dit zijn de belangrijkste elementen van de pagina, dus ze zijn aanzienlijk groter dan de andere dingen om hen heen.
Vormcontrast
Vormcontrast betekent dingen opvallend maken door hun verschil in fysieke vorm in vergelijking met andere dingen op de pagina. Op het meest basale niveau kan dit worden gebruikt in zaken als het toevoegen van afgeronde hoeken aan knoppen, maar als het wordt doorgevoerd tot meer extreme niveaus kan het veel meer aandacht trekken.
Anebstar gebruikt vormcontrast om drie belangrijke afbeeldingen in de kop te presenteren. Omdat de meeste dingen op het web rechthoekig zijn, is het gebruik van een cirkel een van de gemakkelijkste manieren om vormcontrast te bereiken. Natuurlijk is er in dit voorbeeld ook een beetje contrast in de grootte ingebouwd, maar je kunt duidelijk zien hoe de cirkelvormige elementen zich onderscheiden van al het andere op de pagina.
Carbonmade is een prachtige site met een echte mix van prachtige illustraties en goed gepresenteerde inhoud. Een simpele aanmeldingsknop zou hier gewerkt hebben, maar het contrast in grootte en kleur zou het waarschijnlijk niet genoeg hebben gescheiden van de drukke achtergrond. Het toevoegen van een vriendelijke octopus achter de knop geeft echt dat vormverschil om er direct het oog op te krijgen.
WireframePlus gebruikt een eenvoudig maar uiterst effectief beetje vormcontrast om de prijs van hun services te benadrukken. Ze willen dat je hun inhoud leest, maar bovenal proberen ze je te verkopen voor hun geweldige prijs door er een grote cirkel achter te zetten.
Positioneel contrast
Contrast creëren in positionering is een heel mooie manier om een hiërarchie van elementen te maken, puur door verschillende alignments te gebruiken. In de afgelopen tijd is deze techniek populair gemaakt door mensen als Elliot Jay Stocks, die het tot het uiterste gebruikten op zijn meest recente portfoliosite.
Elliot Jay Stocks gebruikt een gedetailleerd raster om de uitlijning van alle elementen op zijn site te definiëren. Er wordt aandacht gevraagd voor specifieke gebieden doordat deze respectievelijk naar links of rechts zijn ingesprongen. In dit specifieke screenshot valt de inleidende alinea echt op omdat deze het meest links is uitgelijnd, waar het oog eerst iets lijkt te lezen. Dit type uitlijning heeft de afgelopen twaalf maanden veel andere ontwerpers geïnspireerd om ontwerpen met positioneel contrast in dezelfde stijl te creëren.
SimpleBits is het merk waar Dan Cederholm mee werkt, je kent hem misschien van projecten zoals Dribbble . Bij eerste indrukken lijkt de SimpleBits-site geen positioneel contrast te hebben, maar wanneer u begint te scrollen, wordt alles duidelijk. Waar sommige mensen een vaste achtergrondafbeelding gebruiken om een net stilistisch effect te creëren, heeft Dan zijn logo en navigatie volledig in positie gefixeerd, zodat ze altijd op dezelfde plaats op het scherm blijven, ongeacht waar je naartoe scrollt. Dit is een goed voorbeeld van een niet-standaard positioneel contrast.
SquaredEye is de designwinkel van Matthew Smith en de case study-pagina's in zijn portfolio maken fantastisch gebruik van positioneel contrast. Je moet de hele pagina zien om het idee echt te krijgen, maar in wezen heeft Matthew zorgvuldig specifieke positionering gemaakt voor elk gedeelte van de pagina. Dit zorgt voor een fantastisch contrast tussen de secties en schept veel visuele interesse voor de lezer zonder af te leiden.
Contrast Conclusie
Er is zoveel meer contrast dan alleen "licht en donker" - het is een van de belangrijkste principes in ontwerp en je kunt er bijna nooit teveel van hebben, mits je het op de juiste manier gebruikt.
Je ontwerpen naar een hoger niveau tillen, gaat niet over het vinden van de volgende bandwagon om op te hameren met afgeronde hoeken en schaduwen te laten vallen voor alles, maar om betere en efficiëntere manieren te vinden om de boodschap achter het ontwerp over te brengen.
Contrast in detail onderzoeken en volledig benutten is een van de beste manieren om dit te doen.
Wat denk je? Hoeveel aandacht besteedt u aan contrast in uw ontwerpen? Denk je er de hele tijd aan of is het iets dat van nature komt?