+75 outils gratuits pour prototyper ses projets

Avant de découvrir tous ces outils gratuits pour prototyper ses projets, intéressons-nous à ce qu’est un prototype. Lorsqu’on lance un nouveau projet ou qu’on veut tester de nouvelles idées, on réalise des prototypes, c’est-à-dire un premier modèle de notre produit ou service, que l’on pourra aller tester sur le marché auprès de nos utilisateurs ou clients finaux.

Avant de commencer à prototyper des produits ou services numériques, il y a des choses essentielles à déterminer. Des éléments qui vous permettront de réaliser un prototype en mettant les utilisateurs au coeur de la conception.

Avez-vous déjà la réponse aux questions suivantes :

• A qui votre entreprise s’adresse ? Qui sont vos clients et/ou vos utilisateurs finaux ?
• Ont-ils besoin de votre produit/service ? Si oui, pourquoi ? Quelles sont les raisons ?
• Comment vous allez gagner de l’argent ? C’est quoi votre modèle économique ?
• Quelle est votre proposition de valeur ? Pourquoi va t’on acheter chez vous plutôt que chez un autre ?

Si vous avez déjà la réponse à ces questions, voici ci-dessous une liste de +75 outils et ressources gratuites qui vous aideront à prototyper vos projets, que ce soit des produits ou des services numériques. Si vous n’avez pas la réponse à l’une de ces questions, il vaut mieux aller chercher ces réponses avant de commencer à prototyper votre projet.

Vous trouverez ci-dessous, une liste de logiciels, outils et ressources qui vous aideront à prototyper vos projets numériques gratuitement. Cette liste est non-exhaustive. J’ai rassemblé pour vous dans cette liste +75 ressources, la majorité d’entre elles sont utilisées au quotidien par des UX Designers et des entrepreneurs.

---

L’erreur à ne pas faire

Attention à ne pas confondre prototype et produits ou services finaux. Je le rappel un prototype est un modèle pour effectuer vos tests utilisateurs, ce n’est pas une version finale. Il est souvent interactif et la plupart du temps en noir et blanc (comme un wireframe, mais en version animé et avec du contenu proche du réel). Cela n’empêche pas d’y mettre un peu de couleurs ou une fake identité visuelle pour que les utilisateurs puissent se projeter davantage. Attention tout de même à rester sur des couleurs neutres car ils ne devront pas s’attarder là-dessus, étant donné que c’est fake.

Dans un prototype, l’utilisateur peut interagir avec l’interface, c’est pourquoi parfois on créé des maquettes animées et parfois on utilise des outils permettant de créer des landing page ou des sites en quelques clics (qui seront utilisés uniquement pour les tests). En effet, lorsqu’on est entrepreneur, on est pas toujours aguerrit avec tous les logiciels de design et il est parfois plus simple d’opter pour la seconde option.

La liste des outils présentés ci-dessous, indique parfois des solutions basiques, peu poussées. Néanmoins elles permettent d’avancer dans les projets, de tester, de faire du “quick and dirty” gratuit. Rappelez-vous d’une chose, lorsqu’on prototype une solution, on le fait avec les moyens du bord.

---

1. Bâtir son prototype numérique

Prototype sous forme de wireframes interactif.

• Balsamiq ⭐️
  Outil entièrement dédié au wireframe. Simple à utiliser car il possède des éléments d’interface utilisateur intégrés avec des modèles prédéfinies.
• Marvel ⭐️
  Vous permet de faire des wireframes et de prototyper votre projet directement et rapidement, à plusieurs, pour mobile et ordinateur.
• Whimsical
  Créez jusqu’à 4 board gratuitement pour vos wireframes, flow chart, mind map ou notes.
• MockFlow
  Vous permet de prototyper votre projet et tester rapidement vos idées pour avoir une idée de ce qu’elles pourraient représenter.

Prototype sous forme de site ou landing page

• Jimdo
  Je ne l’ai pas utilisé mais je vous en parle car j’en ai eu de bons retours.
• Wix
  Pratique si vous avez un besoin rapide
• Yola
  Pratique mais vous pourrez créer jusqu’à 3 pages avec la version gratuite.
• Weebly
  Simple à utiliser et efficace
• Strikingly
  Simple à prendre en main mais limité en terme de design
• Big Cartel
  Orienté pour les petits créateurs et artistes.
• Square
  Plateforme de e-commerce simplifiée.

Prototype sous forme d’application mobile

