Top 15 Mobile App Wireframing & Mockup Tools 18 Nov 2019

Käytännössä minkä tahansa prosessin ensimmäinen vaihe on sen kartoittaminen ja hyökkäyssuunnitelman laatiminen. Ajattele sitä. Ennen kuin rakennat talon, luot suunnitelman. Ennen kuin pelaat jalkapallo-ottelun, sinä ja joukkueesi laaditte pelisuunnitelman. Ennen kuin kirjoitat esseen englannin tunnille, laadit yksityiskohtaisen hahmotelman. Sama pätee myös mobiilisovelluksen luomiseen. Itse asiassa yksi mobiilisovellusten kehitysprosessin tärkeimmistä vaiheista on sovelluksen rakenteen luominen. Ja kun sanon rakenne, tarkoitan organisoitua ja yksinkertaistettua sisältöä ja elementtejä.

Rakenteen luominen sovellukselle voi kuitenkin viedä paljon aikaa ja energiaa, ellei sinulla tietenkään ole käytössäsi oikeaa työkalua. Siksi monet mobiilisovelluskehittäjät aloittavat mobiilisovelluksen rautalankatyökalulla tai mockup-työkalulla. Mobiilisovelluksen rautalankakehykset voivat paitsi auttaa säästämään arvokasta aikaa (ja rahaa!) myös auttaa kehittäjiä keskittymään käyttäjäkokemukseen.

Mikä tekee loistavasta rautalankakehys- tai mockup-työkalusta?

Tässä on se vaikea osa. Ei oikeastaan ole olemassa yhden koon ratkaisuja, kun kyse on rautalankamallinnuksesta. Jokaisella suunnittelutiimillä on ainutlaatuinen suunnitteluprosessi ja mobiilisovellus. Joten mitä voit etsiä? Ensinnäkin on tärkeää, että käytät ajantasaista ohjelmistoa (älä huoli – kaikki alla olevat työkalut ovat ajantasaisia ja vakaita). Sitten on tärkeää etsiä ohjelmisto, joka sisältää UI-paketin tai latausmahdollisuuden, eli siinä on joko sisäänrakennettu UI-komponenttikirjasto tai voit ladata UI-paketteja.

Tämä sanottuna, vilkaise rohkeasti 15 suosituinta mobiilisovellusten rautalankamallinnustyökalua (Mobile App Wireframing & Mockup Tools) ja katso, mikä niistä sopii sinulle parhaiten.

Justinmind

Justinmind on all-in-one-työkalu, joka pystyy luomaan sovelluksille korkean uskottavuuden wireframeja ja prototyyppejä. Se on nykyisiä valtavirran suunnittelutyökaluja eksklusiivisempi mobiilisovellusten suunnitteluun, koska se tukee hyvin eletoimintoja, siirtymiä ja interaktiivisia tehosteita. Voit luoda interaktiivisia rautalankamalleja animaatioiden ja vuorovaikutuksen avulla ilman koodia. Pääset nopeasti alkuun useiden muokattavien mallien avulla sen vedä ja pudota -käyttöliittymän avulla. Työkalu tarjoaa myös online-esitystuen, jonka avulla käyttäjät voivat jakaa rautalankamalleja etänä.
Hinnoittelu: Alkaen 19 $/kk
Web-sivusto: www.justinmind.com

Mockplus

Mockplussan kaltaisella työpöytäpohjaisella sovelluksella voit helposti ja nopeasti prototyypittää mobiilisovelluksesi. Mockplus teki sovelluksestaan erittäin helppokäyttöisen, joten sen toteuttamiseen ei tarvita tietoja tai teknistä osaamista. Löydät Android-, iPad- ja iPhone-malleja kussakin koossa omien tarpeidesi mukaan. Mockplusissa on myös yli 200 komponenttia ja yli 3000 kuvaketta. Yksinkertaisella vedä ja pudota -toiminnolla voit rakentaa vuorovaikutteisia prototyyppejä vaivattomasti.
Hinnoittelu: $199 (Pro) vuodessa/ $399 (rajoittamaton) per käyttäjä elinikäisesti
Websivusto: www.mockplus.com

