Hoe Balance gebruiken in Web Design
Het bereiken van evenwicht in webdesign vergt wat denken, moeite en vaardigheden, maar het is absoluut de moeite waard. Het mooie van balans, dat kan worden toegepast op de bredere categorie van design als geheel, is dat het wat je maakt, een overdadige, overbelaste puinhoop is die niet voldoet aan de gebruikerservaring. Met andere woorden, evenwicht in webontwerp zorgt ervoor dat u als ontwerper net die goede plek van matiging raakt. Niet te veel, maar niet te weinig. Niet te luidruchtig, maar niet te subtiel. Het houdt uw hele ontwerp in harmonie en raakt toch alle bruikbaarheid doelen van uw klanten. Nu is dat een vaardigheid om zeker in de gereedschapskist van uw ontwerper te plaatsen! In dit artikel zullen we bekijken hoe u een goede balans kunt opnemen in de websites van uw klanten.
Symmetrische balans
Een van de meest voorkomende voorbeelden van evenwicht die je tegenkomt bij het bladeren door websites is symmetrie, hoewel je het je misschien niet realiseert, omdat het zo naadloos wordt gepresenteerd. Symmetrie is een lust voor het oog en creëert een ontwerp dat esthetisch goed georganiseerd en harmonieus is. Symmetrische balans wordt gedefinieerd door elementen gelijk aan beide zijden van een horizontale of verticale centrale as te plaatsen. Met andere woorden, beide zijden van een denkbeeldige duiklijn in het midden van de pagina zijn in wezen spiegelbeelden van elkaar. Hoewel sommige critici dit soort balans als saai of voorspelbaar kunnen afschrijven, heeft het desalniettemin de tand des tijds doorstaan en blijft het een van de beste manieren om de balans in webdesign te laten zien.
Cisco's site heeft ervoor gekozen om te gaan voor deze beproefde, geteste en echte ontwerpbenadering. Merk op hoe de site perfect in evenwicht is over zijn verticale as. Als je een denkbeeldige lijn hebt genomen en deze hebt opgesplitst in het midden van de startpagina van Cisco, zou je het volgende opmerken:
- Hetzelfde aantal elementen in de navigatiebalk (inclusief zoekpictogram) aan beide zijden
- De kop en ondertitel zijn aan beide zijden even lang
- De call-to-action-knop is perfect gecentreerd
- Hetzelfde aantal elementen onder de kop 'Snelle taken' aan beide zijden
Hoewel de site misschien niet de meest vreselijke spannende site ooit is, hoeft dat niet omdat het bedrijf netwerkapparatuur verkoopt. Bovendien is de site bruikbaar en functioneel, beide eigenschappen die zijn klanten kunnen waarderen. Laten we eens naar twee andere voorbeelden van symmetrie kijken:
IWC Schaffhausen , de Zwitserse horlogemaker, heeft een site met een horizontaal, symmetrisch evenwicht. Als we de pagina over een centrale as in het midden verdelen, hebben beide zijden symmetrie.
Hetzelfde geldt voor de Beanstalk App-website . Met een eenvoudig, minimaal ontwerp, gaat de centrale as naar beneden in het midden van de startpagina, die de twee helften van de pagina verlaat met een horizontale, symmetrische balans.
Asymmetrische balans
Het tegenovergestelde van symmetrie, asymmetrische balans is ook mogelijk. Laat je niet misleiden door het feit dat asymmetrie een gebrek aan gelijkwaardigheid tussen delen betekent! Zoals u snel zult zien, bereikt asymmetrisch evenwicht ook een systeem van contragewichten in het ontwerp ... alleen niet op manieren die u zou verwachten. Asymmetrie kan op een aantal manieren op een webpagina worden weergegeven. Bijvoorbeeld, de ene helft van het scherm, verticaal of horizontaal, kan bogen op een intenser element terwijl de andere helft subtielere elementen kan hebben. Ondanks deze ongelijkheid, zowel qua kracht als qua aantal, wordt evenwicht gecreëerd door de juxtapositie van de tegenstrijdige elementen. Op deze manier kan asymmetrie echt mooi zijn, misschien meer dan rechtlijnige symmetrie, omdat het speelt op het concept van ongelijkheid om balans te creëren. Dat is een ontwerpparadox, maar dan een die zo goed werkt op elke site. Asymmetrische balans is daarom interessanter en tot nadenken stemmend dan voorspelbare symmetrie. Het roept thema's op van modernisme, energie en verwondering. Ontwerpers moeten er echter rekening mee houden dat het creëren van asymmetrie op een pagina meer werk vereist dan normale symmetrie. Je moet immers relaties tussen ontwerpelementen weergeven die gecompliceerder zijn.
Honda geeft ons een duidelijk voorbeeld van asymmetrie in webdesign. Onder de vouw, op de startpagina, gebruikt het bedrijf een kaartontwerp, maar dit zorgt voor een enigszins ongeorganiseerd uiterlijk dat, hoewel het visueel aantrekkelijk en kleurrijk is, een gebrek aan gelijkheid creëert aan beide zijden van een verticale of horizontale centrale as. Om te beginnen zijn de kaarten zelf altijd verschillende lengtes, horizontaal en worden ze niet altijd in een uniforme kolom of rij gestapeld. Dit creëert een grote asymmetrie die heel interessant is om naar te kijken. Het is bijna een klein doolhof op de startpagina van het autobedrijf! Er zijn ook andere interessante voorbeelden:
Typographisme is een beeldschoon geval van asymmetrie in webdesign. De site bevat twee elementen die scheef staan. Zowel het TG-logo als de groene stempel in de rechter bovenhoek creëren asymmetrie.
Duplicaten 'asymmetrie is sterker. De site heeft een ontwerp met zwevende elementen dat niet consistent is met de andere helft, ongeacht of de centrale as verticaal of horizontaal is. Al met al produceert het een opvallende verschijning die interessant is om op te nemen.
Radiale balans
Radiale balans is vrij eenvoudig. Zoals de naam al aangeeft, treedt radiale balans op wanneer alle ontwerpelementen op een pagina op gelijke afstanden vanaf een verenigend, centraal punt voortkomen. Dus als u de pagina verticaal of horizontaal langs een centrale as zou verdelen, zouden de elementen van beide zijden even ver of dichtbij het centrale punt liggen. Enkele van de meest basale voorbeelden van radiale balans zijn dingen zoals zonnestralen die uit een centraal punt komen of een vijver met een hoop rimpelingen op het oppervlak. Wat deze vorm van balans nog specialer maakt, is dat het stralende effect in twee richtingen gaat: net zoals de aandacht wegleidt van het centrale punt, leidt het ook terug naar het dankzij het gemeenschappelijke centrum. Daarom is het gemakkelijk om een brandpunt te houden.
Het beste voorbeeld van radiale balans - wat vrij zeldzaam is op websites, met name homepages - is vlog . Het is de belichaming van radiale balans, omdat alles naar buiten straalt vanuit het centrale punt van het witte type "Vlog.it".
Allerlei balans
Inmiddels zou het vrij duidelijk moeten zijn dat alle soorten balans een aantal gemeenschappelijke obligaties hebben. Er zijn uniforme factoren die consistent voorkomen in elk ontwerp met een aantrekkelijke en interessante balans. Evenwicht in webdesign is overal om je heen. De kans is groot dat je hebt nagelaten om het te waarderen op alle verschillende sites die je ooit in je leven hebt bekeken; maar dat is alleen omdat balans niet echt het eerste is waar je aan denkt als je op een site navigeert. Niettemin is balans belangrijk voor het ontwerp van de site. Het biedt niet alleen esthetische aanrakingen die interessant zijn vanuit een visueel standpunt. Het kan ook de gebruikerservaring helpen door de visuele informatie op een site gemakkelijker te absorberen, wat overigens niets zegt over het verbeteren van de sitenavigatie. Ontwerpers kunnen streven naar een betere balans in hun webontwerp door extra aandacht te besteden aan harmonie, contragewichten en equidistance. Het eindresultaat van een goede balans levert onnoemelijke dividenden op voor uw klanten en de gebruikerservaring.