Tilanne on seuraava: olet kehittäjä ja sinulla on kaikki tarvittavat työkalut upean sovelluksen koodaamiseen. Mutta olet hieman jumissa suunnittelun suhteen. Ilman alan standardisuunnittelutyökalujen, kuten Adobe Photoshopin, hallintaa, miten suunnittelet mobiilisovelluksen, joka kuvastaa sisäistä nerouttasi? Miten teet sovelluksen, joka on sekä visuaalisesti upea että käyttäjien kannalta helppo navigoida?

Ei hätää, on hyviä uutisia. Sinulla ei ehkä ole paljon (tai ei lainkaan) kokemusta UX/suunnittelusta, mutta et välttämättä tarvitse sitä luodaksesi visuaalisesti upean lopullisen projektin. Nämä ratkaisut auttavat sinua siinä, miten suunnitella mobiilisovellus – jokainen niistä täyttää tämän lupauksen ilman, että sinun tarvitsee maksaa penniäkään.

Miten suunnitella mobiilisovellus

Wireframing käsittää paljaan minimituotteen luomisen, joka olennaisesti edustaa sovelluksesi suunnittelun luurankoa. Jos sovellustasi verrataan startup-yritykseen, tätä suunnitteluvaihetta voisi kutsua minimaaliseksi elinkelpoiseksi tuotteeksi (käsite, joka on tullut tunnetuksi kirjassa The Lean Startup).

Wireframing on olennainen vaihe, kun käydään läpi mobiilisovelluksen suunnitteluprosessia, koska sen avulla voit ajatella rakennetta erillisenä lopullisista suunnitteluelementeistä. Se mahdollistaa myös sen, että voit välittää konseptisi tehokkaasti kaikille asiaankuuluville osapuolille – yhteistyökumppaneille, suunnittelijoille tai sijoittajille – ilman, että tarvitset henkilökohtaisesti minkäänlaista suunnittelukokemusta ilmaistaksesi nämä ideat tarkasti.

Seuraavat työkalut voivat olla avuksi tämän tärkeän perustavanlaatuisen vaiheen aikana, joka liittyy siihen, miten mobiilisovellus suunnitellaan.

Kynä ja paperi

Jos et todellakaan halua tuhlata rahaa, vanha kunnon ja luotettava kynä ja paperi on oikea tapa hahmotella alustavat sovellusideasi karkeaksi luonnokseksi. Vaikka jotkut haluavat mieluummin siirtyä suoraan Photoshopiin tai prototyyppityökaluun, tämä menetelmä voi olla ihanteellinen ideoiden tallentamiseen nopeasti niiden syntyessä. Lisäbonuksena on, että et tarvitse erityistä koulutusta tai työkalun hallintaa saadaksesi kaiken irti tästä rautalankamallimenetelmästä.

Android- ja/tai iOS-käyttöjärjestelmän luonnospaperi

Mobiilisovelluksen suunnittelua miettiville on olemassa erityinen rautalankamallien luonnostelutyökalu, joka on suunniteltu juuri sinua varten. Kohtuulliseen ilmaishintaan voit ladata pisteverkkopapereita, joihin on tulostettu iPhonet ja iPadit. Tämä on ihanteellinen suunnitteluratkaisu kehittäjille, jotka tarvitsevat parempaa visuaalisuutta kuin mitä kynä ja paperi voivat tarjota. Tämä iOS-luonnostelupaperi sopii myös erinomaisesti storyboardingiin tai sen näyttämiseen, miltä sovelluksesi näyttää käytössä eri tiloissa.

Tämä iOS-luonnostelupaperi sisältää ruudukkoviivat kaikille edellä mainittujen iOS-laitteiden oletusarvoisille käyttöliittymäelementeille. Tämän luonnospaperin Android-versiossa paperiin on painettu 8 puhelinmallia. Toisin kuin iOS-paperissa (jossa on pisteverkko), tässä paperissa ei kuitenkaan ole lainkaan viivoja.

MockFlow

