Designe vakre mobilapper fra bunnen av

Jeg begynte å lære grafisk design da jeg var 13. Jeg lærte å designe nettsteder fra nettkurs og pleide å leke med Photoshop og Affinity Designer hele dagen. Den opplevelsen lærte meg hvordan jeg skulle tenke som en designer.

Jeg har designet og utviklet apper i nesten et år nå. Jeg deltok på et program på MIT hvor jeg jobbet med et team for å utvikle Universeaty. For to måneder siden begynte jeg å jobbe med en ny app, Crypto Price Tracker, som jeg nylig lanserte 28. januar.

I dette innlegget vil jeg dele den trinnvise designprosessen jeg følger med eksempler på appen jeg jobbet med. Dette skal hjelpe alle som ønsker å lære eller forbedre sine digitale designferdigheter. Design handler ikke bare om å vite hvordan du bruker designprogramvare, og dette innlegget lærer deg ikke hvordan du bruker det. Det er hundrevis av opplæringsprogrammer av god kvalitet på nettet å lære. Design handler også om å forstå produktet ditt ut og inn, dets funksjoner og funksjonalitet, og designe mens du holder sluttbrukeren i tankene. Det er det dette innlegget er ment å lære.

Designprosess :

  1. Lag et brukerflytdiagram for hvert skjermbilde.
  2. Lag / tegne trådrammer.
  3. Velg designmønstre og fargepaletter.
  4. Lag mock-ups.
  5. Lag en animert app-prototype og be folk teste den og gi tilbakemelding.
  6. Gi mock-ups siste finesser for å ha de siste skjermbildene klare til å begynne kodingen.

La oss begynne!

Brukerflytdiagram

Det første trinnet er å finne ut funksjonene du vil ha i appen din. Når du har fått ideene dine, kan du designe et brukerflytdiagram. Et brukerflytdiagram er en veldig høy representasjon av brukerens reise gjennom appen / nettstedet ditt.

Vanligvis består et brukerdiagram av tre typer former.

  • Rektangler brukes til å representere skjermer.
  • Diamanter brukes til å representere avgjørelser (for eksempel å trykke på påloggingsknappen, sveipe til venstre, zoome inn).
  • Pilene kobler sammen skjermer og beslutninger sammen.

Brukerflytdiagrammer er veldig nyttige fordi de gir en god logisk ide om hvordan appen vil fungere.

Her er et brukerflytdiagram jeg tegnet da jeg begynte å jobbe med utformingen av appen min.

Wireframes

Når du har fullført brukerflytdiagrammene for hver skjerm og utformet brukerreiser, begynner du å jobbe med å wireframme alle skjermene. Wireframes er i det vesentlige lavprestasjonsrepresentasjoner for hvordan appen din vil se ut. I hovedsak en skisse eller en oversikt over hvor bilder, etiketter, knapper og ting vil gå, med layout og plassering. En grov skisse av hvordan appen din vil fungere.

Jeg bruker trykte maler fra UI Stencils for å tegne trådrammene. Det sparer tid og gir et fint lerret å tegne på og lage notater.

Her er et eksempel på trådramme.

Etter å ha tegnet trådrammene, kan du bruke en app som heter Pop og ta et bilde av alle tegningene dine ved hjelp av appen og ha en prototype ved å koble opp alle skjermene gjennom knappene.

Design mønstre og fargepaletter

Dette er min favorittdel. Det er som å handle i vinduer. Mange designmønstre og fargepaletter å velge mellom. Jeg går fram for å plukke de jeg liker og eksperimentere med dem.

De beste plattformene for å finne designmønstre er Mobile Patterns og Pttrns. Og for å finne gode fargepaletter, gå til Color Hunt.

Mock-ups

Dette er når du endelig går over til å bruke designprogramvare. En mock-up i designmessig forstand er en troverdig fremstilling av designet ditt. Det er nesten som om du gikk inn i denne appen i fremtiden, og du tok noen skjermbilder fra den. Det skal se realistisk ut og stort sett likt den virkelige tingen.

Det er designprogramvare og verktøy for å lage mock-ups. Jeg bruker Affinity designer. Det mest brukte verktøyet for iOS-design er Sketch.

Her er et eksempel på noen av de tidlige designene til appen min.

Jeg eksperimenterte mer med forskjellige fargepaletter.

Jeg delte de første modellene med vennene mine for tilbakemelding. Mange syntes å like gullgradienten og den svarte ordningen.

Vær villig til å ta tilbakemelding og eksperimentere med nye forslag! Du vil finne fantastiske ideer som kommer fra brukerne dine når du snakker med dem, ikke når du sprang raseri gjennom Dribbble eller Behance.

Så jeg redesignet mock-up og fjernet bakgrunnsgrafene fordi å generere dem var en teknisk tidkrevende prosess, og de reduserte lesbarheten. Slik så den redesignede modellen ut.

Jeg var ganske fornøyd med fargevalget, ikonene på fanelinjen og den generelle utformingen. Jeg fortsatte og designet resten av skjermene etter de samme retningslinjene for design. Det var en lang, men sikkert morsom prosess!

Når alle skjermene mine var klare, satte jeg sammen en prototype i Adobe XD og ba noen venner om å eksperimentere og gi tilbakemelding.

Etter siste grep og slikt, er det slik min endelige design ser ut.

Etter at alle skjermene var fullført, importerte jeg dem til Xcode og begynte å kode appen.

Det er det! Jeg håper dette innlegget vil hjelpe deg med å komme i gang med appdesign eller hjelpe deg med å bli en bedre designer. Og hvis du liker appen min, kan du laste den ned her.

Jeg avslutter innlegget med et av mine favoritt sitater om design.

“Design er ikke bare hvordan det ser ut og føles ut. Design er hvordan det fungerer ”

-Steve Jobs