Brug af vejen Mennesker behandler visuel information i webdesign
Design af hjemmesider og brugergrænseflader er blevet lettere i de seneste år. Der er så mange værktøjer derude, som du kan bruge, der gør det ubemærket at starte fra bunden, når du udvikler brugergrænseflader (se vores friske brugergrænsefladeopsamling). Men jeg er ikke her for at argumentere for døden af webdesign.
I stedet vil jeg forsøge at forklare de grundlæggende psykologbaserede begreber bag overfladen af visuelle designværktøjer (fra de mest grundlæggende CSS-kits til de mest avancerede premium-temaer). Du skal ikke bare bruge dem, men også forstå dem. Jeg er overbevist om, at dette også vil gøre det lettere at ændre eksisterende med succes også.
Lad os se på hvordan menneskets sind og krop fungerer, når det kommer til at behandle visuel information, og hvordan denne viden fortolkes i at designe for nettet.
Principperne for Perceptuel Organisation
Ifølge Gestaltpsykologi, hele er anderledes end summen af dets dele. Følgere af denne tankegang hævder, at der er et par principper om, hvordan de menneskelige sindsgrupper objekter. Disse er ikke kun teorier, men det er faktisk praktiske fakta om at organisere visuelle grupper.
Nedenfor finder du nogle af lovene og de mere populære og velkendte anvendelser af disse principper. Du kan måske endda finde nogle nye ideer til dit næste design.
Lighed om lovlighed
Det første princip siger det små objekter, der ligner hinanden, opfattes som en gruppe, snarere end flere forekomster af den samme lille genstand. Lighed kan være baseret på form, farve, skygge eller anden kvalitet. Dette princip er grundlaget for mønster design såvel som mange geometriske og minimalistiske logo designs.
For eksempel viser dette billede som et cirkulært logo i stedet for separate trekanter. Den trekantede form nederst på ørnen får os til at tro, at formen også er en del af billedet.
Du har sikkert også brugt denne lov ubevidst, når du laver nogle få, samme størrelse indholds bokse til dit websted. Hvis du ønsker at vise, at visse indholdselementer har samme betydning eller deler lignende informationer, Skab en bestemt form kun til det formål. På denne måde vil din bruger straks forbinde den pågældende form med et bestemt informationsområde.
Lov om nærhed
Ifølge denne lov objekter der er tættere til hinanden er anses for at være af samme gruppe. De samme firkanter, når de gengives ved siden af hinanden i tæt, regelmæssig nærhed, skaber en følelse af gruppering.
Dette princip er i stor udstrækning blevet brugt på internettet, især når man arbejder med indholdssløjfer, f.eks. på blogs og webshops.
Du kan straks gruppere titlen, det fremhævede billede, metadataene og uddraget sammen selv uden grænser eller baggrunde. Du kan muligvis rense unødvendige linjer og farver ud for dit design for at gøre det mere minimalistisk, men alligevel helt forståeligt.
For din bekvemmelighed vil jeg også citere Wikipedia som siger:
Lov om god form
Også kendt som Law of Pragnanz eller Good Gestalt, hedder denne lov, at vi har en tendens til at gruppere genstande sammen, hvis de danne et mønster, der er enkelt, regelmæssigt og ordnet. Vores sind forsøger at adskille komplekse og perceptuelt vanskelige former i mange grupper af simpelthen forståelige former; dette førte til betydningen af sammenfattethed.
Dette er også en af de mulige årsager til succesen af netbaseret design og dette gjorde bord- og ramme-baseret (heldigvis ting i de mørke aldre af design) webstrukturer så populære.
Hvis du holder dette princip i tankerne, vil du sandsynligvis ikke ende med at oprette et websted fyldt med komplekse former for indholdsblokke, der ville blive forbundet i tankerne via de andre love ovenfor. Stadig kan du gruppér dine objekter sammen på en interessant måde, f.eks. i en diamant- eller kiteform, da de stadig opfattes som ordnede og koncise former.
Farve teori, opfattelse og brug
Farvesyn og opfattelse af farve er stort set subjektiv baseret på hvordan seernes hjerner reagerer til lysbølgerne afspejles af farverige genstande eller former. Reglen er, at forskellige mennesker, selv uden synsforstyrrelser, ser det samme objekt i forskellige farver (du kan måske huske kjole).
Farveegenskaber
Der er stadig tre objektive egenskaber af farve; nuance, værdi og intensitet.
Hue er navnet på farven som mærket på et farvehjul eller i en regnbue. Der er seks (eller tolv, afhængigt af hvem du taler med) grundlæggende nuancer: rød, orange, gul, grøn, blå og violet.
Gul, blå og rød er primær, orange, grøn og violet er sekundær nuancer; også der er tertiære nuancer, der er de direkte blandinger af to primære og sekundære nuancer (fx gulgrøn eller rødviolet).
Værdi er lysets eller mørkets farve, der betegnes som høj værdi til lyse farver eller lav-værdi til mørke farver.
Intensitet henviser til lysstyrke eller svaghed af en farve; det betyder, at en farve med samme nuance og samme værdi stadig kan dæmpes eller lyses ved at ændre intensiteten og skabe forskellige farveudgange.
Den højeste intensitet af hver farve er den farve, de viser på farvehjulet (se nedenfor), mens det laveste er farven grå.
Farve kontraster
Med henvisning til ovennævnte love af lighed skaber perceivers sind grupper af små genstande, de ser ud fra lignende og forskellige egenskaber - ofte farver.
Når du vælger din farvepalet til dit websted, især hvis du går efter en minimalistisk tilgang, eller hvis du designer et tekst-tungt indholdsområde, f.eks. blogs eller annoncer, skal du være opmærksom på forskellige farve kontraster Det kan hjælpe dig med at finde de rigtige farveværdier for det bedste resultat.
Der er 7 farve kontraster ifølge Johannes Itten, selvom jeg kun nævner 3.
1. Kontrast af farvetone
Gul, rød og blå med fuld intensitet er direkte og levende kontraster. Sekundære nuancer giver mindre skarpt skelnen, men arbejder stadig, ligesom tertiære nuancer gør, selvom ingen producerer som fantastiske resultater som med primære nuancer.
2. Komplementær kontrast
To farver er i komplementær kontrast, hvis de blandes sammen, skaber de en neutral grå. Disse kaldes også mærkelige par. Hvis de støder op, forbedrer de livlighed og intensitet, mens de blandes sammen, annullerer de hinanden. Hver farve har en og kun en komplementær; På farvehjulet er parene diagonalt modsatte af hinanden.
3. Lysmørk kontrast
Hvis du vil eksperimentere med et enkeltfarvet websted, bruger forskellige værdier af samme nuance kan producere fantastiske resultater. Ofte bruges i minimalistisk webdesign, kan du også producere gode resultater baseret på lysmørk kontrast, hvis du vil give tema brugerfarve muligheder til din bruger. Denne kontrast bruges også til gråtonedesign.
Hvis du vil forfølge de resterende 4 farve kontraster, kan du finde dem her.
Oprettelse af paletter og kontrol af kontraster
At kende teorien er stor, at fortolke dine ideer er en anden ting helt. Du bør ikke bekymre dig selv, internettet giver stor støtte til dine behov for farvejuggling. Der er en overflod af værktøjer, der hjælper dig med at oprette brugerdefinerede farvemønstre baseret på farvekontrastregler, f.eks. Paletton eller Adobe Kuler.
Til webformål vil du måske kontrollere kontraster, du valgte at bruge på webAIM, på Jonathan Snooks websted eller downloade en forekomst af Color Contrast Analyzer af Paciello Group her.
Konklusion
Når du begynder at arbejde med et nyt tema eller begynde at ændre de eksisterende, skal du prøve at tænke på principperne om opfattelse for at organisere dit indhold og husk at overveje farvereglerne, når du giver dit design sin endelige form og farvetone.
Redaktørens note: Denne gæstepost er skrevet til Hongkiat.com af Marton Fekete. Marton er en ungarsk siteudvikler, der for nylig er hooked på WordPress. Han er en redesign entusiast og freelance indholdsforfatter, der kan lide at spille RPG'er i sin fritid.