• Glideapps 
  Cet outil vous permet de créer une application mobile uniquement en utilisant un fichier tableur (grâce à Google Sheet). Pratique, simple, testé, re-testé et approuvé x100 pour des petits projets. C’est idéal pour la création de prototype.
• TETHR
  De nombreux modèles à télécharger pour vous aider dans la conception d’application IOS.

---

2. Façonner une fake* identité visuelle

*Disclaimer : vous pouvez aussi utiliser certains de ces outils pour vous façonner votre futur identité visuelle, qui sera finale.

Palette de couleurs

Attention à vérifier que les couleurs que vous choississez restent assez neutre et surtout qu’elles soient accessible à des personnes daltonniennes ou malvoyantes. Vous ne saurez pas à l’avance, si lors de vos tests utilisateurs l’un d’entre eux est daltonien par exemple.

• Coolors ⭐️
  Vous aide à constituer votre palette de couleurs en partant de code couleurs ou de vos photos.
• Khroma
  Découvrez, recherchez et enregistrez des combinaisons de couleurs que vous adorerez. C’est un générateur de palettes colorimétrique.
• DesignSeeds
  Des inspirations de palettes couleurs en fonction d’univers de photographies.
• ColorClaim
  Vous propose des combinaisons de couleurs par paire.
• Web gradient ITMEO
  Des dégradés en veux-tu en voilà pour vos sites.
• GradientHunt
  Découvrez les couleurs préférés de la communauté et testez vos couleurs.

Typographies

• GoogleFont ⭐️
  Qui est une valeur sûre. Vous pouvez même voir quels sont les plus téléchargés et populaires.
• FontPair ⭐️
  Un moteur de recherche de paires de typographies qui s’associent bien ensemble : entre le titre et le corps de texte.
• FontJoy
  Vous permet de visualiser en direct l’association des typographies que vous avez choisis. Vous pouvez aussi les régler en direct pour faire des tests.
• FontFabric
  La fabrique à typographie.
• FontsArena
  Des typographies classées par thématiques.

Logos

Attention, les générateurs de logos sont pratiques au départ pour prototyper ses projets numériques mais votre logo reste le reflet de votre identité et avoir quelque chose de générique n’est pas une solution long terme. Néanmoins, cela peut vous aider à démarrer, trouver des idées, vous lancer en attendant d’officialiser le votre ou vous permettre de tester vos idées, prototypes, etc.

• Logaster
  C’est un créateur de logo automatique. Vous inscrivez votre nom sur la plateforme et il vous propose des logos.
• Ucraft
  Pour créer vous-même vos logos simplement et rapidement en ligne sans logiciel.
• Logo Squarespace
  Outil de création de logo gratuit pour les utilisateurs Squarespace.
• Signature Maker
  Créez une signature numérique manuscrite. Idéal pour signer des documents, des contrats, des e-mails, des articles de blog ou créer des logos manuscrits.

---

3. Compléter et bonifier votre prototype

Création graphique

• Canva ⭐️
  Logiciel de conception graphique incroyablement simple qui vous permet de créer de belles mises en page pour tous vos supports de communication.
• CreativeMarket
  Bénéficier chaque semaine de 6 créations graphiques gratuitement.
• Remove.bg
  Cet outil Web gratuit vous permet de supprimer les arrière-plans d’image.
• Placeit – Réaliser simplement des mock-ups (simulations) en plaçant le design de votre application ou site directement sur le support physique ou digital de votre choix (pas besoin de Photoshop!) pour évaluer le rendu dans le contexte d’utilisation.

Infographies

• Piktochart 
  Très facile à utiliser avec plus de 500 modèles conçus par des professionnels pour vous aider à réaliser vos infographies et vos présentations.
• Easel.ly 
  Génère des infographies automatiquement en fonction du texte que vous lui donnez.
• Visme 
  Outil pour créer vos infographies et présentations sur la base de modèles réalisés par des professionnels du design.

Banque d’images libres de droits

• Unsplash
  Il y a énormément d’images disponibles de très belles qualités sur tous types de sujets. 10 nouvelles photos tous les 10 jours.
• Pexels 
  Enormément de photos réalisées par des passionnés de photographie.
• KaboomPics
  Des photos à souhait et que vous pouvez cherchez par couleur et c’est pour cette raison que j’adore ce site.
• StockSnap
  Des centaines d’images haute résolution ajoutées chaque semaine.
