Van de auteur: vandaag zullen we het hebben over wat compositie is in webdesign, waar fotografen, kunstenaars en webontwerpers graag over praten. Voor een nieuwkomer op dit gebied kan het lijken dat dit een soort geheime kennis is die slechts voor een select groepje toegankelijk is. Maar vandaag heb je geluk: ik zal je helpen dit probleem te begrijpen, zozeer zelfs dat je niet alleen de stemming van sitebezoekers kunt beïnvloeden, maar ook hun aankoopbeslissing. Daar gaan we?

Natuurlijk moet je vaak sites bezoeken die op het eerste gezicht niets lijken - de foto's zijn prachtig en de tekst is coherent, maar ze missen een soort logica, volledigheid of zoiets. En dat allemaal omdat de eigenaren van dergelijke sites hoogstwaarschijnlijk niet de moeite namen om de wetten van compositie in acht te nemen - de kunst van het organiseren van site-elementen, het combineren en rangschikken ervan op hun plaats.

O, dit brein...

Onze hersenen hebben het vermogen om informatie onmiddellijk waar te nemen en visuele verbindingen te creëren. Ik zal het uitleggen met voorbeelden. Hieronder zie je twee cirkels.

Je hebt meteen een manier gevonden om ze van elkaar te onderscheiden, nietwaar? Maar hier is een moeilijkere taak voor jou.

Ondanks zo'n verscheidenheid aan objecten, kun je ze zeker allemaal beschrijven.
Wat hebben webdesign, balans en de basisprincipes van compositie ermee te maken? - je vraagt. Het punt is dat onze hersenen een uniek vermogen hebben om informatie onmiddellijk te classificeren. Het kan visueel vergelijkbare objecten in groepen groeperen. Met behulp van eenvoudige visuele hulpmiddelen kunt u een grote hoeveelheid informatie aan gebruikers overbrengen en hun aandacht controleren.

Compositie is een bepaalde combinatie van website-elementen

Harmonie in de relaties tussen delen van het geheel, schoonheid en logica van constructie zijn niet alleen inherent aan menselijke creaties. Tekenen van compositie zijn te vinden in de structuur van het universum, dierlijke organismen en planten, en natuurlijke vormen. Daarom kan de term ‘compositie’ net zo goed worden toegepast op de structuur van een website, de beschrijving van een bloem en de kenmerken van een oratorische toespraak.
Het is het gemakkelijkst om over compositie in webdesign te praten als het niet op zijn plaats is. Ieder van ons voelt intuïtief de aanwezigheid/afwezigheid ervan: of de elementen in harmonieuze interactie zijn, of ze ondergeschikt zijn aan het hoofdidee van de site, schilderij, foto.

Om het ontwerp van uw website er natuurlijk en harmonieus uit te laten zien, zonder in afzonderlijke componenten uiteen te vallen, volgt u de basisontwerpprincipes die ik in dit artikel beschrijf.

Het kiezen van de juiste kleuren

De kleurkeuze bepaalt hoe mensen uw website en tegelijkertijd uw product waarnemen. Gedempte kleuren komen voor ons ontspannen en kalm over, terwijl heldere en contrasterende kleuren vrolijk en energiek overkomen.

Bedenk welke emotie je bij je websitebezoeker wilt oproepen en kies vervolgens het passende kleurenschema. Een mooi voorbeeld is het frisse design van de website van Orangina, waarbij het merkimago benadrukt wordt:

Gebruik kleuraccenten om de aandacht te trekken. U kunt bijvoorbeeld de belangrijkste knoppen – ‘Kopen’ en ‘Contact’ – in contrasterende kleuren ontwerpen. Ik zal je kennis laten maken met enkele van de belangrijkste principes voor het kiezen en combineren van kleuren.

1. Extra kleuren. Alle tegenstellingen op het kleurenwiel zorgen voor een sterk contrast, dus ze kunnen worden gebruikt, maar alleen met de nodige voorzichtigheid.

2. Analoge kleuren. Dergelijke ‘buren’ op het kleurenwiel hebben geen sterk contrast.

3. Triade. Een bijna win-wincombinatie is een gelijkbenige driehoek.

Moderne trends en benaderingen in webontwikkeling

Leer het algoritme voor snelle groei vanaf het begin bij het bouwen van websites

4. Viertal. Twee paar complementaire kleuren moeten heel voorzichtig worden gebruikt om geen chaos te creëren in zowel warme als koude omstandigheden.

Regel van derden: wat moet ik waar plaatsen?

De regel van derden verwijst naar de basisprincipes van compositie in webdesign. Het ontstond als gevolg van de interpretatie van de gulden snede-regel (misschien weet je nog dat Leonardo da Vinci deze ook in zijn schilderijen gebruikte).

In eerste instantie wilde ik jullie als voorbeeld het schilderij “De Man van Vitruvius” laten zien, maar vanwege zijn te onthullende outfit, of beter gezegd het gebrek daaraan, besloot ik dat niet te doen. Plots lezen kinderen hier een artikel, dus bewonder Madonna:

Teken mentaal twee verticale en twee horizontale lijnen op de pagina en verdeel het gebied in negen gelijke delen. Er wordt aangenomen dat de meeste mensen hun blik precies richten op de snijpunten van deze lijnen. Onthoud de regel van derden elke keer dat u nadenkt over waar u bijvoorbeeld een call-to-action-knop moet plaatsen.

Het is eigenlijk best grappig dat zo'n wiskundige regel wordt toegepast op zoiets subjectiefs als webdesign. Dit is een soort esthetisch compromis dat een gevoel van balans op het scherm creëert, zonder het te overbelasten, maar zonder het te statisch te maken.

De ruimte opruimen

Als kind hebben je ouders je zeker gevraagd je kamer op te ruimen, omdat (ik citeer) “er geen vrije ruimte is.” Eh, gouden woorden... Lege ruimte, of, zoals ontwerpers zeggen, “lucht” is de basis van de compositie van webdesign. Soms is het zelfs belangrijker dan de inhoud. Als er weinig vrije ruimte is, doe dan een voorjaarsschoonmaak en weersta de verleiding om zoveel mogelijk tekst, pictogrammen, afbeeldingen, enz. toe te voegen.

De site mag niet overbelast worden, anders worden de ogen van mensen wazig en kunnen ze het idee dat u hen probeerde over te brengen niet 'vatten'. Beperk de tekst strikt tot de kern, een paar foto's en een duidelijk gestructureerd menu.

Beheers de blik van de gebruiker

Er is voldoende onderzoek gedaan naar hoe mensen websites bekijken, zodat u kunt begrijpen hoe u de aandacht van een bezoeker op de belangrijkste elementen kunt richten. Uit deze onderzoeken is gebleken dat mensen het scherm scannen in een patroon dat lijkt op de letter Z of de letter F, dat wil zeggen van boven naar beneden en van links naar rechts.

