adobe xd käytössä

Adobe Xd, helppoa protoilua – ilmaiseksi!

Vanha koulukunta vannoo edelleen suunnittelussa Photoshopin nimeen, mutta nettisivuja ja sovelluksia suunnitellessa olisi usein hyödyllistä olla interaktiivinen prototyyppi. Tähän huutoon vastaa Adoben ainakin toistaiseksi ilmaisena jakama Xd.

Suunnittelun alkuvaiheessa voi edelleenkin tarttua kynään ja piirtää ajatuksensa paperille, mutta kun aletaan tekemään wireframeja ja suunnittelemaan kokonaisuutta, astuu Xd mukaan kuvaan.

Wireframet voi tietysti tehdä perinteisillä sovelluksilla kuten Photoshopilla tai Illustratorilla, mutta silloin ne ovat vain staattisia kuvia. Xd:n kanssa on mahdollista luonnostella myös sivuston tai sovelluksen navigointia ja toimivuutta.

Ulkonäköä voi suunnitella pidemmällekin ja Xd:hen on mahdollista tuoda objekteja muista sovelluksista. Prototyypistä voi siis saada hyvinkin valmiin näköisen. Merkkityyleillä ja Illustratrorin global swatcheja vastaavilla väreillä on helppo testailla eri vaihtoehtoja. Tekstityylien ja värien lisäksi Assets-paneeliin voi lisätä usein toistuvia symboleja.

Helppo käyttää

Kun ensi kertaa avasin Xd:n betaversion, ajattelin, että ei tällä voi tehdä yhtään mitään järkevää. Ohjelma on kuitenkin kehittynyt noista päivistä huimasti, mutta säilyttänyt silti yksinkertaisen luonteensa.

Toisin kuin Adoben vanhemmat ohjelmat, Xd ei kuitenkaan pursua lukuisia erilaisia ominaisuuksia vaan se on luonteeltaan juuri sopiva nopeaan luonnosteluun. Mutta kun prototyyppi on saatu kasaan ja sitä on testattu ja kokeiltu, on helppo jatkaa ulkoasun kehittämistä valmiimpaan suuntaan.

Xd:n perustoiminnot oppii nopeasti ja toimivan prototyypin vääntää vaikkapa ensi-istumalta. Adobe tarjoaa hyvin myös erilaisia oppimateriaaleja.

Testataan yhdessä

Mitäpä prototyypillä tekisi jos sitä ei olisi helppo jakaa testattavaksi? Siinä missä ennen läheteltiin fotarileiskoja sähköpostilla, Xd:stä saa ulos linkin jossa protoa pääsee testaimelaan. Xd mahdollistaa prototyypin myös kommentoimisen ja suojaamisen salasanalla.

Kukaan ei myöskään pääse kommentoimaan vanhaa versiota koska proto linkin takana päivittyy napin painalluksella. Ei ole yksi tai kaksi kertaa kun suunnittelija saa eteensä muutokset, jotka on tehty vanhaan versioon.

Mitä Xd ei tee

Xd on helppo ja nopea sovellus luonnosteluun ja prototyyppeihin, mutta valmista nettisivua tai sovellusta siitä ei saa ulos.

Objekteja saa kyllä exportattua ulos vaikkapa png:nä tai svg:nä. Monimutkaisemmat objektit ovat toki luultavasti jo valmiiksi tehty Illustratorissa tai Photoshopissa. Tärkein lopputulos on kuitenkin vain testattava prototyyppi ja malli sivun tekijöille.

Uudenlainen työnkulku

Uusi työkalu vaatii aina uuden työnkulun. Xd:tä käytettäessä kannattaa muistaa hyödyntää sen interaktiivisuus ja kommentointimahdollisuudet.

Ensin tehdään vaikkapa vain toimiva wireframe eli rautalankamalli jota sitten testataan ja kommentoidaan. Kun toimivuus alkaa miellyttää, siirrytään kehittämään ulkoasua. Toki asiakkaalle voi esittää ensimmäiseksi hyvinkin viimeistellyn mallin, mutta käytettävyys saattaa unohtua jos siirrytään suoraan pähkäilemään värejä ja fontteja.

Kenelle?

Nakkikioskille sivua suunnitellessa ei Xd:stä välttämättä ole suurta iloa. Mutta mitä isompi projekti, sitä enemmän siitä luultavasti on hyötyä, ainakin oikein käytettynä.

Mikäli sovellus tai sivusto on vasta suunnitteluasteella, voidaan silti asiakkaalle tai mahdolliselle rahoittajalle esitellä sen toiminnallisuutta.

Xd tarjoaa myös opiskelijoille hyvän mahdollisuuden tutkiskella erilaisia käyttöliittymävaihtoehtoja tekemättä kokonaista sovellusta. Sovelluksen prototyypin tekeminen Xd:llä olisi varmasti hyvä harjoitustyö ja kommentointi toimii opetuskäytössäkin.

Xd on hyvä lisä varsinkin isompia projekteja tekevien työkalupakkiin, mutta ilmaisuutensa ansiosta se sopii myös opiskelijoille ja kaikille käytettävyydestä kiinnostuneille. Mielenkiinnolla jäämme odottelemaan, että laittaako Adobe tähän joskus hintalapun päälle.


Adobe Xd ei ole ainoa web ja käyttöliittymäsuunnitteluun erityisesti suunniteltu sovellus. Kannattaa vilkaista myös näitä vaihtoehtoja:

Sketch

Bohemianin Sketch on jo vanha tekijä näissä piireissä. Sillä tuntuu olevan vankka kannattajakuntansa suuressa maailmassa vaikka se onkin saatavilla vain macille. Sketch maksaa 99 dollaria (plus verot) vuodessa.  Sovelluksen käyttöä voi kuitenkin jatkaa maksetun periodin jälkeenkin, mutta päivityksiä ei heru.

Figma

Hinnoittelullaan Figma asettuu Sketchin ja Xd:n välimaastoon, taviskäyttäjälle se ei maksa mitään, mutta ammattikäyttäjä arvostaa varmasti kuukausimaksullisten pakettien ominaisuuksia.

Figma on lähtökohtaisesti suunniteltu ryhmätyöskentelyyn, pelkän esikatselun lisäksi koko projektin voi jakaa toisten käyttäjien kanssa. Projektiin pääsee myös käsiksi mistä vain nettiselaimella, toki perinteinen työpöytäsovelluskin on tarjolla.

Ville Laasonen
Ville Laasonen
ville.laasonen@gmail.com

Graafinen suunnittelija ja elämän betatestaaja.