Asymmetrische balans in webontwerp
Toen ik voor het eerst het idee van bedekte symmetrische ontwerppatronen hier op Webdesigner Depot Ik was niet van plan om in te gaan op het begrip asymmetrisch ontwerp.
Hoe meer ik erover nadacht, hoe meer ik me gedwongen voelde om het onderwerp te bespreken om enkele van de ideeën die draaien om symmetrische ontwerppatronen te contrasteren.
In asymmetrisch ontwerp vinden we ontwerpen die elementen bevatten die geen spiegelbeeld creëren. Meestal zijn deze asymmetrische ontwerpen in feite gebalanceerd, maar gewoon niet door perfect vergelijkbare helften.
Dit soort ontwerp is eigenlijk veel gemakkelijker te vinden, aangezien de meeste inhoud zich niet leent voor perfecte symmetrie.
Laten we eens kijken naar een aantal sites die deze ontwerpaanpak naar hun hand zetten en misschien enkele ideeën ontdekken die van invloed kunnen zijn op uw eigen ontwerpwerk.
Introductie tot het gebruik van asymmetrie
Bully Entertainment
Als inleiding op het begrip asymmetrisch ontwerp, biedt dit dramatische ontwerp een tamelijk goed uitgangspunt. Hoewel er echt geen reden is dat dit ontwerp niet opnieuw kon worden geconfigureerd om een perfecte symmetrie te produceren, zou het gewoon niet zo goed werken. De grote, rijk geïllustreerde ontwerpen compenseren de tekst op de startpagina prachtig. Hun afmetingen zorgen ervoor dat ze extreem zichtbaar zijn en ze zijn de belangrijkste visuele drijvende kracht van het ontwerp. Deze natuurlijke balans tussen een enkel groot element en een meer dicht verpakt alternatief is een zeer gebruikelijke aanpak.
Jorge Rigabert
Deze lay-out presenteert een vrij standaard weblay-out. Een kleine kolom met belangrijke navigatie, gecombineerd met een veel grotere kolom voor de inhoud van de site. Dit is misschien een van een handvol standaardlay-outs die dagelijks door ontwerpers worden gebruikt. Ik geloof dat veel van het ontwerpproces in dit geval semi-automatisch gebeurt. Overweeg in dit geval de zijbalk die de inhoudskolom asymmetrisch in evenwicht houdt. De zijbalk heeft een donkerdere kleur, waardoor deze het kanaal met lichtere inhoud kan verschuiven. Zonder de donkere achtergrond zou de zijbalk waarschijnlijk verloren gaan en niet zo goed opvallen.
Afbeeldingen om tekst in balans te brengen
Een andere vrij standaard benadering van webdesign dat uiteindelijk een asymmetrisch ontwerpelement wordt, is het koppelen van tekst met afbeeldingen. Zoals je in de onderstaande voorbeelden zult zien, heeft elk een grote afbeelding. Deze afbeelding is op de een of andere manier gepaard met een tekstblok. Deze combinatie is zeer gewoon.
De truc is tamelijk voor de hand liggend, zorg er gewoon voor dat de twee elkaar op de een of andere manier aanvullen. Aangezien deze twee elementen meestal een lus voor de ogen zullen creëren, is het belangrijk dat ze op de een of andere manier samenwerken. De meest voor de hand liggende aanpak is om de afbeelding letterlijk te laten illustreren of laten zien waar de tekst over spreekt. Een andere veelgebruikte tactiek is om het beeld dat in de tekst wordt gepresenteerd uit te breiden.
Hier zijn enkele voorbeelden om te overwegen.
Cake Sweet Cake
Dit ontwerp is zeer zeker goed uitgebalanceerd, maar het maakt gebruik van verschillende asymmetrische elementen om dit te bereiken. Let op de grote afbeelding van een cake in combinatie met de tekst. De beelden zijn redelijk voor de hand liggend, maar van fundamenteel belang. In dit geval vertelt de cake ons niet alleen dat dit een cakewinkel is, maar ook welke stijl ze kunnen bieden. Combineer dit met de verhelderende tekst die eraan is gekoppeld en je hebt een vrij duidelijk verkooppraatje. Dit is alles om nog maar te zwijgen over het ongelooflijk smakelijke ontwerp waarop deze site is ingepakt.
Meer Soda
Dit voorbeeld maakt ook gebruik van asymmetrische ontwerpelementen op basis van een groot beeld in combinatie met een tekstblok. In dit geval is de verbinding lang niet zo duidelijk. Er is geen duidelijk verkoopelement bij betrokken. In plaats daarvan wordt het beeld meer decoratief en creëert het een algeheel gevoel voor stijl voor de site. Naar mijn mening is het iets minder functioneel, maar het is echt moeilijk om te zeggen zonder precies te weten hoe effectief de site is. Het lijkt erop dat een dergelijk visioen een enkelvoudig doel heeft om je te verleiden om wat meer te graven om te zien waar ze allemaal over gaan. Een soort van teaser, als je wilt.
Adaptive Web Design
Zoals u waarschijnlijk al hebt vastgesteld, is dit patroon ongeveer net zo gewoon als de kleur blauw. Ik zou willen speculeren dat bijna elke site er ooit toe komt om een visuele tool als deze te laten werken. Ik denk dat deze gemeenschappelijke plek de natuur tot een onderwerp maakt dat zeker de moeite waard is om te bespreken. Vaak vind ik de meest inspiratie en frisse ideeën van het heroverwegen van dingen die ik keer op keer doe zonder erover na te denken.
Deze eenvoudige site promoot een boek. En natuurlijk is het belangrijkste element als je erop komt een groot beeld van het boek. Combineer dit met het grote blok tekst en je hebt een goed uitgebalanceerd gebied dat alle kritieke elementen bevat. Het belangrijkste is dat het is afgewerkt met een opvallende oproep tot actie. De continuïteit van dit gebied is eenvoudig en ter plaatse. De ogen stromen er gemakkelijk doorheen en verbruiken de kritische informatie. Het is niet verwarrend, of gecompliceerd, slim of lastig. De aanpak is eenvoudig en duidelijk.
Voorgrond- en achtergrondelementen
Een nieuwe benadering van asymmetrisch ontwerp is om gebruik te maken van achtergrondelementen die de voorgrond asymmetrisch in balans brengen. Dit type benadering creëert een interessante dynamiek waarbij de achtergrond meer een functionele rol dient als onderdeel van de inhoud en toch nog steeds deel uitmaakt van de achtergrond van de site. Meestal gebeurt dit door eenvoudige overlappingen die de illusie van diepte creëren. Hier zijn enkele voorbeelden om te overwegen.
Peter McLeavey Gallery
De websites van deze galerij zijn een perfecte demonstratie van dit idee. Hier dient het achtergrondelement vele rollen. Ten eerste creëert het tot het punt van deze sectie een asymmetrische balans met de grote grijze cirkel op de voorgrond. Deze visuele combinatie creëert twee gebieden die ervoor zorgen dat de ogen heen en weer kaatsen. Dit is naar mijn mening een goede zaak.
Het element links bevat de belangrijkste branding en links naar de inhoud van de site, terwijl het achtergrondelement u informeert over de context van de site. U kijkt naar een galerijwebsite, en dit wordt overduidelijk binnen enkele seconden na de landing op de site. Ik hou ervan dat zo'n informatief element als de achtergrond ook een grote rol kan spelen in het ontwerp en de algehele stijl van de site. Vooral als het zo goed weerklinkt in de context van het product dat de site biedt. Zo'n simpele aanpak, maar zeer effectief.
Aleksandar Grkinic
Dit is eenvoudig over mij pagina omhelst ook dit eenvoudige idee waarbij een achtergrondelement asymmetrisch een voorgrond op een evenwicht brengt. In dit geval is de achtergrond echter niet helemaal duidelijk. En dit is waar ik echt dol op ben. De illusie van diepte is er helemaal en zonder enige overlapping is het eigenlijk moeilijk om te beslissen wat de achtergrond eigenlijk is. Ik veronderstel dat we zouden kunnen beweren dat de persoon die springt helemaal niet op de achtergrond is. Hoe dan ook, de asymmetrische balans is duidelijk. En zonder de mooie combinatie van verschillende elementen zou de pagina niet bestaan. Het ontwerp is in veel opzichten puur gebaseerd op het concept van asymmetrische balans. Vaak lijkt het erop dat uiterst eenvoudige ontwerpen er buitengewoon mooi uitzien met mooie contrasten zoals deze.
Robert Dabi
In dit geval speelt de achtergrond een interessante rol in het ontwerp, maar produceert hij niet de asymmetrische elementen die we tot nu toe hebben gezien. Naar mijn mening is het grote visuele duidelijk een voorgrondelement van het ontwerp. Wat ik echter leuk vind, is hoe het subtiel deze lijn vervaagt met zoiets eenvoudigs als de schaduw onder de afbeelding. Dit combineert het effectief met de achtergrond en creëert een prachtige dynamiek. Vanzelfsprekend is het grote beeld asymmetrisch gebalanceerd met de kopie ernaast. Doorloop de pagina's van de site en u zult aangenaam merken dat de achtergrond op zeer interessante manieren verandert en versmelt met de beelden. Een prachtig ontwerp dat fris, schoon en superglad aanvoelt. Het lijkt een goede presentatie voor een portfoliosite.
Nog tien andere ontwerpen
Hieronder heb ik tien extra ontwerpen gegeven die gebruik maken van asymmetrische elementen. Zoals ik al zei kon ik veel websites in deze categorie plaatsen. Dus voor de toepassing van dit artikel heb ik zorgvuldig ontwerpen geselecteerd waarvan ik vind dat ze de aanpak op enigszins atypische en creatieve manieren gebruiken. Overweeg elk ontwerp in het licht van dit onderwerp en ik hoop dat je nieuwe ideeën opdoet om je volgende ontwerp te inspireren.
Greenluv
Andersson Wise
prognose
13 vrouwen
Raffles Institution
Urban Svensson
Carrousel
Purlize
Bussen bij de brouwerij
Humaan
Conclusie
Balans is een fundamenteel onderdeel van het ontwerpproces en het gebruik van asymmetrische elementen is even fundamenteel. Ik vind het altijd leuk om terug te gaan naar de basis van design, want ik merk dat ik het altijd op een nieuwe manier begrijp die een impact heeft op het werk dat ik doe. Er zijn talloze manieren om dingen te benaderen en het doorbreken van onze patronen kan vaak leiden tot frisse en nieuwe ontwerpen die onze passie voor ons werk verjongen.
Wat zijn je favoriete asymmetrische websiteontwerpen? Wie doet iets anders met asymmetrie? Laat het ons weten in de reacties!