Íme a helyzet: fejlesztő vagy, és minden szükséges eszközzel rendelkezel egy csodálatos alkalmazás kódolásához. De a dizájn tekintetében egy kicsit elakadtál. Az olyan iparági szabványos tervezőeszközök, mint az Adobe Photoshop elsajátítása nélkül hogyan tervezz olyan mobilalkalmazást, amely tükrözi a belső zsenialitásodat? Hogyan készítsen egy olyan alkalmazást, amely vizuálisan lenyűgöző és a felhasználók számára könnyen navigálható?

Ne aggódjon, van egy jó hír. Lehet, hogy nincs sok (vagy egyáltalán nincs) tapasztalata UX/dizájn terén, de nem feltétlenül van rá szüksége ahhoz, hogy vizuálisan lenyűgöző végleges projektet hozzon létre. Ezek a megoldások segítenek abban, hogyan tervezzünk mobilalkalmazást – mindegyik teljesíti ezt az ígéretet anélkül, hogy egy fillért is fizetned kellene.

How to Design a Mobile App

A Wireframing magában foglalja egy csupasz minimális termék létrehozását, amely lényegében az alkalmazásod tervezésének vázát jelenti. Ha az alkalmazásodat egy startuphoz hasonlítanád, akkor ezt a tervezési szakaszt a minimálisan életképes terméknek nevezhetnéd (ezt a fogalmat a The Lean Startup című könyv tette népszerűvé).

A Wireframing alapvető fontosságú szakasz, amikor végigmész a mobilalkalmazás tervezésének folyamatán, mert lehetővé teszi, hogy a szerkezetre a végső tervezési elemektől elkülönítve gondolj. Azt is lehetővé teszi, hogy hatékonyan közvetítse koncepcióját az érintett feleknek – munkatársaknak, tervezőknek vagy befektetőknek – anélkül, hogy Önnek személyesen bármilyen tervezési tapasztalatra lenne szüksége ahhoz, hogy pontosan kifejezze ezeket az elképzeléseket.

A következő eszközök hasznosak lehetnek a mobilalkalmazás tervezésének e fontos, alapvető lépése során.

Toll és papír

Aki tényleg nem akar egy fillért sem költeni, annak a jó öreg, megbízható toll és papír a megfelelő eszköz, hogy felvázolja a kezdeti alkalmazásötleteit a tervezés vázlataként. Bár egyesek jobban szeretnek közvetlenül a Photoshophoz vagy egy prototípustervező eszközhöz nyúlni, ez a módszer ideális lehet az ötletek gyors rögzítésére, amint azok felmerülnek. További bónusz, hogy nincs szükség semmilyen speciális képzésre vagy az eszközök elsajátítására ahhoz, hogy a legtöbbet hozza ki ebből a drótvázlatkészítési módszerből.

Android és/vagy iOS vázlatpapír

Azok számára, akik kitalálják, hogyan tervezzenek mobilalkalmazást, létezik egy speciális drótvázlatkészítő eszköz, amely kifejezetten az Ön számára készült. A kedvező árú, ingyenes, pontrácsos papírokat tölthetsz le, amelyekre iPhone-ok és iPadek vannak nyomtatva. Ez az ideális tervezési megoldás azoknak a fejlesztőknek, akiknek jobb látványra van szükségük, mint amit a toll és a papír nyújtani tud. Ez az iOS vázlatpapír ideális a storyboardinghoz is, vagy annak különböző állapotainak bemutatásához, hogyan fog kinézni az alkalmazásod használat közben.

Ez az iOS vázlatpapír tartalmazza a fent említett iOS-eszközök összes alapértelmezett UI-elemének rácsvonalait. Ennek a vázlatpapírnak az androidos változatához a papírra 8 telefonmodell van nyomtatva. Az iOS-papírral ellentétben (amely pontrácsot tartalmaz) azonban ezen egyáltalán nincsenek vonalak.

MockFlow