Met deze kennis kunt u effectief profiteren van de visuele hiërarchie door pagina's te ontwerpen op een manier die u maximale winst en impact oplevert.

Plaats afbeeldingen, kleurencombinaties, lettertypen, horizontale, diagonale en verticale lijnen in overeenstemming met visuele normen, en uw gebruikers zullen graag het pad volgen dat u hebt betreden, waarbij ze eerst naar de meest noodzakelijke dingen kijken, en dan naar de onbelangrijke dingen.

Wilt u voorkomen dat bezoekers langs een bepaalde knop komen? Markeer het met een contrasterende kleur en plaats het op de plek waar het oog meteen komt. Wilt u laten zien hoe geweldig uw producten zijn? Selecteer ze uit de algemene achtergrond en plaats ze volgens de hierboven besproken F-Z-regel of de regel van derden.

De theorie van compositie bij website-ontwerp is dus geen geheime kennis die voor slechts enkelen toegankelijk is, en iedereen kan zelf een mooie en functionele website maken, zonder zich tot dure specialisten te wenden. Er zijn veel videocursussen op internet over het helemaal opnieuw maken van websites. Ga ervoor en het zal je lukken!

Ik hoop dat ik hier deze fascinerende les zal beëindigen. Abonneer u op onze blogupdates en tot ziens in de volgende artikelen!

Moderne trends en benaderingen in webontwikkeling

Leer het algoritme voor snelle groei vanaf het begin bij het bouwen van websites

Dag Allemaal! Nu zullen we kijken naar een even belangrijk onderwerp in webdesign, dat voor velen moeilijk is, en inderdaad niet voor iedereen. Dit thema wordt compositie genoemd in uw websiteontwerp. In feite is het veel ingewikkelder dan het op het eerste gezicht lijkt. Je kunt dit onder de knie krijgen als je veel oefent en het werk van de beste webontwerpers bekijkt of analyseert. Voordat u echter gaat oefenen, moet u bewezen, correcte kennis verwerven. Dit is precies wat we nu gaan doen.

Voordat we de basisprincipes van compositie gaan bestuderen, moeten we ook weten dat elk element van de site niet op zichzelf mag staan. Het moet een wisselwerking hebben met de elementen eromheen en harmonieus in het totaalbeeld passen. Dit is misschien wel de basisregel die u moet onthouden en waar u zich altijd door moet laten leiden. Laten we nu verder gaan met het eerste principe van harmonieuze compositie in ontwerp.

Evenwicht

Uw ontwerpcompositie kan in balans zijn. Balans is als een balans tussen de elementen van een site in een compositie. Deze compositie geeft niet het gevoel dat een deel ervan de rest domineert. mogelijk door het correct plaatsen, inkleuren en instellen van de juiste afmetingen van diverse objecten.

De balans kan symmetrisch zijn, dat wil zeggen objecten ( twee grijze cirkels) bevinden zich in dit geval op dezelfde afstand ten opzichte van een derde object ( zwarte cirkel). Simpel gezegd, symmetrische balans is een synoniem voor " dezelfde". In ons geval bevinden de twee grijze cirkels zich op dezelfde afstand ten opzichte van de grote zwarte cirkel (foto hieronder).

De balans kan ook asymmetrisch zijn. Asymmetrie- dit is het tegenovergestelde van symmetrie. Dit betekent dat de objecten zich niet op dezelfde afstand bevinden ten opzichte van een derde object. De balans kan ook radiaal zijn. In dit geval bevinden objecten zich in een cirkel en wijken ze af van een enkel punt.

Contrast

Contrast verwijst naar bepaalde webdesignelementen die elkaar benadrukken wanneer ze naast elkaar worden geplaatst. Het kan bijvoorbeeld wit en zwart zijn, groot en klein, dik en dun. Op de foto zien we uiterst links zwart en uiterst rechts wit.

Als ze naast elkaar staan, zal het contrast merkbaar zijn. Als gevolg hiervan zal er de grootste aandacht zijn. En als je iets groots en diks neemt ( vierkante vorm in de verre, linker benedenhoek), en neem een ​​kleine, dunne ( streepvorm uiterst rechts), en plaats ze naast elkaar - er zal ook contrast zijn.

Betekenis en ondergeschiktheid

Dit betekent dat er in elk websiteontwerp een bepaald gebied is waarop de aandacht van de bezoeker is gericht. Dit is de plek waar de blik van een persoon onmiddellijk op valt zodra hij de site betreedt. Alle objecten op de site moeten een hiërarchie van betekenis en ondergeschiktheid hebben.

Met andere woorden: belangrijkere objecten zijn meestal groter van formaat en helderder van kleur en contrast. Over het algemeen trekken ze de meeste aandacht.

Dit gebeurt heel eenvoudig door de grootte, vorm, kleur, textuur, markering van schaduwen en andere elementen te veranderen die het object kunnen benadrukken en de aandacht kunnen trekken.

Richting van de aandacht

In essentie moet je bij webdesign als het ware een pad maken waarlangs iemand moet lopen naar de plek waar jij heen moet. U heeft bijvoorbeeld iemand nodig die een strijkijzer op de website bestelt:

• Eerst moet je zijn aandacht trekken. Je maakt een grote en heldere kop.
• Leid de persoon vervolgens in de ondertitel naar het onderwerp.
• In de tekst, met behulp van foto's en beschrijvingen van voordelen, leidt u hem tot een aankoop.
• Aan het einde laat je de persoon al de prijs zien en nodig je hem uit om op de knop “ Bestel een product«.

Het hele proces zou moeten verlopen zoals hierboven beschreven. Het mag niet gebeuren dat iemand naar uw website komt en eerst de melding “ Volgorde"of de prijs zelf, en pas dan de kop. Iemand kan een hoge prijs zien en waarschijnlijk vertrekken zonder alle voordelen te kennen die u hem biedt.

Dit kan niet worden toegestaan.

Je moet de aandacht van de bezoeker beheersen. Dit alles gebeurt zoals in de vorige voorbeelden ( op grootte, vorm, textuur enzovoort).

Proporties

Verhoudingen zijn de verhouding tussen de afmetingen van figuren ten opzichte van elkaar. Dat wil zeggen dat twee figuren qua uiterlijk absoluut identiek kunnen zijn ( Zoals op de afbeelding is de onderste bijvoorbeeld zwart en de bovenste wit), maar slechts één zal groter zijn en de andere kleiner.

Alle zijden, hoeken, diameters en andere kenmerken worden met een bepaald aantal groter of kleiner.

Schaal

Schaal is de werkelijke grootte van een object, gezien in relatie tot iets ( bijvoorbeeld in relatie tot andere objecten, mensen, land, enzovoort).

Trouwens, in elke grafische editor ( bijvoorbeeld, binnen), wanneer u de grootte moet vergroten of verkleinen met een vergrootglas, krijgt u de afbeeldingsschaal in % te zien. Ik hoop dat het je duidelijker is geworden wat schaal is.

Herhaling en ritme