Jos etsit hieman teknisempää työkalua mobiilisovelluksen rautalankamallinnukseen, harkitse jotain MockFlow’n kaltaista. Mockflow on verkossa toimiva rautalankamallinnusratkaisu, jolla on joustavuutta käsitellä minkä tahansa tyyppistä suunnitteluprojektia – olipa kyseessä sitten mobiili- tai verkkosovellus (tai jotain aivan muuta). Saatavilla on ilmainen perusversio, jossa voit työskennellä yhden projektin parissa kerrallaan, enintään 1 Gt tallennustilaa ja kaksi tiimin jäsentä. Voit avata lisätoimintoja (enemmän projekteja, tallennustilaa ja tiimin jäseniä), kun päivität maksulliseen malliin, joka alkaa 14 dollarista kuukaudessa.

WireframeApp on toinen web-sovelluspohjainen rautalankamallinnusvaihtoehto, joka muistuttaa MockFlow’ta. Kaikki suunnitelmat ovat maksullisia, mutta voit usein löytää edullisen elinikäisen tarjouksen (yhteensä alle 49 dollaria) rekisteröitymällä heidän sähköpostitse lähetettävään uutiskirjeeseensä tai AppSumoon.

Prototyyppien luominen

Prototyyppien luominen on seuraava askel siihen, miten suunnitella mobiilisovellus, kun olet saanut rautalankamallin valmiiksi. Koko tämän seuraavan vaiheen tarkoitus on luoda toimiva versio suunnittelusta, joka muistuttaa sitä, miltä haluat lopullisen projektin näyttävän.

Seuraavat työkalut sopivat hyvin siihen, miten suunnitella mobiilisovellus maksamatta senttiäkään, sillä ne ovat kaikki 100-prosenttisesti ilmaisia!

Marvel

Marvel on verkkosovellus, joka on saatavilla myös iOS:lle ja Androidille. Sen lisäksi, että voit suunnitella millä tahansa laitteella, joka on sinulle mieluisin, tämän työkalun avulla on helppo muuttaa luonnokset toimiviksi prototyypeiksi. Sen lisäksi, että voit lisätä suunnittelun peruselementtejä, voit myös yhdistää malleja toisiinsa ja luoda virtauksen. Marvelin avulla voit luoda interaktiivisia pikanäppäimiä ja realistisia siirtymiä, ja voit valita toimintoja, kuten leijuttamisen, napsauttamisen, pyyhkäisemisen, nipistämisen ja paljon muuta. Koska Marvelissa on paljon kolmannen osapuolen integraatioita, se sopii yhteen monien muiden jo käyttämiesi työkalujen ja tiimisi yhteistyökumppaneiden kanssa.

InVision

InVision on samankaltainen kuin Marvel, sillä se on ilmainen web- ja mobiiliprototyyppityökalu. Se on täydellinen prototypointityökalu tiimeille, kiitos toiminnallisuuden, joka mahdollistaa yksinkertaisen kommentoinnin ja yhteistyön. Se erottuu monista samantyyppisistä työkaluista versionhallintaominaisuudella, jonka avulla voit tarvittaessa palauttaa muutokset edelliseen versioon.

InVisionia käyttävät innovatiiviset yritykset, kuten Adobe, Zappos, AT&T, Dell ja Sony, sekä nopeasti kasvavat startup-yritykset, kuten Prezi, Soundcloud ja Evernote. InVisionin käyttäminen ei takaa sinulle heidän menestystään, mutta et voi kieltää yhdistyksen etuja!

Axure

Voidaksesi täydentää vaihtoehtojasi siitä, miten suunnitella mobiilisovellus maksamatta senttiäkään, tässä on vaihtoehto, joka on maksullinen, jos sitä käytetään pitkällä aikavälillä, mutta täysin ilmainen 30 päivän kokeilujakson aikana. Axure mahdollistaa helpon sovelluksen prototyyppien luomisen erittäin toimivien mallien ansiosta (jotka muistuttavat Marvelin siirtymiä). Kuten muutkin tämän artikkelin vaihtoehdot, tämä työkalu tarjoaa toiminnallisuuden helppoon tiimityöskentelyyn.

Proto.io

