đź§° Boite Ă  outils pour les webdesigners

🎨 Couleurs

- Adobe color : Une roue chromatique pour créer une palette harmonieuse ou extraire une palette directement d'une image

- Coloors - Contrast checker : Pour checker le contraste de tes couleurs

- Contrast finder : Si tu manques de contraste entre tes couleurs, Contrast Finder peut t'aider Ă  trouver une alternative accessible

- Color Space : A utiliser si tu veux créer des dégradés ou trouver des inspirations de palettes modernes à partir d'une couleur

🔤 Typographies

- Google font : Des typographies gratuites et adaptées pour les projets web

- Fontspace : Un large choix de typos avec la possibilité de filtrer selon le type d'utilisation (commercial ou non)

- Fontpair :  L'outil pour trouver le match parfait entre ta typo de titre et de paragraphe

- Fontbrief : Tu ne sais pas quel typo choisir ? Donne ton brief et le site te fera plein de propositions

🖼️ Illustrations / pictogrammes

- Noun project : Ma référence pour trouver des pictogrammes

- Flat icon : Une large librairie d'icĂ´nes, maintenant sous forme d'abonnement pour avoir les formats vectoriels modifiables

- DrawKit : Pour trouver de jolies illustrations, payantes ou gratuites, en 2D ou en 3D

- Scketch Valley : Une bibliothèque d'illustrations vectorielles gratuites dessinées à la main pour vos projets

- Peeps : Des humains dessinés à la main, à personnaliser
du visage Ă  la posture !

📸 Banques d'images

- Unslasph : Sans doute la banque d'images libres de droit la plus utilisée !

- Pexels : Photos et vidéos libre de droits

- Pixabay : Plus d'un million d'images gratuites et de haute qualité, alimenté par les utilisateurs

- Freepik : Des images gratuites comme son nom l'indique

- Kaboompics : Des photos variées, réalistes issues de shooting photos

- O-DAN : Ce site parcourt différentes banques de photos libres de droits et te fait gagner du temps pour LA bonne image. Et c'est gratuit !

🛠️ Edition / optimisation d'images

- Squoosh App : L'outil parfait, facile à prendre en main, pour optimiser ses images pour le web (conversion en format WebP, adaptation de la qualité et de la résolution).

- Remove Bg : Supprime l'arrière plan de tes images en un clic !

✨ Mockup

- Mockup world : Un large choix de mockups réalistes gratuits en .PSD

- Graphic burger : De nombreux mockups sur différents supports.

- Mr Mockup : Des mockups professionnels et uniques pour tous les goûts

- Firmbee : Des mockups photoshop divers et facile Ă  utiliser.

- Ls Graphics : Des mockups, toujours des mockups ...

- Shots : Crée des mockups simples en un rien de temps !

🖱️ UX/UI Design / développement web

- Figma : Design d'interface et prototypage. The best, rien Ă  ajouter !

- Webflow : Mon outil favori pour intégrer les sites de mes clients. Il faut connaitre HTML et CSS pour l'utiliser à son plein potentiel  

- Adobe Illustrator : Pour la création d'illustrations et de logos

🌿 Ecoconception numérique

- Eco index : Développé par GreenIT, il permet d’auditer l’impact environnemental de ton site en attribuant une note allant de A à G.

- Website carbon (en anglais) : Permet de connaître une estimation du CO2 équivalent produit à chaque visite d'une page et de savoir si l’hébergeur utilisé est “vert”. Le site testé sera comparé à tous les autres sites testés sur la plateforme et à une moyenne globale.

- Guide d'écoconception : Crée par les designers éthiques, ce guide est une excellente base pour se lancer dans l'écoconception !

📊 SEO - outils gratuits

- Google Search Console : Pour faire référencer ses pages, mesurer les performances et le trafic d'un site et optimiser le classement dans les résultats de recherche.
‍
- Ahrefs backlink-checker & Ahrefs traffic-checker : Pour connaitre l'autorité de domaine, les backlinks mais aussi le trafic d'un site web

- Keyword surfer : Pour générer des idées de mots-clés et connaître le volume de recherche d'un mot clé directement dans les résultats de recherche Google.

- SEO Hero Ninja : Pour connaître son positionnement sur une requête en temps réel

- Detailed SEO : Pour vérifier le balisage d'une page web (hiérarchie de titres, métadonnées ...)

🪄 Extensions de navigateur

- CSS Peeper : Inspecte un site web en quelques secondes et récupère directement les propriétés de style (typographies, couleurs, assets)

- Lighthouse : Extension gratuite pour auditer un site web sur différents critères (performance, accessibilité, bonnes pratiques et SEO)

- Keyword surfer : Pour générer des idées de mots-clés et connaître le volume de recherche d'un mot clé directement dans les résultats de recherche Google.

- What's run : Pour jeter un coup d'oeil sous le capot d'un site et découvrir ce qui le fait fonctionner (CMS, frameworks, outils d'analyse, plugins Wordpress...)

- Wappalyzer : Identifie les technologies utilisées sur un site web (même principe que What's run, les deux sont complémentaires)

⏰ Organisation et admin

- Trello : Pour organiser tout type de tâches. Personnellement, je l'utilise pour mon calendrier éditorial

- Toggl Track : Pour tracker son temps. Ultra simple et visuel, il permet de catégoriser ses tâches par projet et par type d'activité et de connaitre exactement où passe notre temps grâce à des rapports précis

- Yousign : La solution pour faire signer facilement ses devis et documents Ă  distance

- Zcal : Un calendrier de prise de rendez-vous personnalisable et facile Ă  utiliser

Les livres à dévorer

Couverture du livre "Design émotionnel" de Aaron Walter

Design émotionnel - Aaron Walter

Apprends à engager émotionnellement les visiteurs de ton site web en leur offrant une expérience positive grâce aux préceptes énoncés dans ce petit livre.
‍
J’ai apprécié : la facilité et rapidité de lecture, les exemples concrets, et les rapprochements avec des notions de psychologie.

Pas de langue de bois, ni de charabia et surtout des méthodes simples et accessibles à appliquer !

Couverture du livre "Don't make me think" de Steve Krug

Don't make me think - Steve Krug

C'est un classique ! Selon Steve Krug, un site web bien conçu doit être explicite et intuitif, permettant aux utilisateurs de l'utiliser sans même réfléchir.

Basé sur du bon sens et augmenté d’exemples, le livre couvre différents aspects de l'utilisabilité des sites web (navigation, conception visuelle, tests utilisateur et l'importance d'une communication claire et concise).
‍
Le style d’écriture et le ton de l’auteur très direct et humoristique rendent le livre intéressant et amusant même pour des non designers !

Couverture du livre "Ergonomie & UX Design" d'Amélie Boucher

Ergonomie web & UX Design - Amélie Boucher

La bible de l'UX Design !

Tout service numérique doit réussir le pari difficile de satisfaire ses utilisateurs. Alors, comment concevoir un site si agréable et efficace qu'il donne envie d'y revenir ?
En lisant ce livre et en suivant les conseils pratiques et méthodologiques d'Amélie Boucher.

Certes, il est assez long mais si tu dois bien commencer par un livre pour apprendre l'UX design et les régles d'ergonomie, c'est celui-ci !