Ha egy kicsit technikásabb eszközt keres a mobilalkalmazás drótvázlatának elkészítéséhez, fontolja meg a MockFlow-hoz hasonlót. A Mockflow egy online drótvázlatkészítő megoldás, amely rugalmasan kezel bármilyen típusú tervezési projektet – legyen az mobil vagy webes alkalmazás (vagy valami egészen más). Van egy ingyenes alapverzió, amely egyszerre egy projekten, legfeljebb 1 GB tárhelyen és két csapattaggal dolgozhat. További funkciókat (több projektet, tárhelyet és csapattagot) akkor szabadíthat fel, ha fizetős csomagra vált, amely 14 $/hónapnál kezdődik.

A WireframeApp egy másik, a MockFlow-hoz hasonló, webes alkalmazáson alapuló drótvázlatkészítési lehetőség. Minden tervezet fizetős, de gyakran találhat megfizethető élettartamra szóló ajánlatot (összesen 49 $ alatt), ha feliratkozik az e-mail hírlevelükre vagy az AppSumo-ra.

Prototipizálás

A prototipizálás a következő lépés a mobilalkalmazás tervezéséhez, miután befejezte a drótvázlatkészítést. Ennek a következő lépésnek az a lényege, hogy létrehozza a tervezés egy működőképes változatát, hasonlóan ahhoz, ahogyan a végleges projektet szeretné, hogy kinézzen.

A következő eszközök megfelelnek annak, hogyan tervezzünk mobilalkalmazást anélkül, hogy egy fillért is fizetnénk, mivel mindegyik 100%-ban ingyenesen használható!

Marvel

A Marvel egy webes alkalmazás, amely iOS-re és Androidra is elérhető. Amellett, hogy bármilyen eszközön tervezhetsz, ami neked a legkényelmesebb, ez az eszköz megkönnyíti, hogy vázlataidat működőképes prototípusokká alakítsd. Amellett, hogy alapvető tervezési elemeket adhatsz hozzá, a terveket összekapcsolhatod, hogy áramlást hozz létre. A Marvel lehetővé teszi interaktív hotspotok és valósághű átmenetek létrehozását, és olyan műveleteket választhat, mint a lebegtetés, kattintás, csúsztatás, csípés és így tovább. A rengeteg harmadik féltől származó integrációnak köszönhetően a Marvel sok más, már használt eszközzel és a csapatában dolgozó munkatársakkal is jól együttműködik.

InVision

A Marvelhez hasonlóan az InVision egy ingyenes webes és mobil prototípuskészítő eszköz. Tökéletes prototípuskészítő eszköz csapatok számára, köszönhetően az egyszerű kommentálást és együttműködést lehetővé tevő funkcióknak. Ami megkülönbözteti sok hasonló típusú eszköztől, az a verziókezelő funkciója, amely lehetővé teszi, hogy szükség esetén visszaállítsa a módosításokat egy korábbi verzióra.

AzInVisiont olyan innovatív vállalatok használják, mint az Adobe, a Zappos, az AT&T, a Dell és a Sony, valamint olyan gyorsan növekvő startupok, mint a Prezi, a Soundcloud és az Evernote. Az InVision használata nem garantálja az ő sikerüket, de nem tagadhatja le a társulás előnyeit!

Axure

Hogy teljessé tegye a lehetőségeit, hogyan tervezzen mobilalkalmazást anélkül, hogy egy fillért is fizetne, itt egy lehetőség, amely fizetős, ha hosszú távon használja, de teljesen ingyenesen használható a 30 napos próbaidőszak alatt. Az Axure lehetővé teszi az egyszerű alkalmazás-prototipizálást a rendkívül funkcionális terveknek köszönhetően (hasonlóan a Marvelen látható átmenetekhez). A cikkben szereplő többi lehetőséghez hasonlóan ez az eszköz is funkcionalitást biztosít a könnyű csoportos együttműködéshez.

Proto.io

