En grundlæggende ramme for visuelt design

Visuel design som et skillset har været igennem mange faser. For dem, der er nye inden for branchen, er det artefakten, der trak mange af os ind i rollen. For erfarne designere er det det fysiske udtryk for tankevækkende produktarbejde. Mens dens betydning er kontroversiel, er aspekterne ikke gensidigt eksklusive. Visuel design er kompleks. Det skal forstås for dets bredde, kompleksitet og fleksibilitet.

Du har brug for et godt øje for visuelt design.

Visuelt design samles med begrebet smag - evnen til at 'vide' hvad der er godt eller ej. Det er en egenskab, der følger de fleste designere på familiefester, når de forventes at dekorere nogens stue eller skyde familiefotoet.

Smag betragtes almindeligvis som en disposition - et talent. Gode ​​visuelle evner er derfor et resultat af denne linje, som et resultat af enten 'at have et godt øje' eller års praksis.

Det er en større samtale at diskutere, om talent er reelt eller ej. Det rigtige er dog, at dele af det visuelle designværktøj kan være objektivt. Denne ramme sigter mod at kategorisere disse aspekter i tre dimensioner, så vi kan forbedre vores visuelle koteletter og skabe et sprog for bedre at tale om det.

Så hvordan kan vi omdefinere visuelt design?

Godt design formidler nøjagtigt, hvad designeren havde til hensigt. Lad os se på, hvordan vi kritiserer det visuelle arbejde for at nærme os bedre visuelt design. Vi spørger ikke “ser det godt ud?”. Vi sammenligner en brugers fortolkning af en grænseflade med det, der var tilsigtet. Vi spørger, hvordan arbejdet hænger sammen med de vigtigste resultater for produktet og dets brugere. Vi siger, at grænseflader ser overfyldte eller ukendte ud.

Vi kan sammenfatte, at visuelt design gør følgende:

  1. Kommunikerer og organiserer vigtig og kompleks information.
  2. Opmuntrer til hensigt opførsel og devaluerer andre.
  3. Opretholder læsbarhed og fortrolighed.

Derfor kan vi knytte disse mål til tre spørgsmål, vi kan stille, når vi evaluerer det visuelle arbejde.

  1. Er det nyttigt? Leverer designet værdi eller værktøj til brugeren?
  2. Det er klart? Opmuntrer designen til en bestemt opførsel? Følger den en fortælling, der giver mening.
  3. Er det behageligt? Føles det visuelle arbejde hjemmehørende i det produkt, det arbejder i? Er elementerne kendte? Føles det poleret?

1. Er det nyttigt?

Produkter bruger visuelle repræsentationer til at formidle information eller funktion. Dørhåndtagets kroge giver et træk eller træk. Kanten på batteriets opbevaring af en fjernbetjening giver et træk.

Digitale interface har også råd. Faktisk startede vi med lignende fysiske udbytter, ved hjælp af barske skygger og glans på knapper og ikonografi, der lignede fysiske genstande. Over tid forsvandt faserne og knapperne blev flade. De udviklede sig til en ny familie med råd, der var forskellige i udseende, men præsenterede en lignende nytteværdi.

Design af hjælpekort fungerer til formularen. Vi ser først på heuristikker, der forbedrer, hvor hurtigt vi husker, hvad noget vil gøre ved blot at se på det.

I dette eksempel er der almindelige råd til digitale brugergrænseflader. Tekst formidler forbrugsoplysninger. Knapper formidler handlinger, som brugerne udfører. Navigation formidler, hvordan brugere kan bevæge sig gennem en app. Til sidst kan du også have råd til komplekse visuelle udtryk. En skuespiller er en repræsentation af en person, der er fælles på tværs af de produkter, vi bruger hver dag.

Mens udbytter forbedrer, hvordan du udtrækker forventningerne, tager de dig kun delvis. På et granulært niveau er der detaljer, der bedre artikulerer din interface.

  • Hvis en knap udfører en bestemt funktion, skal du vælge sprog, der bedre beskriver handlingen.
  • Hvis en tekstetiket har en unik tilstand (dvs. ulæste besked), kan du bruge farve eller vægt til at differentiere den.
I dette eksempel giver brugerne mulighed for at gå videre til en indkøbspipeline. Imidlertid indebærer sproget to forskellige resultater. Tilføj til indkøbskurv giver brugerne mulighed for at træffe beslutninger senere og købe flere ting på samme tid som i en tøjbutik. Køb nu giver brugerne mulighed for at afslutte et køb, som når du køber en flybillet.

2. Er det klart?

Microsoft Word 2010 værktøjslinje

For 10 år siden gav værktøjer som Microsoft Word og Adobe Photoshop gode priser inden for deres produkter. De havde tydelige knapper, etiketter og ikonografi. De var udstyret med forskellige brugssager med forskellige funktioner. Nogle funktioner blev imidlertid næppe brugt, men andre blev brugt hele tiden.

Visuelle design er nu reduktive og vurderede. De lader mennesker problemer og forretningsmæssige mål give specifikke handlinger og information. De kortlægger komponenter til intuitive mentale modeller, men tilskynder også mentale modeller, der er gavnlige for produktet.