Balsamiq

Balsamiq Wireframes on suosittu rautalankamallinnustyökalu mobiilisovelluksille, joka on helppo käyttää vedä ja pudota -toiminnallisuutensa ansiosta. Siinä on myös luonnostelutila brainstormingia varten ja puhdas wireframe-tila esittelyä varten, ja voit helposti vaihtaa niiden välillä. Hienoa on myös se, että se tarjoaa 30 päivän ilmaisen kokeilujakson, jonka avulla voit kokeilla sitä ennen sitoutumista. Jos etsit joustavaa, kätevää ja nopeaa rautalankatyökalua, tämä saattaa olla juuri se.
Hinnoittelu: 9 dollaria (2 projektia) / 49 dollaria (20 projektia) / 199 dollaria (200 projektia) kuukaudessa
Websivusto: www.balsamiq.com

Proto.io

Proto.io on rautalankamallinnus- ja prototyypinmuodostustyökalu, joka on tarkoitettu käyttäjäkokemustestaukseen. Lankamallinnustyökaluna sen avulla voit paitsi luoda interaktiivisia rautalankamalleja, myös testata, miten käyttäjät ovat vuorovaikutuksessa rautalankamalliesi kanssa, ja kerätä varhaista käyttäjäpalautetta. Se on loistava ohjelmisto mobiililankamallinnukseen ja -prototyyppien luomiseen, sillä sen avulla käyttäjät voivat tarkastella prototyyppejä myös offline-tilassa, ja siinä on paljon mobiilivideoita.Voit joko upottaa rautalankamallisi suoraan verkkosivustoon tai lähettää ne käyttäjätestausalustoille. Proto.io on käytettävissä Androidissa, iOS:ssä, työpöydällä tai verkkoselaimessa. Se tarjoaa myös riskittömän, 15 päivän ilmaisen kokeilujakson.
Hinnoittelu: 24 dollaria (Freelance)/ 40 dollaria (Startup)/ 80 dollaria (Agency)/ 160 dollaria (Corporate) kuukaudessa, laskutus vuosittain
Websivusto: www.proto.io

Moqups

Moqups on puhtaasti web-pohjainen alusta, jota käytetään rautalankamallien luontiin web- ja mobiilisovelluksia varten. Verkkopohjaisten alustojen suurin etu on se, että voit työskennellä missä tahansa. Moqups annettiin ilmaiseksi kehittäjäyhteisön käyttöön ympäri maailmaa. Voit luoda yksinkertaisia rautalankamalleja, kiinteitä malleja ja käyttöliittymäkonsepteja käyttämällä tätä online-mockupia, ja sen sisäänrakennettuja malleja voi käyttää suoraan. Maksulliset paketit alkavat 13-20 dollarista kuukaudessa määritellyllä käyttäjämäärällä.
Hinnoittelu: 20 dollaria (kolmikko, 7 dollaria jokaiselta lisäkäyttäjältä)/ 13 dollaria (yksittäinen käyttäjä)/ Mukautettu (yritys) kuukaudessa, laskutus vuosittain
Websivusto: www.moqups.com

InVision

InVision on loistava työkalu, joka on luotu suunnittelijoiden toimesta suunnittelijoille. Haluatko mieluummin luoda rautalankamallisi valkotaululle, jossa kaikki voivat osallistua ja tarkistaa? Silloin tämä saattaa olla juuri sinulle sopiva työkalu. InVisionilla luot interaktiivisia mockuppeja ja jaat ne tiimillesi, joka voi jättää kommentteja suoraan näytölle. Sinulla on myös pääsy reaaliaikaisiin tehtävälistoihin, jolloin muut voivat osallistua keskusteluun.
Hinnoittelu:

Fluid UI