A Proto.io olyan eszközként hirdeti magát, amely segít “valóságosnak tűnő prototípusok” létrehozásában. Egy mobilalkalmazás-fejlesztő számára, aki valósághű és funkcionális prototípusokat szeretne létrehozni, ez zene lehet a fülének. Több UI-könyvtárral, 3rd party integrációkkal (olyan partnerekkel, mint a Dropbox) és még felhasználói teszteléssel is ellátják a felhasználókat, hogy a felhasználói élmény zökkenőmentes legyen az induláskor. Az ingyenes próbaverzió 15 napos hozzáférést biztosít korlátozott funkciókhoz való élethosszig tartó hozzáféréssel, vagy lehetőség van egy teljes funkcionalitású, több projektet és funkciót tartalmazó fiókra való frissítésre, 24 $/hónaptól kezdődően.

Ha még nem találta meg a tökéletes drótváz- vagy prototípuskészítő eszközt, a Developer Drive megoszt néhány további általános lehetőséget, amit érdemes megfontolni.

Naná, ha ez az érdeklődésének és képességeinek a határa, amikor az alkalmazás tervezéséről van szó, akkor fizetnie kell valakinek, aki a csupasz drótvázát vagy prototípusát a következő szintre emeli. De ha egy alaptervvel érkezel, az jó módja lehet annak, hogy időt és pénzt takaríts meg előre. Minél jobban tudja kommunikálni az elképzelését egy tervező felé, annál könnyebb lesz azt megvalósítani, és annál kevesebb pénzt pazarol el olyan tervezési verziókra, amelyek nem felelnek meg az elképzeléseinek.

Vizuális tervezés

Függetlenül attól, hogy útmutatást keres, hogyan tervezzen alkalmazást iPhone-ra, vagy hogyan tervezzen Android-alkalmazást, ezek az ingyenes eszközök segíthetnek abban, hogy mindkét mobil operációs rendszerhez tökéletes tervezést találjon.

Néha egy kis inspiráció segíthet feloldani a kreatív blokkot, és ha elmerülsz egy tervezési útmutatóban, az segíthet kitalálni, hogyan fejezd be a projektet teljesen egyedül.

Laudable Apps

A Laudable Apps egy abare-boness weboldal/alkalmazási galéria, amely kifejezetten a gyönyörű iOS 7 dizájnok bemutatására összpontosít. Nincs szöveg vagy más zavaró tényező, csak kommentár nélkül bemutatott tervek.

Ha már kifejezetten iOS-re gondolsz, érdemes időt szánnod arra is, hogy átnézd az Apple App Store szigorú beküldési irányelveit. Mivel “nincs kivétel” hozzáállásuk, ha ezeket az irányelveket szem előtt tartja, miközben meghatározza, hogyan tervezzen mobilalkalmazást, az segíthet abban, hogy a dolgok már az első alkalommal jól sikerüljenek, így hosszú távon időt és pénzt takaríthat meg.

Androidos minták

Akár kizárólag Android-eszközre tervez, akár két változatot készít mobilalkalmazásából (egyet az Apple App Store számára), érdemes megismerkednie az Android-eszközre való tervezés fortélyaival. Talán meglepő lesz, ha megtudja, hogy ez határozottan más (és lényegesen kevésbé merev), mint az iOS-alkalmazások tervezési szabványai. Hasznos lehet átolvasni a Google Play áruház benyújtási anyagait, például ezt az indítási ellenőrzőlistát.

Az Android Patterns-t használhatja az Android Design gyorstalpaló tanfolyamaként is. Ez a weboldal olyan Android interakciós mintákat tartalmazó könyvtár, amelyeket felhasználhat a tervezés során. Az interakciós minták alkalmazás-típusok szerint vannak elrendezve, és olyan műveleteket tartalmaznak, mint a navigáció, az értesítések és a képernyőinterakciók. Bár ezek a minták hasznosak lehetnek egy új mobilalkalmazás-tervező számára, útmutatónak kell tekinteni őket, de nem abszolút szabályoknak.

Ikonok

