10 designkoncepter, som enhver webudvikler har brug for at kende
I løbet af de sidste par år har jeg undervist i en workshop om grundlæggende visuelt design rettet mod udviklere. Som med de fleste ting på nettet har jeg fundet et forskelligt niveau af designviden og interesse fra både de studerende, der har taget mit værksted, såvel som fra de udviklere, jeg har arbejdet med.
Denne liste er beregnet til at være en kortliste over de koncepter, som jeg gerne vil have de udviklere, jeg arbejder med, om design. Det er meningen at styre udviklere i den rigtige retning som en introduktion til at tænke og kommunikere om design.
01. Design er ikke kun visuelt
Design er ikke kun facaden; det er personligheden nedenunder. Af en eller anden grund har design et stigma som udelukkende den visuelle del af hjemmesiden. Dette kunne ikke være mere falsk eller misforstået. Design er hele oplevelsen fra det øjeblik, brugerne kommer ind på dit websted til langt efter, at de er gået.
Design er 'hvordan' og 'hvorfor' folk ønsker at bruge webstedet; den hastighed, hvormed stedet indlæses samspillet mellem svæver, klik og tryk; og det tempo, hvormed du leverer nye funktioner og indhold. Alle disse koncepter omfatter design.
Fordi design er mere end visuelle aspekter og påvirker hele oplevelsen, er enhver person i et projekt en designer. Ethvert teammedlem, der går ud for at finde ud af, hvordan brugeren interagerer med webstedet, er en designer. Frontend, backend og projektledelse bør alle tænke på design.
02. Vær brugercentreret
Brugere er altafgørende og skal altid være i spidsen for enhver beslutning om dit websted eller din app. Design skal gøre det muligt for dine brugere at nå deres mål med hurtighed, effektivitet og vigtigst af alt fornøjelse.
I min workshop får jeg studerende til at oprette en indledende design brief, efter at de har valgt et projekt at arbejde på. Selvom jeg giver dem enkle retningslinjer, som de skal følge, er de for det meste fokuseret på brugeren: hvem er de, hvad laver de på dit websted, og hvad er den følelse, du vil have dem, når de besøger, samt når de går?
Selvom dette fungerer godt for værkstedets små projekter, skal du overveje dette fundament i større skala når det kommer til større projekter. Designere bruger personas, historiefortælling og mere til at indikere, hvem webstedsbrugerne er, og hvad de vil gøre på webstedet. Gå ned i disse retningslinjer, uanset hvilken form de tager med dit projekt, og brug dem til at påvirke alle dine designbeslutninger.
Designeren behøver ikke at bære hele brugeroplevelsen; designere skal bare lede det. Oplevelsen skal i stedet deles af hele holdet (hvis en findes). Der er mange tilfælde, hvor jeg har stolet på udviklere, der hjælper mig med at finde ud af den bedste måde at skabe den største brugeroplevelse på. Ikke kun kender de deres grænser bedre, de har også en klarere idé om alle muligheder.
03. Design er detaljeret
Detaljer er i stand til at gøre et 'godt' design 'fantastisk'. Opmærksomhed på detaljer i en brugeroplevelse kan være forskellen mellem en tilfreds bruger og en irriteret. At have den rigtige blå nuance eller indpakke linket omkring en bestemt tekst betyder virkelig noget. Problemet med detaljer er, at det er let at blive fanget i dem. At fokusere på detaljerne for tidligt er unødvendigt og kan bremse processen. Det er vigtigt at vide, hvornår man skal fokusere på specifikke detaljer, eller hvornår det er nyttigt at visualisere hele det større billede.
04. Skits ofte, når du designer
Fordelene af tegning af brugeroplevelser er veldokumenteret . Skitsering hjælper dig med at tænke på indhold, hierarki og flow blandt andre aspekter. Skitser er billige, nemme at lave og meget hurtige. Du skal være i stand til at oprette en ny idé hvert tredive sekund. Skitse er også en af de bedste måder at kommunikere ideer om layout, brugeroplevelse og brugerflow for et websted.
Min første universitetsprofessor forankrede dette i mig, da jeg var studerende. Hun lod os ikke bruge computeren, før hun så sider på sider med skitser. Unge designere har tendens til at skimme på skitserne eller udelade dem helt. Jeg ser stadig mange designere skifte for tidligt fra skitser til et højere loyalitetsdesign uden først at undersøge alle mulige løsninger.
Den bedste del af skitsering er, at alle kan gøre det. Alle ved, hvordan man tegner kasser, snoede linjer og pile. Dette er de grundlæggende værktøjer, du har brug for for at begynde at designe - det er virkelig så simpelt. Vi leder ikke efter uvurderlige kunstværker, og du har bestemt ikke brug for en fancy kunstgrad. Du skal bare være i stand til klart at kommunikere dine skitser og tankeprocessen bag dem.
05. Brug hvidt mellemrum
Det ser ud til at være det sværeste koncept for udviklere at forstå: den største fordel ved at have den rette mængde hvidt rum er at give brugeren en pause. Brud er vigtige for behandling af oplysninger, især når der er en hel del at behandle. Det er derfor, vi har afsnit og sætninger i stedet for kun en enkelt, lang blok med kørende tekst.
Nøglen er at sikre, at det hvide rum har et forhold til andre objekter på siden, inklusive det andet rum. Hvis du har en enkelt kolonne med hvidt rum, skal du sørge for, at der er en anden enkelt kolonne med hvidt rum rundt for at afbalancere det.
For lodret plads skal du bare bruge brøkdele af kroppens skriftstørrelse. Jeg har tendens til at holde tingene enkle og bruge en skala på .25, men der er flere andre skalaer, som du kan bruge . For eksempel, hvis kroppens skrifttypestørrelse er 16 pixel (1 em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. Dette giver mulighed for at vælge skriftstørrelser ved blot at flytte op og ned på skalaen som jeg ønsker større eller mindre type.
06. Gitre er ikke kun CSS-rammer
Skør, ikke? Netværk fandt først fremtrædende plads i design i det, der nu kaldes International typografisk stil .
Et gitter skal bruges til at:
- Opret relationer mellem objekter
- Giv et basissystem til visuel justering
- Hjælp med at skabe en vandret og lodret rytme
- Hjælp med at skabe optisk balance
Alle disse koncepter arbejder sammen for bedst at give dig mulighed for at skabe et bedre visuelt system til dine brugere. Det gitter, du vælger, påvirker designets enhed; valg af et gitter baseret på hvilket der er nemmest at implementere, vil ikke nødvendigvis være det bedste designvalg for dit indhold og dine brugere. I sidste ende er det stadig kun et værktøj og vil kun være så godt som den person, der bruger det.
07. Når alt har vægt, gør intet det
Det er som at have en samtale med en gruppe mennesker, der alle råber på dig samtidigt for at gøre forskellige ting. Kun et element skal have vægt på siden: det vigtigste. At lægge vægt på et enkelt element og have et klart hierarki giver strøm til læserne og bør pege dem i den ønskede retning.
08. Opbevar en inspirationsmappe
Hold et galleri med alle de ting, der inspirerer dig visuelt. Disse kan være fotos, videoer, plakater, T-shirts og hjemmesider; alt, hvad der kan skabe ideer til en løsning på det særlige designproblem, du står over for.
Ikke kun fungerer dette som et referencepunkt, det tvinger dig også til konstant at se og evaluere design. Den enkle proces med at vælge designstykker og gemme dem i en mappe tvinger dig til at bruge disse designanalysemuskler.
09. Design handler om problemløsning
Du skal nærme dig design som et sæt problemer, der kræver løsninger. Alt på siden skal have en grund til at være der og løse et specifikt problem for brugeren eller designet. Jeg har tendens til at fjerne funktioner fra funktionssættet, indtil det problem, jeg løser, bliver meget tydeligt.
Nogle gange er det svært for os at angive problemerne snarere end at springe til en løsning. At arbejde baglæns hjælper virkelig med dette. Når du beslutter, om noget skal være rødt, skal du f.eks. Stoppe og tænke på grundene til, at du i første omgang ville have det rødt. Spørg dig selv: hvad prøver jeg at opnå ved at gøre det rødt? Hvad var min tankeproces? Du ender måske tilbage, hvor du startede, men du vil få en bedre forståelse af hvorfor og hvad du laver.
10. Vide, hvordan man taler om og kritiserer design
En sikker måde at irritere en designer på er at fortælle dem, at en rød blok skal være blå, at et stykke tekst skal flyttes over eller at gøre logoet større. Jeg tror, du får ideen.
Den bedste måde at give konstruktiv feedback på er at henlede opmærksomheden på problemerne med designet. Har evidens baseret på brugerne, site flow, design mål og visuelle principper for at understøtte de problemer, du ser med designet. Dette understøtter derefter din mening om, hvad der skal ændre sig, og giver et stærkt grundlag for, hvad succes er for brugeren såvel som designet.
Så forhåbentlig vil designeren arbejde sammen med dig for at danne en løsning på problemet. Dette er din mulighed for at foreslå en beslutning; bare ikke bede om at gøre logoet større.
Ressourcer og workshop
Hvis du har fundet dette interessant, er du velkommen til at tjekke min design til udviklerens ressourcer og design læringsstier . Jeg vil også gerne se dig i enten online version eller på ansigt til ansigt version af værkstedet.
Ord: Kyle Fiedler
Kyle Fiedler er designer hos thoughtbot og hjælper med at opbygge Rails og iOS-applikationer. Han har designet og udviklet i en eller anden form siden dot-com boom (og buste) og har ikke stoppet siden.
Denne artikel opstod oprindeligt i netmagasin udgave 244.
Kan du lide dette? Læs disse!
- Nyttig mind mapping værktøjer til designere
- Designerens guide til Golden Ratio
- Pro-tip til det perfekte webstedslayout
Har du et godt designtip? Del det i kommentarerne!
