Iată care este situația: ești un dezvoltator și ai toate instrumentele necesare pentru a codifica o aplicație uimitoare. Dar ești un pic blocat în ceea ce privește designul. Fără să stăpânești instrumentele de design standard din industrie, cum ar fi Adobe Photoshop, cum poți concepe o aplicație mobilă care să reflecte geniul tău interior? Cum faceți o aplicație care să fie atât uimitoare din punct de vedere vizual, cât și ușor de navigat pentru utilizatori?

Nu vă faceți griji, există vești bune. S-ar putea să nu aveți prea multă (sau deloc) experiență cu UX/design, dar nu aveți neapărat nevoie de ea pentru a crea un proiect final uimitor din punct de vedere vizual. Aceste soluții vă vor ajuta în procesul cum să proiectați o aplicație mobilă – fiecare dintre ele îndeplinind această promisiune fără a vă cere să plătiți vreun ban.

Cum să proiectați o aplicație mobilă

Wireframing-ul implică crearea unui produs minim brut care reprezintă, în esență, scheletul pentru designul aplicației dumneavoastră. Dacă ar fi să vă comparați aplicația cu un startup, v-ați putea referi la această etapă de proiectare ca fiind produsul minim viabil (un concept popularizat de cartea The Lean Startup).

Wireframing este o etapă esențială atunci când parcurgeți procesul de proiectare a unei aplicații mobile, deoarece vă permite să vă gândiți la structură ca fiind separată de elementele finale de proiectare. De asemenea, face posibilă transmiterea eficientă a conceptului dvs. către orice părți relevante – colaboratori, designeri sau investitori – fără ca dvs. personal să aveți nevoie de experiență în design pentru a exprima cu acuratețe aceste idei.

Următoarele instrumente vă pot fi de ajutor în timpul acestei etape fundamentale importante despre cum să proiectați o aplicație mobilă.

Cartograf și hârtie

Pentru cei care chiar nu vor să cheltuiască un ban, bunul și vechiul și fiabilul creion și hârtie este calea de urmat pentru a vă schița ideile inițiale ale aplicației ca o schiță pentru designul dumneavoastră. În timp ce unii preferă să treacă direct la Photoshop sau la un instrument de prototipare, această metodă poate fi ideală pentru a capta rapid ideile pe măsură ce apar. Ca un bonus suplimentar, nu aveți nevoie de o pregătire specială sau de stăpânirea instrumentelor pentru a obține cele mai bune rezultate din această metodă de wireframing.

Android și/sau iOS sketch paper

Pentru cei care își dau seama cum să proiecteze o aplicație mobilă, există un instrument specializat de wireframing care vă are în vedere în mod special. Pentru un preț rezonabil de gratuit, puteți descărca hârtii cu puncte-grilă pe care sunt imprimate iPhone-uri și iPad-uri. Aceasta este soluția de proiectare ideală pentru dezvoltatorii care au nevoie de o imagine mai bună decât cea pe care o poate oferi creionul și hârtia. Această hârtie de schițe pentru iOS este, de asemenea, ideală pentru storyboarding sau pentru a arăta diferitele stări ale modului în care va arăta aplicația dvs. în utilizare.

Această hârtie de schițe pentru iOS include linii de grilă pentru toate elementele implicite ale interfeței de utilizare de pe dispozitivele iOS menționate mai sus. Pentru versiunea Android a acestei hârtii de schiță, hârtia are imprimate pe ea 8 modele de telefoane. Cu toate acestea, spre deosebire de hârtia pentru iOS (care are o grilă cu puncte), aceasta nu are deloc linii.

MockFlow

Dacă sunteți în căutarea unui instrument ceva mai tehnic pentru a realiza wireframing-ul aplicațiilor mobile, luați în considerare ceva precum MockFlow. Mockflow este o soluție de wireframing online, cu flexibilitatea de a gestiona orice tip de proiect de design – indiferent dacă este vorba de o aplicație mobilă sau web (sau ceva cu totul altceva). Există o versiune gratuită de bază disponibilă, care vă permite să lucrați la un singur proiect pe rând, până la 1 GB de stocare și doi membri ai echipei. Puteți debloca funcționalități suplimentare (mai multe proiecte, spațiu de stocare și membri ai echipei) atunci când treceți la un plan plătit, care începe de la 14 dolari/lună.

WireframeApp este o altă opțiune de wireframing bazată pe aplicații web, similară cu MockFlow. Toate planurile sunt plătite, dar puteți găsi adesea o ofertă pe viață la prețuri accesibile (sub 49 de dolari în total) înscriindu-vă la buletinul lor informativ prin e-mail sau la AppSumo.

Prototiparea

Prototiparea este următorul pas pentru modul de proiectare a unei aplicații mobile după ce ați terminat wireframing-ul. Scopul acestei etape următoare este de a crea o versiune fezabilă a designului, similară cu ceea ce doriți să arate proiectul final.