Ha a vizuális elemekhez némi dimenziót adsz, az segíthet abban, hogy a prototípusod a lehető legközelebb álljon a végső kimenethez. Az Icons8 több mint 53 800 ikonból álló, teljesen ingyenesen használható könyvtárat biztosít. Ezen a gigantikus ingyenes erőforráson kívül érdemes megnézni ezeket a felhasználói felület tervezésére szolgáló eszközöket is, amelyekkel különböző módon kereshet és használhat ikonokat, amikor meghatározza, hogyan tervezzen mobilalkalmazást.

Adobe Kuler

Az Adobe számos erőforrással rendelkezik azok számára, akik mobilalkalmazást szeretnének tervezni, a kezdőtől a haladó szintű tervezésig, de az egyik legegyszerűbb és leghasznosabb a színsémaeszközük. A Kuler segít a tervezőknek és a nem tervezőknek egyaránt kiválasztani a színsémákat a színkör és a különböző színszabályok alapján: monokróm, komplementer, hármas stb. színek. Színsémát hozhat létre egy képből, vagy inspirációért böngészhet mások színséma-beadványai között.

Mobile Design Inspiration

A CSSWinner szerint a Mobile Design Inspiration a legsűrűbb inspirációs galéria a mobilalkalmazások tervezéséhez, ahol kifejezetten iPhone, Android, Apple Watch és iPad alkalmazásokhoz elérhető és rendszerezett inspirációk állnak rendelkezésre. Hetente új terveket adnak hozzá, és a “Kreatív területek” szekciójuk további inspirációt nyújthat, ha egy alkalmazás logójának megtervezésén is dolgozol.

Tuts+

Ha valóban tudni akarod, hogyan tervezz mobilalkalmazást anélkül, hogy egy fillért is fizetnél, érdemes megfontolnod, hogy időt fektess az új készségek elsajátításába. Ha megtanulod, hogyan tervezd meg a saját alkalmazásodat ahelyett, hogy felbérelnél valakit, hogy megcsinálja, pénzt takaríthatsz meg ÉS értékes készségeket is szerezhetsz, amelyeket később pénzzé tehetsz.

Már több weboldal is kínál kiváló online tanfolyamokat a tervezés terén (a Treehouse egy fantasztikus fizetős forrás), de a Tuts+ sok mélyreható tudást kínál, teljesen ingyen, a minőség feláldozása nélkül. A hasznos cikkek mellett további hosszadalmas forrásokat is kínálnak a tervezésről, például e-könyveket.

Hogyan tervezz mobilalkalmazást anélkül, hogy egy fillért is fizetnél

A mobilalkalmazásod megtervezéséhez valóban nem kell felbérelned egy tervezőt, különösen a drótvázlatozás és a prototípusok készítésének korai szakaszában. Szánjon egy kis időt arra, hogy alapszinten eljuttassa az alkalmazást oda, ahová szeretné, és még ha végül fel is vesz egy tervezőt, a projekt nem lesz olyan mély (és drága).

Ezekkel a mobilalkalmazás-tervezési eszközökkel kitalálhatja, hogyan tervezzen mobilalkalmazást saját maga, és útközben elsajátíthat néhány új készséget. Képzelje el a felvételi lehetőségeket egy olyan személy számára, aki bizonyítani tudja képességeit egy alkalmazás tervezésében és fejlesztésében egyaránt!

Milyen tippeket vagy eszközöket adna hozzá ehhez a listához, hogyan tervezzen mobilalkalmazást anélkül, hogy egy fillért is fizetne? Szívesen meghallgatnánk a gondolatait! Tweeteld meglátásaidat a @icons8 címre, és mi megosztjuk kedvenceinket.

A szerzőről
Maddy Osman imádja a WordPress-t és az írást. Amikor éppen nem a WordCamp Denver szervezésében segít, a legjobb tartalommarketing/SEO tippjeit osztja meg blogján, a www.the-blogsmith.com címen. A Twitteren követheted a legújabb cikkeit a világhálón: MaddyOsman.

.