Prototyping af en Mobility App nemt i Sketch

Du står over for udfordringen med at skabe et engagerende Prototyping til en Mobility-App. Dette handler ikke kun om design; det handler om effektivt at formgive brugeroplevelsen fra starten, så den hjælper brugeren med at navigere intuitivt gennem appen. I denne tutorial vil du blive guidet trin for trin gennem processen med at skabe en prototype i Sketch. Lad os begynde denne spændende rejse ind i designets verden!

Vigtigste indsigter

• Prototyping er et afgørende skridt i app-udviklingen.
• I Sketch kan du starte med enkle former og designs.
• En klar struktur og brugervenlighed er uundgåelige for succesen af din app.

Trin-for-trin-guide

Begynd med at oprette grundstrukturen for din app i Sketch. Du kan bruge penselværktøjet til at tegne dine første designelementer. Gå blot til penselværktøjet eller tryk på „P“-tasten for at vælge det.

Opret et rektangel, som skal repræsentere skærmen for din app. Hold „Alt“-tasten nede, mens du trækker et rektangel med musen. Dette sikrer, at rektanglet forbliver proportionalt. Det ser allerede ret godt ud.

Nu er det tid til at designe den første side af appen. Begynd med den nederste fanebladsliste. Brug igen penselværktøjet og tegn en lige linje med Shift-tasten trykket ned for at sikre, at du får en lige linje.

Når du har designet fanebladsliste, skal du indsætte tre ikoner, der repræsenterer appens hovedfunktioner. Med ALT-tasten kan du nemt duplikere figurerne, mens du trækker dem til den passende plads.

Nu ser vi på den øverste navigationslinje. Hold igen ALT-tasten nede, mens du trækker et yderligere rektangulært område til navigationslinjen.

Chat-boblerne er den næste del af din app, som vi vil designe. Brug penselværktøjet til at tegne en chat-boble. Denne vil blive vist til brugeren straks som en velkomst. Tilføj en kort tekst, der taler til brugeren, som f.eks. „Hej og velkommen til Mobility App!“

For at sikre, at det hele ser godt ud, kan du kopiere og tilpasse boblerne. Vælg boblerne og træk dem ned med ALT-tasten for at tilføje en yderligere velkomsttekst som "Start med din første Mobility Session".

Næste skridt er at indsætte video-knappen, som brugerne kan bruge til at afspille deres lektioner. Tegn en rund knap med penselværktøjet og kombiner den med en trekant for tydeligt at vise både udseende og funktion.

Kopier nu alle vigtige UI-elementer - såsom de øverste og nederste navigationslinjer - til den næste side for at sikre konsistens i designet. Du kan simpelthen trække et screenshot med ALT-tasten for at duplikere elementerne på den næste side.

På denne nye skærm, som du har oprettet, design valgmulighederne for kurserne. Her skal du lave en simpel oversigt over de tilgængelige kurser, som brugeren kan vælge imellem.

I profilvisningen kan du skabe plads til profilbillede, brugernavn og antal gennemførte kursustimer. Her er det vigtigt at præsentere oplysningerne klart og tydeligt.

Afslut designet af kursus- og lektionsvalget ved at oprette oversigten for lektionerne og tilføje en luk-knap, så brugeren kan lukke valget når som helst.

Dermed er den grundlæggende prototype til din Mobility App færdig. Du har nu et engagerende design, der klart strukturerer brugerrejsen og samtidig hjælper dig som designer med klart at visualisere appens vision.

Opsummering – Prototyping af en Mobility App i Sketch

I løbet af denne tutorial har du lært trin for trin, hvordan du prototyper en Mobility App i Sketch. Fra den første idé til de sidste designelementer har du kunnet udvide din viden og skabe et nyttigt værktøj til den videre udvikling af din app.