I sin kerne fletter klarhed overvejelser til en fortælling. Fortællingerne giver dig mulighed for mere klart at forstå en strøm af en grænseflade og produktets intention. Nogle af de mest almindelige er hentet fra Gestalt Psychology.

  1. Fremtrædende: Brug højere visuelle behandlinger for at få komponenter til at føle sig vigtigere og lettere behandlinger for dem, der er mindre.
  2. Nærhed: Sæt indhold, der er relateret tættere på hinanden.
  3. Lighed: Hold ligheder mellem komponenter, der har lignende opførsel.
  4. Lukning: Luk komponenter, der er relateret.
  5. Kontinuitet: Anbring indholdet lineært (f.eks. I et foder) for at vise lighed mellem flere af komponenterne.
Dette er et eksempel på Prominence. Det tager den grundlæggende komponent i en knap, men bruger derefter en kraftig baggrundsfyldning sammenlignet med en lys kontur. Det begge giver opmærksomhed på, hvad en bruger sandsynligvis ville gøre, og hvad produktet ønsker, at brugeren skal gøre - fuldfør en transaktion.

3. Er det glædeligt?

Nyttige komponenter, der er samlet på en klar måde, formidler funktion og en mening om, hvad en bruger skal gøre. Vores hjerner behandler disse oplysninger i alle tilfælde. Det henter lignende eksempler fra tidligere grænseflader, og vi ser efter mønstre og dem, der bryder dem - hver får vores hjerne ekstra energi til at behandle. For mange af disse øjeblikke manifesterer sig som frustration eller forvirring. Vi ser også disse problemer i det virkelige liv - når der er en lille plet i vores ansigt, eller når et hår er ude af sin plads. I en interface kan vi ikke fornemme den, selvom vi ikke eksplicit kan identificere forskellen mellem en 24pt og en 25pt font. Vi kan ikke skelne det nøjagtigt, men vores hjerne ved, at noget føles væk.

For at designe behagelige visuelle oplevelser er vi nødt til at sætte reduktive og meningsfulde regler for, hvad der er anderledes og hvad der ligner at skabe mønstre, der er enkle, genkendelige og konsistente.

Hvordan kan vi vise forskel?

I psykologi er Just Noticeable Difference (JND) mængden af ​​ændring for en forskel, der skal bemærkes. Der er en JND-værdi til at bemærke en tungere vægt eller bemærke, når en farve er en anden farvetone. Selvom vi kan oprette trinstørrelser af ændringer for størrelse og farve, der er lidt mærkbart forskellige, vil vi stadig understrege sondring uden at overdrive.

Visuelle differentiatorer skal være beskedne og meningsfulde. Har vi virkelig brug for et andet skrifttype for at indikere mindre vigtigt indhold? Sikkert ikke. Skal vi bruge både et cirkulært og et firkantet profilbillede i hele produktet? Sikkert ikke. Med for mange visuelle differentierere er visuelle signaler sværere at bemærke og tildele mening.

Dette er et eksempel på et reduktivt arrangement af tekstbehandlinger og farver. Hver trinstørrelse skal være forskellig og unik og tildele en bestemt betydning.

Hvordan kan vi vise lighed?

Når du skriver på løs papir, kan du nemt skrive på den næste linje uden selv at kigge efter. Linjerne bruger en jævn afstand til at reducere indsatsen for at finde den næste linje og skabe visuel rytme. Digitale produkter gør det samme. De skaber en forventning ved at gentage visuelle elementer og organisationer som at placere et profilbillede øverst til venstre for indholdstyper.

Lighed kan generelt tilskrives, at designere bruger lignende behandlinger på tværs af enkle former som to forskellige overskriftsstørrelser for sektioner og underafsnit. De kan skabe den samme forventede adfærd for komplekse former som mennesker og virksomheder.

Selv på kornet niveau kan det også være så simpelt som altid at bruge rødt, når der er en fejl, eller bruge en konsekvent behandling af værktøjstip og uddannelsestekst. Det kan også bruges konsistente afstandsregler mellem elementerne.

Ovenfor er et eksempel på en visuel behandling, der bruger en trinstørrelse på 4pt til at skabe margener og polstring mellem elementer. Det forhindrer dig i at være vilkårlig, men det giver også dit produkt konstant hvidrum.

At sætte det sammen

Ikke et princip kan leve uden de andre. Selvom det ikke er omfattende, tackle det store problemer med visuel design på et begynderniveau. Det bekæmper impulsen til at udfylde negativt rum med ubrugelig information eller skabe nye visuelle paradigmer 'fordi det ser cool ud'. Det advarer mod overbelastning af beslutninger ved at give mange handlinger den samme vægt. Det tilskynder også til betænksomhed og konsistens, når man anvender hexadecimals, fontstørrelse og afstand.

Tretrinsrammen tvinger dig til at cykle gennem hvert princip og dykke dybt. Det giver dig mulighed for at identificere, hvilken del af det visuelle design, du er mest svag i, og giver andre mulighed for mere kritisk at kritisere dit arbejde. Vi prøver alle at forbedre os, men vi har bare brug for det samme ordforråd for at gøre det. Så næste gang du evaluerer det visuelle arbejde, skal du stille spørgsmålene:

Er det nyttigt? Det er klart? Er det behageligt?

___

Rammer foreskriver ikke, hvad der er rigtigt, men skab i stedet et ordforråd, der tilpasser koncepter, som vi alle bruger, endnu ikke mærker. Vi har alle en mening om, hvad det betyder for visuelt arbejde at være nyttigt, klart eller behageligt. Derfor, hvis du er uenig, skal du fjerne pakkerne fra dine definitioner, starte en diskussion og lad os justere. Jo hurtigere vi kan finde fælles, desto lettere er det at pakke sandheder ud, og jo flere mennesker kan vi træne til at opbygge bedre oplevelser.

Tak til Brad Birdsall for hans tanker og feedback!