Heel vaak zullen we op de een of andere manier de aandacht van de gebruiker moeten trekken, maar hiervoor is één object niet genoeg. Het zal nodig zijn om dit object te herhalen of, eenvoudiger gezegd, het te dupliceren. Dit kan ook gebruikt worden om de aandacht van de bezoeker vast te houden.

Vrienden, groeten! Irina heeft contact. Ieder van ons heeft verschillende pagina's op sociale netwerken, en sommige hebben hun eigen website. Velen van ons hebben geleerd lay-outs te maken voor eenvoudige visitekaartjes, flyers, folders, logo's, banners, en sommigen beheersen programma's voor het maken van presentaties. Om dit alles een lust voor het oog, leesbaar en zichtbaar te maken, zullen we vandaag nadenken over de eenvoudige ontwerpregels: de basisprincipes van compositie.

Samenstelling is...

Voor degenen die deze zin voor het eerst horen, zal ik het uitleggen: compositie is het onderwerp (of de wetenschap) van de juiste opstelling van verschillende elementen binnen één ruimte (op één pagina van een boekje, op één kant van een visitekaartje, op één presentatiedia, op één banner, op één websitepagina, enz.). En wat deze ruimte ook is (verticaal of horizontaal, klein of groot), de compositieregels zullen hetzelfde zijn. Dus…

Basisregels voor compositie

1. Elementaire evenwichtsregel

Elementen binnen één ruimte moeten zo worden gerangschikt dat alles er visueel evenwichtig, evenwichtig en harmonieus uitziet. Er zijn symmetrische en asymmetrische evenwichten. In symmetrisch evenwicht:

In asymmetrisch evenwicht:

1. Elementcontrastregel

Elementen binnen dezelfde ruimte kunnen volledig tegengesteld zijn qua kleur, grootte, vorm en textuur. Ze moeten worden geplaatst volgens de contrastregel.

1. Regel voor elementbetekenis

Elementen binnen dezelfde ruimte moeten worden geplaatst volgens de regel van betekenis: belangrijkere elementen moeten worden benadrukt door kleur, grootte, vorm en textuur. Een belangrijker klein element wordt op de voorgrond geplaatst, bovenop alle andere.

1. Eenheidsregel

Elementen binnen één ruimte kunnen zo worden gerangschikt dat ze iets holistisch en verenigd vormen.

1. Regel van beweging

Elementen binnen dezelfde ruimte kunnen zo worden gerangschikt dat ze een gevoel van beweging creëren. Dit kan zowel worden bereikt door de rangschikking van de elementen als door verschillende extra functies: lijnen, pijlen, nummering.

1. Regel van de ruimte

Elementen binnen dezelfde ruimte kunnen zo worden gerangschikt dat ze een gevoel van ruimte creëren. Soms is het handig om een ​​element dichter bij de kijker te brengen (bijvoorbeeld door een macro-opname te maken), maar soms kan hetzelfde element op geheel de tegenovergestelde manier dichter bij de kijker worden gebracht: door het weg te bewegen en er ruimte omheen te creëren.

1. Regel van openheid

Elementen binnen dezelfde ruimte moeten zo worden gerangschikt dat ze een gevoel van openheid creëren. Vergelijken:

Conclusie

Vrienden! Met behulp van deze eenvoudige geheime trucs zal uw ontwerp aanzienlijk verbeteren! Het komt tot leven, wordt visueel aantrekkelijk, alsof er een onzichtbare magneet in werkt. Dit zijn natuurlijk niet allemaal geheime functies. Als dit onderwerp nuttig en relevant voor u blijkt te zijn, kunt u erover schrijven in de reacties als u ermee wilt doorgaan.

Het is dus duidelijk dat compositie er veel toe doet. Maar wat is compositie? Grofweg is dit de ruimte waar individuele elementen tot een geheel moeten worden getransformeerd, en waar afbeeldingen, tekst, graphics en kleuren worden gevormd tot één ontwerp waarin alles in elkaar past.

Een geslaagde compositie betekent dat je de elementen op de juiste manier hebt gerangschikt en verdeeld. Dit ziet er niet alleen mooi uit, maar is ook functioneel gezien effectief. Laten we dus eens de essentiële tips, trucs en technieken doornemen waarmee je in een mum van tijd een compositiegoeroe wordt.

1. Concentreer u op het belangrijkste

Zoals ons ooit op school werd verteld, is accentverdeling erg belangrijk. Het belangrijkste element van elke goede compositie is focus, omdat dit de kijker helpt zich eerst op de belangrijkste details van het ontwerp te concentreren.

Enkele opvallende technieken zijn schaal, contrast en bewegwijzering, waarover we later meer in detail zullen praten. Laten we nu het gegeven voorbeeld analyseren.

2. Richt de aandacht van de lezer met bewegwijzering

Net zoals je iemand zou wijzen op iets waarvan je wilt dat hij of zij het ziet, richt je de blik van de kijker met specifieke lijnplaatsingen en verschillende vormen. Op deze manier kunt u de juiste perceptie van uw ontwerp bereiken.

Hoogstwaarschijnlijk bent u al bekend met een van de meest voorkomende soorten tekens: schematische tekens. Diagrammen gebruiken lijnen om het oog in een vrij voor de hand liggende volgorde van het ene punt naar het andere te leiden. Bekijk deze datumkaart van Paper and Parcel eens. De ontwerper besloot schematische tekens te gebruiken om informatie op een interactieve en ongebruikelijke manier over te brengen.

Daarnaast kunnen ze enkele verbindende elementen van de tekst of kleine stukjes informatie aangeven. Zoals al gezegd, concentreer je je eerst op het hoofdonderwerp; maar waar ga je op letten? Door bewegwijzering correct te plaatsen, kunt u niet alleen de aandacht op de belangrijkste elementen vestigen, maar ook de blik van uw kijker door het ontwerp leiden.

Laten we bijvoorbeeld eens kijken naar deze poster van Design By Day, die duidelijke richtingslijnen gebruikt om je eerst naar het hoofdelement (de titel) te leiden en vervolgens naar verschillende tekstsegmenten.

Het heeft natuurlijk geen zin om zulke voor de hand liggende aanwijzingen in elk ontwerp te gebruiken, maar dat betekent niet dat er geen andere optie is. Zoek enkele vormen en lijnen in de gebruikte afbeeldingen en grafische elementen en gebruik deze om richting te geven aan de blik van de kijker.

Dit is te zien op de 1 Trick Pony-poster, waar de rechterhand van de man wordt gebruikt om zijn blik van de afbeelding naar het logo te "richten" en vervolgens naar de onderkant van de afbeelding. Zo kunnen beeldvormen als wegwijzers dienen.

3. Schaal en hiërarchie

Schaal en visuele hiërarchie zijn een van die creatieve basisprincipes die je ontwerp kunnen verpesten of het op een eye-candy kunnen laten lijken. Daarom is het zo belangrijk om ze correct te kunnen gebruiken om een ​​succesvolle compositie te creëren.

