Réalisez vos prototypes mobiles avec Proto.io

proto outils webmarketing
Créer des prototypes en haute fidélité et qualité avec Proto

L'AVIS DE NOTRE EXPERT

8 Utilité

8 Efficacité

9 Potentiel

7 Ergonomie

6 Simplicité

7,6

Prototyper une appli comme les plus grands UX designers, ça vous tente ?
Découvrons Proto, une solution webdesign en partie gratuite, qui peut vous rendre de grands services.

Maquetter, c’est bien

Les outils webmarketing permettant de créer un protoype d’appli ou de site sont très utiles pour en tester la navigation, avant de lancer des développements ou encore pour valider un concept et le faire financer.

Transformer un concept en une ébauche jouable et animée est une étape incontournable, qui permet de trier le bon grain de l’ivraie et de fluidifier l’expérience utilisateur.

Si les outils les plus connus sont Pop ou encore Balsamiq, Proto fait actuellement sa pub sur Twitter, une bonne raison de s’y intéresser.

un vaste choix d'actions et de triggers

Un prototype Tinder, forcément je swipe !

 

Proto.io : tout le webdesign (ou presque)

Proto présente un site très bien conçu. À noter, l’aide est très complète avec pas mal de vidéos. Pensez juste à cliquer sur « Learn » pour la retrouver.

Les points forts mis en avant par Proto :

  • customisation totale des écrans, de la smartwatch à l’écran géant
  • interface drag & drop pour les 3 OS : Windows, Android et Apple
  • simulation d’animations touch et souris
  • paramétrage poussé des animations suivant une timeline type montage vidéo
  • l’appli Proto.io disponible sur iOS et Android (mais pas WindowsPhone)

C’est là le gros manque de Proto : pour les webmarketeurs nomades, l’appli Proto n’existe qu’en smartphone, et elle n’est qu’un simple player, qui ne permet pas comme Pop de créer et modifier depuis l’appareil mobile.

Proto, un Nextool très pro

Après les caractéristiques, passons rapidement à la prise en main en mode #MemePasPeur des warriors du webmarketing (fauchés). Il existe une version d’essai, gratuite 15 jours, et une version permanente gratuite, avec des fonctionnalités limitées.

L’inscription gratuite sur le site, se fait très rapidement, avec validation du compte sur la messagerie. On démarre par une vidéo de prise en mains qui dure 3 minutes.

Des maquettes utlra-design

Cliquez sur « New project ».

Le site vous propose 3 templates Apple (dont 1 iPad), 3 templates Android, mais rien sur WindowsPhone ( « Import project »).

Une fonctionnalité avec un intérêt limité : pour plus d’inspiration, vous pouvez cliquer sur le lien « Proto spaces », mais ne pourrez que consulter les projets publics de membres.

Ensuite, vous cliquez sur « Edit » . Personnellement je conseille de partir de zéro avec des écrans que vous créez intégralement.

Si vous partez from scratch, sélectionnez les paramètres d’écran.

Proto n’a pré-renseigné que les appareils haut de gamme de Samsung, tous les Apple, et seulement 3 modèles Windows. C’est un peu léger pour une appli dont le prix commence à 24 USD/mois et qui joue dans le monde professionnel.

Des templates pour les top-selling devices

Des templates pour les top-selling devices

 

À partir de là, votre projet est composé de différentes pages. vous les ajoutez et les ajustez.
L’écran n’est pas encombré avec des pubs, ce qui est appréciable, vu la richesse des fonctionnalités de la version gratuite.

Toutes les tailles d’écrans

Si jamais vous voulez designer la future killer-app de l’iWatch ou de votre smart-tv préférée, allez dans « Add new device » puis prenez le temps de saisir les caractéristiques d’écran.
Ensuite vous prenez des objets prédéfinis dans la colonne de droite et les positionnez en drag & drop. Le choix est très étendu avec des modules standard mais aussi iOS, Android, WindowsPhone.

Le petit plus, ce sont les bannières de pub aux formats IAB, et des icônes, malheureusement pas trop réussies.

Pour gagner du temps, vous pouvez définir des « containers » que vous pourrez dupliquer sur différents écrans.

Le diable est dans le détail

La personnalisation des objets est très fine et permet de vraiment concrétiser vos idées créatives.

Par contre, l’étape que je trouve la plus complexe est le paramétrage d’ « interactions », avec une grande richesse de transitions/ animations. Pas toujours facile de s’y retrouver en anglais parmi tous les choix techniques proposés.

Justement les concepteurs de Proto sont conscients de toute cette complexité : ils vous envoient 1 tutoriel par mail chaque jour pendant une semaine pour vous accompagner dans la prise en mains. Pensez à vérifier votre spambox.

Attention je me suis perdu dans les écrans, et en essayant de supprimer l’écran « template » que je n’utilisais pas, j’ai fait disparaître par la même occasion les 2 écrans que je venais de créer…

proto-outils-webmarketing-5

Un large éventail de possibilités

 

Mais pas de soucis ! Proto est en SAAS et comporte un auto-save performant qui permet de rappeler les dernières sauvegardes. Cliquez sur l’icône « Load from Backup » et choisissez l’horaire de sauvegarde à recharger. Pour visualiser, vous avez le bouton « Preview » en haut à droite.

Enfin revenons au pricing ; la version gratuite comporte différentes grosses limitations : le partage est quasiment impossible, la taille de l’unique projet est limitée à 10 Mo et 5 écrans…
Si vous apprenez vite et utilisez très exceptionnellement Proto, vous avez droit à 15 jours gratuits sans communiquer vos coordonnées bancaires…

Au-delà la solution sera alors de passer en mode payant, à partir de 24 USD /mois.

Enfin en régime de croisière si vous designez de manière épisodique, je trouve leur solution de stockage à 5 USD/ mois très intéressante pour ne pas perdre vos maquettes si vous ne travaillez plus dessus.

Maquette appli The Nextools

Prototype app The Nextools

 

En conclusion : POUR LES PRO(to)-webdesigners

Je recommande particulièrement Proto pour les maquettes hors format standard et pour ceux et celles qui veulent un prototype super abouti.

Pour les autres, POP permet un pré-maquettage rapide à partir de vos dessins, et Balsamik a l’option du rendu « griffonnage » qui est très intéressant pour rester dans la conceptualisation.
Le défaut de Proto est la prise en mains pas forcément compliquée, mais longue de par la multitude de possibilités offertes.

À vous de jouer, envoyez-nous vos Proto et nous les ajouterons dans The Nextools !

Pour toute aide relative à l’outil webmarketing Proto, vous pouvez aussi engager une discussion via le forum de The Nextools dès maintenant ! Des experts en #digitalmarketing vous répondront en moins de 24 heures.

Je rejoins la communauté !

2 Comments

  • TiTAN dit :

    24$ ?

    je n’ai pas encore testé, mais je pense que dans la liste des concurrents vous pouvez ajouter

    INvision > http://www.invisionapp.com/

    vraiment pratique et bien pensé, et pas besoin de « lecteur » spécifique, puisque les proto sont lisible par le navigateur de votre tablette ou smartphone

    un must 🙂

    • Merci beaucoup,
      Effectivement les références d’ Invision sont impressionnantes ! Peut-être dans un prochain Nextool.
      Perso je ne connaissais pas encore, j’ai été sensibilisé par Proto via leur pub sur Twitter.
      A bientôt

      Didier

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *