Innhold
Da jeg startet karrieren, var jeg webdesigner. Jeg jobbet i webdesign i fire år, startet med småbedriftsnettsteder og til slutt videre til større kunder. Jeg fant ut at det ikke var grafisk design som interesserte meg, og heller ikke jobbet for større merkenavn. Jeg var mer interessert i paginasjonsmønstre, måten folk interagerte med former og ting som opplevd ytelse, enn den visuelle utformingen av en webside.
Når jeg så på sci-fi-filmer, ville jeg se på grensesnittene. Og da jeg spilte videospill, så jeg hvordan menyene var lagt opp. Hvis noen av disse egenskapene høres kjent ut for deg, kan du også være en brukergrensesnittdesigner.
Jeg sa opp byråjobben og startet mitt eget selskap. På LinkedIn-siden min prøvde jeg å oppsummere det nye karrieremålet mitt: å gjøre best mulig programvare. Det er fire år siden jeg begynte som frilanser, og reisen min har ikke stoppet. I disse dager hjelper jeg med å drive et lite UI-designfirma som heter Mono. Vi ønsket nylig vårt fjerde teammedlem velkommen.
I denne artikkelen vil jeg beskrive hvordan det er å være en brukergrensesnittdesigner, inkludert hva jobben innebærer, hvor du finner de beste læringsressursene og hvordan du kan bli bedre på håndverket ditt.
Hva gjør en UI-designer?
Jeg finner ut at du generelt kan dele arbeidet til en brukergrensesnittdesigner i fire kategorier. Du kommuniserer med klienten, du undersøker, designer og prototype, og du kommuniserer med utviklerne. La oss se nærmere på hver av disse fasene.
Kundekommunikasjon
Kundekommunikasjon handler om å forstå kundens problem. Målet er å få tak i kundens virksomhet, så begynnelsen på et prosjekt utgjør vanligvis mye snakk. Det er greit å ikke vite for mye om klientens domene når du begynner - du kan se på deres virksomhet på en frisk måte mens du ser for deg mulige designløsninger.
For å være en god brukergrensesnittdesigner, må du være i stand til etter hvert å tenke sammen med kundens virksomhet. For eksempel kan klienten din være i luftfart. Å jobbe for dem vil til slutt gjøre deg ganske kunnskapsrik om den bransjen. Så, et tips for din egen lykke her er å velge næringene du jobber for med omhu, slik at du ikke ender opp med å bli ekspert på noe du ikke bryr deg om eller ikke har interesse for.
Under et prosjekt stopper ikke kommunikasjonen. Som designer vil du presentere arbeidet ditt hele tiden. I vårt firma er vi et eksternt team, så vi har ikke mange personlige møter. I stedet bruker vi skjermdeling gjennom videokonferanser. Kommunikasjonsverktøy som Skype og Slack brukes hver dag.
Det er nyttig å kombinere synkron og asynkron kommunikasjonsmetode. En samtale er flott hvis du trenger mye informasjon raskt, men du må være rundt samtidig. Vi tenker på Slack som vår ’virtuelle vannkjøler’ og bruker Basecamp til å administrere komplekse designprosjekter. Når vi designer prototyper ved hjelp av HTML og CSS, bruker vi GitHub Issues for å diskutere kode direkte.
Undersøkelser
I tillegg til klientkommunikasjon, vil du gjøre mye forskning. Dette kan omfatte feltstudier, workshops med klienten, analysere konkurransen eller definere en strategi - i det vesentlige omtrent alt som hjelper deg med å forstå problemet.
Forskning er det som informerer designvalgene dine. Det er en artikkel du en gang har lest, eller den nye tingen Apple nettopp ga ut. Når det er på tide å forklare hvorfor du tok et bestemt designvalg, baker forskningen deg.
Forskning kan være veldig bred. Jeg tester ofte nye enheter for forskningsformål eller registrerer meg for en ny webapp for å studere brukergrensesnittet.
Design og prototyping
Som designer vil du sannsynligvis bruke mesteparten av tiden på å gjøre design- og prototypearbeid. Et UI-designprosjekt kan gå videre på en rekke måter, fra tegning til detaljert design til koding.
Metoden du bruker, avhenger i stor grad av prosjekttype. Hva designer du? Er det et nettsted, eller vil du kalle det en app? Bruker den innfødt teknologi? Er det et redesign, eller begynner du helt fra bunnen av?
Hos vårt firma er det ingen fast prosess, men de fleste prosjekter følger samme grove rekkefølge: de starter med skisser og trådrammer, går videre til detaljert visuell og interaksjonsdesign, og slutter med en prototype.
Som designere bruker vi mye tid på å tenke på verktøyene våre. Selv om gode verktøy er viktige, er de ikke det viktigste. Å kunne bruke Adobe Creative Suite og apper som Sketch kompetent tilsvarer å kunne bruke en blyant til å tegne eller en pensel til å male. Du må fremdeles lage maleriet.
Når det er sagt, er en sunn interesse for verktøy en god ting. Jeg elsker å prøve nye verktøy som kan hjelpe meg å bli mer produktiv. Mitt favorittvektorredigeringsverktøy er Illustrator, men det meste av det visuelle designarbeidet mitt gjøres i Sketch i disse dager. Andre teammedlemmer har byttet til nyere verktøy som Affinity Designer.
Verktøy er et veldig personlig valg. Så lenge vi enkelt kan samarbeide, står alle fritt til å velge sine egne. For å gjøre det enklere å snakke om designene våre med kunder, lager vi prototyper med InVision. For mer avansert prototyping bruker vi imidlertid HTML og CSS. Verktøyet du trenger alt avhenger av jobben du vil gjøre med det.
Utviklerkommunikasjon
En ofte glemt del av arbeidet til en brukergrensesnittdesigner er utviklerkommunikasjon. I disse dager kan du ikke komme unna med å bare sende designene dine til devs og håpe at de blir implementert riktig. De beste designerne vet at utfordringen ikke ligger i å lage designet, men i å kommunisere det - ikke bare til interessentene som må gi sin godkjenning, men også til utviklerne som må implementere det.
Kommunikasjon av et design kommer i mange former: detaljerte spesifikasjoner, skaffe ressurser, gjennomgå designet sammen. Hva det er fornuftig å levere i hvert tilfelle, avhenger i stor grad av om prosjektet er en innfødt eller en webapplikasjon.
Den tradisjonelle tilnærmingen er å levere eiendeler ved siden av skjermdesign. Skjermdesignene kan brukes til å se hvordan designet vil se ut som en helhet, mens eiendelene er klare til bruk PNG og SVG av ikoner, slik at utviklerne ikke trenger å forholde seg til en grafisk editor.
I vårt firma er vi tilhengere av å levere mer enn det. Vi bruker komponentstil guider for å opprettholde konsistens i designene våre. Når vi har å gjøre med et webprosjekt, leverer vi detaljerte sett med HTML og CSS, dokumentert stykke for stykke, klare for implementering. Jeg tror at å ha et designøye i hver fase av programvareutvikling er den eneste måten å nå målet mitt om å lage programvare i verdensklasse.
Web vs native apps
Når du designer en egen app for en plattform (f.eks. IOS eller Android), har du en tendens til å følge visse retningslinjer. Når du designer for nettet, er det ikke så mye veiledning. Det som vanligvis skjer er at klienten din har et sett med grafiske retningslinjer for merkevaren som bestemmer hvordan ting skal se ut.
Disse retningslinjene har imidlertid en tendens til å være skreddersydd mot markedsføringsnettsteder, og det som er der inne, fører ikke alltid til gode beslutninger om brukergrensesnittet. Skriftene pleier å bli valgt av markedsføringsmessige grunner, ikke av lesbarhetsgrunner. Farger kan være dristige og slående, noe som fungerer i en annonsekampanje, men ikke i en app du bruker daglig. Disse veiledningene må tolkes.
Det er få UI-retningslinjer for nettet. Du kan hevde at nettet er en smeltedigel av forskjellige stiler. Hvis du lager noe som føles mer som en app enn et nettsted, må du vite om rammeverk som Bootstrap og ZURB Foundation. Rammeverket begynner å avgjøre hvordan ting skal se ut, fordi du ikke vil finne opp hjulet på nytt. Og det er sannsynligvis en god ting.
Hos vårt firma liker vi å bruke Bootstrap. Det gir fornuftige standardstørrelser for vanlige brukergrensesnittelementer som knapper, datatabeller og modeller.
I webdesign er du mer begrenset av nettets tekniske kapasitet. Det pleide å være at det ville være vanskelig å implementere enkle visuelle blomstrer som avrundede hjørner på et nettsted. Disse dagene er for lengst borte - du kan nå tegne brukergrensesnitt med mange skygger, overganger, animasjoner og til og med 3D.
Som designer er det mye mer realistisk å ta kontroll over prosessen og utformingen i nettleseren. Jeg har ikke sett mange UI-designere overta UI-programmeringen av en innfødt app, men en designer som gjør HTML og CSS til en webapp er en vanlig forekomst. Hvis du kan kode dine egne design, vil du ha en kant over dine ikke-kodende kolleger, og for meg er det den eneste måten å virkelig forstå hvordan nettet fungerer.
Webbegrensninger
Du vil snart oppdage at ikke alle de kule triksene du lærer støttes i hver nettleser, og det er virkeligheten ved å designe for nettet. Det er bra å følge kjente prinsipper som progressiv forbedring, der du laster inn forbedret innhold når det er mulig, men også tenker på hvordan innholdet brytes ned.
Nylig har 'kutting av sennep' blitt populært. Fremhevet av BBCs webteam, innebærer dette å skille mellom 'gode' og 'dårlige' nettlesere, og gi en begrenset opplevelse til 'dårlige' nettlesere. Imidlertid fungerer det egentlig bare for innholdssider.
Når det gjelder applikasjonslignende opplevelser, begrenser mange mennesker støtten til noen få ledende nettlesere, for å gjøre utviklingen enklere. Dessverre bringer dette oss tilbake til 1996-situasjonen der du trenger en bestemt nettleser for å se innhold.
Forbedre ferdighetssettet ditt
Så, hvordan holder du deg oppdatert med den raske nettindustrien og forbedrer ferdighetene dine? La oss se på noen forskjellige metoder for å øke dine ferdigheter ...
Plattformkunnskap
En stor del av designerens arsenal er plattformkunnskap. Du bør vite om de forskjellige operativsystemene, og hvordan folk bruker dem. Som designere pleier vi å bruke Mac-maskiner, men da er det lett å glemme at de fleste mennesker der ute bruker Windows-bokser for å få jobben gjort.
Jeg føler at du bare virkelig kan forstå noe hvis du bruker det selv. Jeg foretrekker å bruke Mac-en min til å designe, men bruker mye tid på å fange opp utviklingen til forskjellige andre plattformer. Jeg har flere eksemplarer av Windows installert på min Mac som virtuelle maskiner. Jeg har vært opptatt med å teste nybygg av Windows 10 ved å bruke Microsofts Insider-program for å sjekke de forskjellige endringene i brukergrensesnittet.
Jeg kjøper også regelmessig ny maskinvare for å teste hvordan den fungerer. Jeg kjøpte en Apple Watch bare for å teste plattformen. Jeg solgte den fordi jeg følte at den ikke tilførte livet mitt så mye.
Videre til dette kan nettet sees på som et eget operativsystem. Den utvikler seg kontinuerlig, med nye funksjoner som blir lagt til hver nettleserleverandør hver uke. Det er ekstremt verdt å vite om de tekniske aspektene ved nettlesere, spesielt når det gjelder CSS og grafiske evner. Du må vite hva SVG og WebGL er, og hvordan du kan bruke Web Animations API.
Hver plattform utvikler seg over tid, og som brukergrensesnittdesigner er det din oppgave å holde deg oppdatert. Når alt kommer til alt, lever det du ikke designer isolert, men er en del av et større programvareøkosystem.
Gå tilbake til det grunnleggende
Det vi sliter med i dag er ikke så annerledes enn det vi slet med for 20 år siden. Det er massevis av gode råd i bøker. Prøv Defensive Design for the Web av Jason Fried og Matthew Linderman og Don't Make Me Think av Steve Krug til å begynne med.
Hvis du ikke vet om begreper som modalitet og overkommelighet, må du lese opp. Du bør kunne forklare hva Fitts ’lov er. Gestaltloven om nærhet? Dette er brød og smør av UI-design.
Bli inspirert av spill og filmer
Som UI-designer trekker jeg frem andre inspirasjonskilder for å gjøre arbeidet mitt. Jeg finner mye inspirasjon i spill. Noen spill er veldig komplekse, og UI-designerne har måttet løse de samme komplekse grensesnittproblemene som UI-designere som jobber med forretningsprosjekter.
Spill kan også bety trender. Minimalismen som finnes i menyene til Colin McRae Rally, minner meg om retningen til iOS7. På en måte dukket UI-animasjonsdesignet som nå er trendy opp i spill for år og år siden. Overgangen fra skeuomorfisme til bare, funksjonelle grensesnitt og 'flat design' har også vært tydelig i spill. Sammenlign 2006's Oblivion med Skyrim fra 2011. Begge spillene er rollespill i samme serie, men forskjellen er slående.
De futuristiske grensesnittene i Marvel-filmer som Iron Man har også vært en inspirasjon for meg. De er ikke akkurat brukbare eksempler, men de får meg til å tenke mer på databehandling som helhet. Vil vi ha en fremtid med skjermer, eller vil vi at skjermene skal forsvinne? Dette er sannsynligvis et godt spørsmål å stille på en pub full av designere.
Du vokser som designer gjennom hardt arbeid, utholdenhet, å snakke med jevnaldrende og lese veldig mye. For omtrent et år siden leste jeg et stykke i New York Times om mennesker langt inn i 80-årene som fortsetter å finpusse håndverket. Jeg føler at jeg bare begynner. Hva med deg?
