Prototyping av en Mobility App enkelt i Sketch

Du står overfor utfordringen med å lage et attraktivt Prototyping for en Mobility-App. Dette handler ikke bare om design; det handler om å utforme brukeropplevelsen effektivt fra starten av, slik at den hjelper brukeren med å navigere intuitivt gjennom appen. I denne veiledningen vil du bli ført trinn for trinn gjennom utviklingsprosessen av en prototype i Sketch. La oss begynne denne spennende reisen inn i designverdenen!

Viktigste funn

• Prototyping er et avgjørende trinn i apputviklingen.
• I Sketch kan du starte med enkle former og design.
• En klar struktur og brukerveiledning er uunnværlig for suksessen til appen din.

Trinn-for-trinn-veiledning

Begynn med å lage grunnstrukturen til appen din i Sketch. Du kan bruke penselverktøyet til å tegne dine første designelementer. Bare gå til penselverktøyet eller trykk på «P»-tasten for å velge det.

Lag et rektangel som skal representere skjermen til appen din. Hold inne «Alt»-tasten mens du drar et rektangel med musen. Dette vil sørge for at rektangelet forblir proporsjonalt. Det ser allerede ganske bra ut.

Nå er det på tide å designe den første siden av appen. Begynn med den nederste fanebaren. Bruk igjen penselverktøyet og dra en rett linje mens du holder inne Shift-tasten for å sikre at du får en rett linje.

Etter at du har designet fanebaren, legg inn tre ikoner som representerer appens hovedfunksjoner. Med ALT-tasten kan du enkelt duplisere figurene mens du drar dem til rett sted.

Nå skal vi fokusere på den øverste navigasjonslinjen. Hold igjen ALT-tasten inne mens du drar et annet rektangulært område for navigasjonslinjen.

Chat-boblene er neste del av appen din som vi ønsker å designe. Bruk penselverktøyet til å tegne en chat-boble. Denne vil straks bli vist for brukeren som en velkomsthilsen. Legg til en kort tekst som henvender seg til brukeren, for eksempel «Hei og velkommen til Mobility App!»

For å sikre at det hele ser attraktivt ut, kan du kopiere og tilpasse boblene. Velg boblene og dra dem nedover med ALT-tasten for å legge til en annen velkomsttekst, som «Start med din første Mobility-økt».

Neste steg er å sette inn video-knappen, som lar brukerne spille av leksjonene sine. Tegn en rund knapp med penselverktøyet og kombiner den med en trekant for å gjøre fremstilling og funksjon tydelig.

Kopier nå alle viktige UI-elementer – som de øverste og nederste navigasjonsbalkene – til den neste siden for å sikre konsistens i designet. Du kan enkelt dra et skjermbilde med ALT-tasten for å duplisere elementene til den neste siden.

På denne nye skjermen du har laget, design valg alternativene for kursene. Her bør du lage en enkel oversikt over tilgjengelige kurs som brukeren kan velge.

I profilvisningen kan du lage plass til profilbildet, brukernavnet og antall fullførte kurs timer. Her er det viktig å presentere informasjonen klart og tydelig.

Designet av kurs- og leksjonsvalget til slutt, opprett oversikten for leksjonene og legg til en lukkeknapp slik at brukeren kan lukke valget når som helst.

Med dette er den grunnleggende prototypen for din Mobility App fullført. Du har nå et attraktivt design som klart strukturerer brukerledelsen og samtidig hjelper deg som designer med å visualisere appens visjon.

Oppsummering – Prototyping av en Mobility App i Sketch

I løpet av denne veiledningen har du lært trinn for trinn hvordan du prototyper en Mobility-app i Sketch. Fra den første ideen til de siste designelementene har du kunnet utvide kunnskapen din og skape et nyttig verktøy for videre utvikling av appen din.