Introduction: Making an App Prototype / Een App Prototype Maken

By Waag
About: Waag operates at the intersection of science, technology and the arts, focusing on technology as an instrument of social change, and guided by the values of fairness, openness and inclusivity.

Stel, je hebt een idee voor een app op een smartphone of een tablet, hoe ga je die maken? Er zijn verschillende manieren om apps te ontwerpen of te maken. Het is altijd handig een idee eerst te gaan schetsen, zodat je weet waar de knoppen en functies moeten staan. Op de ouderwetse manier gaan we deze schetsen tekenen op papier. Daarna laten we zien wat je kunt doen met je tekeningen in de POP app.

Wat heb je nodig?

  • Papier (wat je maar in huis hebt)
  • Een potlood
  • Een gum
  • Verschillende kleuren stiften


Say that you would have a great idea for an app on your smartphone or tablet, now how would you start making one? There are many ways to do it, but it always remains a good idea to start in the old fashioned way by sketching, to get the feeling where the buttons and functions should go. So let's start out by drawing on paper. Later we will show you the POP app that can help your idea further.

What do you need?

  • Paper (any kind will do)
  • A pencil
  • An eraser
  • Different colored marker pens

Step 1: Create a Frame / Maak Een Kader

Maak op het papier (telefoon) schermkaders. Je kunt hiervoor bijvoorbeeld een pinpasje gebruiken. Deze kun je een aantal keer overtrekken op het papier. Houd ruimte naast de (telefoon) schermkaders voor aantekeningen.

You start by drawing (cell phone) frames. You could use a creditcard to do this. Draw a number of frames on the paper around the edges of the card. Keep some free space next to the frame for your notes.

Step 2: Make Some Copies / Maak Wat Kopieën

Je kunt het papier met de (telefoon) schermkaders kopiëren in een kopieermachine, zodat je deze niet steeds hoeft over te trekken. Heb je geen kopieermachine binnen handbereik, dan teken je het aantal schermen dat je nodig denkt te hebben op papier.

You can copy your sheet with frames in a photocopier, than you don't have to repeat them over and over. But if you do not have such a machine around, than just draw the number of frames that you think you will need.

Step 3: Start Designing / Ga Ontwerpen

Nu kun je aan de slag met het uittekenen van je verschillende schermen voor je app. Elke app heeft altijd een beginscherm en een logo. Denk er eens over na hoe die van jou eruit gaat zien. Het heet niet voor niets schetsen, het hoeft dus nog niet heel netjes.

Now you can start with designing the screens for your app. Every app always has a splash screen (the first thing you will see) and a logo. So you might want to think how yours will look like. This does not need to be be a clean design, it is not for nothing called 'sketching'.

Step 4: Design Functions/buttons / Bedenk Knoppen En Functies

Kijk is op je eigen telefoon of tablet hoe een apps eruit ziet en wat voor schermen er worden gebruikt. Dit kan inspiratie geven hoe bijvoorbeeld de indeling van de knoppen eruit gaat zien. Als je het handig vindt, kun je naast je schermen aantekeningen maken wat voor functies de knoppen hebben of wat het volgende scherm gaat doen als je ergens op klikt.

Now look at your own phone or tablet how apps look like and which screens are being used. This can give you some inspiration how to lay out for example the buttons. If you think this would help, you can place some notes besides your drawings what the exact functions of the buttons are or what the next screen will be when you click an item.

Step 5: Using POP - Prototyping on Paper / Gebruik POP

Hiervoor ben je bezig geweest met het maken van je schermen op papier. Deze kun je in de app POP (Prototyping On Paper) toevoegen om een idee geven te krijgen hoe deze zou gaan werken. Je kunt in deze app gebruik maken van links die aan de geschetste knoppen gekoppeld kunnen worden.

Download hiervoor eerst de app (iOS/Android) via http://popapp.in. Start een nieuw project door op het plusje (+) linksboven te klikken.

So far, you worked on designing screens on paper. You can add your drawings in the POP (Prototyping On Paper) app, to give you an idea how these would work in practice. In this app you can link screens to buttons.

Download the app first (iOS or Android) though http://popapp.in. Start a new project in the app by clicking the plus (+) in the upper left hand corner.

Step 6: Photograph Designs / Foto's Maken Van Je Ontwerpen

Maak nu van je schetsen een foto met het camera-icoontje onderaan. Je kan ook foto’s gebruiken die al in je telefoon of tablet hebt staan.

Now take pictures with your phone or tablet of the hand drawn sketches with the camera icon. You can also use photos that ar already on your phone or tablet.

Step 7: Create Your App / Maak Je App

Klik op het plaatje dat het startscherm is voor je app. Klik vervolgens rechts bovenaan op het plus icoontje om een link toe te voegen aan het scherm. Sleep het rode vlak naar de plek waar je een knop wil toevoegen. Maak het vlak zo groot als je zelf wil.
Tevreden met de knop? Klik dan op ‘Link To’ en geef aan naar welk scherm de knop gaat. Klik op het plaatje en daarna op ‘Done’. Er verschijnt nu een groen vlak op het scherm. Je kan zoveel links toevoegen als je zelf wil.
Ben je benieuwd hoe je app er uit ziet? Klik dan op de ‘Play’ knop rechts bovenaan!

Click on the image that is the first screen of your app. Then click in the upper right hand corner on the plus-icon to add a link to the screen. Drag the red space to the spot where you want to add a button. Make this space as large as needed.
Satisfied with your button? Click on 'Link To' and give a destination screen for the button. Click on the image and 'Done'. There now will appear a green space on you screen. You can add as many links as you want.
Do you want to see how it looks like? Click the 'Play'-button in the below right hand corner!