The Way Humans gebruiken Visuele informatie verwerken in Web Design

Het ontwerpen van websites en gebruikersinterfaces is de afgelopen jaren veel eenvoudiger geworden. Er zijn zoveel tools beschikbaar die je kunt gebruiken dat het zinloos is om helemaal opnieuw te beginnen bij het ontwikkelen van gebruikersinterfaces (bekijk onze nieuwe gebruikersinterfacecompilatie). Maar ik ben niet hier om te discussiëren over de dood van webdesign.

In plaats daarvan probeer ik de basale, op psychologie gebaseerde concepten achter de overvloed aan visuele ontwerphulpmiddelen (van de meest elementaire CSS-kits tot de meest geavanceerde premiumthema's) uit te leggen.. Je gaat ze niet alleen gebruiken, maar ook begrijpen. Ik ben ervan overtuigd dat dit het ook gemakkelijker zal maken om bestaande met succes te wijzigen.

Laten we eens kijken hoe de menselijke geest en lichaam werken als het gaat om de verwerking van visuele informatie en hoe deze kennis wordt geïnterpreteerd in ontwerpen voor het web.

De principes van perceptuele organisatie

Volgens Gestalt psychologie, het geheel is anders dan de som der delen. Aanhangers van deze school van denken beweren dat er een paar principes zijn over hoe de menselijke geest objecten groepeert. Dit zijn niet alleen theorieën, maar feitelijk praktische feiten over het organiseren van visuele groepen.

Hieronder vindt u enkele van de wetten en de meer populaire en bekende toepassingen van deze principes. Misschien vindt u zelfs enkele nieuwe ideeën voor uw volgende ontwerp.

Wet van gelijksoortigheid

Het eerste principe stelt dat kleine objecten die vergelijkbaar zijn, worden als een groep beschouwd, in plaats van meerdere exemplaren van datzelfde kleine object. De overeenkomst kan gebaseerd zijn op vorm, kleur, schaduw of een andere kwaliteit. Dit principe is de basis van Patroonontwerp evenals vele geometrische en minimalistische logo-ontwerpen.

Deze afbeelding wordt bijvoorbeeld weergegeven als een rond logo in plaats van afzonderlijke driehoeken. De driehoekige vorm aan de onderkant van de adelaar doet ons denken dat de vorm ook deel uitmaakt van het beeld.

Je hebt deze wet waarschijnlijk ook onbewust gebruikt bij het maken van een paar, grote vakken met inhoud voor uw website. Als u wilt aantonen dat bepaalde inhoudselementen van hetzelfde belang zijn of soortgelijke informatie delen, maak speciaal voor dat doel een specifieke vorm. Op deze manier zal uw gebruiker die specifieke vorm onmiddellijk associëren met een bepaald informatiegebied.

Wet van nabijheid

Volgens deze wet objecten die dichterbij zijn voor elkaar zijn beschouwd als van dezelfde groep. Als de vierkanten naast elkaar in een dichte, regelmatige nabijheid worden weergegeven, ontstaat er een gevoel van groepering.

Dit principe is de laatste tijd voor een groot deel op het web gebruikt, vooral wanneer er mee gewerkt wordt inhoud loops, bijv. op blogs en webshops.

U kunt de titel, de afgebeelde afbeelding, de metagegevens en het fragment meteen samen groeperen, zelfs zonder randen of achtergronden. Je zou in staat kunnen zijn om onnodige lijnen en kleuren van je ontwerp te verwijderen om het minimalistischer te maken, maar nog steeds volledig te begrijpen.

Voor uw gemak zal ik ook Wikipedia citeren waarin staat:

Wet van Goede Vorm

Ook bekend als de Wet van Pragnanz of Goede Gestalt, deze wet stelt dat we de neiging hebben om objecten samen te groeperen als ze vorm een ​​patroon dat eenvoudig, regelmatig en ordentelijk is. Onze geest probeert complexe en perceptueel moeilijke vormen te scheiden in vele groepen van eenvoudig te begrijpen vormen; dit leidde tot de belang van beknoptheid.

Dit is ook een van de mogelijke redenen achter het succes van grid-gebaseerd ontwerp en dit maakte op tafel- en frame-gebaseerde (gelukkig dingen van de donkere leeftijden van ontwerp) webstructuren zo populair.

Als u dit principe in gedachten houdt, zult u waarschijnlijk niet eindigen met het maken van een website vol met complexe vormen van inhoudsblokken die in verband gebracht zouden kunnen worden via de andere wetten hierboven. Toch kan dat groepeer je objecten op een interessante manier samen, bijv. in een diamant- of vliegervorm, omdat die nog steeds worden gezien als ordelijke en beknopte vormen.

Kleurtheorie, perceptie en gebruik

Kleurvisie en waarneming van kleur is grotendeels subjectief gebaseerd op hoe de hersenen van de kijkers reageren om de lichtgolven weerkaatst door kleurrijke objecten of vormen. De regel is dat verschillende mensen, zelfs zonder visuele beperkingen, hetzelfde object in een andere kleur zien (misschien herinner je je de jurk).

Kleureigenschappen

Toch zijn er drie objectieve eigenschappen van kleur; tint, waarde en intensiteit.

Tint is de naam van de kleur zoals aangegeven op een kleurenwiel of in een regenboog. Er zijn zes (of twaalf, afhankelijk van met wie je praat) basistinten: rood, oranje, geel, groen, blauw en violet.

Geel, blauw en rood zijn primair, oranje, groen en violet zijn tweede tinten; ook, er zijn tertiair tinten die de directe mengsels zijn van twee primaire en secundaire tinten (bijvoorbeeld geelgroen of roodviolet).

Waarde is de lichtheid of duisternis van de kleur, aangeduid als hoge waarde voor lichte kleuren of lage waarde voor donkere kleuren.

Intensiteit verwijst naar de helderheid of schemer van een kleur; dit betekent dat een kleur met dezelfde tint en dezelfde waarde nog steeds kan worden gedimd of opgehelderd door de intensiteit te veranderen en verschillende kleuroutputs te creëren.

De hoogste intensiteit van elke kleur is de tint die ze op het kleurenwiel weergeven (zie hieronder), terwijl de laagste de kleur grijs is.

Kleurcontrasten

Verwijzend naar de voornoemde wetten van gelijkenis, creëren de geesten van de waarnemers groepen van kleine objecten die zij zien gebaseerd op soortgelijke en verschillende eigenschappen - vaak kleuren.

Wanneer u uw kleurenpalet voor uw website hebt gekozen, vooral als u kiest voor een minimalistische benadering of als u een tekstzwaard inhoudsgebied ontwerpt, bijvoorbeeld blogs of advertenties, zou u moeten let op verschillende kleurcontrasten dat kan u helpen de juiste kleurwaarden te vinden voor het beste resultaat.

Er zijn 7 kleurencontrasten volgens Johannes Itten, hoewel ik er slechts 3 zal noemen.

1. Contrast van tint

Geel, rood en blauw op volledige intensiteit zijn directe en levendige contrasten. Secundaire kleurnuances zorgen voor minder scherp onderscheid, maar werken nog steeds, net als tertiaire tinten, hoewel geen van beide produceren geweldige resultaten als met primaire tinten.

2. Complementair contrast

Twee kleuren hebben een complementair contrast als ze samen gemengd neutraal grijs vormen. Deze worden ook genoemd vreemde paren. Als ze aangrenzend zijn, verbeteren ze de levendigheid en intensiteit, terwijl ze samen worden gemengd en elkaar opheffen. Elke kleur heeft één en slechts één complementair; op het kleurenwiel staan ​​de paren diagonaal tegenover elkaar.

3. Licht-donker contrast

Als u wilt experimenteren met een website met één kleur, verschillende waarden van dezelfde tint gebruiken kan geweldige resultaten opleveren. Vaak gebruikt in minimalistisch webdesign, kunt u ook geweldige resultaten produceren op basis van licht-donker contrast als u thema-kleuropties voor uw gebruiker wilt bieden. Dit contrast wordt ook gebruikt voor ontwerp in grijstinten.

Als je de resterende 4 kleurcontrasten wilt nastreven, kun je ze hier vinden.

Paletten maken en controleren op contrasten

Het kennen van de theorie is geweldig, het interpreteren van je ideeën is helemaal een ander ding. U hoeft zich echter geen zorgen te maken, het internet biedt uitstekende ondersteuning voor uw behoeften aan jongleren. Er is een overvloed aan hulpmiddelen waarmee u aangepaste kleurpatronen kunt maken op basis van kleurcontrastregels, bijvoorbeeld Paletton of Adobe Kuler.

Voor webdoeleinden kunt u de contrasten controleren die u hebt gekozen om te gebruiken op webAIM, op ​​de website van Jonathan Snook of hier een exemplaar downloaden van de Color Contrast Analyzer van The Paciello Group.

Conclusie

Wanneer u begint te werken met een nieuw thema of begint met het aanpassen van bestaande thema's, probeer dan de principes van perceptie te bedenken om uw inhoud te ordenen en vergeet niet om de kleurregels te overwegen wanneer u uw ontwerp de uiteindelijke vorm en tint geeft.

Opmerking van de uitgever: Deze gast post is geschreven voor Hongkiat.com door Marton Fekete. Marton is een Hongaarse siteontwikkelaar die onlangs verslaafd was aan WordPress. Hij is een herontwerpliefhebber en freelance contentschrijver die graag in zijn vrije tijd RPG's speelt.