Prototype
Réalisation d'un premier modèle de votre produit ou service afin de le tester sur le marché auprès de vos utilisateurs ou clients.
Pour prototyper ses produits ou services numériques en mettant vos utilisateurs et utilisatrices au coeur de la conception, il y a des choses essentielles à déterminer :
- 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 à ses questions, voici ci-dessous une liste de +100 outils et ressources gratuites qui vous aideront à prototyper ses produits ou services numériques. Je vous ai concocté une liste des meilleurs logiciels, outils et ressources qui vous aideront à prototyper ses produits ou services numériques en mettant vos utilisateurs et utilisatrices au coeur de la conception.
+100 outils et ressources gratuites
Thématiques
Ressources gratuites
Bonus
Thématiques
+50 outils gratuits
Veiller à une bonne accessibilité sur votre site
+100 outils et ressources gratuites
Remarque : liste non-exhaustive.
Identité visuelle
COULEUR | TYPOGRAPHIE | MOODBOARD | INSPIRATIONS | LOGO
La création de votre identité graphique est une étape importante pour prototyper ses produits ou services numériques : choix d’une palette de couleurs, de typographies, création d’un moodboard pour représenter son univers graphique, recherche d’inspirations, création d’un logo, etc.
Conseils de conception centrée utilisateurs et utilisatrices :
- Choisir des couleurs accessible pour les personnes daltonienne ou mal-voyante avec le bon ratio de contraste entre la couleur de fond et du texte.
- Déterminer une police d’écriture adaptée au web. Toutes les polices ne sont pas disponibles et accessibles facilement pour des interfaces numériques. Il faut la choisir, claire, lisible, visible et reconnaissable.
Pour trouver de l’inspiration
PALETTE DE COULEURS
- 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
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.
COULEURS ACCESSIBLES
- Color Review ⭐️
Tester le niveau de contraste de vos couleurs : fond/texte - Who can use ⭐️
Vous indique le pourcentage de personnes qui pourront voir vos combinaisons de couleurs. - Coolors ⭐️
Vous aide à constituer votre palette de couleurs et voir en direct la vision qu’aura un daltonien de vos couleurs. - Cloudflare
Tester le niveau de contraste de vos couleurs à partir d’une url, d’une image ou de vos codes couleurs et simuler le contraste en direct sur des éléments iconographiques. - Polypane
Analyse les codes couleurs que vous lui soumettez et vous donne le ratio de contraste pour le niveau AA ou AAA. Il vous suggère aussi des combinaisons de couleurs similaires avec un bon ratio.
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.
MOODBOARD
- Invision ⭐️
Créer des moodboards d’inspirations facilement que vous pouvez partager ensuite autour de vous. - MoodBoard
Créez de superbes moodboards en ligne, rapidement et simplement pour partager des idées de designs, de l’inspiration avec d’autres (publics). - Niice
Créez des storyboards et moodboards privés où vous pouvez rassembler, partager et discuter des idées avec votre équipe.
INSPIRATIONS
- Pinterest ⭐️ Trouver de l’inspiration sur tout un tas de sujets et créer des boards qui vous ressemble.
- One Page Love Trouvez des modèles et inspirations de webdesign pour des landings page.
- Designinspiration Un Pinterest conçu exclusivement pour les designers.
- Dribble Un lieu d’inspirations où les designers partagent leur travaux et idées.
Pour les plus novices
Attention, les générateurs de logos sont pratiques au départ pour prototyper ses produits ou services 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.
LOGO
- 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.
Etudes utilisateurs
De nombreux outils sont mis à votre disposition gratuitement pour vous aider dans vos recherches et études utilisateurs : que ce soit pour réaliser vos sondages, vos interviews, vos tests, etc. Il est important d’étudier vos utilisateurs et utilisatrices pour prototyper ses produits ou services numériques de la meilleure façon qu’il soit.
ANALYSE DE SITE
- Google Analytics ⭐️
Outil qui analyse le trafic sur votre site, cela vous donne des informations précieuses sur vos utilisateurs et clients. - Hotjar ⭐️
Outil d’ analyse du site tout-en-un. Il vous montre notamment des cartes de chaleur pour connaître les zones chaudes et froides de votre site. - Alertes Google
Configurez des alertes pour suivre les termes de recherche qu’utilise les utilisateurs tels que votre nom, votre entreprise, vos produits, etc. - Google Keyword Planner
Recherchez et analysez des idées de mots clés pour vos campagnes publicitaires Google, ou utilisez-les simplement pour vous aider à réfléchir et optimiser votre contenu pour la recherche. - Google Optimize
Testez des variantes différentes de votre site, puis personnalisez-le pour offrir une expérience personnalisée qui fonctionne le mieux pour chaque client et pour votre entreprise.
A/B TEST
- Calculateur d’A / B testing
Voici un outil bien pratique pour vous aider à calculer la durée de vos tests. - Résultats de vos tests A / B testing
Cet outil vous indique si les résultats obtenues lors des tests peuvent être significatifs en fonction du nombre d’utilisateurs et d’autres critères.
Lorsque vous concevez un site il n’est jamais simple de savoir qu’elles éléments vont avoir le plus d’impact sur vos utilisateurs. Intitulés, position des boutons, couleurs, images, tous ces éléments doivent être testé sur vos utilisateurs pour savoir lesquels sont les plus impactants sur eux. Voilà à quoi sert l’A/B testing. La page A est visible par une partie des utilisateurs et la page B par l’autre partie. Les analyses vous permettront de connaître la meilleure stratégie à adopter.
RECHERCHES UTILISATEURS
- Google Forms ⭐️
Idéal pour réaliser vos sondages et interviews utilisateurs
Support de communication / vente
PRINT | WEB | BASE DE DONNÉES
Prototyper ses produits ou services numériques, ça passe par la création de votre identité graphique : choix d’une palette de couleurs, de typographies, création d’un moodboard pour représenter son univers graphique, recherche d’inspirations, création d’un logo, etc.
Conseils de conception centrée utilisateurs et utilisatrices :
- Choisir des couleurs accessible pour les personnes daltonienne ou mal-voyante avec le bon ratio de contraste entre la couleur de fond et du texte.
- Déterminer une police d’écriture adaptée au web. Toutes les polices ne sont pas disponibles et accessibles facilement pour des interfaces numériques. Il faut la choisir, claire, lisible, visible et reconnaissable.
Pour les plus novices
CREATION 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 & PRESENTATIONS
- 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.
WIREFRAMES
(squelette : plan en noir et blanc)
- 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 prototyper directement et rapidement à plusieurs, votre interface 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 et tester rapidement vos idées pour avoir une idée de ce qu’elles pourraient représenter.
MAQUETTES
- Figma ⭐️
Outil de prototypage simple et collaboratif permettant de réaliser vos wireframes puis maquettes graphiques. - Moqups – Maquette
Créez à plusieurs le design de votre futur site ou application mobile. La version gratuite est limitée. - Mockup.io
Faites comme si votre application mobile fonctionnait ! Très utile pour réaliser des tests utilisateurs facilement et rapidement. - Origami
Cette plateforme proposée par Facebook, vous permet de créer gratuitement des interfaces utilisateur sophistiquées sans aucune compétence en développement.
Pour les plus aguerris
- GraphicBurger
Des templates design de bases de tout type que vous pouvez télécharger et réutiliser librement pour concevoir la maquette qui vous conviendra. - TETHR
De nombreux modèles à télécharger pour vous aider dans la conception d’application IOS. - Optimal workshop
Améliorez votre expérience utilisateur et obtenez des commentaires rapides sur les conceptions avec ce logiciel gratuit de test d’utilisabilité. - UIsources
Des exemples d’interactions et de design UI d’application mobile. - Webframes
Idem que le précédent mais pour des webapps.
BONUS
- Cody House
Une bibliothèque gratuite de ressources HTML, CSS et JS, avec un cours gratuit pour apprendre le HTML et CSS : “An introduction to front-end design”.
BANQUES D’IMAGES
gratuites et 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.
BANQUES DE VIDÉOS
gratuites et 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
gratuites et 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.
- StickPNG – CleanPNG – FreePNG – Des banques d’images gratuites et libre de droits uniquement d’éléments en PNG (images au fond transparent).
- 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 ! Faites des visuels qui vous ressemblent !
Conception de sites ou applications mobiles
De nombreuses plateformes existent et vous permettent de concevoir vos sites web gratuitement. Cependant certaines sont à privilégier pour prototyper ses produits ou services numériques de manière efficace. De plus certaines vous impose leur URL (nom de site) et vous inclut en tant que sous-domaine www.votrenomdesite.nomdelaplateforme.fr . Si vous le pouvez, je vous recommande d’investir dans votre propre nom domaine et dans un hébergement peu coûteux. D’abord parce que sa “sécurisera” le nom de domaine avec votre marque et cela vous permettra de vérifier si le nom que vous avez choisi pour prototyper ses produits ou services numériques n’est pas déjà utilisé.
SITE VITRINE ET LANDING PAGE
- WordPress.org
C’est ce que je vous recommande. Par contre vous devrez acheter votre propre nom de domaine et payer l’hébergement – mais ça ne veut pas dire que c’est cher (3€/mois environ sur IONOS ou OVH). - Bootstrap
Efficace et l’un des plus populaire dans le monde. - Weebly
Simple à utiliser et efficace - Strikingly
Simple à prendre en main mais limité en terme de design - Wix
Pratique si vous avez un besoin rapide d’une page unique - Yola
Pratique mais vous pourrez créer jusqu’à 3 pages avec la version gratuite. - Jimdo
Je ne l’ai pas utilisé mais je vous en parle car j’en ai eu de bons retours. - AboutMe
Pratique pour créer un simple écran.
E-COMMERCE
- WooCommerce
Plateforme e-commerce de WordPress. - X-Cart
Logiciel d’e-commerce open source gratuit et facile à utiliser. - Big Cartel
Orienté pour les créateurs et artistes. - Etsy
Vendez vos produits via cette market place et touchez des millions d’acheteurs à travers le monde. Le risque : être perdu dans la masse, il faudra vous démarquer. - Square
Vendez vos produits en ligne via le site de Square directement, des markets places ou via votre propre site.
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 ou la création de prototypes !
BONUS
- Freenom
Le seul fournisseur de nom de domaine gratuit (Attention, j’ai pu constater qu’il ne fonctionne pas toujours bien, le gratuit a ses limites…)
Référencement naturel
SEO
- SEO Site Checkup
Outils d’optimisation de moteur de recherche complets pour votre site, plus un test de diagnostic gratuit. - SEO WordPress par Yoast
Un outil pour découvrir et prioriser les mots clés à cibler. - Moz Keyword Explorer
Plugin WordPress simple qui vous aide à améliorer votre référencement, à écrire un meilleur contenu et à optimiser pleinement l’ensemble de votre site WordPress. - Keywordtool.io
Outil de mots clés qui génère jusqu’à 750+ suggestions de mots clés gratuits à longue queue.
Hacking
Lorsque que vous démarrer la conception de vos sites pour prototyper ses produits ou services numériques, il peut vous arriver de vouloir vous inspirer d’autres sites. Tout simplement, parce que vous aimez bien les couleurs utilisées, les typographies, le template, … Il y a des moyens d’en savoir plus sur ces éléments afin de vous aider dans votre conception.
– TOP 10 –
PLUGINS GOOGLE CHROME À AVOIR SUR SON NAVIGATEUR
- WindowResizer
Simulez différentes tailles d’écran et résolutions pour tester la structure de votre site Web sur divers supports. C’est un plugin Google Chrome. - 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). - 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. - Page Ruler
Indique une règle pour mesurer les dimensions ainsi que les positions des éléments de n’importe quelle page web. - CSS Viewer
Vous indiquera toutes les informations CSS du site que vous voulez analyser. - Spectrum
Vous permettra de tester la couleur des sites en fonction des divers niveau de daltonisme possible. Cela permet de vérifier la visibilité des couleurs. - 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. - Eye Dropper
Grâce à la pipette, vous pouvez retrouver le code couleur de n’importe quel élément du site. - WhatFont
Idem que le précédent, avec les typographies. - Headings map
Pour vérifier que la structure de votre site est optimale (H1 – H2 – H3, etc)
Travail collaboratif
Pour vous aider à prototyper ses produits ou services numériques, certaines plateformes vous permettent de collaborer à plusieurs sur un tableau blanc. Vous pouvez coller des posts-its, animer des ateliers, des sessions de brainstorming, poser vos idées et discussions, présenter vos états de lards, etc
MIND MAPPING
- Xmind ⭐️
C’est un des outils les plus populaires pour faire du mind mapping. Disponible sur Microsoft, Mac et Linux il est très simple à prendre en main et possède de nombreux modèles gratuits sur lesquels vous baser. - Bubbl.us
Cette plateforme mise sur la simplicité, pour des brainstorm simple, rapide et efficace en équipe. - Coggle
Pratique pour un travail personnel et permet une certaine liberté dans la mise en page de la carte mentale (image, icônes, couleurs, etc)
TABLEAU BLANC
- Miro ⭐️
Miro vous permet de travailler à distance avec toute votre équipe. Vous pouvez créer des cartes mentales, des user stories, des wireframes, des parcours clients et tout un tas d’autres choses dont vous aurez besoin. - Figjam ⭐️
Fonctions similaires à Miro. Figjam fait partie de l’outil Figma. - Klaxoon
Pour animer facilement toutes vos réunions ou cours à distance ! Facile simple et efficace pour travailler à plusieurs.
+50 outils gratuits