Proffens guide til UI-design

Forfatter: Randy Alexander
Oprettelsesdato: 25 April 2021
Opdateringsdato: 16 Kan 2024
Anonim
UX/UI-дизайнер о профессиональном пути // Дизайн приложения
Video.: UX/UI-дизайнер о профессиональном пути // Дизайн приложения

Indhold

Da jeg startede min karriere, var jeg webdesigner. Jeg arbejdede inden for webdesign i fire år, begyndende med websteder med små virksomheder og til sidst videre til større kunder. Jeg fandt ud af, at det ikke var grafisk design, der interesserede mig eller arbejdede for større mærker. Jeg var mere interesseret i paginationsmønstre, den måde, hvorpå folk interagerede med former og ting som opfattet ydeevne, end det visuelle design af en webside.

Da jeg så sci-fi-film, ville jeg se på grænsefladerne. Og da jeg spillede videospil, ville jeg se, hvordan menuerne blev lagt ud. Hvis nogle af disse træk lyder bekendt for dig, kan du også være en UI-designer i hjertet.

Jeg sagde op mit agenturjob og startede mit eget firma. På min LinkedIn-side forsøgte jeg at opsummere mit nye karrieremål: at gøre den bedst mulige software. Det er fire år siden jeg startede som freelancer, og min rejse er ikke stoppet. I disse dage hjælper jeg med at køre et lille UI-designfirma kaldet Mono. Vi bød for nylig vores fjerde teammedlem velkommen.


I denne artikel vil jeg beskrive, hvordan det er at være UI-designer, herunder hvad jobbet præcist indebærer, hvor man finder de bedste læringsressourcer, og hvordan man bliver bedre på dit håndværk.

Hvad gør en UI-designer?

Jeg finder ud af, at du generelt kan opdele en brugergrænsefladesdesigners arbejde i fire kategorier. Du kommunikerer med klienten, forsker, designer og prototype, og kommunikerer med udviklerne. Lad os se nærmere på hver af disse faser.

Kundekommunikation

Kundekommunikation handler om at forstå klientens problem. Målet er at få fat i din klients forretning, så starten på et projekt udgør typisk en masse snak. Det er fint ikke at vide for meget om din klients domæne, når du starter - du kan se på deres forretning på en frisk måde, mens du forestiller dig mulige designløsninger.


For at være en god brugergrænsefladesigner skal du være i stand til i sidste ende at tænke sammen med din klients forretning. For eksempel kan din klient være inden for luftfart. At arbejde for dem vil i sidste ende gøre dig ret vidende om den branche. Så et tip til din egen lykke her er at vælge de brancher, du arbejder for klogt, så du ikke ender med at blive ekspert på noget, du ikke er ligeglad med eller ikke har nogen interesse i.

Under et projekt stopper kommunikationen ikke. Som designer præsenterer du dit arbejde konstant. Hos vores firma er vi et fjernteam, så vi har ikke mange personlige møder. I stedet bruger vi tung deling af skærm via videokonference. Kommunikationsværktøjer som Skype og Slack bruges hver dag.

Det er nyttigt at kombinere synkron og asynkron kommunikationsmetode. Et opkald er fantastisk, hvis du har brug for en masse information hurtigt, men du skal være på samme tid. Vi tænker på Slack som vores 'virtuelle vandkøler' og bruger Basecamp til at styre komplekse designprojekter. Når vi designer prototyper ved hjælp af HTML og CSS, bruger vi GitHub Issues til at diskutere kode direkte.


Forskning

Ud over klientkommunikation vil du undersøge meget. Dette kan omfatte feltstudier, workshops med klienten, analyse af konkurrencen eller definition af en strategi - i det væsentlige næsten alt, der hjælper dig med at forstå det aktuelle problem.

Forskning er det, der informerer dine designvalg. Det er en artikel, du en gang har læst, eller den nye ting, Apple lige har udgivet. Når det er tid til at forklare, hvorfor du har lavet et bestemt designvalg, bakker din forskning dig op.

Forskning kan være meget bred. Jeg tester ofte nye enheder til forskningsformål eller tilmelder mig en ny webapp for at undersøge dens brugergrænseflade.

Design og prototyping

Som designer vil du sandsynligvis bruge det meste af din tid på at lave design- og prototypearbejde. Et UI-designprojekt kan bevæge sig frem på en række måder, fra tegning til detaljeret design til kodning.

Den metode, du bruger, afhænger stort set af projekttypen. Hvad designer du? Er det et websted, eller vil du hellere kalde det en app? Bruger den native teknologi? Er det et redesign, eller starter du helt fra bunden?

Hos vores virksomhed er der ingen fast proces, men de fleste projekter følger den samme grove rækkefølge: de starter med skitser og trådrammer, fortsætter med detaljeret visuelt og interaktionsdesign og slutter med en prototype.

Som designere bruger vi meget tid på at tænke på vores værktøjer. Selvom gode værktøjer er vigtige, er de ikke det vigtigste. At kunne bruge Adobe Creative Suite og apps som Sketch kompetent svarer til at kunne bruge en blyant til at tegne eller en pensel til at male. Du skal stadig lave maleriet.

Når det er sagt, er en sund interesse for værktøjer en god ting. Jeg elsker at prøve nye værktøjer, der kan hjælpe mig med at blive mere produktive. Mit foretrukne redigeringsværktøj til vektor er Illustrator, men det meste af mit visuelle designarbejde udføres i Sketch i disse dage. Andre teammedlemmer er skiftet til nyere værktøjer som Affinity Designer.

Værktøjer er et meget personligt valg. Så længe vi let kan arbejde sammen, kan alle frit vælge deres egne. For at gøre det nemmere at tale om vores designs med klienter laver vi prototyper med InVision. For mere avanceret prototyping bruger vi dog HTML og CSS. Det værktøj, du har brug for, afhænger alt af det job, du vil gøre med det.

Udvikler kommunikation

En ofte glemt del af arbejdet hos en UI-designer er udviklerkommunikation. I disse dage kan du ikke slippe af sted med bare at sende dine designs til devs og håbe, de bliver implementeret korrekt. De bedste designere ved, at udfordringen ikke ligger i at skabe designet, men i at kommunikere det - ikke kun til de interessenter, der skal give deres godkendelse, men også til udviklerne, der skal implementere det.

Kommunikation af et design findes i mange former: detaljerede specifikationer, levering af aktiver, gennemgang af designet sammen. Hvad det giver mening at levere i hvert tilfælde afhænger i høj grad af, om projektet er en indfødt eller en webapplikation.

Den traditionelle tilgang er at levere aktiver ved siden af ​​skærmdesign. Skærmdesignene kan bruges til at se, hvordan designet vil se ud som en helhed, mens aktiverne er klar til brug PNG'er og SVG'er af ikoner, så udviklerne ikke behøver at beskæftige sig med en grafisk editor.

Hos vores virksomhed er vi tilhængere af at levere mere end det. Vi bruger komponentstilsguider til at opretholde konsistensen i vores design. Når vi har at gøre med et webprojekt, leverer vi detaljerede sæt HTML og CSS, dokumenteret stykke for stykke, klar til implementering. Jeg tror, ​​at det at have et designøjne i hver fase af softwareudvikling er den eneste måde at nå mit mål om at skabe software i verdensklasse.

Web vs native apps

Når du designer en native app til en platform (f.eks. IOS eller Android), har du tendens til at overholde visse retningslinjer. Når du designer til internettet, er der ikke så meget vejledning. Hvad der typisk sker er, at din klient har et sæt grafiske retningslinjer for deres brand, der bestemmer, hvordan tingene skal se ud.

Disse retningslinjer har imidlertid tendens til at være skræddersyet til markedsføringswebsteder, og hvad der er der, fører ikke altid til gode beslutninger om brugergrænseflade. Skrifttyper har tendens til at blive valgt af markedsføringsmæssige årsager, ikke af læsbarhedsårsager. Farver kan være fede og slående, hvilket fungerer i en annoncekampagne, men ikke i en app, du bruger dag til dag. Disse vejledninger skal fortolkes.

Der er få UI-retningslinjer for internettet. Du kan argumentere for, at internettet er en smeltedigel i forskellige stilarter. Hvis du laver noget, der føles mere som en app end et websted, skal du vide om meget anvendte rammer som Bootstrap og ZURB Foundation. Rammen begynder at bestemme, hvordan ting skal se ud, fordi du ikke vil genopfinde hjulet. Og det er sandsynligvis en god ting.

Hos vores firma kan vi godt lide at bruge Bootstrap. Det giver fornuftige standardstørrelser til almindelige UI-elementer som knapper, datatabeller og modeller.

I webdesign er du mere begrænset af de tekniske kapaciteter på nettet. Det plejede at være, at det ville være vanskeligt at implementere enkle visuelle blomstrer som afrundede hjørner på et websted. Disse dage er langt væk - du er nu fri til at tegne brugergrænseflader med masser af skygger, overgange, animationer og endda 3D.

Som designer er det langt mere realistisk at tage kontrol over processen og designet i browseren. Jeg har ikke set mange UI-designere overtage UI-programmeringen af ​​en native app, men en designer, der laver HTML og CSS i en webapp, er en almindelig begivenhed. Hvis du kan kode dine egne designs, vil du have en kant over dine ikke-kodende jævnaldrende, og for mig er det den eneste måde at virkelig forstå, hvordan internettet fungerer.

Webbegrænsninger

Du vil snart opdage, at ikke alle de seje tricks, du lærer, understøttes i enhver browser, og det er virkeligheden ved at designe til internettet. Det er godt at følge velkendte principper som progressiv forbedring, hvor du indlæser forbedret indhold, når det er muligt, men også tænke på, hvordan indholdet nedbrydes.

For nylig er 'skære sennep' blevet populært. Fremhævet af BBCs webteam involverer dette at skelne mellem 'gode' og 'dårlige' browsere og give en begrænset oplevelse til 'dårlige' browsere. Det fungerer dog kun kun for indholdssider.

