+100

outils et ressources gratuites UX design

Pour lancer son business en ligne en mettant les utilisateurs au ♥️de la conception

Se lancer, enfin !

Vous avez rêvé pendant longtemps à la création de votre entreprise et ça y est, vous avez décidé de vous lancer officiellement dans une superbe aventure entrepreunariale ? 

Votre esprit est remplit d’idées, ça fuse dans tous les sens, vous avez des carnets rempli de notes… Si j’ai bien appris quelque chose en lançant deux activités à la fois c’est qu’en général toutes nos idées sont géniales mais si on ne les lance jamais concrètement, elles resteront uniquement des idées ! Alors ne laissez pas vos idées dormir sur papiers et passez à l’action !

Je vous dis ça aujourd’hui, mais il fut un temps où mes idées restaient aussi sur papiers… 

J’entends encore la voix de mes mentors résonner dans ma tête “mieux vaut fait que parfait !”

Au début cette phrase a été très compliqué à intégrer dans ma petite tête et je me rajoutais des freins supplémentaire toute seule en me disant, je ne peux pas réaliser toutes mes idées car en plus j’ai pas d’argent ! Alors comment lancer son/ses business sans aucun argent ?

Sachez que vous n’êtes pas les seuls, sachez qu’on est tous, tous les entrepreneurs de cette planète, les rois de la débrouille, on est simplement malin et surtout tenace ! Alors j’ai décidé de partager avec vous plus de 100 outils et ressources dont je me suis servit pour lancer mes deux entreprises et dont je me sers toujours quotidiennement !

 

Se poser les bonnes questions...

Pour que ça marche il y a tout de même quelques conditions, quelques éléments que dont vous devez avoir les réponses. C’est essentiel pour démarrer votre projet :
  • 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 votre client va t’il acheter plutôt chez vous ?
Si vous avez déjà la réponse à ses questions, voici ci-dessous la liste +100 outils et ressources dont vous avez besoin. Ils sont disponibles gratuitement dès maintenant. Je vous ai concocté une liste des meilleures logiciels, outils et ressources qui vous aideront à démarrer votre entreprise sans argent.

(Et si vous n’avez pas encore la réponse à ces questions, je vous propose de vous aider à y voir plus claire ! J’ai quelques Tips pour vous et on peut aussi en discuter)

Au programme

+ 70
Outils et Ressources
0
Thématiques
+ 0
Bonus

Projets réalisés

Projets réalisés par des entrepreneurs grâce à ces outils.

Création graphique

Identité visuelle

Lorsque vous lancez votre business en ligne, il est essentiel de créer votre identité graphique. Même si elle est amené à évoluer dans le temps, même si elle ne sera pas parfaite au départ, même si elle n’est pas complètement à votre image, il va falloir commencer à vous en construire une. Je propose un exercice très simple sur le blog à ceux qui ont besoin de créer et aligner la vision qu’ils ont de leur marque.

Pour trouver de l’inspiration

COULEUR

  • Coolor – Vous aide à constituer votre palette de couleurs.
  • 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
  • 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.
  • ColorClaim – Vous propose des combinaisons de couleurs par pair

MOODBOARD

  • Designinspiration – Un Pinterest conçu exclusivement pour les designers – un moteur de recherche inspirationnel pour vous aider à découvrir, partager et enregistrer vos designs préférés sur le Web.
  • 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 – Creéz des storyboards et moodboards privés où vous pouvez rassembler, partager et discuter des idées avec votre équipe.
  • One Page Love – Trouvez des modèles et inspirations de webdesign pour des landings page.

Pour les plus novices

LOGO

  • Logaster – C’est un créateur de logo automatique. Vous inscrivez votre nom sur la plateforme et il vous propose des logos. Attention, c’est pratique au départ mais votre logo reste le reflet de votre identité et avoir quelque chose de générique n’est pas une solution long terme.
  • Ucraft – Pour créez 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 et des articles de blog.

SUPPORTS DE COMMUNICATION

  • Canva – Logiciel de conception graphique incroyablement simple qui aide les plus novices à créer de belles mises en page pour leurs 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.

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 – Et si réaliser des infographies devenait un jeu d’enfant et qui plus ait vous ferez gagner un temps fou. Cet outil 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 de site/app : plan en noir et blanc)

  • Figma – Outil de prototypage simple et collaboratif permettant de réaliser vos wireframes puis maquettes graphiques.
  • BalsamiqOutil entièrement dédié wireframing. Simple à utiliser car il possède des éléments d’interface utilisateur intégrés avec des modèles prédéfinies.
  • 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.
  • Whimsical – Créez jusqu’à 4 board gratuitement pour vos wireframes, flow chart, mind map ou notes.

MAQUETTES DE SITES/APP

  • InVision – Outil de prototypage et de maquettage d’interface utilisateur. Parfait pour créer à plusieurs, faire tester, avoir des retours, etc. Je m’en sers aussi beaucoup pour réaliser des moodboards d’inspirations pour mes clients.
  • MockFlow – Vous permet de prototyper et tester rapidement vos idées pour avoir une idée de ce qu’elles pourraient représenter.
  • 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.
  • Placeit – Réaliser simplement des mock-ups 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. Ils proposent des milliers de modèles de photos et de vidéos.

Pour les plus aguerris

  • Craft – C’est un plugin de conception d’interfaces utilisateurs gratuit conçu pour accélérer votre flux de travail avec Sketch et Photoshop.
  • Marvel – Vous permet de prototyper directement et rapidement à plusieurs, votre interface pour mobile et ordinateur.
  • Freepik – Banques d’images gratuites, vous y trouverez aussi bien des photos que des PSD à retravailler dans photoshop.
  • 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.
  • Atelier optimal – 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”.

Sauvegarder pour plus tard !

