Sisältö
Kun aloitin urani, olin web-suunnittelija. Olen työskennellyt verkkosivujen suunnittelussa neljä vuotta, aloittaen pienyritysten sivustoista ja lopulta siirtymällä suurempiin asiakkaisiin. Huomasin, että graafinen suunnittelu ei kiinnosta minua, enkä työskennellyt suurempien tuotemerkkien parissa. Minua kiinnosti enemmän verkkosivun visuaalinen suunnittelu, sivutustavat mallit, tapa, jolla ihmiset olivat vuorovaikutuksessa lomakkeiden kanssa, ja asiat, kuten havaittu suorituskyky.
Kun katselin scifi-elokuvia, katsoin käyttöliittymiä. Ja kun pelasin videopelejä, seurasin tapaa, jolla valikot oli asetettu. Jos jokin näistä piirteistä kuulostaa tutulta, saatat olla sydämessäsi myös käyttöliittymäsuunnittelija.
Lopetin edustustyöni ja perustin oman yrityksen. LinkedIn-sivulla yritin tiivistää uuden uratavoitteeni: tehdä paras mahdollinen ohjelmisto. Aloitin freelancerina on kulunut neljä vuotta, ja matkani ei ole pysähtynyt. Näinä päivinä autan johtamaan pientä käyttöliittymän suunnitteluyritystä nimeltä Mono. Tervehdimme äskettäin neljännen tiimimme jäsenen.
Tässä artikkelissa haluan kuvata, millaista on olla käyttöliittymäsuunnittelija, mukaan lukien mitä työ tarkalleen tarkoittaa, mistä löydät parhaat oppimisresurssit ja kuinka saada parempaa käsityötäsi.
Mitä käyttöliittymäsuunnittelija tekee?
Huomaan, että yleensä voit jakaa käyttöliittymäsuunnittelijan työn neljään luokkaan. Kommunikoit asiakkaan kanssa, tutkit, suunnittelet ja prototyyppejä ja kommunikoi kehittäjien kanssa. Katsotaanpa kutakin näistä vaiheista tarkemmin.
Asiakasviestintä
Asiakasviestinnässä on kyse asiakkaan ongelman ymmärtämisestä. Tavoitteena on tutustua asiakkaasi liiketoimintaan, joten projektin alku on yleensä paljon puhetta. On hienoa olla tietämättä liikaa asiakkaasi verkkotunnuksesta aloittaessasi - voit tarkastella heidän liiketoimintaansa uudella tavalla kuvitellessasi mahdollisia suunnitteluratkaisuja.
Ollaksesi hyvä käyttöliittymäsuunnittelija, sinun on pystyttävä ajattelemaan lopulta asiakkaasi liiketoimintaa. Esimerkiksi asiakkaasi voi olla lentoliikenteessä. Työskentely heidän hyväkseen tekee sinusta lopulta melko tuntemattoman alan. Joten vihje omalle onnellesi on valita toimialat, joilla työskentelet viisaasti, joten et päädy asiantuntijaksi jossakin, josta et välitä tai jota et kiinnosta.
Projektin aikana viestintä ei lopu. Suunnittelijana esität työsi jatkuvasti. Yrityksessämme olemme etäryhmä, joten meillä ei ole paljon henkilökohtaisia kokouksia. Sen sijaan käytämme paljon näytön jakamista videoneuvottelujen avulla. Viestintätyökaluja, kuten Skype ja Slack, käytetään päivittäin.
On hyödyllistä yhdistää synkroninen ja asynkroninen viestintätapa. Puhelu on hieno, jos tarvitset paljon tietoa nopeasti, mutta sinun on oltava läsnä samaan aikaan. Ajattelemme Slackiä virtuaalisena vesijäähdyttimeemme ja käytämme Basecampia monimutkaisten suunnitteluprojektien hallintaan. Kun suunnittelemme prototyyppejä HTML: n ja CSS: n avulla, käytämme GitHub-asioita keskustellaksemme koodista suoraan.
Tutkimus
Asiakkaan viestinnän lisäksi teet paljon tutkimusta. Tähän voi sisältyä kenttätutkimuksia, työpajoja asiakkaan kanssa, kilpailun analysointia tai strategian määrittelemistä - lähinnä melkein mitä tahansa, mikä auttaa sinua ymmärtämään käsillä olevaa ongelmaa.
Tutkimus kertoo suunnitteluvaihtoehdoistasi. Se on kerran lukemasi artikkeli tai se uusi asia, jonka Apple juuri julkaisi. Kun on aika selittää, miksi teit tietyn suunnitteluvalinnan, tutkimuksesi tukee sinua.
Tutkimus voi olla hyvin laajaa. Testaan usein uusia laitteita tutkimustarkoituksiin tai rekisteröin uuden verkkosovelluksen tutkimaan sen käyttöliittymää.
Suunnittelu ja prototyyppien suunnittelu
Suunnittelijana vietät todennäköisesti suurimman osan ajastasi suunnittelu- ja prototyyppityöihin. Käyttöliittymäsuunnitteluprojekti voi siirtyä eteenpäin millä tahansa tavalla, luonnoksesta yksityiskohtaiseen suunnitteluun koodaukseen.
Käyttämäsi menetelmä riippuu suurelta osin projektityypistä. Mitä suunnittelet? Onko se verkkosivusto vai kutsuisitko sitä mieluummin sovellukseksi? Käyttääkö se alkuperäistä tekniikkaa? Onko kyseessä uudelleensuunnittelu vai aloitatko tyhjästä?
Yrityksellämme ei ole kiinteää prosessia, mutta suurin osa projekteista noudattaa samaa karkeaa järjestystä: ne alkavat luonnoksilla ja lankakehyksillä, jatkavat yksityiskohtaista visuaalista ja vuorovaikutteista suunnittelua ja päättyvät prototyyppiin.
Suunnittelijoina vietämme paljon aikaa työkaluihimme. Vaikka upeat työkalut ovat tärkeitä, ne eivät ole tärkeintä. Se, että pystyt käyttämään Adobe Creative Suitea ja Sketchin kaltaisia sovelluksia ammattitaidolla, on sama kuin kyky käyttää piirtämiseen kynällä tai siveltimellä maalaamiseen. Sinun on vielä tehtävä maalaus.
Tästä huolimatta terve kiinnostus työkaluihin on hyvä asia. Rakastan kokeilla uusia työkaluja, jotka voivat auttaa minua olemaan tuottavampia. Suosikkivektorin muokkaustyökaluni on Illustrator, mutta suurin osa visuaalisesta työstäni tehdään Sketchissä näinä päivinä. Muut tiimin jäsenet ovat siirtyneet uudempiin työkaluihin, kuten Affinity Designer.
Työkalut ovat erittäin henkilökohtainen valinta. Niin kauan kuin voimme työskennellä helposti yhdessä, jokainen voi vapaasti valita omansa. Teemme prototyyppejä InVisionin kanssa, jotta suunnittelustamme puhuminen asiakkaiden kanssa olisi helpompaa. Edistyneempään prototyyppiin käytämme kuitenkin HTML: ää ja CSS: ää. Tarvittava työkalu riippuu työstä, jonka haluat tehdä sen kanssa.
Kehittäjän viestintä
Usein unohdettu osa käyttöliittymäsuunnittelijan työtä on kehittäjäviestintä. Nykyään et voi päästä eroon lähettämällä mallit vain kehittäjille ja toivoen, että ne toteutetaan oikein. Parhaat suunnittelijat tietävät, että haasteena ei ole suunnittelun luominen, vaan sen välittäminen - paitsi sidosryhmille, joiden on annettava hyväksyntänsä, myös kehittäjille, joiden on pantava se täytäntöön.
Suunnittelusta tiedottaminen tapahtuu monin eri tavoin: yksityiskohtaiset eritelmät, omaisuuden tarjoaminen, mallin tarkistaminen yhdessä. Se, mitä on järkevää toimittaa kussakin tapauksessa, riippuu suurelta osin siitä, onko projekti natiivi vai verkkosovellus.
Perinteinen lähestymistapa on toimittaa resursseja kuvaruutujen viereen. Näyttösuunnitelmilla voidaan nähdä, miltä muotoilu näyttää kokonaisuudessaan, kun taas varat ovat käyttövalmiita PNG- ja SVG-kuvakkeita, joten kehittäjien ei tarvitse käsitellä grafiikkaeditoria.
Yrityksessämme kannatamme enempää toimituksia. Käytämme komponenttityylin oppaita, jotta voimme säilyttää suunnittelumme yhdenmukaisuuden. Kun käsittelemme verkkoprojektia, toimitamme yksityiskohtaiset HTML- ja CSS-sarjat, dokumentoituna palalta kerrallaan, valmiina käyttöönottoon. Uskon, että suunnittelusilmä kaikissa ohjelmistokehityksen vaiheissa on ainoa tapa saavuttaa tavoitteeni luoda maailmanluokan ohjelmisto.
Verkko vs. natiivisovellukset
Kun suunnittelet natiivisovellusta alustalle (esim. IOS tai Android), sinulla on tapana noudattaa tiettyjä ohjeita. Kun suunnittelet verkkoa, ohjausta ei ole niin paljon. Tyypillisesti tapahtuu, että asiakkaallasi on tuotemerkkinsä joukko graafisia ohjeita, jotka määräävät, miten asioiden tulisi näyttää.
Nämä ohjeet ovat kuitenkin yleensä räätälöityjä verkkosivustojen markkinointiin, eivätkä ne aina johda hyviin käyttöliittymäpäätöksiin. Fontit valitaan yleensä markkinoinnista, ei luettavuudesta. Värit voivat olla rohkeita ja silmiinpistäviä, mikä toimii mainoskampanjassa, mutta ei sovelluksessa, jota käytät päivittäin. Nämä oppaat on tulkittava.
Verkossa on vain vähän käyttöliittymän ohjeita. Voisit väittää, että verkko on eri tyylien sulatusuuni. Jos teet jotain, joka tuntuu enemmän sovellukselta kuin verkkosivustolta, sinun on tiedettävä laajasti käytetyistä kehyksistä, kuten Bootstrap ja ZURB Foundation. Kehys alkaa määrittää, miten asioiden pitäisi näyttää, koska et halua keksiä pyörää uudelleen. Ja se on todennäköisesti hyvä asia.
Yrityksellämme haluamme käyttää Bootstrapia. Se tarjoaa järkevät oletuskoot yleisille käyttöliittymän elementeille, kuten painikkeille, tietotaulukoille ja modeeleille.
Verkkosuunnittelussa sinua rajoittavat enemmän verkon tekniset valmiudet. Aiemmin oli vaikea toteuttaa yksinkertaisia visuaalisia kukoistuksia kuten pyöristetyt kulmat verkkosivustolla. Nämä päivät ovat kauan menneet - voit nyt piirtää käyttöliittymiä, joissa on paljon varjoja, siirtymiä, animaatioita ja jopa 3D.
Suunnittelijana on paljon realistisempaa hallita prosessia ja suunnittelua selaimessa. En ole nähnyt monien käyttöliittymäsuunnittelijoiden ottavan käyttöön natiivisovelluksen käyttöliittymän ohjelmoinnin, mutta suunnittelija, joka tekee verkkosovelluksen HTML- ja CSS-tiedostoja, on yleinen tapa. Jos pystyt koodaamaan omat mallisi, sinulla on etu koodaamattomiin ikäisesi kanssa, ja minulle se on ainoa tapa ymmärtää todella, miten verkko toimii.
Verkkorajoitukset
Pian huomaat, että kaikkia oppimiasi hienoja temppuja ei tueta kaikissa selaimissa, ja se on todellisuus verkkosuunnittelulle. On hyvä noudattaa tunnettuja periaatteita, kuten progressiivista parannusta, jossa ladataan parannettua sisältöä aina kun mahdollista, mutta mieti myös, miten sisältö hajoaa.
Viime aikoina sinapin leikkaaminen on tullut suosittua. BBC: n verkkotiimin mestarina tämä tarkoittaa erottamista "hyvistä" ja "huonoista" selaimista ja rajoitetun kokemuksen tarjoamista "huonoille" selaimille. Se toimii kuitenkin todellakin vain sisältösivustoilla.
Sovelluksen kaltaisten kokemusten suhteen monet ihmiset rajoittavat tukea vain muutamaan johtavaan selaimeen kehityksen helpottamiseksi. Valitettavasti tämä tuo meidät takaisin vuoden 1996 tilanteeseen, jossa tarvitset tietyn selaimen sisällön katseluun.
Parannat taitosi
Joten miten pysyt ajan tasalla nopeasti muuttuvasta verkkoteollisuudesta ja parannat taitosi? Tarkastellaan muutamia erilaisia menetelmiä taitojesi parantamiseksi ...
Alustan tuntemus
Suuri osa suunnittelijan arsenaalista on alustatietoa. Sinun tulisi tietää eri käyttöjärjestelmistä ja siitä, miten ihmiset käyttävät niitä. Suunnittelijoina meillä on tapana käyttää Mac-tietokoneita, mutta sitten on helppo unohtaa, että suurin osa ihmisistä siellä käyttää Windows-laatikoita työnsä tekemiseen.
Minusta voit todella ymmärtää jotain vain, jos käytät sitä itse. Pidän parempana Mac-tietokoneeni suunnittelussa, mutta vietän paljon aikaa kiinni muiden muiden alustojen kehitykseen. Minulla on useita kopioita Windowsista asennettuna Mac-tietokoneelleni virtuaalikoneina. Olen ollut kiireinen testaamaan Windows 10: n uusia versioita Microsoftin Insider-ohjelman avulla tarkistamaan käyttöliittymän eri muutokset.
Ostan myös säännöllisesti uutta laitteistoa testatakseni sen toimintaa. Ostin Apple Watchin vain alustan testaamiseksi. Myin sitten sen, koska tunsin, että se ei lisännyt niin paljon elämääni.
Tämän lisäksi verkko voidaan nähdä omana käyttöjärjestelmänä. Se kehittyy jatkuvasti, ja jokaiseen selaintoimittajaan lisätään uusia ominaisuuksia joka viikko. On erittäin hyödyllistä tietää selainten teknisistä näkökohdista, erityisesti CSS: stä ja grafiikkakyvyistä. Sinun on tiedettävä, mitä SVG ja WebGL ovat, ja miten voit käyttää Web-animaatioiden sovellusliittymää.
Jokainen alusta kehittyy ajan myötä, ja käyttöliittymäsuunnittelijana sinun on pysyttävä ajan tasalla. Loppujen lopuksi kaikki, mitä suunnittelet, eivät asu erillään, vaan ovat osa suurempaa ohjelmistoekosysteemiä.
Palaa perusasioihin
Se, minkä kanssa kamppailemme tänään, ei ole niin erilainen kuin mitä kamppailimme 20 vuotta sitten. Kirjoissa on paljon hyviä neuvoja. Kokeile Jason Friedin ja Matthew Lindermanin Defensive Design for Web -ohjelmaa ja Steve Krugin Don’t Make Me Think by Starter Krug.
Jos et tiedä käsitteistä, kuten modaalisuus ja edullisuus, sinun on luettava. Sinun pitäisi pystyä selittämään, mikä on Fittsin laki. Gestaltin läheisyyden laki? Tämä on käyttöliittymäsuunnittelun leipä ja voi.
Inspiroidu peleistä ja elokuvista
UI-suunnittelijana käytän muita inspiraation lähteitä työsseni. Löydän paljon inspiraatiota peleistä. Jotkut pelit ovat hyvin monimutkaisia, ja käyttöliittymäsuunnittelijoiden on täytynyt ratkaista samat monimutkaiset käyttöliittymäongelmat kuin liiketoimintaprojekteissa työskentelevillä käyttöliittymäsuunnittelijoilla.
Pelit voivat myös merkitä trendejä. Colin McRae Rallyn valikoista löytyvä minimalismi muistuttaa minua iOS7: n suunnasta. Tavallaan nyt trendikäs käyttöliittymän animaatiomalli ilmestyi peleissä vuosia sitten. Siirtyminen skeuomorfismista paljaisiin, toiminnallisiin rajapintoihin ja "tasaiseen suunnitteluun" on ollut ilmeistä myös peleissä. Vertaa vuoden 2006 Oblivionia vuoden 2011 Skyrimiin. Molemmat pelit ovat saman sarjan RPG: itä, mutta ero on silmiinpistävä.
Marvel-elokuvien futuristiset rajapinnat, kuten Iron Man, ovat myös olleet inspiraationa minulle. Ne eivät ole aivan käyttökelpoisia esimerkkejä, mutta saavat minut ajattelemaan enemmän tietojenkäsittelystä kokonaisuutena. Haluammeko näyttöjen tulevaisuuden vai haluammeko näytöt katoavan? Tämä on luultavasti hyvä kysymys pubissa, joka on täynnä suunnittelijoita.
Kasvat suunnittelijana kovan työn, itsepintaisuuden, keskustelemisen ikäisensä kanssa ja lukemisen kanssa erittäin paljon. Noin vuosi sitten luin New York Times -lehdessä luvun 80-vuotiaista ihmisistä, jotka edelleen hioavat ammattitoimintaansa. Minusta tuntuu siltä, että olen vasta aloittamassa. Entä sinä?