Kort gezegd is hiërarchie het structureren van elementen in volgorde van belangrijkheid. U kunt dus het belangrijkste object van uw ontwerp groter en helderder maken, en de secundaire elementen kleiner en bleker.

Het is vooral belangrijk om rekening te houden met hiërarchie bij het schrijven van tekst. Voor meer informatie over het onderwerp hiërarchie in typografie kunt u het artikel ‘Waarom elk ontwerp drie niveaus van typografische hiërarchie nodig heeft’ raadplegen.

Schaal wordt vaak gebruikt om elementen van een hiërarchie met elkaar te verbinden. De grote schaal vestigt de aandacht op bepaalde objecten en benadrukt het belang ervan voor een goede communicatie.

Dit posterontwerp van Jessica Svendsen gebruikt bijvoorbeeld een vergrote afbeelding als grootste element om maximale aandacht op het onderwerp te vestigen. De kop is het grootste tekstelement en is het belangrijkste stukje informatie in een bepaalde context, terwijl de rest van de tekst op veel kleinere schaal is geschreven. Op deze manier identificeert schaal de belangrijkste ontwerpobjecten en handhaaft de typografische hiërarchie.

Schaal is ook een ongelooflijk handig hulpmiddel als het gaat om het creëren van verhoudingen en een gevoel voor grootte. Je kunt sommige dingen extreem gedetailleerd, ingewikkeld en klein laten lijken, of je kunt ze groot en zelfs omvangrijk laten lijken.

Door contrast te creëren tussen kleine en grote elementen in een compositie, kun je een grote verscheidenheid aan effecten bereiken.

4. Zorg voor een evenwicht tussen elementen

Balans is in veel opzichten een behoorlijk belangrijk iets. En natuurlijk is uw ontwerp geen uitzondering.

Maar hoe kun je deze balans behouden binnen je eigen ontwerp? Laten we snel de twee belangrijkste soorten evenwicht bespreken en hoe u dit kunt bereiken.

Ten eerste is er een symmetrisch evenwicht. De essentie ervan ligt voor de hand: ontwerpbalans wordt bereikt door symmetrie. Door bepaalde elementen aan beide zijden (rechts-links, boven-onder) te reflecteren, bereik je een absoluut evenwicht.

Hier is een voorbeeld van symmetrisch evenwicht. In haar huwelijksuitnodiging gebruikt Jennifer Wick een symmetrische compositie waarbij tekst en afbeeldingen in spiegelbeeld zijn. Symmetrie zorgt ervoor dat de uitnodiging er elegant, netjes en evenwichtig uitziet.

Jennifer Wick

Het tweede type, dat waarschijnlijk veel vaker voorkomt, is asymmetrisch evenwicht. De naam spreekt ook voor zich: balans wordt bereikt door een asymmetrische opstelling van elementen.

Hier is een voorbeeld van het succesvolle gebruik van asymmetrisch evenwicht. In zijn poster verdeelde Munchy Potato doelbewust cirkels van verschillende grootte over verschillende delen van de ruimte, waardoor asymmetrie werd bereikt.

In het bovenstaande voorbeeld zijn de drie middelste cirkels de grootste elementen van het ontwerp, maar ze zijn niettemin in balans door het juiste lettertype, de afbeeldingen en het gebruik van een kleine gestructureerde cirkel in de benedenhoek van de poster.

Om vaardigheden te ontwikkelen in het creëren van een asymmetrisch evenwicht, moet je elk element beschouwen als een eenheid met zijn eigen ‘gewicht’. Kleinere objecten zouden daarom minder moeten ‘wegen’, en textuurrijke elementen zouden meer moeten ‘wegen’ dan homogene objecten. Wat het doel van uw ontwerp ook is, u moet altijd een evenwicht bereiken tussen de objecten die u gebruikt.

5. Gebruik elementen die elkaar aanvullen

Je hebt vast wel eens gehoord van complementaire kleuren, maar heb je ook gehoord van complementaire designelementen? Een van de belangrijkste elementen van een succesvolle en effectieve compositie is de zorgvuldige, doelgerichte selectie van elk designobject, waarbij alles één geheel moet worden.

Een veelgemaakte fout bij het maken van een compositie is het gebruik van afbeeldingen die elkaar niet aanvullen. Wanneer je besluit meerdere beelden te gebruiken, controleer dan ook altijd of deze de juiste impact hebben op de kijker en of er een noodzakelijke samenhang tussen zit. Hier zijn een paar manieren om dit effect te bereiken.

Gebruik foto's van dezelfde fotoshoot. Dit is een ongelooflijk gemakkelijke manier om ervoor te zorgen dat de afbeeldingen samenhangend zijn, aangezien ze in dezelfde stijl en uit dezelfde richting komen. Ontwerpers Jekyll & Hyde en Elena Bonanomi gebruiken deze techniek bijvoorbeeld in een van de spreads van Must magazine.

Afbeeldingen moeten hetzelfde kleurenschema hebben. Tegenwoordig is er een breed scala aan verschillende filters en fotobewerkingstools waarmee u ervoor kunt zorgen dat de geselecteerde afbeeldingen tot hetzelfde kleurenschema behoren en dus met elkaar verbonden zijn. A is a Name maakte zijn poster volledig zwart-wit om een ​​kleurverbinding tussen de objecten te creëren.

A is een naam

Kies vergelijkbare foto's. Probeer afbeeldingen met vergelijkbare parameters en stijl te combineren. Als een van de foto's bijvoorbeeld in een minimalistische stijl is gemaakt, moet u vergelijkbare foto's gebruiken. Hieronder vindt u een Feint-ontwerpoplossing, waarbij u in alle geselecteerde afbeeldingen bepaalde "onregelmatigheden" kunt zien: verschillende texturen, houtachtige motieven en koele tinten.

Bij het creëren van een goede lay-out hoort ook de juiste combinatie van tekst en afbeeldingen, waarbij deze elementen elkaar aanvullen. Elk lettertype in een andere omgeving heeft bepaalde connotaties en associaties. Een helder, cursief lettertype met veel wervelingen kan bijvoorbeeld worden geassocieerd met elegantie en verfijning. Probeer daarom een ​​lettertype te selecteren, afhankelijk van uw eigen doelen en intentie.

6. Verhoog (of verlaag) het contrast

Contrast is een ongelooflijk handig hulpmiddel, zowel om elementen van uw ontwerp te benadrukken als om ze te verbergen. Door het contrast te vergroten of een palet met hoog contrast te gebruiken, kunt u de aandacht op een bepaald onderwerp vestigen. Tegelijkertijd kunt u door het contrast te verminderen voor sommige elementen een transparant effect bereiken, waardoor ze minder opvallen.

Terwijl het vorige ontwerp een resonerende kleur gebruikte om de aandacht te trekken, dient het in het volgende voorbeeld om een ​​bepaald element te verbergen.

