— Chapitre 6 – Édition 2

« LES OUTILS » : LES OUTILS POUR DÉVELOPPER ET CONCEVOIR FACILEMENT SON SITE WEB

Mock-Up

Pour créer un mock-up de votre site, vous pouvez opter pour un acteur historique comme Balsamiq, simple à mettre en œuvre, ou Sketch plus puissant. Figma est néanmoins à l’heure actuelle, devenu un des outils de référence dans ce domaine. Il est très pratique et complet. Nous l’utilisons régulièrement. Encore plus facile, gratuit et sans création de compte, optez pour wireframe.cc.

➋ Choix de couleurs

Pour sélectionner vos couleurs, référez-vous à votre charte graphique si elle est définie ou utilisez des outils qui proposent des palettes de couleurs harmonieuses.

Par exemple, le site color.adobe.com propose une liste de couleurs complémentaires ou dans les mêmes teintes en fonction d’une couleur donnée. Nous apprécions aussi le compte Instagram colours.cafe.

D’autres sites sont également très complets et pratiques comme : Coolors ou encore Muzli Colors

Référez-vous également au site randoma11y.com : il génère des paires de couleurs, de manière aléatoire, et dont la combinaison est 100% accessible grâce à un bon respect des normes de contrate.

Par ailleurs, si vous repérez des couleurs que vous appréciez en particulier sur un site Internet, vous pouvez récupérer le code couleur associé. Pour cela, il existe des outils simples. Par exemple, l’extension ColorZilla (Chrome ou Firefox) permet à l’aide d’une pipette de récupérer le code hexadécimal désignant une couleur d’une page web. Sur Chrome, vous pouvez aussi opter pour l’extension Geco.

Pour plus de solutions pour choisir vos couleurs et mieux comprendre ces codes couleurs que vous croisez souvent dans l’univers marketing digital, rendez-vous à ce lien : livre-marketingdigital.fr/choisir-couleurs-web

➌ Des librairies gratuites pour choisir vos images

Attention au droit à l’image. Toutes les photos ne sont pas soumises aux mêmes réglementations. Lorsque rien n’est précisé sur une image trouvée sur Internet vous ne pouvez pas considérer qu’elle est libre de droits, au contraire. En revanche, de nombreuses librairies d’images libres de droit et gratuites existent. Utilisez-les. Parmi elles, celles que nous recommandons : unsplash.com, pexels.com, pixabay.com, librestock.com.

Et comme l’IA a désormais fait irruption dans la création d’images, nous pouvons vous recommander quelques sites comme : stockai.com ou encore le générateur Craiyon. Bien sûr, vous pouvez aussi vous référer aux outils les plus connus comme : Midjourney, Dall-E ou encore Bing Image Creator.

Pour intégrer des icônes à vos supports : icons8.com, thenounproject.com, flaticon.com. Pour une sélection encore plus complète, rendez-vous : https://bit.ly/bibliotheques-medias.

➍ Des logiciels pour optimiser vos médias

Pour optimiser vos images (recadrer, redimensionner, compresser), utilisez l’excellent iloveimg.com (gratuit) relativement simple d’approche. Sur smartphone (ou tablettes), nous vous conseillons VSCO. D’autres outils plus aboutis sauront vous convaincre : Lightroom (Adobe), Canva ou encore Snapseed.

➎ Des polices gratuites

FontFace Ninja est une excellente extension de navigateur vous permettant de connaître en un clic le nom d’une police de caractères utilisée sur un site web ; pratique lorsqu’on veut s’inspirer d’un design. Utilisez les polices de la librairie Google Fonts pour bénéficier de polices gratuites et libres de droit, facilement compatibles sur tous les sites pour tous les internautes.