• Pixabay
  Plus de 1,4 million de photos et vidéos (Pixabay Vidéos) libres de droits partagées par une généreuse communauté.
• Life of Pix 
  Photos HD.
• Gratisography 
  Regroupement de photos loufoques et atypiques !
• Free Nature
  De magnifiques photos de la nature libres de droits avec des mises à jour régulières.
• Burst
  Banques d’images de Shopify avec de nombreuses photos gratuites pour les sites Web et l’utilisation commerciale.
• Freepik
  Banques d’images gratuites, vous y trouverez aussi bien des photos que des PSD à retravailler dans photoshop.
• StickPNG – CleanPNG – FreePNG – Des banques d’images gratuites et libre de droits uniquement d’éléments en PNG (images au fond transparent).

Banque de vidéos libres de droits

• Pexels vidéos
  Des vidéos réalisées par des passionnés.
• Life of Vids
  Superbes vidéos immersives.
• Vids Play
  Des minis vidéos sur des tas d’univers.
• Coverr
  De magnifiques courtes vidéos HD pour vos sites.
• Pond 5
  Un moteur de recherche de vidéos de tout horizons. Vous pouvez filtrer l’ensemble des vidéos afin de trouver l’idéal en fonction de vos besoins.

Banques d’icônes et illustrations libres de droits

• Undraw & Blackillustrations
  Des illustrations réalisées par des designers.
• Many Pixels
  De magnifiques illustrations sur des tas de sujets et où vous êtes totalement libre de changer les couleurs à votre convenance.
• Delesign & Open Doodles
  Contient des illustrations et des icônes.
• Illustrio
  Des tonnes d’icônes travaillées et de toutes les couleurs.
• The noun Project
  Grâce à la communauté, des milliers d’icônes sont régulièrement publiées.

Bonus

• Stocks – Moteur de recherche qui réunit la majorité des banques d’images ci-dessus en une : photos, vidéos, icônes, mock-ups, etc
• Pixel Buddha – Une base de données d’un tas de ressources gratuites, disponible et réalisé par une communauté de professionnelles du design : icônes, mock-up, fonds, maquettes, etc.
• Repper – Outil de création de patterns (motifs).
• PhotosIcons8 – Téléchargez et créez vos propres photos de toutes pièces. Simplement et sans Photoshop.

Hacking : plugin Google Chrome

Lorsque que vous démarrer la conception de vos sites pour prototyper ses projets numériques, il peut vous arriver de vouloir vous inspirer d’autres sites. Notamment, parce que vous aimez bien les couleurs utilisées, les typographies, le template, … Sachez qu’il y a des moyens d’en savoir plus sur ces éléments afin de vous aider dans votre conception.

Top 10 des plugins Google Chrome à avoir sur son navigateur

1. WindowResizer
   Simulez différentes tailles d’écran et résolutions pour tester la structure de votre site Web sur divers supports.
2. Builtwith – Wappalyzer
   Pour découvrir quels technologies : serveurs, plugins et outils sont utilisés sur un site. J’utilise davantage Wappalyzer car il existe un plugin Google Chrome (plus pratique).
3. WordPress Theme Detector and Plugins Detector
   Cet outil détecte les thèmes et les plugins utilisés sur les sites WordPress et affiche des informations à leur sujet.
4. Page Ruler
   Indique une règle pour mesurer les dimensions ainsi que les positions des éléments de n’importe quelle page web.
5. CSS Viewer
   Vous indiquera toutes les informations CSS du site que vous voulez analyser.
6. Spectrum
   Vous permettra de tester la couleur des sites en fonction des divers niveaux de daltonisme possible. Cela permet de vérifier la visibilité des couleurs.
7. SVG-Grabber
   Vous permet en un clic de pouvoir récupérer et télécharger toutes les icônes SVG qui se trouve sur un site.
8. Eye Dropper
   Grâce à la pipette, vous pouvez retrouver le code couleur de n’importe quel élément du site.
9. WhatFont
   Idem que le précédent, avec les typographies.
10. Headings map
    Pour vérifier que la structure de votre site est optimale (H1 – H2 – H3, etc)

---

Le mot de la fin…

Nous voilà arrivé au bout de cette précieuse liste. N’hésitez pas à garder cette page dans vos favoris de navigateur pour garder à porter de clic tous ces outils.

Est-ce que vous avez découvert de nouvelles ressources UX ? (dites-le moi en commentaires)

A bientôt,