Ici, on parle couleurs, fonts, composants, icônes, illustration et outils, et puis tout en bas je m'éclate à mettre des trucs totalement random.

☑Branding

• Générateur de logo : Looka

• Collection de logos de marques en SVG ou PNG : InstantLogoSearch, WolrdVectorLogo

• Inspiration pour du branding Brand New

☑Checklist

• Checklist design A collection of the best design practices.

• A checklist to improve your product UI (UX collective)

• One-Pager Checklist

☑Colors

• The Myths of Color Contrast Un article passionant sur les limites de la norme d'accessibilité des couleurs WCAG

• Accessible Palette est un très bon outil pour construire des palettes accessibles selon des normes justes (CIELAB, WCAG 3)

• Colorific Un outil qui permet de tester l'accessibilité d'une couleur par rapport à sa perception et les spécificités du daltonisme. La même chose avec Who Can Use.

• Contrast Une app mac qui permet de checker l'accessibilité WCAG d'une couleur. La même chose en webapp : Colorable, Contrast Checker.

• Color Safe, Accessible Color Palette Générateurs de palettes accessibles.

• ButtonBuddy Pour checker le contraste d'un bouton

• Shaderade converti un code hexadécimal en déclinaisons lighten et darken hexadécimales

• Color Hunt, Adobe Color Wheel, Swatch.io, Happy Hues, Paletton, ColorBox, HueSnap, Parametric Color Mixer Color palette pickers manuels

• Pigment Color palette pickers intelligents

• Random hamonies, Coolors, Picular, Colormind, ColorSpark Color palette pickers aléatoires

• Colors and Fonts, ColorQuote Combinaisons de fonts & colors

• Grabient Générateur customisable de gradients pour l'UI. Similaires : GradientsGuru, uiGradient, WebGradient, ColorSpark

• http://ourownthing.co.uk/gradpad.html CSS gradient generator, create lovely CSS color gradients for web design in the browser.

• SmoothShadow Un plugin Figma pour mieux gérer ses shadows

☑️Composants UI

• Haikei combine plusieurs anciens outils de générations de formes SVG en un !

• EmptyStates : une gallerie d'exemples d'empty states pour s'inspirer

• CollectUI : une gallerie d'exemples de composants pour s'inspirer (similaire : Component Gallery)

• https://uxplanet.org/best-practices-for-modal-window-design-627f7aba57f1

• https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

☑️Daily inspiration

• Besoin d’inspiration à partir des meilleurs produits, applis, logos, expériences utilisateurs et patterns d'interfaces ? One Page Love, Mobbin, Design Vault, UIsources, UIgarage, SaaSFrame, Screenlane 

• Pour l'inspiration des tendances du moment : Awwwards, Dribbble, Maxibestof

☑️Datavisualisation

• VizPalette est un outil qui permet de tester une palette de couleur sur des charts et d'avoir des infos d'accessibilité également

• From Data To Viz est une petite base de connaissance sur les différents charts de base et dans quels cas les utiliser

☑️Design à la demande

• Design à la demande pour les startups (abonnement mensuel) : ManyPixels or Design Pickle

• Des studios de product design : Mozza Studio

☑️Design System

• CORE Design System starters kit

• Zeroheight pour créer un design system à mi-chemin entre Storybook (React) et Sketch/Figma (aussi : Confluence, Dropbox Paper, Notion)

• Figmaster, DesignSystemCourse, Everything You Need To Know About Design Systems, Component Design Guidelines Apprendre à faire un Design System

• Quelques plugins Figma/Sketch pour vous aider à créer votre design system : Master : organisez vos composants en 1 clic (Figma) Similayer : sélectionnez des calques avec les mêmes attributs (Figma) Rename It : renommez plusieurs calques en même temps (Figma) Symbol Organizer : pour organiser vos symboles sous forme de grille lisible (Sketch)

• Designsystemchecklist : Une checklist open-source pour aider à planifier, construire et faire grossir un design system.

• DesignSystems : articles et bonnes pratiques autour des design systems

• Designsystems.fr, DesignSystemsREPO, DesignSystemsForFigma, OpenDesignSystems: collections de design systems publiques pour s'inspirer (et Nord Design System qui est bien aussi)

• DesignSystems Buy-In Deck : une présentation toute faite pour convaincre votre client/employeur de l'intérêt d'un design system

• DesignSystemIcons : une petite librairie d’icônes pour illustrer les sections de votre design system

☑️Design Tools

• Penpot Alternatives à Sketch et Figma

• Jitter Outils de motion design appliqué au web

• Uizard est un outil de design pour les non-designers, capable de convertir un croquis en maquette HD

• BuilderX est un outil d'UI en ligne similaire à Sketch/Figma mais qui converti vos designs en React/ReactNative automatiquement. (similaire : Plasmic pour du React/NextJS/Gatsby)