Următoarele instrumente se potrivesc pentru cum să proiectezi o aplicație mobilă fără să plătești un ban, deoarece toate sunt 100% gratuite de utilizat!

Marvel

Marvel este o aplicație web care este disponibilă și pentru iOS și Android. Pe lângă posibilitatea de a proiecta pe orice dispozitiv cu care vă simțiți cel mai confortabil, acest instrument facilitează transformarea schițelor dvs. în prototipuri viabile. Pe lângă posibilitatea de a adăuga elemente de design de bază, puteți, de asemenea, să legați desenele între ele pentru a crea un flux. Marvel vă permite să creați hotspot-uri interactive și tranziții realiste și puteți alege acțiuni cum ar fi trecerea cu privirea, clic, glisarea, ciupirea și multe altele. Cu o mulțime de integrări de la terți, Marvel se potrivește cu multe dintre celelalte instrumente pe care le folosiți deja și cu colaboratorii din echipa dumneavoastră.

InVision

InVision este similar cu Marvel, în sensul că este un instrument gratuit de prototipare web și mobilă. Este un instrument de prototipare perfect pentru echipe, datorită funcționalității care permite comentarea și colaborarea simplă. Ceea ce îl diferențiază de multe tipuri de instrumente similare este funcția de control al versiunilor, care vă permite să reveniți la o versiune anterioară a modificărilor, dacă este necesar.

InVision este utilizat de companii inovatoare precum Adobe, Zappos, AT&T, Dell și Sony, precum și de startup-uri cu creștere rapidă precum Prezi, Soundcloud și Evernote. Folosirea InVision nu vă garantează succesul acestora, dar nu puteți nega beneficiile asocierii!

Axure

Pentru a vă completa opțiunile pentru cum să proiectați o aplicație mobilă fără să plătiți un ban, iată o opțiune care este plătită dacă este folosită pe termen lung, dar complet gratuită în timpul unei perioade de probă de 30 de zile. Axure permite prototiparea facilă a aplicațiilor grație unor modele foarte funcționale (asemănătoare cu tranzițiile de pe Marvel). Ca și celelalte opțiuni din acest articol, acest instrument oferă funcționalitate pentru o colaborare ușoară în echipă.

Proto.io

Proto.io se prezintă ca un instrument care vă poate ajuta să creați „Prototipuri care se simt reale”. Pentru un dezvoltator de aplicații mobile care caută să creeze un prototip realist și funcțional, acest lucru poate fi muzică pentru urechile dumneavoastră. Aceștia pun la dispoziția utilizatorilor mai multe biblioteci UI, integrări cu terțe părți (cu parteneri precum Dropbox) și chiar teste de utilizare pentru a se asigura că experiența utilizatorului este perfectă la lansare. O încercare gratuită vă permite 15 zile de acces, cu acces pe viață la caracteristici limitate, sau opțiunea de a face upgrade la un cont complet funcțional cu mai multe proiecte și caracteristici, începând de la 24 de dolari/lună.

Dacă nu ați găsit încă instrumentul perfect de wireframing sau prototipare, Developer Drive împărtășește câteva opțiuni generice suplimentare pe care să le luați în considerare.

Desigur, dacă aceasta este măsura interesului și abilității dvs. atunci când vine vorba de proiectarea aplicațiilor, va trebui să plătiți pe cineva pentru a vă duce wireframe-ul sau prototipul gol-goluț la nivelul următor. Dar a veni cu un plan de bază poate fi o modalitate bună de a economisi timp și bani la început. Cu cât reușiți să comunicați mai bine viziunea dumneavoastră unui designer, cu atât mai ușor va fi să o transformați în realitate și cu atât mai puțini bani veți irosi pe versiuni de design care nu se aliniază cu viziunea dumneavoastră.

Design vizual

Dacă sunteți în căutarea de îndrumări despre cum să proiectați o aplicație pentru iPhone sau cum să proiectați o aplicație Android, aceste instrumente gratuite vă pot ajuta să vă faceți o idee despre designul perfect pentru oricare dintre sistemele de operare mobile.

Câteodată, puțină inspirație poate ajuta la înlăturarea unui blocaj creativ, iar faptul de a vă pierde într-un tutorial de proiectare vă poate ajuta să vă dați seama cum să terminați proiectul complet pe cont propriu.

Laudable Apps

Laudable Apps este un site web/galerie de aplicații abare-boness care se concentrează în mod special pe prezentarea de modele frumoase pentru iOS 7. Nu există text sau alte elemente de distragere a atenției, doar modele prezentate fără comentarii.

În timp ce vă gândiți în mod special la iOS, poate doriți, de asemenea, să vă faceți timp pentru a revizui liniile directoare stricte de prezentare ale Apple App Store. Având în vedere că au o atitudine „fără excepții”, dacă țineți cont de aceste linii directoare în timp ce stabiliți cum să concepeți o aplicație mobilă, vă puteți ajuta să faceți lucrurile bine de prima dată, economisind timp și bani pe termen lung.