Gardez cette liste d’outils et ressources avec vous en la téléchargeant (PDF).

Obtenir la liste complète :

Banques d'images

Pour enrichir vos propos que ce soit sur votre site, application, supports de communication, réseaux sociaux, … l’image est essentielle. Mais quand on se lance on a pas forcément un studio photo à disposition, on ne sait pas forcément faire de belles photos et on a pas l’argent pour payer un photographe. Vous pouvez alors vous tourner vers les banques d’images proposant des photos libres de droits. 

TOP 10 des banques de photographies gratuites et libres de droits

  1. Unsplash – Celui que j’utilise le plus ! Il y a énormément d’images disponibles de très belles qualités sur tous types de sujets. Tous les 10 jours, sont ajoutés 10 nouvelles photos.
  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. Magdeleine – Une nouvelle photo HD chaque jour.
  7. Life of Pix
  8. Gratisography – Regroupement de photos loufoques et atypiques !
  9. Free Nature – De magnifiques photos de la nature libres de droits avec des mises à jour régulières.
  10. Burst – Banques d’images de shopify avec de nombreuses photos gratuites pour les sites Web et l’utilisation commerciale.

TOP 5 des 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.

TOP 5 (+1) des banques d’icônes & 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 !

Typographies

Après les images, les couleurs, il reste un élément graphique à déterminer : la police d’écriture. Attention à choisir une police adaptée au web ! Oui, toutes les polices ne sont pas disponibles et accessibles facilement pour des interfaces numériques. Il faut la choisir, claire, lisible, visible et reconnaissable. 

  • FontPair – Un moteur de recherche de pairs de typographies qui s’associent bien ensemble : entre le titre et le corps de texte.
  • FontJoy – Vous permet de visualiser en direct sur une page web ce que 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.
  • GoogleFont – Qui reste la valeur sûre. Vous pouvez même voir quels sont les plus téléchargés et populaires. 

Sauvegarder pour plus tard !

Gardez cette liste d’outils et ressources avec vous en la téléchargeant (PDF).

Obtenir la liste complète :

Etudes utilisateurs

Travail Collaboratif

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 brainstorming, vos états de lards, vos interviews, vos tests, 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 – (Non, je n’ai pas écrit GOOGLE) 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. 
  • Awwapp – Un vrai tableau blanc pour faire des dessins collaboratif !
  • Klaxoon – Pour animer facilement toutes vos réunions ou cours à distance ! Facile simple et efficace pour travailler à plusieurs.

A/B testing

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. 

Analyse

  • 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 Analytics – Outil qui analyse le trafic sur votre site, cela vous donne des informations précieuses sur vos utilisateurs et clients.
  • 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.
  • 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.

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.

Sauvegarder pour plus tard !

Gardez cette liste d’outils et ressources avec vous en la téléchargeant (PDF).

Obtenir la liste complète :

Conception numérique

Plateforme de conception numérique

De nombreuses plateformes existent et vous permettent de concevoir vos sites Web gratuitement. Cependant certaines sont à privilégier selon vos besoins. 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/ou vous permettra de vérifier que le nom que vous avez choisi n’est pas déjà utilisé.

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é, retesté et approuvé x100 !

E-commerce

  • WooCommerce – Plateforme de 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. 

Site vitrine ou 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.

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…)

Hacking

Lorsque que vous vous lancez dans la conception de vos sites, 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 des plugins Google Chrome à avoir 

  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. SimilarWeb – Découvrez les statistiques de trafic de vos concurrents, les sources et même leurs stratégies de marketing en ligne. (Bon ok, celui là, ce n’est pas un plugin Chrome, mais il reste très pratique)
BONUS
 
  • Growth Hackers Network – Une communauté de plus de 150 000 membres qui partagent des conseils et des articles sur le Growth Hacking, le marketing, l’acquisition d’utilisateurs, l’engagement, les lancements de produits et plus encore. Un bon moyen de trouver des trucs et astuces pour grandir plus rapidement. 
  • PetitHacks – Une newsletter et des articles qui décomposent les astuces utilisées par d’autres sites Web pour obtenir plus de clics, d’argent, de temps et d’attention.

Sauvegarder pour plus tard !

Gardez cette liste d’outils et ressources avec vous en la téléchargeant (PDF).

Obtenir la liste complète :

SEO

Lorsque vous lancez un site, il faut au minimum 3 mois à Google pour vous référencer sur son moteur de recherche. Alors pensez à tout optimiser dès le départ et à analyser tout ce qui se passe pendant les 6 premiers mois afin d’arranger votre site en fonction de vos utilisateurs. 

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.

ANALYSE

  • Dead Link Checker – Scanne votre site pour identifier les liens cassés, à réparer.
  • Google Pagespeed Insights – Analyser votre site en entrant votre URL, notamment la rapidité de chargement de vos pages.
  • Nibbler – Test de site Web et rapport gratuit qui note votre site en fonction de l’accessibilité, du référencement, des médias sociaux et de la technologie.
  • UX Check – Un plugin Chrome qui vérifie si votre site répond aux normes ergonomiques et d’utilisabilité.

Sauvegarder pour plus tard !

Gardez cette liste d’outils et ressources avec vous en la téléchargeant (PDF).

Obtenir la liste complète :

 

Voilà ! 
Cela fait beaucoup d’informations d’un coup et afin de ne pas en perdre une miette et d’y revenir selon vos besoins, je vous propose de télécharger entièrement cette liste (juste au-dessus) !

3,2,1, à vous de jouer !

Coralie

Prêt à vous lancer ?

Vous êtes décidé à lancer votre entreprise en ligne en mettant les utilisateurs au ♥️de la conception ?

Si certains sujets restent compliqués à mettre en place pour vous, je serais ravie de vous accompagner.