Når det kommer til applikationslignende oplevelser, begrænser mange mennesker support til kun få førende browsere for at gøre udviklingen lettere. Desværre bringer dette os tilbage til 1996-situationen, hvor du har brug for en bestemt browser for at se indhold.

Forbedring af din skillset

Så hvordan holder du dig opdateret med den hurtige webbranche og forbedrer din færdighed? Lad os se på et par forskellige metoder til at øge dine færdigheder ...

Platform viden

En stor del af en designer's arsenal er platformskendskab. Du bør vide om de forskellige operativsystemer, og hvordan folk bruger dem. Som designere har vi en tendens til at bruge Mac'er, men så er det let at glemme, at de fleste mennesker derude bruger Windows-kasser til at få deres arbejde udført.

Jeg føler, at du kun virkelig kan forstå noget, hvis du bruger det selv. Jeg foretrækker at bruge min Mac til at designe, men bruger meget tid på at indhente udviklingen af ​​forskellige andre platforme. Jeg har flere kopier af Windows installeret på min Mac som virtuelle maskiner. Jeg har haft travlt med at teste nye builds af Windows 10 ved hjælp af Microsofts Insider-program for at tjekke de forskellige ændringer i brugergrænsefladen.

Jeg køber også regelmæssigt ny hardware for at teste, hvordan det fungerer. Jeg købte et Apple Watch bare for at teste platformen. Derefter solgte jeg det, fordi jeg følte, at det ikke tilføjede så meget til mit liv.

Ud over dette kan internettet ses som dets eget operativsystem. Det udvikler sig konstant med nye funktioner, der tilføjes hver browser-leverandør hver uge. Det er yderst umagen værd at vide om de tekniske aspekter af browsere, især med hensyn til CSS og grafiske evner. Du skal vide, hvad SVG og WebGL er, og hvordan du kan bruge Web Animations API.

Hver platform udvikler sig over tid, og som designer af brugergrænseflader er det din opgave at holde dig opdateret. Når alt kommer til alt lever det, du designer, ikke isoleret, men er en del af et større softwareøkosystem.

Gå tilbage til det grundlæggende

Det, vi kæmper med i dag, er ikke så anderledes end det, vi kæmpede for for 20 år siden. Der er masser af gode råd i bøger. Prøv Defensive Design for the Web af Jason Fried og Matthew Linderman og Don't Make Me Think af Steve Krug til at begynde med.

Hvis du ikke kender begreber som modalitet og overkommelighed, skal du læse op. Du skal være i stand til at forklare, hvad Fitts 'lov er. Gestaltloven om nærhed? Dette er brød og smør af UI-design.

Bliv inspireret af spil og film

Som UI-designer trækker jeg på andre inspirationskilder til at udføre mit arbejde. Jeg finder en masse inspiration i spil. Nogle spil er meget komplekse, og UI-designerne har været nødt til at løse de samme komplekse interface-problemer som UI-designere, der arbejder på forretningsprojekter.

Spil kan også betegne tendenser. Den minimalisme, der findes i Colin McRae Rallys menuer, minder mig om retning af iOS7. På en måde optrådte UI-animationsdesignet, der nu er trendy, i spil for år og år siden. Overgangen fra skeuomorfisme til bare, funktionelle grænseflader og 'fladt design' har også været tydeligt i spil. Sammenlign 2006's Oblivion med 2011's Skyrim. Begge spil er RPG'er i samme serie, men forskellen er slående.

De futuristiske grænseflader i Marvel-film som Iron Man har også været en inspiration for mig. De er ikke ligefrem anvendelige eksempler, men de får mig til at tænke mere på computing som helhed. Ønsker vi en fremtid med skærme, eller ønsker vi, at skærmene forsvinder? Dette er sandsynligvis et godt spørgsmål at stille i en pub fuld af designere.

Du vokser som designer gennem hårdt arbejde, vedholdenhed, at tale med dine jævnaldrende og læse forfærdeligt meget. For omkring et år siden læste jeg et stykke i New York Times om mennesker langt ind i 80'erne, der fortsætter med at finpudse deres håndværk. Jeg har lyst til, at jeg kun starter. Hvad med dig?

Flere Detaljer
11 uskrevne designregler
Yderligere

11 uskrevne designregler

Fra gitterteori til Golden Ratio er der et æt grundlæggende principper, der overføre fra generation til generation af de ignere. Enhver god de igner burde kende dem, og ethvert an t...
12 fantastiske eksempler på Wordpress e-handelswebsteder
Yderligere

12 fantastiske eksempler på Wordpress e-handelswebsteder

En onlinebutik, der killer ig ud fra mængden, er et mu t-have for ethvert brand, og WordPre er en god mulighed for alle, der øn ker at tarte eller dyrke et e-handel web ted. Med en rækk...
10 ess-designmagasiner, der kan føjes til din læseliste
Yderligere

10 ess-designmagasiner, der kan føjes til din læseliste

De ignmaga iner har en række funktioner: de fortæller dig, hvad der foregår i branchen, in pirerer dig, tilbyder rådgivning, du kan anvende i din egen de ignportefølje, giver ...