• Represent permet de prévisualiser ses designs Sketch / Figma sur téléphone ou desktop

• Abstract permet de versionner les fichiers de design, un peu comme Github pour les devs. Pratique pour collaborer à plusieurs sur Sketch par exemple. Plant est un équivalent.

• Bravo Studio permet de convertir un fichier Figma en prototype iOS/Android.

• ProtoPie est un outil de prototypage ultra-complet pour palier au prototypage simple de Sketch/Figma. Cliques ici pour le tuto! (similaires : Origami, InVision, Proto, Moqups, Marvel)

• Anima est un outil qui converti un fichier de design en React (VueJS/Angular coming soon)

• Grid Calculator est un outil très simple pour calculer une grille en mode pixel perfect

• Photoshop For Designers Who Don't Use Photoshop (similaire : Photopea)

☑️Emojis

• Patternico - Générateur de fonds d'écrans avec uniquement des emojis

• Slackmojis - Liste d'emojis taillés pour Slack, éditée par la communauté

• Emojipedia - Encyclopédie des émojis avec leur déclinaison par média

• Comment rendre les emojis accessibles ? Un article expliquant le rendu accessible des emojis, avec des ressources pour aller plus loin.

☑️Figma ressources

• https://www.figmaresources.com/, https://www.figmacrush.com/

• From Sketch to Figma, un guide pour passer de l'un à l'autre

• Figma To Video Animer un fichier Figma en vidéo MP4

• Comment bien utiliser les Variants Figma ?

• Awesome Figma Tips : des astuces pour accélérer ton usage de Figma (similaire : Figma Snacks)

☑️Fonts

• TypeWolf Font inspiration

• Pour trouver de chouettes polices : Google Fonts, FontSquirrel, TypeNugget, TypeKit, Type Anything, Graphic Burger, FontShare et Dafont pour le côté excentrique… (What The Font et Font Face Ninja sont aussi de bons outils pour l’inspiration)

• Whatfontis Pour trouver une font mais également une font similaire si vous n'avez pas le budget pour l'acheter

• Font In Logo Pour trouver quelle marque utilise quelle font

• Free Faces, FontArena, Fontain Collections de free fonts

• FontJoy, FontPair Combinaison de duos de fonts

• Quelques fonts variables : Inter

☑️Fournitures

• UIPrint : une collection de devices à imprimer pour dessiner dessus

• UI Stencils : des outils de dessin UI (règles, tampons...)

☑️Icônes

• Pour des icônes web libres de droit (pour une présentation ou un exemple de site) : Flaticon, The Noun Project, IconStore, Illustrio, Entypo, Iconfinder, to[icon], icons8 et Nucleo

• Collections d'icônes : Tabler Icons, Hand-drawn Icons, Ionicons, SVGBox, Gradientify, OrionIcons, MonoIcons, et pleins d'autres ici...

• De l'aide pour créer ses propres icones : 7 principles of Icon Design

☑️Illustrations

• Collections d'illustrations : drawkit.io, undraw.co, PowerPeoplePlateform, Glaze, Guacamole, OpenDoodles, OhMyStartup, Shapefest, et une longue liste d'autres...

• Collections d'illustrations de mains : Handz

• Constructeur d'illustrations : humaaans.com, OpenPeeps, Blush, Wrrooom!, Fresh Folks, Superscene4 , Artify

• Stock Illustrations : Mixkit

☑️Images

• Ui Faces : Des photos de personnes réelles, libres de droits + plugin Sketch, Figma, Adobe XD

☑️Mockups

• Atomize design is the most advanced UI design framework that helps designers create beautiful and consistent user interfaces for the web

• Angle : 3100 Vector and 3D device mockups for Sketch, Figma and XD

• https://artboard.studio/ (with animation)

• https://files.design/free iOS GUI

• 40 iPhone 3d mockups https://www.bemore.graphics/

☑️Patterns

• PatternCollect Inspirations pour patterns

• Hero Patterns for Figma, Paaatterns, NicelyDone Collection de patterns

• Pattern Generator, PatternPad Générateur de patterns

☑️Videos / Motion Design

• Besoin d’enregistrer une vidéo de votre écran pour expliquer l’UI de votre produit ? Loom

• Intégrer une vidéo en une ligne de code : OneLinePlayer

• The UX Design in Motion Manifesto

• A Beginner's Guide to Lottie : Lottie est une librairie d'animations customisables par Airbnb

• Rive est un outil novateur en motion design qui permet d'allier le collaboratif de Figma avec l'animation d'After Effect

✨ Random Land

• La vieille interface Macintosh, enfin refaire et réinstallable par tous

• Pareil pour Windows & Linux mais au format iso