Android Patterns

Dacă proiectați exclusiv pentru un dispozitiv Android sau creați două versiuni ale aplicației dvs. mobile (cu una pentru Apple App Store), veți dori să vă familiarizați cu intrările și ieșirile de design pentru un dispozitiv Android. S-ar putea să vă surprindă să știți că acestea sunt categoric diferite (și semnificativ mai puțin rigide) decât standardele de proiectare a aplicațiilor iOS. Poate fi util să citiți materialele de prezentare ale magazinului Google Play, cum ar fi această listă de verificare a lansării.

De asemenea, puteți folosi Android Patterns ca curs rapid de design Android. Acest site este o bibliotecă de modele de interacțiune Android pe care le puteți folosi atunci când vă creați designul. Modelele de interacțiune sunt aranjate în funcție de tipul de aplicație și includ acțiuni precum navigare, notificări și interacțiuni cu ecranul. În timp ce aceste modele pot fi utile pentru un nou designer de aplicații mobile, ele trebuie luate ca un ghid, dar nu ca reguli absolute.

Icoane

Adăugarea unor dimensiuni elementelor vizuale poate ajuta prototipul dvs. să arate cât mai aproape de rezultatul final. Icons8 oferă o bibliotecă de peste 53.800 de pictograme care pot fi utilizate complet gratuit. În plus față de această resursă gratuită gigantică, ar trebui să verificați și aceste instrumente de proiectare a interfeței cu utilizatorul pentru diferite modalități de căutare și utilizare a pictogramelor atunci când stabiliți cum să proiectați o aplicație mobilă.

Adobe Kuler

Adobe are o mulțime de resurse pentru cei care doresc să proiecteze o aplicație mobilă, de la un nivel începător până la un nivel avansat de proiectare, dar una dintre cele mai simple și mai utile este instrumentul lor de schemă de culori. Kuler ajută atât designerii, cât și pe cei care nu sunt designeri, să aleagă scheme de culori pe baza roții culorilor și a diferitelor reguli de culoare: monocromatică, complementară, triadă etc. Puteți crea o schemă de culori pornind de la o imagine sau puteți răsfoi propunerile de scheme de culori ale altora pentru inspirație.

Mobile Design Inspiration

Potrivit CSSWinner, Mobile Design Inspiration este cea mai densă galerie de inspirație pentru designul aplicațiilor mobile, cu inspirații de design de aplicații disponibile pentru și organizate în mod specific pentru iPhone, Android, Apple Watch și iPad. Noi modele sunt adăugate săptămânal, iar secțiunea lor „Domenii de creație” poate oferi inspirație suplimentară dacă lucrați, de asemenea, la proiectarea unui logo de aplicație.

Tuts+

Dacă doriți cu adevărat să știți cum să proiectați o aplicație mobilă fără să plătiți un ban, ar trebui să luați în considerare investirea timpului în dobândirea de noi abilități. Învățând cum să vă proiectați propria aplicație în loc să angajați pe cineva să o facă, puteți economisi bani ȘI, de asemenea, puteți câștiga abilități valoroase pe care le puteți monetiza mai târziu.

Există mai multe site-uri web care oferă cursuri online excelente de design (Treehouse este o resursă plătită minunată), dar Tuts+ oferă o mulțime de cunoștințe aprofundate, complet gratuit, fără a sacrifica calitatea. În plus față de articolele utile, au și resurse suplimentare de lungă durată privind designul, cum ar fi cărțile electronice.

Cum să proiectezi o aplicație mobilă fără să plătești un ban

Nu trebuie neapărat să angajezi un designer pentru a-ți proiecta aplicația mobilă, mai ales în etapele timpurii de wireframing și prototipare. Luați-vă ceva timp pentru a vă duce aplicația acolo unde doriți să fie la un nivel de bază, apoi, chiar dacă ajungeți să angajați un designer, proiectul nu va fi la fel de profund (și de costisitor).

Cu aceste instrumente de proiectare a aplicațiilor mobile, vă puteți da seama cum să proiectați o aplicație mobilă pe cont propriu și să dobândiți câteva abilități noi pe parcurs. Imaginați-vă oportunitățile de angajare pentru o persoană care își poate dovedi abilitățile atât în proiectarea, cât și în dezvoltarea unei aplicații!

Ce sfaturi sau instrumente ați adăuga la această listă despre cum să proiectați o aplicație mobilă fără să plătiți un ban? Ne-ar plăcea să vă auzim părerile! Transmiteți pe Twitter ideile dvs. la @icons8, iar noi vom împărtăși favoritele noastre.

Despre autor
Maddy Osman iubește WordPress și scrierea. Când nu este ocupată să ajute la organizarea WordCamp Denver, ea împărtășește cele mai bune sfaturi de marketing de conținut/SEO pe blogul ei, www.the-blogsmith.com. Țineți pasul cu cele mai recente articole ale ei de pe web pe Twitter: MaddyOsman.