Sommige lettertypestijlen, afbeeldingen en lineariteit worden hier herhaald om elementen aan elkaar te binden en het gewenste effect te bereiken. Als de auteur van het ontwerp plotseling zou besluiten om enkele roze tekenelementen te gebruiken met ergens in het midden dikke lijnen, zou er van enige samenhang geen sprake zijn. Maar ze besloot een kleine tekstgrootte te gebruiken, het kleurenschema te minimaliseren en de grafische elementen elegant eenvoudig te houden, zodat het ontwerp goed uitkwam.

Wanneer u een ontwerp ontwikkelt, noteert u alle informatie over de gebruikte lettertypen, lijnen, kleuren, enz. en probeert u deze opnieuw te gebruiken om uw lay-out tot een samenhangend geheel te verenigen.

8. Vergeet witruimte niet

Om de witte ruimte te beledigen, volstaat het om het ‘lege ruimte’ te noemen. De leegte gaat ervan uit dat hij ergens mee gevuld moet worden, en daarom “doet hij zijn werk” niet goed. Maar het is niet hetzelfde.

Wanneer witruimte doelbewust wordt gebruikt, helpt dit de definitie en helderheid van uw ontwerp te verbeteren: wanneer de drukkere, ingewikkeldere delen van een compositie in evenwicht worden gebracht door witruimte, begint uw ontwerp te ademen.

Kijk bijvoorbeeld eens naar het ontwerp van Cocorrina. Witruimte helpt om een ​​balans te bereiken tussen beeld, textuur en tekst, waardoor het ontwerp een verfijnde en strakke uitstraling krijgt.

Dus wat is de beste manier om witruimte te gebruiken?

Verklein de schaal van grafische elementen. Hierdoor kunt u meer witte ruimte rond uw centerpieces creëren zonder overboord te gaan met uw originele ontwerp. Kijk voor de duidelijkheid eens naar dit receptkaartontwerp van Serafini Creative, waarbij de belangrijkste elementen doelbewust zijn verkleind om een ​​prachtig kader van witte ruimte te creëren.

Probeer niet alle witte ruimte op te vullen. Zoals gezegd is witte ruimte geen lege ruimte; het dient een doel, dus probeer niet alles op te vullen.

Een voorbeeld is het websiteontwerp van Creative Web Themes, dat gebruik maakt van een enkele afbeelding, een vetgedrukte kop, twee kleine regels tekst en een link naar meer informatie om een ​​product te presenteren. Met zo’n eenvoudig plan en veel witte ruimte heeft elk element zijn eigen territorium en mag het ademen, waardoor het ontwerp er netjes uitziet en het gewenste effect op de kijker heeft.

Vraag jezelf bij het maken van een ontwerp altijd af of alle elementen 100% noodzakelijk zijn. Is al die tekst nodig, is een felblauwe kop nodig, zijn alle 3 de afbeeldingen nodig? Door extra stukjes uit uw lay-out te verwijderen, kunt u een nauwkeuriger ontwerp creëren dat profiteert van witruimte.

9. Schik ontwerpelementen

Wanneer u een compositie maakt die veel objecten bevat, moet u ze niet chaotisch op de pagina plaatsen, omdat het rangschikken van elementen een snelle en gemakkelijke manier is om van uw ontwerp een eye-candy te maken.

Kunt u objecten niet ordenen? Canva helpt je binnen een seconde van dit probleem af te komen met behulp van een speciale automatische en zeer handige tool. Sleep eenvoudig een element over de pagina en Canva lijnt het uit met andere ontwerpobjecten en plaatst het automatisch op de juiste plaats. Magie!

Bekijk dit perfect gevoerde ontwerp uit een tijdschrift gemaakt door Huck. Dankzij de duidelijke constructie van elementen ziet het ontwerp er onderscheidend en nauwkeurig uit, is het zeer gemakkelijk leesbaar en esthetisch aantrekkelijk.

Een consistente en duidelijke uitlijning van elementen zal je ook helpen een bepaalde volgorde tussen veel objecten te creëren. Dus als je veel afbeeldingen, tekst en/of grafische elementen gebruikt, zou uitlijning je beste vriend moeten zijn.

De mogelijkheid om uitlijning te gebruiken is vooral belangrijk bij het werken met tekst. Er zijn veel manieren om dit te doen, maar een van de beste is links uitlijnen, omdat deze optie voor de meeste kijkers het handigst is voor lezen en begrijpen.

10. Verdeel het ontwerp in drieën

De Rule of Thirds is een eenvoudige methode die ontwerpers kunnen gebruiken om een ​​lay-out in 9 gelijke delen te verdelen. Waar de verticale en horizontale lijnen elkaar kruisen, zijn de focuspunten.

Ontwerper William Beachy besloot in zijn werken met deze regel te spelen (voorbeeld hieronder). Het ontwerp ziet er indrukwekkend uit en trekt de aandacht doordat er op elk kruispunt een specifiek brandpunt is. Beachy merkt ook op: “Als je objecten niet in het midden van het ontwerp plaatst, maar aan de rand ervan, wordt het beeld levendig en interessant.”

Het gebruik van de regel van derden zal de compositie van uw ontwerp helpen verbeteren, omdat dit een van de snelste en gemakkelijkste manieren is om elementen te plaatsen en te structureren.

Als je de regel van derden wilt gebruiken in je ontwerp, is het raadzaam om met een raster te beginnen. Met het raster kunt u elementen consistenter rangschikken en zien waar de aandachtspunten zich in de lay-out moeten bevinden. Je kunt een tutorial bekijken waarin je leert hoe je de markeringstool van Canva kunt gebruiken om je ontwerp te helpen structureren en organiseren.

Als je, nadat je urenlang aan een ontwerp hebt gewerkt, het eindelijk effectief vindt, probeer het dan mentaal in delen op te splitsen en de onderliggende structuur te zien. Is er een verdeling in drieën? Of is het gebouwd op een andere markup? Hoe dan ook, u kunt verschillende opmaakvoorbeelden bekijken en er inspiratie uit halen.

Adres aan de lezer

Bij het maken van een compositie moet je op veel dingen letten. Als je een nieuwe ontwerper bent, zul je waarschijnlijk veel moeite en tijd moeten steken in het ordenen en herschalen van objecten, en ze vervolgens opnieuw labelen, enz., maar dat is oké.

Heb jij trucjes om met compositie te werken? Of kent u misschien enkele voorbeelden van ontwerpen met een zeer effectieve compositie? Hoe dan ook, deel gerust uw mening en ideeën hierover in de reacties!

Elk afzonderlijk element van elke compositie, inclusief een webpagina, heeft een zekere mate van visuele aantrekkingskracht. Hoe hoger deze graad, hoe meer aandacht het element trekt. De invloed van deze krachten kan zich ook verspreiden naar aangrenzende elementen, waardoor de beweging van de blik van de gebruiker over de pagina vooraf wordt bepaald.

