Prototyper ses produits ou services numériques

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

0

Thématiques

+ 0

Ressources gratuites

+ 0

Bonus

+50 outils gratuits

Veiller à une bonne accessibilité sur votre site

+100 outils et ressources gratuites

Remarque : liste non-exhaustive.

Identité visuelle

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

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. 

TESTS UTILISATEURS

  • Maze
    Plateforme de test qui utilise des prototypes Invision pour les tests. Il s’agit d’un outil simple pour tester et analyser un concept avant la phase de développement. Il est possible de l’utiliser gratuitement si vous avez vos propres testeurs.

RECHERCHES UTILISATEURS

  • Google Forms ⭐️
    Idéal pour réaliser vos sondages et interviews utilisateurs

Support de communication / vente

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

  1. 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.
  2. Pexels 
    Enormément de photos réalisées par des passionnés de photographie.
  3. KaboomPics
    Des photos à souhait et que vous pouvez cherchez par couleur et c’est pour cette raison que j’adore ce site.
  4. StockSnap
    Des centaines d’images haute résolution ajoutées chaque semaine.
  5. 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é.
  6. Life of Pix 
    Photos HD.
  7. Gratisography 
    Regroupement de photos loufoques et atypiques !
  8. Free Nature
    De magnifiques photos de la nature libres de droits avec des mises à jour régulières.
  9. Burst
    Banques d’images de Shopify avec de nombreuses photos gratuites pour les sites Web et l’utilisation commerciale.
  10. 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

  1. Pexels vidéos
    Des vidéos réalisées par des passionnés.
  2. Life of Vids
    Superbes vidéos immersives.
  3. Vids Play
    Des minis vidéos sur des tas d’univers.
  4. Coverr
    De magnifiques courtes vidéos HD pour vos sites.
  5. 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

  1. Undraw & Blackillustrations
    Des illustrations réalisées par des designers.
  2. Many Pixels
    De magnifiques illustrations sur des tas de sujets et où vous êtes totalement libre de changer les couleurs à votre convenance.
  3. Delesign & Open Doodles
    Contient des illustrations et des icônes.
  4. Illustrio
    Des tonnes d’icônes travaillées et de toutes les couleurs.
  5. 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.
  • StickPNGCleanPNGFreePNG – 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

  • 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 

  1. 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.
  2. BuiltwithWappalyzer
    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 niveau 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)
 

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

Veiller à une bonne accessibilité sur votre site

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.