Bruke måten mennesker behandler visuell informasjon i webdesign

Designe nettsteder og brukergrensesnitt har blitt enklere de siste årene. Det er så mange verktøy der ute som du kan bruke som gjør det meningsløst å starte fra bunnen av når du utvikler brukergrensesnitt (sjekk ut vår nye UI-kompilering). Men jeg er ikke her for å argumentere for død av webdesign.

I stedet vil jeg forsøke å forklare de grunnleggende psykologibaserte begrepene bak mengden av visuelle designverktøy (fra de mest grunnleggende CSS-kittene til de mest avanserte premie-temaene). Du skal ikke bare bruke dem, men også forstå dem. Jeg er sikker på at dette også vil gjøre det lettere å endre eksisterende med suksess også.

La oss se på hvordan menneskets sinn og kropp fungerer når det gjelder å behandle visuell informasjon og hvordan denne kunnskapen tolkes i å designe for nettet.

Prinsippene for perceptuell organisasjon

Ifølge Gestaltpsykologi, Hele er annerledes enn summen av delene. Følgere av denne tankegangen hevder at det er noen prinsipper om hvordan menneskesykdomsgruppene gjenstander. Dette er ikke bare teorier, tenk deg, men egentlige praktiske fakta om å organisere visuelle grupper.

Nedenfor finner du noen av lovene og de mer populære og velkjente bruken av disse prinsippene. Du kan kanskje til og med finne noen nye ideer for ditt neste design.

Loven om likhet

Det første prinsippet sier at små objekter som ligner oppfattes som en gruppe, snarere enn flere forekomster av samme små gjenstand. Likhet kan være basert på form, farge, skygge eller annen kvalitet. Dette prinsippet er grunnlaget for mønster design så vel som mange geometriske og minimalistiske logo design.

For eksempel viser dette bildet som en sirkulær logo i stedet for separate trekanter. Den trekantede formen på bunnen av ørnen får oss til å tro at formen også er en del av bildet.

Du har sikkert også brukt denne loven uvitende når du lager noen, samme innholdsrammer med samme størrelse for ditt nettsted. Hvis du ønsker å vise at visse innholdsdeler har samme betydning eller deler lignende opplysninger, Lag en bestemt form bare for det formålet. På denne måten vil brukeren umiddelbart knytte den aktuelle formen til et bestemt område med informasjon.

Næringsloven

I følge denne loven objekter som er nærmere til hverandre er anses å være av samme gruppe. De samme rutene, når de gjengis ved siden av hverandre i nær, vanlig nærhet, skaper en følelse av gruppering.

Dette prinsippet har blitt brukt i stor grad på nettet i det siste, spesielt når du jobber med innholdsløyfer, f.eks på blogger og nettbutikker.

Du kan umiddelbart gruppere tittelen, det kjennetegnede bildet, metadataene og utdraget sammen, selv uten grenser eller bakgrunner. Du kan kanskje rense unødvendige linjer og farger av ditt design for å gjøre det mer minimalistisk, men likevel helt forståelig.

For enkelhets skyld, vil jeg sitere Wikipedia også som sier:

Lov om god form

Også kjent som Law of Pragnanz eller Good Gestalt, sier denne loven at vi pleier å gruppere objekter sammen hvis de danner et mønster som er enkelt, regelmessig og ordentlig. Vårt sinn forsøker å skille komplekse og perceptuelt vanskelige former inn i mange grupper av enkelt forståelige former; Dette førte til betydning av konsistens.

Dette er også en av de mulige årsakene bak suksessen til nettbasert design og dette laget bord- og ramme-basert (heldigvis ting i mørke aldre av design) web strukturer så populære.

Hvis du holder dette prinsippet i tankene, vil du sannsynligvis ikke ende opp med å skape et nettsted fylt med komplekse former for innholdsblokker som ville bli koblet i bakhodet via de andre lovene ovenfor. Likevel kan du gruppér dine objekter sammen på en interessant måte, f.eks i en diamant- eller kiteform, siden de fremdeles oppfattes som ordnede og konsise former.

Fargeteori, oppfatning og bruk