Proto.io mainostaa itseään työkaluksi, jonka avulla voit luoda ”Prototyyppejä, jotka tuntuvat todellisilta”. Mobiilisovelluskehittäjälle, joka haluaa luoda realistisen ja toimivan prototyypin, tämä voi olla musiikkia korvillesi. Se tarjoaa käyttäjille useita käyttöliittymäkirjastoja, kolmannen osapuolen integraatioita (yhteistyökumppaneiden, kuten Dropboxin, kanssa) ja jopa käyttäjätestausta, jolla varmistetaan, että käyttökokemus on saumaton julkaisun yhteydessä. Ilmainen kokeiluversio antaa sinulle 15 päivän käyttöoikeuden ja elinikäisen pääsyn rajoitettuihin ominaisuuksiin, tai voit päivittää täysin toimivaan tiliin, jossa on useita projekteja ja ominaisuuksia, alkaen 24 dollarista kuukaudessa.

Jos et ole vielä löytänyt täydellistä rautalankamallinnus- tai prototyyppityökalua, Developer Drive jakaa muutamia muita yleisiä vaihtoehtoja, joita kannattaa harkita.

Jos tämä on kiinnostuksesi ja kykysi rajana sovellussuunnittelussa, sinun on tietenkin maksettava jollekulle, joka vie paljaan rautalankamallinnuksesi tai prototyyppisi seuraavalle tasolle. Mutta perussuunnitelman tekeminen voi olla hyvä tapa säästää aikaa ja rahaa etukäteen. Mitä paremmin pystyt kommunikoimaan visiosi suunnittelijalle, sitä helpompaa sen toteuttaminen on, ja sitä vähemmän rahaa tuhlaat suunnitteluversioihin, jotka eivät vastaa visiotasi.

Visuaalinen suunnittelu

Etsitpä sitten opastusta siihen, miten suunnitella sovellus iPhonelle, tai siihen, miten suunnitella Android-sovellus, nämä ilmaiset työvälineet voivat auttaa sinua kietomaan päähäsi täydellisen suunnittelun kummalle tahansa mobiilikäyttöjärjestelmälle.

Joskus pieni inspiraatio voi auttaa poistamaan luovan blokin, ja suunnittelun oppaaseen eksyminen voi auttaa sinua keksimään, miten saat projektin valmiiksi täysin omin voimin.

Laudable Apps

Laudable Apps on abare-boness-verkkosivusto/sovelluskuvausgalleria, joka on keskittynyt nimenomaan kauniiden iOS 7:n suunnittelujen esittelyyn. Siellä ei ole tekstiä tai muita häiriötekijöitä, vain ilman kommentteja esiteltyjä malleja.

Kun ajattelet erityisesti iOS:ää, kannattaa myös tutustua Applen App Storen tiukkoihin lähetysohjeisiin. Koska heillä on ”ei poikkeuksia” -asenne, näiden ohjeiden pitäminen mielessä, kun määrittelet, miten mobiilisovellus suunnitellaan, voi auttaa sinua tekemään asiat oikein ensimmäisellä kerralla, mikä säästää aikaa ja rahaa pitkällä aikavälillä.

Android-mallit

Olitpa sitten suunnittelemassa yksinomaan Android-laitteelle tai luomassa mobiilisovelluksestasi kahta versiota (joista toinen on tarkoitettu Applen sovelluskauppaa varten), sinun on hyvä tutustua Android-laitteita varten tehtävän suunnittelun sisä- ja ulkopuolisiin seikkoihin. Saatat yllättyä tietäessäsi, että tämä on selvästi erilaista (ja huomattavasti vähemmän jäykkää) kuin iOS-sovellusten suunnittelustandardit. Voi olla hyödyllistä lukea läpi Google Play -kaupan lähetysmateriaalit, kuten tämä lanseerauksen tarkistuslista.

Voit myös käyttää Android Patternsia Android-suunnittelun pikakurssina. Tämä verkkosivusto on kirjasto Androidin vuorovaikutusmalleista, joita voit käyttää suunnittelua luodessasi. Vuorovaikutuskuviot on järjestetty sovellustyypeittäin, ja ne sisältävät toimintoja, kuten navigointia, ilmoituksia ja näytön vuorovaikutusta. Vaikka näistä malleista voi olla apua uudelle mobiilisovelluksen suunnittelijalle, niitä tulisi pitää oppaana, mutta ei ehdottomina sääntöinä.

Ikonit

