Innhold
- 01. Design er ikke bare visuelt
- 02. Vær bruker-sentrert
- 03. Design er i detalj
- 04. Når du designer, skiss ofte
- 05. Bruk hvite mellomrom
- 06. Rutenett er ikke bare CSS-rammer
- 07. Når alt har vekt, gjør ingenting det
- 08. Hold en inspirasjonsmappe
- 09. Design handler om problemløsning
- 10. Lær hvordan du kan snakke om og kritisere design
- Ressurser og workshop
- Likte dette? Les disse!
I løpet av de siste årene har jeg undervist i en workshop om visuelle designgrunnlag rettet mot utviklere. Som med det meste på nettet, har jeg funnet et variert nivå av designkunnskap og interesse fra både studentene som har tatt workshopen min, så vel som fra utviklerne jeg har jobbet med.
Denne listen er ment å være en kortliste over konseptene som jeg vil at utviklerne jeg jobber med skal forstå design. Det er ment å styre utviklere i riktig retning som en introduksjon til å tenke og kommunisere om design.
01. Design er ikke bare visuelt
Design er ikke bare fasaden; det er personligheten under. Av en eller annen grunn har design et stigma som utelukkende den visuelle delen av nettstedet. Dette kan ikke være mer falsk eller misforstått. Design er hele opplevelsen fra det øyeblikket brukere kommer inn på nettstedet ditt til godt etter at de har reist.
Design er 'hvordan' og 'hvorfor' folk vil bruke nettstedet; hastigheten stedet belastes med; samspillet mellom sveve, klikk og berør; og tempoet du leverer nye funksjoner og innhold på. Alle disse konseptene omfatter design.
Fordi design er mer enn visuelle aspekter og påvirker hele opplevelsen, er hver person på et prosjekt en designer. Ethvert teammedlem som setter ut for å oppdage hvordan brukeren samhandler med nettstedet, er en designer. Frontend, backend og prosjektledelse bør alle tenke på design.
02. Vær bruker-sentrert
Brukere er av største betydning og bør alltid være i forkant av enhver beslutning om nettstedet eller appen din. Design skal gjøre det mulig for brukerne å nå sine mål med hastighet, effektivitet og, viktigst, glede.
I min workshop får jeg studentene til å lage en innledende designoppgave etter at de har valgt et prosjekt de skal jobbe med. Selv om jeg gir dem enkle retningslinjer å følge, er de for det meste fokusert på brukeren: hvem er de, hva gjør de på nettstedet ditt og hva er følelsen du vil at de skal ha når de besøker, samt når de drar?
Selv om dette fungerer bra for verkstedets små prosjekter, bør du tenke på dette fundamentet i større skala når det gjelder større prosjekter. Designere bruker personas, historiefortelling og mer for å indikere hvem brukerne av nettstedet er og hva de vil gjøre på nettstedet. Fordyp deg i disse retningslinjene, uansett form de tar på prosjektet ditt, og bruk dem til å påvirke alle dine designbeslutninger.
Designeren trenger ikke å bære hele brukeropplevelsen; designere burde bare lede det. Opplevelsen bør i stedet deles av hele teamet (hvis en finnes). Det er mange tilfeller der jeg har stolt på at utviklere hjelper meg med å finne ut den beste måten å skape den største brukeropplevelsen på. Ikke bare kjenner de grensene bedre, de har også en klarere ide om alle muligheter.
03. Design er i detalj
Detaljer er i stand til å gjøre et ”godt” design ”flott”. Oppmerksomhet på detaljer i en brukeropplevelse kan være forskjellen mellom en fornøyd bruker og en irritert. Å ha riktig blå nyanse eller vikle lenken rundt en bestemt tekst, betyr virkelig noe. Problemet med detaljer er at det er lett å bli fanget i dem. Å fokusere på detaljene for tidlig er unødvendig og kan redusere prosessen. Det er viktig å vite når du skal fokusere på spesifikke detaljer, eller når det er gunstig å visualisere hele det større bildet.
04. Når du designer, skiss ofte
Fordelene med å skisse brukeropplevelser er godt dokumentert. Skisse hjelper deg å tenke på innhold, hierarki og flyt blant andre aspekter. Skisser er billige, enkle å gjøre og veldig raske. Du bør kunne lage en ny idé hvert 30. sekund. Skisse er også en av de beste måtene å formidle ideer om layout, brukeropplevelse og brukerflyt for et nettsted.
Min første høyskoleprofessor inngrodd dette i meg da jeg var student. Hun lot oss ikke bruke datamaskinen før hun så sider på sider med skisser. Unge designere har en tendens til å skimme på skissene eller utelate dem helt. Jeg ser fremdeles mange designere gå over for tidlig fra skisser til høyere trofasthet uten først å utforske alle mulige løsninger.
Den beste delen av skisser er at alle kan gjøre det. Alle vet hvordan de skal tegne bokser, kviste linjer og piler. Dette er grunnleggende verktøy du trenger for å begynne å designe - det er virkelig så enkelt. Vi leter ikke etter uvurderlige kunstverk, og du trenger absolutt ikke en fancy kunstgrad. Du trenger bare å være i stand til å kommunisere skissene dine og tankeprosessen bak dem tydelig.
05. Bruk hvite mellomrom
Det ser ut til å være det vanskeligste konseptet for utviklere å forstå: den største fordelen med å ha riktig mengde hvite mellomrom er å gi brukeren en pause. Brudd er viktig for å behandle informasjon, spesielt når det er ganske mye å behandle. Det er derfor vi har avsnitt og setninger i stedet for bare en enkelt, lang blokk med løpende tekst.
Nøkkelen er å sikre at hvite mellomrom har et forhold til andre objekter på siden, inkludert det andre rommet. Hvis du har en enkelt kolonne med hvite mellomrom, må du sørge for at det er en annen enkelt kolonne med hvit plass rundt for å balansere den.
For vertikal plass, bruk bare brøkdeler av kroppens skriftstørrelse. Jeg pleier å holde ting enkelt og bruke en skala på .25, men det er flere andre skalaer du kan bruke. For eksempel, hvis kroppens skriftstørrelse er 16 px (1 em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. Dette gjør det mulig å velge skriftstørrelser ved å bare flytte opp og ned på skalaen mens jeg ønsker større eller mindre type.
06. Rutenett er ikke bare CSS-rammer
Gal, ikke sant? Nettverk fant først fremtredende design i det som nå kalles International Typographic Style.
Et rutenett skal brukes til å:
- Lag forhold mellom objekter
- Gi et basissystem for visuell justering
- Bidra til å skape en horisontal og vertikal rytme
- Hjelp til å skape optisk balanse
Alle disse konseptene fungerer sammen for å best muliggjøre et bedre visuelt system for brukerne dine. Rutenettet du velger påvirker designens enhet; å velge et rutenett basert på det som er enklest å implementere, vil ikke nødvendigvis være det beste designvalget for innholdet og brukerne. Til slutt er det fortsatt bare et verktøy og vil bare være like bra som personen som bruker det.
07. Når alt har vekt, gjør ingenting det
Det er som å ha en samtale med en gruppe mennesker som alle roper på deg samtidig for å gjøre forskjellige ting. Bare ett element skal ha vekt på siden: det viktigste. Å legge vekt på et enkelt element og ha et tydelig hierarki gir flyt for leserne og bør peke dem i ønsket retning.
08. Hold en inspirasjonsmappe
Hold et galleri med alle tingene som inspirerer deg visuelt. Dette kan være bilder, videoer, plakater, T-skjorter og nettsteder; alt som kan utløse ideer til en løsning på det spesielle designproblemet du står overfor.
Ikke bare fungerer dette som et referansepunkt, det tvinger deg også til hele tiden å se og evaluere design. Den enkle prosessen med å velge designstykker og lagre dem i en mappe tvinger deg til å bruke disse designanalysemusklene.
09. Design handler om problemløsning
Du bør nærme deg design som et sett med problemer som krever løsninger. Alt på siden skal ha en grunn til å være der og løse et spesifikt problem for brukeren eller designet. Jeg har en tendens til å fjerne funksjoner fra funksjonssettet til problemet jeg løser blir veldig tydelig.
Noen ganger er det vanskelig for oss å si problemene i stedet for å hoppe til en løsning. Å jobbe bakover hjelper virkelig med dette. Når du bestemmer deg for om noe skal være rødt, for eksempel, stopp og tenk på årsakene til at du ville ha det rødt i utgangspunktet. Spør deg selv: hva prøver jeg å oppnå ved å gjøre det rødt? Hva var tankeprosessen min? Du kan havne der du startet, men du vil få en bedre forståelse av hvorfor og hva du gjør.
10. Lær hvordan du kan snakke om og kritisere design
En sikker måte å irritere en designer på er å fortelle dem at en rød blokk skal være blå, at et stykke tekst skal flyttes over, eller å gjøre logoen større. Jeg tror du får ideen.
Den beste måten å gi konstruktiv tilbakemelding på er å rette oppmerksomheten mot problemene med designet. Ha bevis basert på brukere, nettstedflyt, designmål og visuelle prinsipper for å støtte problemene du ser med designet. Dette støtter deretter din mening om hva som skal endres og gir et sterkt grunnlag for hva suksess er for brukeren så vel som designet.
Så, forhåpentligvis, vil designeren samarbeide med deg for å danne en løsning på problemet. Dette er din mulighet til å foreslå en løsning; bare ikke be om å gjøre logoen større.
Ressurser og workshop
Hvis du har funnet dette interessant, kan du gjerne sjekke designen min for utviklerressurser og designe læringsstier. Jeg vil også gjerne se deg i enten den online versjonen eller den ansikt-til-ansikt-versjonen av workshopen.
Ord: Kyle Fiedler
Kyle Fiedler er designer hos thoughtbot og hjelper til med å bygge Rails og iOS-applikasjoner. Han har designet og utviklet, i en eller annen form, siden dot-com-bommen (og bysten) og har ikke stoppet siden.
Denne artikkelen dukket opprinnelig opp i nettmagasinutgave 244.
Likte dette? Les disse!
- Nyttige verktøy for tankekartlegging for designere
- Designerguiden til Golden Ratio
- Pro tips for den perfekte utformingen av nettstedet
Har du et flott designtips? Del det i kommentarene!
