Designe smukke mobile apps fra bunden

Jeg begyndte at lære grafisk design, da jeg var 13 år. Jeg lærte at designe websteder fra onlinekurser og plejede at lege med Photoshop og Affinity Designer hele dagen. Denne oplevelse lærte mig, hvordan man tænker som en designer.

Jeg har designet og udviklet apps i næsten et år nu. Jeg deltog i et program på MIT, hvor jeg arbejdede med et team for at udvikle Universeaty. For to måneder siden begyndte jeg at arbejde på en ny app, Crypto Price Tracker, som jeg lancerede for nylig den 28. januar.

I dette indlæg deler jeg den trin-for-trin designproces, jeg følger, med eksempler på den app, jeg arbejdede på. Dette skal hjælpe enhver, der ønsker at lære eller forbedre deres digitale designfærdigheder. Design handler ikke kun om at vide, hvordan man bruger design-software, og dette indlæg lærer ikke, hvordan man bruger det. Der er hundreder af god kvalitet tutorials online at lære. Design handler også om at forstå dit produkt indefra og ud, dets funktioner og funktionalitet og designe samtidig med at slutbrugeren tænker på. Det er det, dette indlæg skal lære.

Designproces:

  1. Opret et bruger-flowdiagram til hver skærm.
  2. Opret / tegn wireframes.
  3. Vælg designmønstre og farvepaletter.
  4. Opret mock-ups.
  5. Opret en animeret app-prototype og bede folk om at teste den og give feedback.
  6. Giv endelige touch-ups til mock-ups for at få de endelige skærme klar til at begynde at kode.

Lad os begynde!

Bruger-flowdiagram

Det første trin er at finde ud af de funktioner, du ønsker i din app. Når du har fået dine ideer, skal du designe et bruger-flowdiagram. Et bruger-flow-diagram er en meget højt niveau repræsentation af en brugers rejse gennem din app / dit websted.

Normalt består et brugerflowdiagram af 3 typer former.

  • Rektangler bruges til at repræsentere skærme.
  • Diamanter bruges til at repræsentere beslutninger (for eksempel at trykke på login-knappen, skubbe til venstre, zoome ind).
  • Pile forbinder skærme og beslutninger sammen.

Bruger-flowdiagrammer er super nyttige, fordi de giver en god logisk idé om, hvordan appen fungerer.

Her er et flow-diagram, som jeg tegnet, da jeg begyndte at arbejde på designet til min app.

Bruger-flowdiagram til hovedgrænsefladen.

wireframes

Når du har afsluttet bruger-flowdiagrammerne for hver skærm og designet brugerrejser, begynder du at arbejde med wireframing af alle skærmbilleder. Trådrammer er i det væsentlige repræsentationer for lav troværdighed af, hvordan din app ser ud. I det væsentlige en skitse eller en oversigt over, hvor billeder, etiketter, knapper og ting skal gå, med deres layout og placering. En grov skitse af, hvordan din app fungerer.

Jeg bruger trykte skabeloner fra UI-stencils til at tegne wireframes. Det sparer tid og giver et pænt lærred at tegne på og lave noter.

Her er et eksempel wireframe.

Trådramme til hovedgrænsefladen.

Når du har skitseret wireframes, kan du bruge en app kaldet Pop og tage et billede af alle dine tegninger ved hjælp af appen og have en prototype ved at knytte alle skærmbilleder op gennem knapper.

Designmønstre og farvepaletter

Dette er min yndlingsdel. Det er som vindues-shopping. Masser af designmønstre og farvepaletter at vælge imellem. Jeg går rundt i at vælge dem, jeg kan lide, og eksperimentere med dem.

De bedste platforme til at finde designmønstre er Mobile Patterns og Pttrns. Og for at finde gode farvepaletter, skal du gå til Color Hunt.

Modeller

Dette er, når du endelig går videre til at bruge design-software. En mock-up i designforstand er en højtidelighedsrepræsentation af dit design. Det er næsten som om du kom ind i denne app i fremtiden, og du tog nogle skærmbilleder fra den. Det skal se realistisk ud og stort set ligesom den rigtige ting.

Der er design-software og værktøjer til oprettelse af mock-ups. Jeg bruger Affinity designer. Det mest almindeligt anvendte værktøj til iOS-design er Sketch.

Her er et eksempel på nogle af de tidlige design af min app.

Bringer blyanttegningen til pixels!

Jeg eksperimenterede mere med forskellige farvepaletter.

Jeg delte de oprindelige mockups med mine venner for deres feedback. Mange mennesker syntes at kunne lide guldgradienten og det sorte skema.

Vær villig til at tage feedback og eksperimentere med nye forslag! Du finder fantastiske idéer, der kommer fra dine brugere, når du taler med dem, ikke når du febrilsk ruller gennem Dribbble eller Behance.

Så jeg redesignede mock-up og fjernede baggrundsgraferne, fordi generering af dem var en teknisk tidskrævende proces, og de reducerede læsbarheden. Sådan så den redesignede mock-up ud.

Guldgradient med sort ser overraskende godt ud!

Jeg var temmelig tilfreds med farveskemaet, ikoner på fanebjælken og det samlede layout. Jeg gik videre og designet resten af ​​skærmene efter de samme designretningslinjer. Det var en lang, men helt sikkert sjov proces!

Når alle mine skærme var klar, satte jeg en prototype i Adobe XD og bad et par venner om at eksperimentere og give feedback.

Efter sidste berøring og sådan er det, hvad mit endelige design ser ud.

Hovedgrænsefladen!

Efter at alle skærmbilleder var afsluttet, importerede jeg dem til Xcode og begyndte at kode appen.

Det er det! Jeg håber, at dette indlæg vil hjælpe dig med at komme i gang med appdesign eller hjælpe dig med at blive en bedre designer. Og hvis du kan lide min app, kan du downloade den her.

Jeg afslutter indlægget med et af mine yndlingscitater om design.

”Design er ikke kun, hvordan det ser ud og føles. Design er sådan det fungerer ”
-Steve Jobs