Sådan forbedrer du dine UI / UX designfærdigheder som udvikler

Hvis du havde spurgt mig for fire år siden, da jeg blev CS-kandidat, hvilken slags karrierevej jeg så mig selv følge, ville jeg sandsynligvis have fortalt dig back-end Java-udvikling eller noget lignende. Jeg var aldrig kreativ, i maling møder lærred slags måde, så jeg overvejede ikke rigtig en karrierevej, der involverede front-end udvikling og design.

Som vi alle ved, ændrer ting sig. I løbet af min karriere er jeg blevet mere og mere interesseret i UI-udvikling og design. Jeg har været heldig nok i mit job til at have været udsat for front-end-udvikling og at have fået lov til at investere tid i at forbedre de færdigheder, der er nødvendige for at være en front-end-udvikler.

I løbet af de sidste 12 måneder har jeg stræbt efter at forbedre min forståelse af UI / UX-design, både på grund af personlig interesse og at lade mig være mere effektiv, når jeg arbejder med designere.

I dette indlæg vil jeg gerne dele de lektioner, jeg har lært, de ressourcer, jeg har samlet, og de fejl, jeg har lavet i håb om, at andre udviklere vil være i stand til at lære af min rejse.

Indholdsfortegnelse

  • Det er ikke kun talent
  • Se, tænk, stjæle
  • Lær teorien
  • Byg noget
  • Giv ikke op
  • Ressourcer
  • Konklusion

Det er ikke kun talent

Denne virker indlysende for mig nu, men der var en tid, hvor jeg troede, at designere var troldmænd, der blev født med evnen til at skabe fantastiske apps og websteder.

Det viser sig, at de ikke er det. De har lige arbejdet hårdt for at perfektionere deres håndværk. På samme måde som at lære at kode kommer lettere for nogle mennesker, er der mennesker, der vil have et naturligt talent for design, men talent betyder ikke meget uden hårdt arbejde.

Design er noget, der kan læres. Foretag ikke den fejl, jeg gjorde, og skriv dig selv af, fordi du ikke er kreativ i traditionel forstand. Løsning af programmeringsproblemer kræver kreativitet; tænk på at løse designudfordringer på samme måde.

Se, tænk, stjæle

På samme måde som at læse god kode vil hjælpe dig med at blive en bedre udvikler. At lære af, hvad andre har skabt, vil hjælpe dig med at blive en bedre designer.

Næste gang du besøger et websted eller bruger en app, skal du se på det og virkelig tænke over, hvorfor det ser ud og opfører sig som det gør. Hvorfor placeres elementerne, hvor de er? Hvorfor er den knap en bestemt farve? Hvorfor skal du udføre handlinger i en bestemt rækkefølge?

Tag Medium's bifaldsknap for eksempel. Hvorfor brugte de ikke bare en "lignende" -knap som alle andre sociale medier? Efter min mening var det en smart designbeslutning ikke at gøre det. I stedet er de i stand til at styrke ideen om et fællesskab, der driver webstedet ved nøje at designe en interaktion. At give en artikel eller et svar halvtreds klapper tager tid for en bruger at gøre, men det hjælper dem med virkelig at oprette forbindelse til det indhold, de ser, og den person, der oprettede det.

Websteder som Awwwards og Dribbble har vist sig at være uvurderlige for mig det sidste år. Mange af de design, jeg har skabt, har taget liberal inspiration fra kreationer fra andre store designere.

Lær teorien

Da jeg først begyndte at sammensætte mine egne designs, kunne jeg ikke finde ud af, hvorfor de så ud og opførte sig så dårligt. Strømmene var akavet, farverne var uoverensstemmende, og layoutene var inkonsekvente.

Jeg troede, jeg kunne bare hoppe lige ind og bruge min udviklingsviden sammen med min grundlæggende viden om, hvordan websteder skal fungere, som bruger, og det ville fungere fint.

Jeg tog meget, meget forkert. Jeg endte med at skabe design fra et udviklerperspektiv i stedet for at bruge designteori som base.

