Innehåll
När jag började min karriär var jag webbdesigner. Jag arbetade inom webbdesign i fyra år, började med småföretagssidor och gick så småningom vidare till större kunder. Jag fick reda på att det inte var grafisk design som intresserade mig eller arbetade för större varumärken. Jag var mer intresserad av paginationsmönster, hur människor interagerade med former och saker som upplevd prestanda än den visuella designen av en webbsida.
När jag tittade på sci-fi-filmer tittade jag på gränssnitten. Och när jag spelade videospel såg jag hur menyerna var utformade. Om någon av dessa egenskaper låter bekant för dig kan du också vara en UI-designer i hjärtat.
Jag avslutade mitt byråjobb och startade mitt eget företag. På min LinkedIn-sida försökte jag sammanfatta mitt nya karriärmål: att göra bästa möjliga programvara. Det har gått fyra år sedan jag började som frilansare, och min resa har inte slutat. Dessa dagar hjälper jag till att driva ett litet UI-designföretag som heter Mono. Vi välkomnade nyligen vår fjärde teammedlem.
I den här artikeln vill jag beskriva hur det är att vara UI-designer, inklusive vad exakt jobbet innebär, var man hittar de bästa inlärningsresurserna och hur man blir bättre på ditt hantverk.
Vad gör en gränssnittsdesigner?
Jag tycker att du i allmänhet kan dela upp ett användargränssnittsdesigners arbete i fyra kategorier. Du kommunicerar med klienten, forskar, designar och prototypar och kommunicerar med utvecklarna. Låt oss titta närmare på var och en av dessa faser.
Kundkommunikation
Kundkommunikation handlar om att förstå kundens problem. Målet är att ta hand om din kunds verksamhet, så början på ett projekt utgör vanligtvis mycket prat. Det är bra att inte veta för mycket om din klients domän när du börjar - du kan titta på deras verksamhet på ett nytt sätt medan du tänker dig möjliga designlösningar.
För att vara en bra UI-designer måste du så småningom kunna tänka med din kunds verksamhet. Till exempel kan din klient vara i luftfart. Att arbeta för dem kommer så småningom att göra dig ganska kunnig om den branschen. Så ett tips för din egen lycka här är att välja de branscher du arbetar för klokt, så att du inte blir expert på något du inte bryr dig om eller inte har något intresse för.
Under ett projekt stoppas inte kommunikationen. Som designer kommer du ständigt att presentera ditt arbete. På vårt företag är vi ett avlägset team, så vi har inte många personliga möten. Istället använder vi skärmdelning i hög grad genom videokonferenser. Kommunikationsverktyg som Skype och Slack används varje dag.
Det är användbart att kombinera synkrona och asynkrona kommunikationsmetoder. Ett samtal är bra om du snabbt behöver mycket information, men du måste vara runt samtidigt. Vi tänker på Slack som vår ”virtuella vattenkylare” och använder Basecamp för att hantera komplexa designprojekt. När vi utformar prototyper med HTML och CSS använder vi GitHub Issues för att diskutera kod direkt.
Forskning
Förutom klientkommunikation kommer du att göra mycket forskning. Detta kan inkludera fältstudier, workshops med klienten, analys av tävlingen eller definiering av en strategi - i huvudsak nästan vad som helst som hjälper dig att förstå problemet.
Forskning är det som informerar dina designval. Det är en artikel du en gång har läst, eller den nya saken som Apple precis släppt. När det är dags att förklara varför du gjorde ett visst designval, säkerhetskopierar din forskning dig.
Forskning kan vara mycket bred. Jag testar ofta nya enheter för forskningsändamål eller registrerar mig på en ny webbapp för att studera dess användargränssnitt.
Design och prototyping
Som designer kommer du sannolikt att spendera större delen av din tid på att göra design och prototyparbete. Ett UI-designprojekt kan gå vidare på ett antal olika sätt, från skiss till detaljerad design till kodning.
Metoden du använder beror till stor del på typ av projekt. Vad designar du? Är det en webbplats, eller vill du hellre kalla det en app? Använder den inbyggd teknik? Är det en redesign eller börjar du från grunden?
Hos vårt företag finns ingen fast process, men de flesta projekt följer samma grova ordning: de börjar med skisser och trådramar, går vidare till detaljerad visuell och interaktionsdesign och slutar med en prototyp.
Som designers spenderar vi mycket tid på att tänka på våra verktyg. Även om bra verktyg är viktiga är de inte det viktigaste. Att kunna använda Adobe Creative Suite och appar som Sketch på ett kompetent sätt motsvarar att kunna använda en penna för att rita eller en pensel för att måla. Du behöver fortfarande göra målningen.
Med detta sagt är ett bra intresse för verktyg en bra sak. Jag älskar att prova nya verktyg som kan hjälpa mig att bli mer produktiva. Mitt favoritredigeringsverktyg för vektor är Illustrator, men det mesta av mitt visuella designarbete görs i Sketch idag. Andra lagmedlemmar har bytt till nyare verktyg som Affinity Designer.
Verktyg är ett mycket personligt val. Så länge vi enkelt kan arbeta tillsammans, kan alla välja sina egna. För att göra det enklare att prata om våra mönster med kunder, gör vi prototyper med InVision. För mer avancerad prototypning använder vi dock HTML och CSS. Vilket verktyg du behöver beror på det jobb du vill göra med det.
Kommunikation för utvecklare
En ofta glömd del av arbetet hos en UI-designer är kommunikation med utvecklare. Dessa dagar kan du inte komma undan med att bara skicka dina mönster till utvecklarna och hoppas att de implementeras korrekt. De bästa formgivarna vet att utmaningen inte är att skapa designen, utan att kommunicera den - inte bara till intressenterna som måste ge sitt godkännande utan också till utvecklarna som måste implementera den.
Kommunicera en design finns i många former: detaljerade specifikationer, tillhandahålla tillgångar, granska designen tillsammans. Vad det är vettigt att leverera i varje fall beror till stor del på om projektet är en infödd eller en webbapplikation.
Den traditionella metoden är att leverera tillgångar bredvid skärmdesigner. Skärmdesignerna kan användas för att se hur designen ser ut som en helhet, medan tillgångarna är färdiga att använda PNG och SVG med ikoner, så utvecklarna behöver inte hantera en grafikredigerare.
På vårt företag är vi förespråkare för att leverera mer än så. Vi använder komponentstilsguider för att bibehålla enhetlighet i våra mönster. När vi har att göra med ett webbprojekt levererar vi detaljerade uppsättningar HTML och CSS, dokumenterade bit för bit, redo för implementering. Jag tror att det att ha ett designöga i varje fas av programvaruutveckling är det enda sättet att nå mitt mål att skapa programvara i världsklass.
Webb vs inbyggda appar
När du utformar en inbyggd app för en plattform (t.ex. iOS eller Android) tenderar du att följa vissa riktlinjer. När du designar för webben finns det inte så mycket vägledning. Vad som vanligtvis händer är att din klient har en uppsättning grafiska riktlinjer för deras varumärke som avgör hur saker ska se ut.
Dessa riktlinjer tenderar dock att skräddarsys mot marknadsföringswebbplatser, och det som finns där leder inte alltid till bra beslut om användargränssnittet. Teckensnitt brukar väljas av marknadsföringsskäl, inte av läsbarhetsskäl. Färger kan vara djärva och slående, vilket fungerar i en annonskampanj, men inte i en app du använder dag till dag. Dessa guider måste tolkas.
Det finns få användargränssnitt för webben. Du kan hävda att webben är en smältdegel av olika stilar. Om du gör något som känns mer som en app än en webbplats måste du veta om allmänt använda ramverk som Bootstrap och ZURB Foundation. Ramverket börjar avgöra hur saker ska se ut, eftersom du inte vill uppfinna hjulet på nytt. Och det är nog en bra sak.
På vårt företag vill vi använda Bootstrap. Det ger förnuftiga standardstorlekar för vanliga användargränssnittselement som knappar, datatabeller och modeller.
Inom webbdesign är du mer begränsad av webbens tekniska kapacitet. Det brukade vara så att det skulle vara svårt att implementera enkla visuella blomningar som rundade hörn på en webbplats. Dessa dagar är för länge borta - du är nu fri att rita användargränssnitt med massor av skuggor, övergångar, animationer och till och med 3D.
Som designer är det mycket mer realistiskt att ta kontroll över processen och designen i webbläsaren. Jag har inte sett många gränssnittsdesigners ta över UI-programmeringen av en inbyggd app, men en designer som gör HTML och CSS för en webbapp är en vanlig händelse. Om du kan koda dina egna mönster kommer du att ha en kant över dina icke-kodande kamrater, och för mig är det enda sättet att verkligen förstå hur webben fungerar.
Webbegränsningar
Du kommer snart att upptäcka att inte alla coola knep du lär dig stöds i varje webbläsare, och det är verkligheten att designa för webben. Det är bra att följa välkända principer som progressiv förbättring, där du läser in förbättrat innehåll när det är möjligt, men också tänker på hur innehållet bryts ned.
Nyligen har ”skärning av senap” blivit populärt. Kampanjerad av BBC: s webbteam, innebär detta att man skiljer mellan "bra" och "dåliga" webbläsare och ger en begränsad upplevelse till "dåliga" webbläsare. Men det fungerar egentligen bara för innehållswebbplatser.
När det gäller applikationsliknande upplevelser begränsar många människor stödet till några få ledande webbläsare för att göra utvecklingen enklare. Tyvärr tar detta oss tillbaka till 1996-situationen där du behöver en viss webbläsare för att se innehåll.
Förbättra din kompetens
Så, hur håller du dig uppdaterad med den snabba webbindustrin och förbättrar din kompetens? Låt oss titta på några olika metoder för att öka dina färdigheter ...
Plattformskunskap
En viktig del av en designers arsenal är plattformskunskap. Du bör känna till de olika operativsystemen och hur människor använder dem. Som designers brukar vi använda Mac-datorer, men då är det lätt att glömma att majoriteten av människorna där ute använder Windows-rutor för att få sitt arbete gjort.
Jag känner att du bara kan förstå något om du använder det själv. Jag föredrar att använda min Mac för att designa, men spenderar mycket tid på att komma ikapp utvecklingen av olika andra plattformar. Jag har flera exemplar av Windows installerade på min Mac som virtuella maskiner. Jag har varit upptagen med att testa nya versioner av Windows 10 med Microsofts Insider-program för att kolla in de olika ändringarna i användargränssnittet.
Jag köper också regelbundet ny hårdvara för att testa hur den fungerar. Jag köpte en Apple Watch bara för att testa plattformen. Jag sålde det sedan för att jag kände att det inte tillförde så mycket till mitt liv.
Utöver detta kan webben ses som sitt eget operativsystem. Det utvecklas ständigt, med nya funktioner läggs till varje webbläsarförsäljare varje vecka. Det är oerhört värt att veta om de tekniska aspekterna av webbläsare, särskilt när det gäller CSS och grafikförmåga. Du måste veta vad SVG och WebGL är och hur du kan använda Web Animations API.
Varje plattform utvecklas över tiden och som designer för användargränssnitt är det din uppgift att hålla dig uppdaterad. När allt kommer omkring lever vad du än designar inte i isolering utan är en del av ett större programvaruekosystem.
Gå tillbaka till grunderna
Det vi kämpar med idag skiljer sig inte så mycket från det vi kämpade med för 20 år sedan. Det finns massor av goda råd i böcker. Prova Defensive Design for the Web av Jason Fried och Matthew Linderman och Don't Make Me Think av Steve Krug till att börja med.
Om du inte känner till begrepp som modalitet och överkomlighet måste du läsa igenom. Du bör kunna förklara vad Fitts lag är. Gestaltlagen om närhet? Detta är brödet och smöret av UI-design.
Bli inspirerad av spel och filmer
Som UI-designer använder jag mig av andra inspirationskällor för att göra mitt arbete. Jag hittar mycket inspiration i spel. Vissa spel är väldigt komplexa och UI-designers har tvingats lösa samma komplexa gränssnittsproblem som UI-designer som arbetar med affärsprojekt.
Spel kan också betyda trender. Minimalismen som finns i Colin McRae Rally-menyerna påminner mig om riktningen för iOS7. På ett sätt visades UI-animationsdesignen som nu är trendig i spel för år och år sedan. Övergången från skeuomorfism till nakna, funktionella gränssnitt och ”platt design” har också varit tydlig i spel. Jämför Oblivion från 2006 med Skyrim från 2011. Båda spelen är RPG i samma serie, men skillnaden är slående.
De futuristiska gränssnitten i Marvel-filmer som Iron Man har också varit en inspiration för mig. De är inte exakt användbara exempel, men de får mig att tänka mer på datorer som helhet. Vill vi ha en framtid för skärmar, eller vill vi att skärmarna försvinner? Det här är förmodligen en bra fråga att ställa på en pub full av designers.
Du växer som designer genom hårt arbete, uthållighet, prata med dina kamrater och läsa väldigt mycket. För ungefär ett år sedan läste jag en artikel i New York Times om människor långt in i 80-talet som fortsätter att finslipa sitt hantverk. Jag känner att jag bara börjar. Hur är det med dig?
