Design af smukke mobilapps fra bunden

Jeg begyndte at lære grafisk design, da jeg var 13. Jeg lærte at designe hjemmesider fra onlinekurser og plejede at lege med Photoshop og Affinity Designer hele dagen. Denne erfaring lærte mig, hvordan jeg kunne tænke 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 trinvise designproces, jeg følger med eksempler på den app, jeg har arbejdet med. Dette skal hjælpe alle, der ønsker at lære eller forbedre deres digitale designfærdigheder. Design handler ikke kun om at vide, hvordan man bruger designsoftware, og dette indlæg lærer dig ikke, hvordan du bruger det. Der er hundredvis af tutorials af god kvalitet online at lære. Design handler også om at forstå dit produkt indefra og ud, dets funktioner og funktionalitet, og designe, mens man holder slutbrugeren i tankerne. Det er, hvad dette indlæg er beregnet til at undervise.

Designproces :

  1. Opret et brugerflowdiagram for hver skærm.
  2. Opret / tegn trådrammer.
  3. Vælg designmønstre og farvepaletter.
  4. Opret mock-ups.
  5. Opret en animeret app-prototype og bed folk om at teste den og give feedback.
  6. Giv mock-ups sidste touch ups for at have de sidste skærmbilleder klar til at begynde kodning.

Lad os begynde!

Bruger-flow-diagram

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 brugerflowdiagram. Et brugerflowdiagram er en meget høj repræsentation af en brugers rejse gennem din app / website.

Normalt består et brugerdiagram af 3 former for former.

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

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

Her er et brugerflowdiagram, jeg tegnede, da jeg begyndte at arbejde på designet af min app.

Wireframes

Når du har gennemført brugerflowdiagrammerne for hver skærm og designet brugerrejser, begynder du at arbejde på wireframning af alle skærmene. Wireframes er i det væsentlige low-fidelity-repræsentationer af, hvordan din app vil se ud. I det væsentlige en skitse eller en oversigt over, hvor billeder, etiketter, knapper og ting vil gå med deres layout og placering. En grov skitse af, hvordan din app fungerer.

Jeg bruger trykte skabeloner fra UI Stencils til at tegne trådrammerne. Det sparer tid og giver et dejligt lærred at tegne på og lave noter.

Her er et eksempel wireframe.

Efter at have tegnet trådrammerne 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 linke alle skærmene op gennem knapperne.

Design mønstre og farvepaletter

Dette er min yndlingsdel. Det er som at købe vinduer. Masser af designmønstre og farvepaletter at vælge imellem. Jeg går rundt og vælger dem, jeg kan lide, og eksperimenterer 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.

Mock-ups

Dette er, når du endelig går videre til brug af designsoftware. En mock-up i designmæssig forstand er en ægte repræsentation af dit design. Det er næsten som om du gik 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 designsoftware og værktøjer til oprettelse af mock-ups. Jeg bruger Affinity-designer. Det mest anvendte værktøj til iOS-design er Sketch.

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

Jeg eksperimenterede mere med forskellige farvepaletter.

Jeg delte de oprindelige modeller med mine venner for deres feedback. Mange mennesker syntes at kunne lide guldfarvet og sort skema.

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

Så jeg redesignede mock-up'en og fjernede baggrundsgrafene, fordi det var en teknisk tidskrævende proces at generere dem, og de reducerede læsbarheden. Sådan så den redesignede mock-up ud.

Jeg var ret tilfreds med farveskemaet, ikonerne på fanelinjen og det overordnede layout. Jeg gik videre og designede 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, sammensatte jeg en prototype i Adobe XD og bad et par venner om at eksperimentere og give feedback.

Efter sidste hånd og sådan er det, hvordan mit endelige design ser ud.

Når 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 hjælper dig med at komme i gang med app-design eller hjælper dig med at blive en bedre designer. Og hvis du kan lide min app, kan du downloade den her.

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

”Design er ikke kun, hvordan det ser ud og føles ud. Design er, hvordan det fungerer ”

-Steve Jobs