Udviklere ved, hvordan et websted fungerer , men designere ved, hvordan et websted opfører sig og føles. Der er et stort hul, som du kun kan udfylde ved at få et fundament i designviden.

For at få en grundlæggende forståelse af designteori brugte jeg mest Medium og Udemy. Du kan finde links til de ressourcer, jeg brugte i afsnittet nedenfor.

Byg noget

Enhver udvikler eller CS-professor vil fortælle dig, at den bedste måde at blive en bedre programmør er at skrive kode. Det samme princip gælder for design.

Det betyder ikke noget, hvad du designer, så længe du lærer af det. Behandl det som et rigtigt projekt: Tænk på brugerne. Opret wireframes, mockups og prototyper. Itererer på det originale design for at forbedre det. Du kan bruge websteder som Reddit til at få feedback om, hvad du opretter.

Du kan endda parre det med at forbedre dine udviklingsevner. De fleste af mine nylige sideprojekter er motiveret af et fælles ønske om at forbedre både mine webudviklings- og designfærdigheder. Når du har designet dit projekt, kan du udvikle det og se begge sider af mønten.

Her er nogle ideer til at komme i gang:

  • Design en interaktion. Brug Mediums bifaldsknap til inspiration.
  • Design en app til din yndlings velgørenhedsorganisation. Tænk på de forskellige slags brugere: potentielle, sjældne og regelmæssige lånere.
  • Design dit CV. Tænk på de farver, du bruger, og hvad betyder det. Tænk over, hvordan dit CV vil blive brugt. Vil det bare ses på en skærm, eller vil det blive udskrevet? Hvordan påvirker det designet?
  • Redesign et eksisterende websted. Det kan være din lokale transportudbyder eller et globalt brand. Sammenlign dit design med originalen, og tænk over forskellene fra en brugers perspektiv.
  • Design noget fysisk, såsom en ny transportmetode eller måske et alternativ til noget simpelt som en gaffel eller stol. Jeg har fundet at tænke på designet af hverdagens ting som en virkelig nyttig måde at komme i tankerne på at designe noget intuitivt.

Giv ikke op

Når jeg ser tilbage på, hvad jeg skabte for et år siden, er det svært ikke at blive flad. Men alle starter et eller andet sted. At se progressionen i, hvad du opretter, vil være det værd. Så længe du lærer af, hvad du laver, bliver din tid brugt godt.

Det kan hjælpe med at holde styr på, hvad du har lært med jævne mellemrum. Hver måned ser jeg tilbage på nogle af de ting, jeg har arbejdet med, og prøver at tage så meget som muligt fra erfaringen. Selvom det kun er for at genkende nogle små oplysninger, du har hentet ved at læse en artikel, er det stadig fremskridt.

Ressourcer

Nedenfor er en lille samling af mine yndlingsværktøjer, artikler og kurser. Du kan finde mange flere, som jeg ikke har nævnt her, og her.

Værktøjer

Figma - Design og prototyping med samarbejde.

FramerX - Svarende til Figma, men med tilføjet React og synlige komponenter.

Kølere - Opdag og generer farvepaller.

WebAIM Contrast Checker - Sørg for, at dine farver er tilgængelige.

Arketype - Typografisystemeditor og generator.

Artikler

7 praktiske tip til snyd ved design

10 snydekoder til design af brugergrænseflader

10 små designfejl, vi stadig laver

Design bedre former

En komplet liste over UX-leverancer

Psykologprincipperne, som enhver UI / UX-designer skal vide

Sådan bruges farver i UI Design

16 citater, du skal læse som UX Designer

Produktdesignprincipper i et enkelt kort

Kurser

Fundamentals for design af brugeroplevelser - Udemy

Det komplette app-designkursus - UX, UI og designtænkning - Udemy

UXTraining.com

Konklusion

Jeg håber, du har været i stand til at tage noget fra min rejse. Hvis du har designtip eller ressourcer, der har hjulpet dig med at lære, vil jeg meget gerne høre dem i svarene.

Tak for læsningen!