Fluid UI on toinen johtava ja suosittu wireframing- ja mockup-työkalu. Fluid UI käyttää uusimpia teknologioita, kuten HTML5:tä, JavaScriptiä ja CSS:ää. Voit luoda asetteluja helposti raahaamalla elementtejä näistä kirjastoista. Fluid UI tarjoaa loistavan tavan kartoittaa projektisi visuaalisesti luomalla linkkejä, jotka yhdistävät näyttöjä ja muodostavat kaavion siitä, miten kaikki sopii yhteen. Fluid UI:lla on ainutlaatuinen ominaisuus, jonka avulla käyttäjä voi olla vuorovaikutuksessa käyttöliittymäsuunnittelun kanssa eri laitteiden, kuten kännyköiden, tablettien ja pöytätietokoneiden, kautta.
Hinnoittelu: 8,25 dollaria (yksin) / 19,08 dollaria (pro) / 41,58 dollaria (tiimi) kuukaudessa
Web-sivusto: www.fluidui.com

Pidoco

Pidoco on pilvipalveluna toimiva mockup-ohjelmisto, joka sisältää mukautettuja malleja, interaktiivisia elementtejä ja helppoa luonnostelua nopeaan ja tehokkaaseen rautalankamallinnukseen. Yhteistyön osalta käyttäjät voivat jakaa ja muokata näyttöjä yhdessä muiden käyttäjien kanssa ja kerätä kommentteja reaaliajassa. Voit myös luoda mukautettuja rakennuspalikoita ja käyttää niitä uudelleen. Pidoco on mahdollista integroida useisiin muihin ohjelmistoihin, kuten Jiraan, Planioon ja muihin, niiden API:n kautta.
Hinnoittelu: Verkkosivusto: www.pidoco.com

Protoshare

ProtoShare on verkkopohjainen rautalankamallinnus- ja mockup-työkalu, jolla voit luoda interaktiivisia rautalankamalleja mobiilisovelluksille (sekä verkkosivustoille). Se sisältää kirjaston vedä ja pudota -elementtejä, sivukartan ja mahdollisuuden käyttää mukautettua CSS:ää ja lisätä omia elementtejä. Tehosta työtäsi luomalla Mastereita ja malleja tyhjästä ja käyttämällä niitä uudelleen useilla sivuilla tai projekteissa.
Hinnoittelu: 29 dollaria (standard) / 49 dollaria (professional) / 59 dollaria (business) per henkilö kuukaudessa
Websivusto: www.protoshare.com

Wireframe.cc

Wireframe.cc on yksinkertainen ja suoraviivainen rautalankatyökalu, joka soveltuu erinomaisesti aloitteleville. Sen avulla voit lisätä merkintöjä tiettyihin merkintäalueisiin myös kommentteja ja arvosteluja varten. Se ei kuitenkaan välttämättä ole yhtä monipuolinen kuin muut työkalut. Siinä on rajoitettu väripaletti, joka auttaa sinua välttämään viivyttelyä, ja käyttöliittymäelementit ovat kontekstisidonnaisia ja näkyvät vain silloin, kun tarvitset niitä.
Hinnoittelu: Verkkosivusto: www.wireframe.cc

Axure

Axure on yritystason wireframing- ja mockup-työkalu, jossa on mukana animaatioita, adaptiivisia näkymiä ja ehdollisia virtausominaisuuksia, joiden avulla voit määrittää käyttäjäkokemuksen kulun. Käyttäjät voivat lisätä rautalankamalleihin huomautuksia projektin muistiinpanojen tallentamiseksi. Jos haluat tehdä rautalankamallinnusta, prototyyppien luomista ja kaaviointia yhdellä työkalulla, Axure on loistava valinta.
Hinnoittelu: $29 (pro) / $49 (team) $99 (enterprise) käyttäjää kohti kuukaudessa
Web-sivusto: www.axure.com

UXPin

