Digital Prototype

Il existe des logiciels spéciaux ou cloudware qui peuvent vous aider à créer un prototype numérique de votre application. Marvel est un exemple de cloudware que vous pouvez utiliser gratuitement. Comme vous pouvez le voir dans l'exemple à gauche, le cloudware vous permet de créer un prototype numérique qui ressemble et ressemble à l'application réelle. C'est un bon outil à utiliser si vous souhaitez présenter votre application en action.

Si vous préférez dessiner vous-même l'application à l'aide de divers logiciels de conception, le didacticiel ci-dessous devrait vous être d'une grande aide. Il vous montre étape par étape comment créer un prototype numérique de votre application à l'aide de Google Slide

Étapes pour créer votre diapositive GIF de prototypage numérique

Étape 1

Onshape

Avec l'aide de onshape, recréez votre téléphone en 3D en utilisant les dimensions exactes. Pour encore plus de précision, utilisez les dimensions fournies directement par le fabricant de votre téléphone. Une recherche rapide sur Google devrait vous fournir ces chiffres facilement.
Une fois terminé, faites pivoter le téléphone pour qu'il soit face à vous. Sélectionnez le fichier d'impression puis "Télécharger l'image" le fichier sera téléchargé au format * .png

Étape 2

Dessin Google

Dans la barre d'URL, tapez dans Google Drawing et sélectionnez l'application
Insérez l'image que vous venez de télécharger (* .png)
Placez l'image exactement au centre (veillez à ne pas redimensionner l'image)
Dessinez des rectangles pour représenter votre écran et / ou vos boutons (encore une fois, utilisez l'outil de déplacement et les croix rouges pour vous assurer que vous êtes exactement au centre)
Utilisez la zone de texte pour saisir du texte en veillant à être cohérent entre le type de police et la taille de la police
Sélectionnez les couleurs et les formes de votre choix
Une fois terminé, téléchargez l'image au format * .png
Répétez pour toutes les diapositives

Étape 3

Google Slide

Sélectionnez le thème et la mise en page souhaités
Créer une page de titre et une page de description
Téléchargez l'image depuis votre ordinateur ou gDrive (insert / image / Drive)
À l'aide de l'outil de déplacement, déplacez l'image de manière à ce qu'elle soit exactement au centre (utilisez à nouveau les lignes de guidage rouges)
Sélectionnez la diapositive et faites un duplicata
Utilisez la zone de texte pour saisir du texte en veillant à être cohérent entre le type de police et la taille de la police
Utilisez l'outil "Forme" pour dessiner des flèches sur les boutons sur lesquels vous devez appuyer
Répéter pour toutes les diapositives

Étape 4

Creator Studio

Vous devez installer des "modules complémentaires" pour Google Slide
Sélectionnez "Modules complémentaires" / "Obtenir des modules complémentaires"
Tapez Creator Studio dans la barre de recherche
Installez et acceptez l'autorisation de Google
Rafraîchissez votre écran une fois installé
Sélectionnez Modules complémentaires / Creator Studio / Ouvrir
Changez votre largeur de sortie en 720
Réglez votre temps entre 2 et 4 secondes
Choisissez "GIF animé" comme format d'exportation
Cliquez sur "Go"
Une fois terminé, cliquez sur le petit symbole de l'œil pour afficher votre GIF
Si vous êtes satisfait, vous pouvez télécharger le GIF et le télécharger dans la classe

Special software or cloudware does exist that can help you create a digital prototype of your app. Marvel is an example of a cloudware you can use for free. As you can see from the exemple to the left, the cloudware allows you to put together a digital prototype that looks and feel like the actual app will. It's a good tool to use if you want to demonstrate your app in action.

If you prefer drawing the app yourself using various design software then the tutorial below should be of great help. It shows you step by step how you can create a digital prototype of your app using Google Slide

Steps to create your Digital Prototyping GIF slide

Step 1

Onshape

With the help of onshape, recreate your phone in 3D using the exact dimensions. For even more precision, use the dimensions given straight from your phone's manufacturer. A quick search on Google should provide you with those numbers easily.
Once completed, rotate the phone so it faces you. Select file print then "Download Image" the file will be downloaded as a *.png

Step 2

Google Drawing

In the URL bar type in Google Drawing and select the app
Insert the image you just downloaded (*.png)
Place the image exactly in the center (be careful not to resize the image)
Draw rectangles to represent your screen and/or buttons (again, use the move tool and the red crosses to ensure you're exactly in the center)
Use the text box to enter text making sure to be consistent between Font type and Font size
Select the colours and shapes of your choice
Once completed, download the image as a *.png
Repeat for all the slides

Step 3

Google Slide

Select the Theme and Layout that you want
Create a title page and a description page
Upload the image from your computer or gDrive (insert/image/Drive)
Using the move tool, move the image so it's exactly in the center (again use the red guide lines)
Select the slide and make a duplicate
Use the text box to enter text making sure to be consistent between Font type and Font size
Use the "shape" tool to draw arrows on the bottons you need to press
Repeat for all slides

Step 4

Creator Studio

You need to install an "Add-ons" to Google Slide
Select "Add-ons"/"Get add-ons"
Type Creator Studio in the search bar
Install and accept the Google permission
Refresh your screen once installed
Select Add-ons/Creator Studio/Open
Change your width output to 720
Set your time to anything between 2 and 4 seconds
Choose "Animated GIF" as your export format
Click "Go"
Once completed, click the little eye symbol to view your GIF
If satisfied, you can download the GIF and upload it into classroom

Page updated

Report abuse