Dit fenomeen wordt gewoonlijk ‘visueel gewicht’ genoemd, en de richting die deze kracht uitzet is ‘visuele richting’. Het begrijpen van deze concepten is erg belangrijk als u wilt dat het ontwerp van uw landingspagina hiërarchie, flow, ritme, balans en uiteindelijk conversie omvat.

Visueel gewicht

Eerder schreven we over de basiskenmerken van webpagina-elementen, zoals grootte, kleur en vorm, en hoe ze kunnen worden gebruikt om de gelijkenis (overeenkomst) of het verschil (contrast) van elementen weer te geven.

Je kunt bijvoorbeeld contrast creëren door het ene element groot en het andere heel klein te maken. Deze techniek zal perfect de ongelijkheid van elementen en hun belang voor de bezoeker demonstreren.

Door de combinatie van deze parameters te wijzigen, verandert u het visuele gewicht. Rood heeft de neiging meer aandacht te trekken dan blauw, en grote elementen vallen meer op dan kleine. Een groot rood object heeft dus aanzienlijk meer visueel gewicht dan een blauw miniatuurobject.

De combinatie van al deze basiseigenschappen bepaalt het visuele gewicht van een object. En het komt neer op combinatie: sommige combinaties zullen meer de aandacht trekken dan andere. Om elementen met verschillende visuele gewichten te creëren, zijn verschillende combinaties van basiskenmerken vereist.

Hoe visueel gewicht meten?

Er bestaat eenvoudigweg geen nauwkeurige manier om het visuele gewicht van een grafisch element te meten. Gezond verstand en ervaring vertellen ons echter dat die delen van de compositie die de aandacht trekken duidelijk een groter visueel gewicht hebben dan de delen waar we secundair of zelfs op de derde plaats naar kijken. Wees niet bang om op je ogen en gevoelens te vertrouwen.

Dit is echter niet de enige manier. Als je enkele kenmerken benadrukt en de standaardregels en uitspraken hierover onthoudt, wordt het werken aan het ontwerp veel gemakkelijker en sneller. Hieronder staan ​​enkele parameters van 2D-objecten die al zijn onderzocht, met een beschrijving van hoe het veranderen ervan leidt tot een toename of afname van het visuele gewicht.

Allereerst is het de moeite waard om de eerder genoemde basiskenmerken te overwegen: grootte, kleur, schaduw, textuur, oriëntatie in de ruimte, enz.

Maat
Grote elementen hebben meer visueel gewicht dan kleine.

Kleur
Warme tinten lijken doorgaans ‘zwaarder’ dan koele tinten, die visueel naar de achtergrond vervagen. Tegelijkertijd wordt rood beschouwd als de “zwaarste” kleur en geel als de “lichtste” kleur.

Tint
Donkere elementen hebben meer visueel gewicht dan lichte.

Positie
Elementen bovenaan de compositie lijken “zwaarder” dan die onderaan. Objecten op de voorgrond hebben meer "gewicht" dan elementen op de achtergrond.

Textuur
Objecten met textuur lijken “zwaarder” dan gladde objecten. Textuur creëert de illusie van driedimensionaliteit van een object, alsof het er massa en fysiek gewicht aan geeft.

Formulier
Objecten met een regelmatige vorm lijken ‘zwaarder’ dan elementen met een onregelmatige vorm, omdat deze laatste onbewust als correct worden waargenomen, maar een deel van hun massa missen.

Oriëntatie
Verticale objecten lijken ‘zwaarder’ dan objecten die zich horizontaal bevinden. Diagonaal geplaatste elementen hebben het grootste "gewicht".

Het is echter niet nodig om u te beperken tot de hierboven gepresenteerde basiseigenschappen. Er zijn een aantal aanvullende kenmerken waarmee u het visuele gewicht kunt beheersen.

Dikte
De opstelling van veel elementen in een bepaalde ruimte geeft die ruimte meer "gewicht". De gebruiker zal meerdere kleine, ‘lichte’ elementen waarnemen als één ‘zwaar’ element.

Witte gebieden
Lege ruimte heeft geen visueel gewicht, dus elk object dat in die ruimte wordt geplaatst, zal tegen de achtergrond ‘zwaarder’ lijken.

Semantische inhoud
Sommige dingen zijn gewoon interessanter dan andere. Complexe, ingewikkeld gevormde objecten trekken doorgaans meer aandacht. Ook de persoonlijke interesses van de gebruiker spelen een grote rol: als je een autoliefhebber bent, ben je eerder geïnteresseerd in een foto van een auto en dan in een afbeelding van een vliegtuig.

Diepte
Het krachtige effect van de scherptediepte bij het scherpstellen op een onderwerp, waarschijnlijk als gevolg van het contrast tussen het onderwerp en de achtergrond, geeft het element meer visueel gewicht.

Verzadiging
Verzadigde kleuren lijken “zwaarder”.

Vertegenwoordigd fysiek gewicht
We weten allemaal dat een huis zwaarder is dan een schoen: het beeld van het eerste zal meer ‘gewicht’ hebben omdat het overeenkomt met onze ideeën over de eigenschappen van het echte object.

In een eerder bericht over contrast en gelijkenis hadden we het over hoe contrast de aandacht trekt. Met andere woorden, als een element heel anders is dan de objecten eromheen, zal het “zwaarder” lijken tegen de achtergrond. Op webpagina's wordt een cirkel bijvoorbeeld vaak als 'zwaarder' ervaren dan een rechthoek, omdat webpagina-elementen overwegend rechthoekig van vorm zijn.

Visueel gewicht en perceptuele integriteit

Deze lijst is bedoeld om te laten zien hoe nauw de ideeën van de Gestaltpsychologie over de integriteit van de menselijke perceptie verbonden zijn met de principes van webdesign.

Figuur-grond
Visueel gewicht kan worden gebruikt om een ​​figuur van de achtergrond te scheiden, waardoor de figuur meer gewicht krijgt dan de achtergrond.

Overeenkomsten en verschillen
Door het visuele gewicht te beheren, kunt u beide bereiken: verschillen in het visuele gewicht van objecten zorgen voor contrast, en objecten met een vergelijkbaar gewicht zullen er visueel hetzelfde uitzien.

Focus
Objecten die scherp in beeld zijn, hebben meer ‘gewicht’ dan de rest van de compositie.

Ervaring uit het verleden
De ervaring van de waarnemer zal ook de sterkte van zijn interesse in bepaalde objecten beïnvloeden.

Visuele richting

Terwijl het visuele gewicht het oog naar een specifiek gebied trekt, vertelt de visuele richting het oog van de waarnemer waar het vervolgens heen moet.

Het heeft dezelfde functie als visueel gewicht en vestigt uw aandacht op bepaalde elementen van de compositie. Terwijl het "gewicht" de gebruiker vertelt: "Kijk me aan!", beveelt de visuele richting: "Kijk daar!"

Net als in het geval van 'gewicht' kun je de visuele richting veranderen door de parameters van de elementen te veranderen, waarvan de kenmerken hier helaas een orde van grootte kleiner zijn.