Lisäämällä visuaalisiin elementteihisi ulottuvuutta voit auttaa prototyyppiäsi näyttämään mahdollisimman lähellä lopullista tuotosta. Icons8 tarjoaa yli 53 800 kuvakkeen kirjaston, jonka käyttö on täysin ilmaista. Tämän jättimäisen ilmaisen resurssin lisäksi kannattaa tutustua myös näihin käyttöliittymäsuunnittelutyökaluihin, joista löydät erilaisia tapoja etsiä ja käyttää kuvakkeita, kun määrittelet mobiilisovelluksen suunnittelua.

Adobe Kuler

Adobella on paljon resursseja mobiilisovelluksen suunnitteluun aloittelijoista edistyneempiin, mutta yksi yksinkertaisimmista ja käyttökelpoisimmista työkaluista on niiden värisuunnittelutyökalu. Kuler auttaa sekä suunnittelijoita että ei-suunnittelijoita valitsemaan värimalleja, jotka perustuvat väriympyrään ja erilaisiin värisääntöihin: yksivärinen, komplementaarinen, kolmio jne. Voit luoda värimaailman kuvasta tai selata muiden tekemiä värimaailmaehdotuksia saadaksesi inspiraatiota.

Mobile Design Inspiration

CSSWinnerin mukaan Mobile Design Inspiration on tihein mobiilisovellusten suunnitteluun tarkoitettu inspiraatiogalleria, jossa on saatavilla sovellussuunnittelun inspiraatioita, ja ne on järjestetty erityisesti iPhonen, Androidin, Apple Watchin ja iPadin mukaan. Uusia malleja lisätään viikoittain, ja heidän ”Creative Fields” -osionsa voi tarjota lisäinspiraatiota, jos työskentelet myös sovelluksen logon suunnittelun parissa.

Tuts+

Jos todella haluat tietää, miten suunnitella mobiilisovellus maksamatta senttiäkään, kannattaa harkita ajan sijoittamista uusien taitojen hankkimiseen. Oppiessasi suunnittelemaan oman sovelluksesi sen sijaan, että palkkaisit jonkun tekemään sen, voit säästää rahaa JA ansaita myös arvokkaita taitoja, joita voit myöhemmin hyödyntää rahana.

On olemassa useita verkkosivustoja, jotka tarjoavat erinomaisia suunnittelun verkkokursseja (Treehouse on mahtava maksullinen resurssi), mutta Tuts+ tarjoaa paljon syvällistä tietoa, täysin ilmaiseksi, laadusta tinkimättä. Hyödyllisten artikkeleiden lisäksi heillä on myös muita pitkiä resursseja suunnittelusta, kuten e-kirjoja.

Miten suunnitella mobiilisovellus maksamatta senttiäkään

Mobiilisovelluksen suunnitteluun ei todellakaan tarvitse palkata suunnittelijaa, varsinkaan rautalankamallinnuksen (wireframing) ja prototyyppien (prototyping) alkuvaiheessa. Käytä aikaa siihen, että saat sovelluksesi perustasolla sellaiseksi kuin haluat sen olevan, niin vaikka päätyisitkin palkkaamaan suunnittelijan, projektista ei tule yhtä syvällinen (ja kallis).

Tämän mobiilisovelluksen suunnittelutyökalun avulla voit selvittää, miten voit suunnitella mobiilisovelluksen itse, ja hankkia matkan varrella muutamia uusia taitoja. Kuvittele palkkausmahdollisuuksia henkilölle, joka voi todistaa kykynsä sekä sovelluksen suunnittelussa että kehittämisessä!

Mitä vinkkejä tai työkaluja lisäisit tähän luetteloon siitä, miten suunnitella mobiilisovellus maksamatta senttiäkään? Kuulisimme mielellämme ajatuksiasi! Twiittaa näkemyksesi osoitteeseen @icons8, niin jaamme suosikkimme.

Tekijästä
Maddy Osman rakastaa WordPressiä ja kirjoittamista. Kun hän ei ole kiireinen auttaessaan WordCamp Denverin järjestämisessä, hän jakaa parhaita sisältömarkkinointi-/SEO-vinkkejään blogissaan www.the-blogsmith.com. Pysy ajan tasalla hänen uusimmista artikkeleistaan eri puolilla verkkoa Twitterissä: MaddyOsman.

.