Inhoud
Toen ik mijn carrière begon, was ik webdesigner. Ik heb vier jaar in webdesign gewerkt, beginnend met sites voor kleine bedrijven en uiteindelijk doorgegroeid naar grotere klanten. Ik ontdekte dat het niet grafisch ontwerp was dat me interesseerde, noch dat ik voor grotere merknamen werkte. Ik was meer geïnteresseerd in pagineringspatronen, de manier waarop mensen met formulieren omgingen en zaken als waargenomen prestaties, dan in het visuele ontwerp van een webpagina.
Als ik sciencefictionfilms keek, keek ik naar de interfaces. En als ik videogames speelde, observeerde ik de manier waarop de menu's waren ingedeeld. Als een van deze eigenschappen u bekend voorkomt, bent u misschien ook een UI-ontwerper in hart en nieren.
Ik nam ontslag bij mijn bureau en begon mijn eigen bedrijf. Op mijn LinkedIn-pagina probeerde ik mijn nieuwe carrièredoel samen te vatten: de best mogelijke software maken. Het is vier jaar geleden dat ik begon als freelancer, en mijn reis is niet gestopt. Tegenwoordig help ik met het runnen van een klein UI-ontwerpbedrijf genaamd Mono. Onlangs hebben we ons vierde teamlid verwelkomd.
In dit artikel wil ik beschrijven hoe het is om een UI-ontwerper te zijn, inclusief wat de baan precies inhoudt, waar je de beste leermiddelen kunt vinden en hoe je beter kunt worden in je vak.
Wat doet een UI-ontwerper?
Ik vind dat je over het algemeen het werk van een user interface designer in vier categorieën kunt verdelen. Je communiceert met de opdrachtgever, je onderzoekt, je ontwerpt en maakt prototypes en je communiceert met de ontwikkelaars. Laten we elk van deze fasen eens nader bekijken.
Klantcommunicatie
Bij communicatie met de klant draait alles om het begrijpen van het probleem van de klant. Het doel is om grip te krijgen op de zaken van uw klant, dus het begin van een project is meestal veel praten. Het is prima om niet te veel te weten over het domein van uw klant wanneer u begint. U kunt hun bedrijf op een frisse manier bekijken terwijl u zich mogelijke ontwerpoplossingen voorstelt.
Om een goede UI-ontwerper te zijn, moet u uiteindelijk kunnen meedenken met het bedrijf van uw klant. Uw klant kan bijvoorbeeld in de luchtvaart zitten. Als je voor hen werkt, zul je uiteindelijk behoorlijk goed geïnformeerd zijn over die branche. Dus een tip voor je eigen geluk is hier om de industrieën waarvoor je werkt verstandig te kiezen, zodat je uiteindelijk geen expert wordt in iets waar je niet om geeft of waar je geen interesse in hebt.
Tijdens een project stopt de communicatie niet. Als ontwerper presenteer je constant je werk. Bij ons bedrijf zijn we een team op afstand, dus we hebben niet veel persoonlijke ontmoetingen. In plaats daarvan maken we intensief gebruik van het delen van schermen via videoconferenties. Communicatietools zoals Skype en Slack worden dagelijks gebruikt.
Het is handig om synchrone en asynchrone communicatiemethoden te combineren. Een telefoontje is fijn als je snel veel informatie nodig hebt, maar je moet tegelijkertijd aanwezig zijn. We beschouwen Slack als onze ‘virtuele waterkoeler’ en gebruiken Basecamp om complexe ontwerpprojecten te beheren. Wanneer we prototypes ontwerpen met HTML en CSS, gebruiken we GitHub Issues om code rechtstreeks te bespreken.
Onderzoek
Naast klantcommunicatie doe je veel onderzoek. Dit kan veldstudies, workshops met de klant, het analyseren van de concurrentie of het bepalen van een strategie omvatten - in wezen zo ongeveer alles dat u helpt het probleem te begrijpen.
Onderzoek is wat uw ontwerpkeuzes bepaalt. Het is een artikel dat je ooit hebt gelezen, of dat nieuwe ding dat Apple zojuist heeft uitgebracht. Wanneer het tijd is om uit te leggen waarom u een bepaalde ontwerpkeuze heeft gemaakt, ondersteunt uw onderzoek u.
Onderzoek kan heel breed zijn. Ik test vaak nieuwe apparaten voor onderzoeksdoeleinden of meld me aan voor een nieuwe webapp om de gebruikersinterface te bestuderen.
Ontwerp en prototyping
Als ontwerper zult u waarschijnlijk het grootste deel van uw tijd besteden aan ontwerp- en prototypewerk. Een UI-ontwerpproject kan op een aantal manieren vooruitgaan, van schetsen tot gedetailleerd ontwerp en codering.
De methode die u gebruikt, hangt grotendeels af van het type project. Wat ben je aan het ontwerpen? Is het een website, of noem je het liever een app? Gebruikt het native technologie? Is het een herontwerp of begin je helemaal opnieuw?
Bij ons bedrijf is er geen vast proces, maar de meeste projecten volgen dezelfde grove volgorde: ze beginnen met schetsen en wireframes, gaan over tot gedetailleerd visueel en interactieontwerp en eindigen met een prototype.
Als ontwerpers besteden we veel tijd aan het nadenken over onze tools. Hoewel geweldige tools belangrijk zijn, zijn ze niet het belangrijkste. Het competent kunnen gebruiken van de Adobe Creative Suite en apps zoals Sketch is het equivalent van het kunnen gebruiken van een potlood om te tekenen of een penseel om te schilderen. Je moet het schilderij nog maken.
Dat gezegd hebbende, een gezonde interesse in tools is een goede zaak. Ik hou ervan om nieuwe tools uit te proberen die me kunnen helpen productiever te zijn. Mijn favoriete tool voor het bewerken van vectoren is Illustrator, maar het meeste van mijn visuele ontwerpwerk doe ik tegenwoordig in Sketch. Andere teamleden zijn overgestapt op nieuwere tools zoals Affinity Designer.
Gereedschap is een heel persoonlijke keuze. Zolang we gemakkelijk kunnen samenwerken, is iedereen vrij om zijn eigen keuze te maken. Om het makkelijker te maken om met klanten over onze ontwerpen te praten, maken we prototypes met InVision. Voor meer geavanceerde prototyping gebruiken we echter HTML en CSS. Welke tool je nodig hebt, hangt allemaal af van de klus die je ermee wilt doen.
Ontwikkelaarscommunicatie
Een vaak vergeten onderdeel van het werk van een UI-ontwerper is communicatie met ontwikkelaars. Tegenwoordig kun je niet wegkomen door je ontwerpen gewoon naar de ontwikkelaars te sturen en te hopen dat ze correct worden geïmplementeerd. De beste ontwerpers weten dat de uitdaging niet zit in het maken van het ontwerp, maar in het communiceren ervan - niet alleen naar de belanghebbenden die hun goedkeuring moeten geven, maar ook naar de ontwikkelaars die het moeten implementeren.
Het communiceren over een ontwerp is er in vele vormen: gedetailleerde specificaties, middelen ter beschikking stellen, samen het ontwerp beoordelen. Wat in elk geval zinvol is om op te leveren, hangt grotendeels af van het feit of het project een native of een webtoepassing is.
De traditionele benadering is om activa te leveren naast schermontwerpen. De schermontwerpen kunnen worden gebruikt om te zien hoe het ontwerp er in zijn geheel uitziet, terwijl de middelen kant-en-klare PNG's en SVG's van pictogrammen zijn, zodat de ontwikkelaars niet te maken hebben met een grafische editor.
Bij ons bedrijf zijn we voorstanders van het leveren van meer dan dat. We gebruiken stijlgidsen voor componenten om de consistentie in onze ontwerpen te behouden. Wanneer we te maken hebben met een webproject, leveren we gedetailleerde sets HTML en CSS, stuk voor stuk gedocumenteerd, klaar voor implementatie. Ik geloof dat het hebben van een ontwerpoog in elke fase van softwareontwikkeling de enige manier is om mijn doel te bereiken: software van wereldklasse maken.
Web versus native apps
Wanneer u een native app ontwerpt voor een platform (bijvoorbeeld iOS of Android), houdt u zich meestal aan bepaalde richtlijnen. Wanneer u ontwerpt voor internet, is er niet zo veel begeleiding. Wat meestal gebeurt, is dat uw klant een reeks grafische richtlijnen voor zijn merk heeft die bepalen hoe dingen eruit moeten zien.
Deze richtlijnen zijn echter meestal toegespitst op marketingwebsites, en wat erin staat, leidt niet altijd tot goede gebruikersinterfacebeslissingen. Lettertypen worden meestal om marketingredenen gekozen, niet om leesbaarheidsredenen. Kleuren kunnen vet en opvallend zijn, wat werkt in een advertentiecampagne, maar niet in een app die u dagelijks gebruikt. Deze gidsen moeten worden geïnterpreteerd.
Er zijn enkele UI-richtlijnen voor internet. Je zou kunnen zeggen dat het web een smeltkroes van verschillende stijlen is. Als je iets maakt dat meer aanvoelt als een app dan als een website, moet je kennis hebben van veelgebruikte frameworks zoals Bootstrap en ZURB Foundation. Het raamwerk begint te bepalen hoe de dingen eruit moeten zien, want je wilt het wiel niet opnieuw uitvinden. En dat is waarschijnlijk een goede zaak.
Bij ons bedrijf maken we graag gebruik van Bootstrap. Het biedt redelijke standaardgroottes voor veelgebruikte UI-elementen zoals knoppen, gegevenstabellen en modals.
Bij webdesign wordt u meer beperkt door de technische capaciteiten van het web. Vroeger was het moeilijk om eenvoudige visuele versieringen zoals afgeronde hoeken op een website te implementeren. Deze dagen zijn voorbij - u bent nu vrij om gebruikersinterfaces te tekenen met veel schaduwen, overgangen, animaties en zelfs 3D.
Als ontwerper is het veel realistischer om controle te krijgen over het proces en het ontwerp in de browser. Ik heb niet veel UI-ontwerpers de UI-programmering van een native app zien overnemen, maar een ontwerper die de HTML en CSS van een web-app doet, komt vaak voor. Als je je eigen ontwerpen kunt coderen, heb je een voorsprong op je niet-coderende collega's, en voor mij is dit de enige manier om echt te begrijpen hoe internet werkt.
Webbeperkingen
Je zult snel ontdekken dat niet alle coole trucs die je leert, in elke browser worden ondersteund, en dat is de realiteit van ontwerpen voor internet. Het is goed om bekende principes te volgen, zoals progressieve verbetering, waarbij u waar mogelijk verbeterde inhoud laadt, maar ook nadenkt over hoe de inhoud verslechtert.
Onlangs is ‘het snijden van de mosterd’ populair geworden. Dit wordt gesteund door het webteam van de BBC en houdt in dat er onderscheid moet worden gemaakt tussen ‘goede’ en ’slechte’ browsers, en een beperkte ervaring moet bieden aan ’slechte’ browsers. Het werkt echter alleen voor inhoudssites.
Als het gaat om applicatie-achtige ervaringen, beperken veel mensen de ondersteuning tot slechts enkele toonaangevende browsers om de ontwikkeling gemakkelijker te maken. Helaas brengt dit ons terug naar de situatie van 1996 waarin u een bepaalde browser nodig heeft om inhoud te bekijken.
Uw vaardigheden verbeteren
Dus, hoe blijf je op de hoogte van de snel veranderende webindustrie en verbeter je je vaardigheden? Laten we eens kijken naar een paar verschillende methoden om uw vaardigheden te verbeteren ...
Platform kennis
Een belangrijk onderdeel van het arsenaal van een ontwerper is platformkennis. U moet op de hoogte zijn van de verschillende besturingssystemen en hoe mensen ze gebruiken. Als ontwerpers hebben we de neiging om Macs te gebruiken, maar dan vergeten we gemakkelijk dat de meeste mensen Windows-boxen gebruiken om hun werk gedaan te krijgen.
Ik heb het gevoel dat je iets pas echt kunt begrijpen als je het zelf gebruikt. Ik gebruik mijn Mac het liefst om te ontwerpen, maar besteed veel tijd aan het inhalen van de evolutie van verschillende andere platforms. Ik heb verschillende exemplaren van Windows als virtuele machines op mijn Mac geïnstalleerd. Ik ben druk bezig geweest met het testen van nieuwe builds van Windows 10 met het Insider-programma van Microsoft om de verschillende wijzigingen in de gebruikersinterface te bekijken.
Ook koop ik regelmatig nieuwe hardware om te testen hoe het werkt. Ik heb een Apple Watch gekocht om het platform te testen. Ik heb het toen verkocht omdat ik vond dat het niet zoveel aan mijn leven toevoegde.
Verder kan het web worden gezien als een eigen besturingssysteem. Het evolueert voortdurend en elke week worden er nieuwe functies toegevoegd aan elke browserleverancier. Het is buitengewoon de moeite waard om meer te weten over de technische aspecten van browsers, vooral met betrekking tot CSS en grafische mogelijkheden. U moet weten wat SVG en WebGL zijn en hoe u de Web Animations API kunt gebruiken.
Elk platform evolueert in de loop van de tijd en als ontwerper van gebruikersinterfaces is het jouw taak om up-to-date te blijven. Wat u ook ontwerpt, leeft niet op zichzelf, maar maakt deel uit van een groter software-ecosysteem.
Ga terug naar de basis
Waar we vandaag mee worstelen, verschilt niet zo veel van waar we 20 jaar geleden mee worstelden. Er staat heel veel goed advies in boeken. Probeer Defensive Design for the Web van Jason Fried en Matthew Linderman en Don't Make Me Think van Steve Krug om te beginnen.
Als u geen verstand heeft van concepten als modaliteit en betaalbaarheid, moet u dit lezen. U zou moeten kunnen uitleggen wat de wet van Fitts is. De Gestaltwet van nabijheid? Dit is het brood en de boter van UI-ontwerp.
Raak geïnspireerd door games en films
Als UI-ontwerper put ik uit andere inspiratiebronnen om mijn werk te doen. Ik vind veel inspiratie in games. Sommige games zijn erg complex en de UI-ontwerpers hebben dezelfde complexe interfaceproblemen moeten oplossen als de UI-ontwerper die aan zakelijke projecten werkt.
Games kunnen ook trends aangeven. Het minimalisme in de menu's van Colin McRae Rally doet me denken aan de richting van iOS7. In zekere zin verscheen het UI-animatieontwerp dat nu trendy is, jaren en jaren geleden in games. De verschuiving van skeuomorfisme naar kale, functionele interfaces en ‘plat ontwerp’ is ook zichtbaar in games. Vergelijk de Oblivion uit 2006 met de Skyrim uit 2011. Beide games zijn RPG's uit dezelfde serie, maar het verschil is opvallend.
De futuristische interfaces in Marvel-films zoals Iron Man zijn ook een inspiratie voor mij geweest. Het zijn niet bepaald bruikbare voorbeelden, maar ze zetten me wel aan het denken over computers als geheel. Willen we een toekomst van schermen, of willen we dat de schermen verdwijnen? Dit is waarschijnlijk een goede vraag om te stellen in een pub vol ontwerpers.
Je groeit als ontwerper door hard te werken, doorzettingsvermogen, praten met je leeftijdsgenoten en ontzettend veel lezen. Ongeveer een jaar geleden las ik een stuk in de New York Times over mensen tot ver in de tachtig die hun vak blijven aanscherpen. Ik heb het gevoel dat ik nog maar net begin. En jij dan?