Elementvorm
De vorm van een element kan een as definiëren die de richting van het element bepaalt. De hoofdas van een object is meestal evenwijdig aan de visuele richting.

Elementpositie
Visueel gewicht creëert de illusie van aantrekking of afwijzing van nabijgelegen objecten. De aantrekkingskracht tussen twee objecten kan de visuele richting bepalen.

Semantische inhoud van het element
Afbeeldingen van een pijl, een wijsvinger, een blik gericht op een bepaald punt - al deze elementen richten de blik van de waarnemer aanvankelijk in een bepaalde richting.

Beweging
In het geval van dynamische pagina's kan een element letterlijk over het scherm bewegen en zo de blik van de gebruiker controleren.

Elke compositie heeft zijn eigen structurele basis, waarlangs langs de verschillende assen krachten bewegen die de aandacht van de waarnemer controleren.

Laten we dit kenmerk wat gedetailleerder bekijken.

In zijn boek Art and Visual Perception: A Psychology of the Creative Eye verwoordde Rudolf Arnheim het idee dat elke compositie zijn eigen structurele basis heeft, zodat zelfs als het canvas leeg is, onze blik onder invloed staat van een complex van krachten, zoals zoals weergegeven in de onderstaande afbeelding, zal zich aangetrokken voelen tot bepaalde delen ervan.

"Structureel netwerk" door Rudolf Arnheim

Het midden en de vier hoeken van het vierkante canvas zijn een soort magneten die de aandacht trekken. De krachtigste daarvan bevindt zich in het optische centrum, dat niet precies overeenkomt met het geometrische centrum van het canvas, maar iets hoger ligt.

De assen gaan van hoek naar hoek, en punten die op deze assen liggen en zich halverwege tussen het midden en de hoeken bevinden, trekken ook de aandacht. Deze lijnen kunnen horizontaal en verticaal worden gecombineerd en vormen zo extra assen van visuele aantrekkingskracht. Dit is een nogal complex onderwerp waar waarschijnlijk op teruggekomen moet worden, maar laten we voor nu, omwille van de eenvoud, afspreken dat bij een blanco doek het oog van de waarnemer altijd aangetrokken zal worden door bepaalde punten in het structuurplan van Arnhem en dat het oog van de waarnemer altijd aangetrokken zal worden door bepaalde punten in het structuurplan van Arnhem. zal van punt naar punt bewegen, langs de assen.

U kunt nu het structurele netwerk gebruiken en proberen elementen op uw landingspagina te plaatsen op die plaatsen waar ze op natuurlijke wijze de aandacht van gebruikers trekken.

Visuele richting en perceptuele integriteit

Visuele richting kan worden gezien als echte of denkbeeldige lijnen die de richting van het ene element naar het andere aangeven of elementen met elkaar verbinden. Deze lijnen hoeven niet zichtbaar te zijn.

Uniforme connectiviteit
De lijnen die elementen verbinden, hebben een richting. De blik creëert een denkbeeldige lijn tussen het oog van de waarnemer en het object van observatie.

Continuïteit
Dit principe heeft betrekking op elementen die zich langs een lijn of curve bevinden waarlangs deze elementen lijken te bewegen.

Enkel doel
Elementen die in dezelfde richting bewegen, worden gezien als één enkel doel.

Parallellisme
Om elementen als parallel te kunnen begrijpen, moeten ze zijn voorzien van interne assen (degenen die richting geven).

Algemene compositieoriëntatie

Een ander idee van visuele richting is dat binnen elke compositie de ene of de andere richting (horizontaal, verticaal of diagonaal) de boventoon voert.

• De overheersende horizontale richting geeft de compositie een gevoel van rust en stabiliteit.
• De overheersende verticale richting geeft een gevoel van formaliteit, intense aandacht en evenwicht.
• De overheersende diagonale richting creëert een gevoel van beweging en actie.

De overheersende richting van een compositie wordt bepaald door de richting van de meeste of meerdere van de belangrijkste elementen ervan. Door de richting van de compositie te veranderen, kun je er een bepaalde sfeer aan geven.

De compositie mag ook geen overheersende richting hebben, bijvoorbeeld als het aantal horizontaal en verticaal geplaatste elementen hetzelfde is. In dit geval wordt de visuele richting bepaald door de subjectiviteit van de individuele waarnemer.

Voorbeelden

Laten we als voorbeeld een aantal echte webpagina’s nemen en de verdeling van het “gewicht” daarop analyseren.

De hieronder weergegeven resultaten komen mogelijk niet overeen met uw subjectieve beoordeling, en dit is volkomen normaal. Het is onmogelijk om het visuele gewicht van een bepaald element van een compositie objectief te meten, omdat verschillende mensen zich tot verschillende dingen aangetrokken voelen en het aandeel subjectiviteit altijd een belangrijke rol zal spelen.

De zogenaamde scheeltest zal worden gebruikt als het belangrijkste beoordelingsinstrument - hiervoor moet je je ogen samenknijpen zodat sommige elementen van de compositie uit de aandachtszone verdwijnen. Degenen die overblijven, kunnen de meest "zware" worden genoemd.

Tekst in focus

Opmerking. Als u onderstaande site opent op een scherm met een resolutie van minder dan 1280 pixels breed, worden de twee kolommen in de schermafbeelding één.

Artikelpagina op de website bureau.tsailly.net

Deze pagina van de bureaublog, gewijd aan het onderwerp interfaces maken, bestaat bijna volledig uit tekst. De hoofdkop heeft het grootste “gewicht”: grote tekst voldoende omgeven door lege ruimte. Misschien is dit het belangrijkste stukje informatie dat de gebruiker zou moeten zien als hij op de pagina komt, dus een dergelijke compositorische zet is hier gerechtvaardigd.

Het element met het minste visuele gewicht is de tekst in de rechterkolom. En dit is terecht: de hoofdtekst van het artikel zou per definitie meer aandacht moeten trekken dan wat dan ook in de zijbalk.

Let op de kleine rode tekst bovenaan de rechterkolom - dit is een link naar de startpagina. Ondanks het kleine formaat van de tekst geeft de rode kleur hem wat gewicht en onderscheidt hij zich van de rest van de zijbalktekst. Het is ook vermeldenswaard dat de schermafbeelding is verkleind ten opzichte van de daadwerkelijke pagina, dus de rode tekst is eigenlijk niet zo klein als we hem momenteel zien.

Als je de scheeltest gebruikt, verdwijnt de hele rechterkolom, waardoor je alleen de titel en tekst van het artikel overhoudt.

De hoofdrichting van de compositie is hier verticaal: twee lange kolommen lopen langs de pagina. Door de kruising tussen de achtergronden van deze twee kolommen ontstaat een verticale lijn, wat het effect alleen maar versterkt.

Heldere startpagina

