de Harshita Arora

Proiectarea aplicațiilor mobile frumoase de la zero

Am început să învăț design grafic la 13 ani. Am învățat să proiectez site-uri web din cursuri online și mă jucam toată ziua cu Photoshop și Affinity Designer. Această experiență m-a învățat cum să gândesc ca un designer.

Proiectez și dezvolt aplicații de aproape un an acum. Am participat la un program la MIT unde am lucrat cu o echipă pentru a mă dezvolta Universeaty. Acum două luni, am început să lucrez la o nouă aplicație, Urmărirea prețurilor cripto, pe care l-am lansat recent pe 28 ianuarie.

În această postare, voi împărtăși procesul de proiectare pas cu pas pe care îl urmez împreună cu exemple de aplicații la care am lucrat. Acest lucru ar trebui să ajute pe oricine dorește să învețe sau să își îmbunătățească abilitățile de proiectare digitală. Proiectarea nu înseamnă doar să știi cum să folosești software de proiectare, iar acest post nu te va învăța cum să îl folosești. Există sute de tutoriale de bună calitate online de învățat. Proiectarea înseamnă, de asemenea, înțelegerea produsului dvs. din afară, caracteristicile și funcționalitatea acestuia și proiectarea, păstrând în același timp utilizatorul final în minte. Asta este menit să învețe acest post.

Proces de design:

  1. Creați o diagramă de flux utilizator pentru fiecare ecran.
  2. Creați / desenați fireframes.
  3. Alegeți modele de design și palete de culori.
  4. Creați machete.
  5. Creați un prototip de aplicație animat și cereți oamenilor să-l testeze și să ofere feedback.
  6. Oferiți retușuri finale machetelor pentru ca ecranele finale să fie gata să înceapă codarea.

Să începem!

Diagrama fluxului utilizatorului

Primul pas este să descoperiți funcțiile pe care le doriți în aplicația dvs. Odată ce ați primit ideile dvs., proiectați o diagramă a fluxului utilizatorilor. O diagramă a fluxului utilizatorului este o reprezentare la nivel foarte înalt a călătoriei unui utilizator prin aplicația / site-ul dvs. web.

De obicei, o diagramă a fluxului utilizatorului este alcătuită din 3 tipuri de forme.

  • Dreptunghiurile sunt folosite pentru a reprezenta ecranele.
  • Diamantele sunt folosite pentru a reprezenta deciziile (de exemplu, atingând butonul de autentificare, glisând spre stânga, mărind).
  • Săgețile conectează ecrane și decizii împreună.

Diagramele fluxului utilizatorilor sunt foarte utile, deoarece oferă o bună idee logică a modului în care ar funcționa aplicația.

Iată o diagramă a fluxului utilizatorilor pe care am desenat-o când am început să lucrez la proiectarea aplicației mele.

Proiectarea aplicatiilor mobile frumoase de la zero
Diagrama fluxului utilizatorului pentru interfața principală.

Sarme

Odată ce ați finalizat diagramele de flux de utilizator pentru fiecare ecran și ați proiectat călătoriile utilizatorilor, veți începe să lucrați la încadrarea pe fir a tuturor ecranelor. Cadrele de rețea sunt în esență reprezentări de fidelitate redusă a modului în care va arăta aplicația dvs. În esență, o schiță sau o schiță a locului în care vor merge imaginile, etichetele, butoanele și alte lucruri, cu aspectul și poziționarea lor. O schiță simplă a modului în care va funcționa aplicația dvs.

Folosesc șabloane tipărite de la Șabloane UI pentru desenarea wireframe-urilor. Economisește timp și oferă o pânză frumoasă pe care să desenezi și să notezi.

Iată un exemplu wireframe.

1611597785 642 Proiectarea aplicatiilor mobile frumoase de la zero
Wireframe pentru interfața principală.

După schițarea wireframe-urilor, puteți utiliza o aplicație numită Pop și faceți o poză cu toate desenele dvs. folosind aplicația și aveți un prototip conectând toate ecranele prin butoane.

Modele de design și palete de culori

Aceasta este partea mea preferată. E ca la cumpărături pe vitrină. O mulțime de modele de design și palete de culori pentru a alege. Mă duc să-i aleg pe cei care îmi plac și să experimentez cu ei.

Cele mai bune platforme pentru a găsi modele de design sunt Modele mobile și Pttrns. Și pentru a găsi palete de culori bune, accesați Vânătoare de culoare.

Mașini

Acesta este momentul în care treceți în cele din urmă la utilizarea software-ului de proiectare. O machetă în sensul designului reprezintă o reprezentare de înaltă fidelitate a designului dvs. Este aproape ca și cum ai fi intrat în această aplicație în viitor și ai luat câteva capturi de ecran din ea. Ar trebui să arate realist și să seamănă destul de mult cu adevăratul lucru.

Există programe și instrumente de proiectare pentru crearea de machete. Folosesc designerul Affinity. Cel mai frecvent instrument utilizat pentru proiectarea iOS este Schiță.

Iată un exemplu al unora dintre primele modele ale aplicației mele.

Proiectarea aplicatiilor mobile frumoase de la zero
Aduceți desenul creion la pixeli!

Am experimentat mai mult cu diverse palete de culori.

1611597786 17 Proiectarea aplicatiilor mobile frumoase de la zero

Am împărtășit mașinile inițiale cu prietenii mei pentru feedback-ul lor. O mulțime de oameni părea să le placă gradientul de aur și schema neagră.

Fii dispus să primești feedback și să experimentezi noi sugestii! Veți găsi idei uimitoare care vin de la utilizatorii dvs. atunci când vorbiți cu ei, nu când derulați frenetic prin Dribbble sau Behance.

Așa că am reproiectat macheta și am eliminat graficele de fundal, deoarece generarea lor a fost un proces tehnic care consumă mult timp și au redus lizibilitatea. Așa arăta macheta reproiectată.

1611597786 894 Proiectarea aplicatiilor mobile frumoase de la zero
Gradientul de aur cu negru arată surprinzător de bine!

Am fost destul de mulțumit de schema de culori, de pictogramele de pe bara de file și de aspectul general. Am continuat și am proiectat restul ecranelor urmând aceleași linii directoare de proiectare. A fost un proces lung, dar sigur distractiv!

Odată ce toate ecranele mele au fost gata, am pus împreună un prototip în Adobe XD și am rugat câțiva prieteni să experimenteze și să ofere feedback.

După ultimele atingeri și așa, așa arată designul meu final.

1611597786 355 Proiectarea aplicatiilor mobile frumoase de la zero
Interfața principală!

După finalizarea tuturor ecranelor, le-am importat în Xcode și am început să codez aplicația.

Asta e! Sper că această postare vă va ajuta să începeți cu proiectarea aplicațiilor sau să vă ajute să deveniți un designer mai bun. Și dacă îți place aplicația mea, o poți descărca aici.

Închei postarea cu una dintre citatele mele preferate despre design.

„Designul nu este doar ceea ce arată și simte. Proiectarea este cum funcționează ”
-Steve Jobs