Accessibilité
Outils
- Wave : service en ligne de test d'accessibilité (existe aussi sous forme de plugin)
- Andi : bookmarklet de test d'accessibilité
- HeadingsMap : application permettant d'auditer la hiérarchie de titres d'une page web
- Roue chromatique par Adobe
- Constrast Grid : vérifier les contrastes de vos couleurs
- Gradients.app contrast : générer des contrastes de couleurs et les voir en applications
- Color Contrast Checker (Coolors) : vérifier les contrastes de couleurs
- Coolors picker (Coolors) : analyser une couleur (partie blindness simulator = simulation pour daltoniens)
- Générateur de déclaration d'accessibilité (service officiel)
- axe (deque) : Extension Chrome permettant de tester des interfaces et d'en faire des rapports
- Tenon : Extension chrome et API, open source, qui peut s'intégrer au pipeline de développement (fait pour respecter WCAG 2.0 et 2.1)
Guides et checklists
- RGAA 4 : référentiel général d'amélioration de l'accessibilité (obligations légales et méthode technique)
- Web Content Accessibility Guidelines (WCAG) 2.1 : règles pour l’accessibilité des contenus
- WAI-ARIA : spécification (par W3C) qui définit un ensemble d'attributs HTML supplémentaires permettant une meilleure accessibilité. Maximise la compatibilité avec les technologies d'assistance.
- Notice d'accessibilité éditoriale : Liste des règles à suivre pour les contibuteurs.ices pour mettre en ligne les contenus de façons accessibles, s'adapte en fonction de l'outil de gestion (CMS) utilisé. Prends en compte WCAG 2.1 et le RGAA 4.1. Par AccedeWeb
- Notice d’accessibilité fonctionnelle et graphique : Liste des règles à suivre pour que les maquettes ergonomiques (storyboards, wireframes) et graphiques soient compatibles avec les règles d’accessibilité. Prends en compte WCAG 2.1 et le RGAA 4.1.2. Par AccedeWeb
- Checklist pour designer un web accessible et inclusif par Design accessible
- Documenter l’accessibilité en phase de design par Stéphanie Walter
- Visionary : guide pour comprendre le daltonisme (+ extension à destination des daltoniens)
- Opquast : 240 règles pour améliorer vos sites et mieux prendre en compte vos utilisateurs
Allez plus loin
- Le blog d'Access42, experts en accessibilité web, rédacteurs de la version 3 du RGAA
- design-accessible.fr par Anne-Sophie Tranchet
- Accessibilité et couleurs par Stéphanie Walter
- AVH : association d'aide aux aveugles et aux malvoyants
Certains outils ne fonctionnent pas sur les sites privés ou pas sécurisés.
Banques d'images
Gratuites et libres de droit
- Isorepublic : photos
- StockSnap : photos
- Pexels : photos
- Skitterphoto : photos
- Pixabay : photos
- Unsplash : photos
- Gratisography : photos et illustrations
- Stock up (site qui pioche dans différentes banques d'images gratuites : licence à vérifier pour chaque photo)
- Art Institute of Chicago : œuvres d'art
- MET de New York : œuvres d'art
- Rijksstudio : œuvres d'art
- Paris Musées : œuvres d'art
- Font awesome : Icônes (plan premium payant) (svg)
- Icon icons : Icônes (svg, png, jpg)
- SVG Repo : Icônes (svg)
Payantes
- Getty images : photos
- Istock : photos et illustrations
- Adobe stock : photos et illustrations
- Flaticon : Icônes
- IcoMoon : Icônes
Autres
- Outils d'optimisation d'images : partie éco-conception
- Générateur de favicon (web) pour générer une icône et le code HTML adapté (merci à Emma Romanoks pour sa contribution)
Banques typographiques
Gratuites et libres de droit
Payantes
- Fontstand : location et vente
Toujours plus
- Pousse ta fonte : regroupe pleins d'autres sites (payants et gratuits)
- WhatFont : extension à installer pour pouvoir connaitre le nom d'une typographie utiliser sur un site web
Attention, parfois une typographie peut être gratuite uniquement pour une certaine utilisations (personnelle ou commerciale), pour certains supports (print, web, application) ou pour un nombre de vues maximum. Veuillez vérifier les différentes conditions d'utilisation et les licences.
Blogs & Actualités
- Le blog de Stéphanie Walter, senior UX designer, accessibilité web
- Le blog de La grande ourse, agence d'UX design
- Le blog d'Alsacréation, agence web
- Le blog de l'Arquen, consultants experts UX design
- Blog de l'UX designer : actualité et boîte à outils autour de l'UX design
- WP marmite : guides et actualité WordPress
- WP formation : actualités et formation WordPress & Woocommerce
- Le blog du modérateur : actualité digitale (web, marketing, social, tech)
- Le blog de You Love Words, pour concevoir et produire vos contenus digitaux
- Novethic : actualité et transition numérique
- Green IT, association autour de la sobriété numérique, l'écoconception web et de la lowtech
Couleurs
Créer des gammes colorées
- Palette generator (Coolors) : générer des gammes colorées aléatoires que l'on peut ajuster manuellement
- Explore palettes (Coolors) : bibliothèque de gamme colorée déjà toutes faites
- Image picker (Coolors) : extraire des couleurs d'une image
- Roue chromatique Adobe : créer facilement des gammes de couleurs monochromes, complémentaires, etc.
- CSS Gradient : créer des dégradés de couleurs (export CSS inclus)
Allez plus loin
- Comprendre les couleurs (Canva) : article simple et efficace sur les couleurs et les différents types de palettes
- Pentone : marque de couleurs calibrées pour l'impression (documents, affiches, papeteries, etc.)
- RAL : marque de couleurs calibrées pour la création de peinture (murs, meubles, industrie, etc.)
- La signification de couleurs, par Code couleur
- Gradients.app Converter : convertisseur de couleurs (Hex, CMJN, RVB, TSV, TSL)
(= Hex, CMYK, RGB, HSV, HSL en anglais)
- Outil Pipette Couleur : extension à installer pour pouvoir extraire un code couleur sur une page web
- Un super article sur la gestion des couleurs dans les graph, par Datawrapper (en anglais)
- Un super article sur la gestion des couleurs genrées dans les datas visualisations, encore par Datawrapper (toujours en anglais)
Vérifier les contrastes pour une bonne visibilité : partie accessibilité
Éco-conception
Sensibilisation, chiffres & sources
- ADEME : agence de la transition écologique (officiel)
- MiNumEco : mission interministérielle numérique écoresponsable (officiel)
- État des lieux et pistes d'action : évaluation de l'impact environnemental du numérique en France et analyse prospective, ADEME (officiel)
- Green IT ressources : études & chiffres clés
- MOOC numérique responsable : programme court de formation permettant une première approche du Numérique Responsable, à destination de toutes et tous.
- Pourquoi concevoir de manière responsable en tant que designer ? : Article par MG le blog
- La guerre des métaux rares : Conférence par Guillaumes Pitron (14 nov. 2019)
- Pollution numérique : du clic au déclic : infographie pédagogique - Par Qu’est-ce qu’on fait
- Le smartphone, Une relation compliquée : infographie pédagogique - par l'ADEME
- Les métaux : des ressources qui pourraient manquer ? : infographie pédagogique - par l'ADEME
Outils de mesure
- GreenIT-Analysis : extension chrome, qui permet de mesurer l'écoindex d'un site web
- Eco Index : Note l'impact environnemental d'un site
- Websitecarbon : calculer l’empreinte carbone de son site
- Green web foundation : vérifier si son hébergement web est propre
- Sami : calculer l’empreinte carbone d’une entreprise (service payant)
- Google Page Speed Insights (GPI) : Note la vitesse de chargement de vos pages Web sur tous les appareils
- Pingdom : Note la vitesse de vos pages (semble plus précis que GPI)
- GTmetrix : Note la vitesse de vos pages (plus précis et pertinent que GPI)
Guides et checklist
- Le guide d’écoconception de services numériques par les Designers éthiques
- RGESN : Référentiel général d'écoconception de services numériques (Officiel)
- Opquast : 240 règles pour améliorer vos sites et mieux prendre en compte vos utilisateurs
- Git hub Best practices : Les 115 bonnes pratiques (open souce)
- Ecoconception web, les 115 bonnes pratiques (livres) par Green IT
- Guide pratique pour des achats numériques responsables, MiNumEco (officiel)
Outils d'optimisation d'images
- SVGOMG : optimisation de SVG en ligne
- Compressor : optimisation de JPG et PNG en ligne
- Riot : logiciel d'optimisation de JPG et PNG
- Voir notre article sur l'optimisation d'images (par Diane et moi-même)
Intégration & dév.
- Kirby : CMS (Content Management System) pour construire un site léger sur mesure, avec un backoffice (prise en main : pour les initiés)
- Gutenberg : builder natif à WordPress - L'option la plus légère pour ce CMS, car déjà présente par défaut - (prise en main : pour les initiés)
- Underscores : thème blanc compatible WordPress - (prise en main : pour les initiés)
- Voir le guide sur Kirby de Diane
- Coder green pour la planète, par Alex so yes (Développeur fullstack)
Articles
- Les 5R de la sobriété numérique, par Profs en transition
- Favoriser le Dark Mode, est-ce toujours une bonne idée ? par Dernier cri
Allez plus loin
- Liste des ressources sur le numérique responsable, ADEME (officiel)
- Ressources et exemples par les Designers éthiques
- Boite à outils numérique écoresponsable, MiNumEco (officiel)
- Initiez-vous à l'Atomic Design, Openclassroom
- Green IT, actualités autour de la sobriété numérique, l'écoconception web et de la lowtech
- Institut transitions : L’organisme de formation au cœur de la transition écologique et solidaire
- Product Management Responsable : le guide d’action : Par MG le blog
Gestion et organisation
Outils de travail
- Last pass : gestionnaire de mots de passe
- Notion : centraliser mes notes et créer des espaces clients
- todoist : organiser mes journées de travail et projets en créant des listes "to do"
- Freebe : logiciel de facturation (Français)
- Calendly : gestionnaire de prise de rendez-vous
- Bon patron : correcteur orthographique (gratuit)
- Antidote : correcteur orthographique et aide à la rédaction (payant)
- LanguageTool : correcteur orthographique, extension à installer sur son navigateur (gratuit)
- Mural : outil de brainstorming et mind mapping collaboratif
- Toggl : traqueur de temps
- Markup : faire des remarques en pointant directement sur un site existant
- Privnote : envoie de mail sécurisé
Outils open source et/ou éthiques
- Yeswiki : outil libre facilitant la collaboration ouverte
- Framadate : création de sondage
- Framapad : éditeur de texte collaboratif
- Filevert : partage de dossiers volumineux (français et responsable)
Applications divers
- Fireshot : pour pouvoir faire des captures des pages web en entier
- Outil Pipette Couleur : pour pouvoir extraire un code couleur sur une page web
- Loom : créer des messages vidéos tout en partageant son écran
- uBlock Origin : bloqueur publicitaire
- Pocket : enregistrer des sites web et les trier
- WhatFont : pour pouvoir connaitre le nom d'une typographie utiliser sur un site web
Bibliothèques d'inspiration
Design
- Design note : bibliothèque avec pleins de liens d'inspirations et d'outils, autour du design
- Kiblind : magazine dédié aux arts visuels, aux cultures actuelles et aux industries créatives
- Behance : plateforme qui sert de portfolio à de nombres artistes et designers
- Dribbble : plateforme qui sert de portfolio à de nombres artistes et designers
- Instagram : en cherchant les mots clés : #webdesign, #logo, #chartegraphique, etc.
- Pinterest : en cherchant les mots clés : webdesign, logo, charte graphique, etc.
- Pousse ta fonte : bibliothèque de sites de typographies (payants et gratuits)
Web
- Awwwards : bibliothèque de sites web
- Best website gallery : bibliothèque de sites web
- httpster : bibliothèque de sites web
- One page love : bibliothèque de sites web composés d'une seule page
Ressources juridiques
- Le blog officiel du gouvernement concernant le numérique (DINUM)
- INPI : comprendre les droits d'auteurs et se protéger (officiel)
- Mentions obligatoires sur un site internet (officiel)
- RGPD : le règlement général sur la protection des données (RGPD), mode d’emploi (officiel)
- Être transparent (RGPD) : comment informer les personnes et assurer la transparence à ses utilisateurs (officiel)
- CGV : bien former vos clients sur vos conditions générales de vente (officiel)
Il existe des générateurs gratuits pour tous ces textes indispensables à votre site web. Ils peuvent servir de base (surtout au démarrage). Mais rien ne remplace l'œil expert d'un spécialiste pour s'assurer de leurs pertinences, de leurs légalités et leurs efficacités en cas de pépin.
- Top 8 des meilleurs générateurs de mentions légales, par Digitiz
- Générateur de politique de confidentialité gratuit, par Shopify
Site web
CMS
- Kirby : construire un site sur mesure (pour les initiés) - Très léger, bonne base pour créer un site écoconçu avec un backoffice
- Voir le guide sur Kirby, de Diane
- Wordpress.org : construire des sites à partir de thèmes pré-conçus, builder ou sur-mesure (tout public) - CMS lourd, mais parfois nécessaire à certains types de projet, par exemple les e-commerces
Thèmes WordPress
- DIVI : thème et builder non écoconconçu, mais accessible à tous (prise en main 4/5)
- Oxygen builder : thème et builder créé avec l'objectif d'être plus léger que la moyenne (prise en main 2,5/5)
- Underscores : thème blanc (bonne base pour créer un site écoconçu sur-mesure, prise en main : pour les initiés)
- Gutenberg : Thème et builder natif à WordPress (bonne base pour créer un site écoconçu ++ sur-mesure, prise en main : pour les initiés)
Hébergements
Veille & Ressources
- Mon article "Réaliser soi-même un beau site vitrine" : guide pour créer soi-même son site web (WordPress ou Wix) - Niveau débutant
- Liste des plugins WordPress que je recommande (dont e-commerce = WooCommerce)
- WP marmite : guides et actualité WordPress
- WP formation : actualités et formation WordPress & Woocommerce
Autres
- Générateur de favicon pour générer une icône et le code HTML adapté (merci à Emma Romanoks pour sa contribution)
Pour le plaisir
Chaînes youtube
- Écologie rationnelle, mêle esprit critique et écologie pour se donner des arguments sourcés et scientifiques
- Fouloscopie, vulgarisateur en science du comportement des foules
- Heu?reka, vulgarisateur en finance et en économie (choses qui m'endorment en général, donc pour que j'aime sa chaîne, il est vraiment bon)
- Jamy - Epicurieux, parce que c'est un bon vulgarisateur, mais aussi par nostalgie de "C'est pas sorcier"
- Jonna Jinton, la vie d'une habitante suédoise dans le nord du pays. Merveilleusement filmé. Dépaysement et évasion qui fait du bien.
- Never too small, comment repenser et aménager de petits lieux de vie (passion déco et optimisation !)
- Nota Bene, raconte des Histoires avec un grand H
- NS, joueuse de Sims 4 (j'adore ses vidéos constructions, même si je n'y ai jamais joué de ma vie !)
- Science de comptoir, vulgarisatrice en géologie (je ne comprends pas toujours tout, mais on ne dit pas non à tant d'humour !)
- Scilabus, vulgarisatrice scientifique (répond à des questions qu'on ne s'est jamais posée)
- Un créatif, décortique/critique la communication de grandes marques (n'est plus actif, mais il y a toujours ces anciennes vidéos)
- 2e peau, québécoise au talent indéniable pour réaliser de la déco riche en couleurs (impressionnante de créativité et bizarrement beau)
Musique
- Ma playlist spotify : On est b i e n
- Ma playlist spotify : Jour de pluie
Vous voulez contribuer à l'annuaire ?
Me proposer une source, une catégorie ?
Votre participation sera évidemment citée.

Cécile Uzel, webdesigner UX/UI
Je vous aide à réaliser des interfaces simples et efficaces.