Bij het laden van de startpagina Create Digital Media nemen kleurrijke elementen dynamisch hun plaats in, waardoor maximale aandacht wordt getrokken. Zelfs als je de animatie overslaat, zullen de elementen waarschijnlijk nog steeds het zwaarst zijn in de compositie vanwege de rijke roze, gele en blauwe tinten. Daarnaast worden de elementen ook bij elkaar verzameld, waardoor er midden in de lege ruimte een rijk gebied ontstaat.

Opmerking. Tegen de tijd dat dit materiaal werd gepubliceerd, was Create Digital Media gestopt met haar activiteiten.

Creëer de homepage van een digitaal mediabedrijf

Vervolgens zul je waarschijnlijk de afbeeldingen onderaan de pagina opmerken. Het zijn donkere, grote, complexe vormen die de aandacht vestigen op drie delen waarin de titel minder gewicht heeft dan de afbeeldingen.

De hoofdkop is gemaakt in een groot, donker lettertype en steekt perfect af tegen de achtergrond van de rest van de tekst. Andere pagina-elementen die “gewicht” hebben, zijn de bedrijfsnaam in de koptekst en het logo in de voettekst.

Als je je ogen samenknijpt, blijven de gekleurde tandwielen, tekst en afbeeldingen onderaan de pagina staan, zelfs als de meeste elementen niet langer zichtbaar zijn.

De oriëntatie van de scheidingslijnen, navigatie- en kopmenu's en gemarkeerde tekst zorgen ervoor dat horizontaal in dit geval de overheersende richting is.

Je zou de drie tandwielen in het midden van de pagina kunnen beschouwen als één conventioneel driehoekig object, waardoor de compositie een diagonale richting krijgt. Dit zouden echter de enige diagonalen op de pagina zijn, die niet opwegen tegen de vele horizontale hulplijnen.

Op de landingspagina voor de bruiloft van webontwerpers Javier en Marta strijden drie elementen om 'gewicht': afbeeldingen, groene scheidingslijnen en menu-elementen - ze vereisen allemaal primaire aandacht.

Javier en Marta's website

Grafische kunst
Grote, donkergekleurde afbeeldingen omgeven door lege ruimte. Elk beeld is betekenisvol en wekt interesse.

Groene verdelers
Ze hebben een uitgesproken kleur, zijn vrij groot en zijn, net als grafische afbeeldingen, omgeven door lege ruimte.

Menu items
Donker, groot en ook omgeven door lege ruimte.

Het logo lijkt op het eerste gezicht “zwaarder” dan de hoofdtekst, maar is in werkelijkheid “lichter” dan de menu-elementen, hoewel nog steeds behoorlijk opvallend. Hier moet je de subjectiviteit van perceptie niet vergeten - je denkt misschien anders.

Als je een scheeltest doet en opnieuw tuurt, worden de menu-items en het logo samengevoegd tot één object. Afbeeldingen en scheidingslijnen blijven zichtbaar en tekst verschijnt in grote blokken. Dat wil zeggen dat alle elementen zichtbaar blijven, zelfs als u de tekst niet kunt onderscheiden.

Wat de oriëntatie betreft, wanneer alleen het bovenste gedeelte zichtbaar is op het scherm - El evento - geeft de scheidingslijn de pagina een horizontaal uiterlijk. Er zijn echter in totaal 4 secties, en als je naar de hele pagina kijkt, geven deze horizontale lijnen, al in een kolom opgesteld, de compositie een verticale richting.

We kunnen er overigens van uitgaan dat het beter zou zijn om de twee afbeeldingen die we aan de randen van de tekst in de schermafbeelding zien, om te wisselen. De eerste afbeelding toont de camera die naar rechts kijkt; de blik van de gebruiker zal waarschijnlijk in die richting gaan. De paraplu van het meisje op de tweede foto wijst ook naar rechts, maar het meisje zelf gaat naar links, en dat is waar onze blik waarschijnlijk zal volgen. Beide beelden leiden de blik weg van de tekst terwijl ze die daarheen zouden kunnen leiden.

Kunst op Stanford

Op de Stanford Arts-website, die gewijd is aan de kunstactiviteiten van Stanford University, weegt de afbeelding bovenaan de pagina het zwaarst. Behalve dat het het grootste element is, is de inhoud ervan van bijzonder belang. Bovendien neemt deze, vanwege de locatie, bij het openen van een pagina in een browser bijna het hele scherm in beslag.

Opmerking. De afbeelding bovenaan de site is eigenlijk een dynamisch element, waarbij meerdere afbeeldingen elkaar periodiek vervangen. Als u de site dus zelf bekijkt, ziet u waarschijnlijk een ander beeld, wat kan leiden tot een andere beoordeling van het ontwerp en het visuele gewicht.

Het volgende belangrijkste element zijn driehoekige afbeeldingen tegen een achtergrond van rechthoekige objecten. Volg vervolgens de kop- en voettekst: grote blokken met donkerrode kleur.

Als je een scheeltest doet, blijven alle elementen langer zichtbaar dan je zou verwachten. Dit komt door de aanwezigheid van een groot contrast van lichte en donkere tonen in elk van de elementen.

Wat uiteindelijk zichtbaar blijft is het enigszins vervaagde bovenste beeld en de al volledig vervaagde driehoeken daaronder.

Het ontwerp van deze pagina is ook interessant vanwege de visuele oriëntatie: diagonale lijnen hier, ook in de bovenste afbeelding, domineren en bepalen de richting van de hele compositie, en aangezien deze situatie niet typisch is voor de meeste webpagina's, is deze in strijd met met de verwachtingen van de gebruiker, want waarom horizontale lijnen nog meer aandacht trekken.

Het is interessant dat zowel de vrouw in de rechthoekige driehoek als de camera in de middelste naar rechts kijken, terwijl het beter zou zijn om de eerste foto horizontaal om te draaien, zodat de blik van het meisje naar het midden van de pagina is gericht, en om dezelfde redenen is het beter om het camerabeeld naar het linkerblok te verplaatsen.

Het is ook vermeldenswaard dat de afbeeldingen in de driehoeken veranderen wanneer u over verschillende links in de blokken beweegt. Toch zijn de meeste om de een of andere reden naar buiten gericht, in plaats van dat de blik van de gebruiker weer op de tekst wordt gericht.

Conclusie

Visueel gewicht is de kracht waarmee een element de aandacht van de waarnemer trekt. Visuele richting is de richting van de krachten die op de elementen inwerken, of de invloedskrachten die door de elementen zelf worden uitgeoefend. Ze geven aan het oog van de gebruiker aan waar de volgende stap moet zijn.

Veel interne kenmerken van objecten kunnen worden gewijzigd, waardoor de elementen ‘zwaarder’ of ‘lichter’ worden. Met sommige kenmerken kunt u ook de visuele richting van elementen en de gehele compositie wijzigen.

Nu weet u hoe gemakkelijk het is om de aandacht van de gebruiker te controleren en zijn blik langs uw landingspagina te bewegen in een richting die voor u gunstig is.