ProtoPie

logiciel de graphisme

Par : Mohamed-Nour Benazzeddine

Younes Ben Elhoms
 Le Contenu

01 02
Définition et Interface Intuitive
Objectif et Facilité
d'utilisation

03 04
Collaboration
et Partage Guide pour
Facile utiliser Protopie
 01
Définition et
Objectif
 Définition et
Objectif
• Protopie est un outil de prototypage interactif dédié à la
création rapide de prototypes d'interfaces utilisateur pour
les applications mobiles et web.
• Protopie vise à simplifier la création de prototypes
réalistes en intégrant des interactions complexes, tout en
éliminant le besoin d'une expertise en programmation.
• Ainsi, Protopie propose une plateforme permettant aux
concepteurs de concrétiser leurs idées de manière
immersive, sans les contraintes techniques liées à la
programmation avancée.
 02
Interface Intuitive et
Facilité d'utilisation
 Interface Intuitive et Facilité d'utilisation

• Protopie offre une interface conviviale et des actions

intuitives, simplifiant la création de prototypes sans
expertise approfondie.
• Sa simplicité fonctionnelle permet d'ajouter des
interactions dynamiques facilement, éliminant les
barrières techniques. Accessible et fluide, Protopie
convient à un large public pour concrétiser des idées
de manière transparente
 03
Collaboration et
Partage Facile
Accessibilité pour
Tous
Protopie élimine les obstacles techniques,
offrant une option attractive pour une
variété d'utilisateurs, facilitant la
concrétisation d'idées sans nécessiter une
expertise approfondie en design interactif.
 04
Guide pour
utiliser Protopie
 Étape 1 : Installation de Protopie
Nous allons télécharger et installer Protopie sur notre ordinateur depuis le
site officiel de Protopie. Le site propose une version d'essai gratuite pour
tester le programme Protopie.
 Étape 2 : Création d'un nouveau projet
Nous allons lancer Protopie pour créer un nouveau projet. Cliquez
sur 'Fichier', puis sur 'Nouveau Projet'.
 Étape 3 : Interface utilisateur de
Protopie
Familiarisez-vous avec l'interface utilisateur de Protopie qui est
divisée en panneaux tels que "Scene", "Layer", "Timeline" et
"Preview".
 Étape 4 : Création d'une scène
1. Cliquez sur "Scene" (Scène) dans le panneau à gauche.
2. Cliquez sur le bouton "+" pour ajouter une nouvelle scène.
3. Vous pouvez définir la transition, les actions et d'autres propriétés
pour chaque scène.
 Étape 5 : Ajout d'éléments
1. Allez dans la scène que vous avez créée.
2. Cliquez sur "Layer« pour ajouter des éléments tels que des boutons,
des images, etc.
3. Modifiez les propriétés de chaque élément en utilisant le panneau de
propriétés.
 Étape 6 : Animation et Interaction
1. Utilisez le panneau "Timeline" pour définir des animations. Cliquez sur
« Ajouter » pour créer des déclencheurs et des réponses.
2. Définissez des interactions en déplaçant, redimensionnant ou faisant
pivoter des objets dans différentes scènes
 Étape 7 : Test du prototype
1.Cliquez sur "Preview" ou bien « run » pour tester votre prototype.
2.Interagissez avec les éléments pour voir comment les animations et
les interactions fonctionnent.
Exemples des projects crée par ProtoPie

Bank application Application de réseaux Application des repas

sociaux
 Conclusion
En bref, Protopie est un outil convivial pour créer des
prototypes interactifs sans besoin de compétences
avancées en programmation. Accessible à tous, il
simplifie le processus de conception, aidant à réaliser
des prototypes réalistes pour des produits innovants
et faciles à utiliser.
merci pour le
bon suivi