Fargesyn og oppfatning av farge er stort sett subjektiv basert på hvordan seernes hjerner reagerer til lysbølgene reflektert av fargerike objekter eller former. Regelen er at forskjellige mennesker, selv uten noen synshemming, ser det samme objektet i forskjellig farge (du kan kanskje huske kjolen).

Fargeegenskaper

Likevel er det tre objektive egenskaper av farge; hue, verdi og intensitet.

Hue er navnet på fargen som merket på et fargeskjul eller i en regnbue. Det er seks (eller tolv, avhengig av hvem du snakker med) grunnleggende nyanser: rød, oransje, gul, grønn, blå og fiolett.

Gul, blå og rød er hoved~~POS=TRUNC, oransje, grønn og fiolett er sekundær fargetoner; også, det er tertiære fargetoner som er de direkte blandingene av to primære og sekundære nyanser (for eksempel gulgrønn eller rødviolett).

Verdi er lysheten eller mørket i fargen, referert til som Høy verdi for lyse farger eller lavverdig for mørke farger.

Intensitet refererer til lysstyrke eller dimensjon av en farge; dette betyr at en farge med samme fargetone og samme verdi fortsatt kan bli dimmet eller forsterket ved å endre intensiteten og skape forskjellige fargeutganger.

Den høyeste intensiteten av hver farge er fargen som de viser på fargeskiven (se under), mens den laveste er fargen grå.

Farge kontraster

Med henvisning til de ovenfor nevnte lovene om likhet, skaper perceivers hjerner grupper av små gjenstander de ser på grunnlag av liknende og forskjellige egenskaper - ofte farger.

Når du valgte fargepaletten for nettstedet ditt, spesielt hvis du går for en minimalistisk tilnærming, eller hvis du designer et tekst-tungt innholdsområde, f.eks. blogger eller annonser, bør du Vær oppmerksom på forskjellige fargekontrakter som kan hjelpe deg med å finne de riktige fargeverdiene for det beste resultatet.

Det er 7 fargekontrakter ifølge Johannes Itten, selv om jeg bare nevner 3.

1. Kontrast av fargetone

Gul, rød og blå med full intensitet er direkte og levende kontraster. Sekundære nyanser gir mindre skarp skilling, men jobber fortsatt, akkurat som tertiære nyanser gjør, selv om ingen produserer som fantastiske resultater som med primære nyanser.

2. Komplementær kontrast

To farger er i komplementær kontrast, dersom de blandes sammen, skaper de en nøytral grå. Disse kalles også rare par. Hvis de er tilstøtende, forbedrer de livlighet og intensitet, mens de blandes sammen, kansellerer de hverandre ut. Hver farge har en og en eneste komplementær; På fargehjulet er parene diagonalt motsatt til hverandre.

3. Lysmørk kontrast

Hvis du vil eksperimentere med et enkeltfarges nettsted, bruker forskjellige verdier av samme fargetone kan gi fantastiske resultater. Brukes ofte i minimalistisk webdesign, kan du også produsere gode resultater basert på lysmørk kontrast hvis du vil gi temafargevalg til brukeren. Denne kontrasten brukes også til gråskala-design.

Hvis du vil forfølge de gjenværende 4 fargekontrasten, kan du finne dem her.

Oppretter paletter og kontrollerer kontraster

Å vite teorien er flott, å tolke dine ideer er en annen ting helt. Du bør ikke bekymre deg selv, Internett gir god støtte til dine farger-jonglering behov. Det finnes en mengde verktøy som hjelper deg med å lage egendefinerte fargemønstre basert på fargekontrastregler, f.eks. Paletton eller Adobe Kuler.

For webformål, vil du kanskje sjekke kontraster som du valgte å bruke på webAIM, på Jonathan Snooks nettsted eller laste ned en forekomst av Color Contrast Analyzer av Paciello-gruppen her.

Konklusjon

Når du begynner å jobbe med et nytt tema eller begynne å endre eksisterende, kan du prøve å tenke på prinsippene om oppfatning for å organisere innholdet ditt og husk å vurdere fargereglene når du gir designet ditt endelige form og fargetone.

Redaktørens notat: Denne gjesteposten er skrevet for Hongkiat.com av Marton Fekete. Marton er en ungarsk nettsted utvikler nylig hekta på WordPress. Han er en redesign entusiast og freelance innholdskritiker som liker å spille RPG på fritiden.