UXPin on rautalankamallinnus-, UX-suunnittelu- ja mockup-työkalu, jossa on jako-, kommentointi- ja tarkasteluominaisuudet sekä ominaisuuksia, kuten hyväksymispyynnöt, tehtävänantopyynnöt ja Slack-/sähköposti-ilmoitukset, joiden avulla käyttäjät pystyvät virtaviivaistamaan työnkulkuja. Yksinkertaisen raahaa ja pudota -toiminnon avulla voit raahata kuvakkeita, mukautettuja käyttöliittymäelementtejä ja kuvia parannellaksesi rautalankamallia.
Administraattorit voivat asettaa tiimi- ja roolipohjaisia käyttöoikeuksia ja lukita tärkeitä projekteja.
Hinnoittelu: Free/ $29 (Pro)/ $49 (Team)/ Custom (Enterprise, laskutetaan kuukausittain)
Web-sivusto: www.uxpin.com

Figma

Figma on ensimmäinen selaimeen perustuva all-in-one-suunnittelutyökalu. Suunnittelijat voivat pysyä järjestyksessä käyttämällä tasot-paneelia, joka pitää kaikki piirustustaulut ja käyttöliittymäelementit tallennettuna yhteen paikkaan. Sen lisäksi, että Figma on erinomainen työkalu itsenäisille suunnittelijoille, se tarjoaa reaaliaikaista yhteistyötä tiimillesi. Figman etuna on, että useat käyttäjät voivat työskennellä saman projektin parissa samanaikaisesti, ja kaikki muutokset tallentuvat yhteen projektiin. Joukkuetoverit kommunikoivat kommentoimalla elementtejä.
Hinnoittelu:
Web-sivusto: www.figma.com

Sketch

Sketch on loistava sovellussuunnittelutyökalu vektorimuokkaukseen, prototyyppien luomiseen ja yhteistyöhön. Työkalu tarjoaa sovellusten rakentamiseen digitaalisen suunnittelutyökalupaketin, joka sisältää runsaasti suunnittelusymboleita, jotka ovat uudelleenkäytettävissä ja jaettavissa suunnitteluyhteisössä. Voit jopa lisätä dataa muotoiluihisi ja muuntaa ne käyttäjävirtakaavioiksi.
Hinnoittelu: Henkilökohtaisesta lisenssistä käyttäjät maksavat 99 dollaria/vuosi. Vaihtoehtoisesti Sketch tarjoaa laitekohtaisen paketin (volyymilisenssi) hintaan $89/vuosi/laite.
Web-sivusto: www.sketch.com

MarvelApp

Viimeisenä mutta ei vähäisimpänä on MarvelApp. MarvelApp on todella hieno monikäyttöinen suunnittelualusta, jolla voi luoda mobiilisovellusten rautalankamalleja useille laitteille. Tämän sovelluksen avulla sen käyttäjät voivat koota suunnitelmia nopeasti ja tehokkaasti raahaa ja pudota -toiminnon avulla. MarvelAppin avulla käyttäjät voivat myös herättää prototyyppinsä henkiin realistisilla näytön siirtymillä (käyttämällä triggereitä, esim. hover, swipe tai klikkaus).
Hinnoittelu:
Web-sivusto: www.marvelapp.com

Aloita rautalankamallinnus jo tänään!

Mobiilisovellusta suunniteltaessa käyttäjäkokemuksen tulisi aina olla listan kärjessä. Ilman sitä sovelluksesi liittyy miljoonien mobiilisovellusten joukkoon, jotka katoavat löytämättömien mereen. Et haluaisi sitä nyt, vai mitä? Siksi sinun pitäisi olla tietoinen prosesseista, joita tarvitaan sovellusten rautalankakehyksiä luotaessa. Voit käyttää tässä luettelossa olevien työkalujen yhdistelmää rautalankakehysten luomiseen; aloitat verkkopohjaisesta sovelluksesta ja siirryt pilvipohjaiseen sovellukseen rautalankakehyksen yksityiskohtaisempaa iteraatiota varten.