uiverse.io : La galaxie d’éléments UI gratuits pour vos projets
📌 uiverse.io est une immense bibliothèque open-source d’éléments d’interface (UI) gratuits, créés en HTML/CSS par une communauté de passionnés, prêts à être copiés-collés.
📌 uiverse.io est une immense bibliothèque open-source d’éléments d’interface (UI) gratuits, créés en HTML/CSS par une communauté de passionnés, prêts à être copiés-collés.
📌 ToolJet est une plateforme low-code open-source qui permet aux entreprises de construire et de déployer rapidement des applications internes personnalisées.
📌 MOCHA est un service en ligne conçu pour transformer les idées en applications fonctionnelles sans avoir besoin de coder. Grâce à son intelligence artificielle intégrée, il permet aux entrepreneurs, aux makers et aux professionnels non techniques de créer des applications web et des prototypes en un temps record, tout en maintenant une qualité élevée.
📌 SUBFRAME est un service en ligne pour concevoir des interfaces utilisateur avec rapidité et précision, grâce à une intégration parfaite entre design visuel et code.
📌 GLASS UI est un service en ligne conçu pour générer rapidement des composants HTML et CSS suivant les principes du glassmorphism. Inspiré du site ui.glass, cet outil permet de personnaliser à la volée couleurs, opacité, flou et autres propriétés visuelles pour créer des interfaces modernes et épurées.
📌 Superdesign.dev est une extension VsoCode / Cursor / Windsurf / etc… qui révolutionne la création d’interfaces grâce à l’intelligence artificielle. Pensé pour s’intégrer directement dans les éditeurs de code modernes, il permet d’explorer, tester et générer plusieurs pistes de design en quelques secondes.
📌 TWEAKCN est un service en ligne dédié à la personnalisation visuelle des composants shadcn/ui. Il permet de concevoir des thèmes Tailwind élégants, directement dans le navigateur, sans inscription.
📌 Clarifier deux notions clés du design UX : les design systems et les UI kits, souvent confondus, mais distincts dans leur usage.
📌 Magic Patterns est une application qui transforme la manière de créer des prototypes grâce à l’intelligence artificielle. Elle permet de construire rapidement des interfaces interactives en partant d’un simple prompt ou même d’une capture d’écran. Idéal pour générer un premier prototype en quelques secondes.
📌 Explorons ici la vraie valeur d’un design system au-delà de la simple cohérence visuelle. Trop souvent réduit à une simple bibliothèque de composants ou confondu avec un UI kit, le design system possède comme j’aimer le decrire, deux facettes d’une même pièce : une Design Library et une Code Library. C’est en réalité un ensemble complet d’assets designés et codés qui encadrent la conception et le développement d’un produit numérique.
📌 AYA est une application qui permet de contrôler facilement un appareil Android depuis un ordinateur. Elle sert d’interface graphique pour ADB, offrant un accès simplifié aux outils essentiels du développement et du débogage.
📌 Toools.design est une plateforme qui regroupe plus de 1 500 ressources dédiées au design, régulièrement mises à jour pour la communauté.
📌 INSPO ME est un plugin qui permet d’accéder directement à des inspirations UI/UX de qualité sans quitter un fichier Figma.
📌 DEEPSITE est une plateforme en ligne gratuite qui permet de générer instantanément des sites web professionnels, des jeux interactifs ou des applications à partir de simples descriptions textuelles, appelées “prompts”. Grâce à la puissance du modèle d’IA DeepSeek V3 et à un pré-prompt bien optimisé, DeepSite interprète vos besoins exprimés en langage naturel et produit automatiquement le code, la structure et le design de votre projet.
📌PINOKIO est une application qui permet d’installer, d’exécuter et d’automatiser localement n’importe quelle IA sur un ordinateur, grâce à une interface utilisateur intuitive. Elle permet d’automatiser diverses tâches, y compris l’installation d’applications et de modèles d’IA, la gestion des applications installées, ainsi que l’exécution de commandes pour automatiser des actions sur la machine. Super alternative a Ollama
📌 SHADCN est une bibliothèque de composants UI pour React, conçue pour offrir une expérience fluide et esthétique. Basée sur Radix UI et Tailwind CSS, elle permet d’intégrer rapidement des éléments modernes et accessibles dans une interface.
📌 BROWSER-USE est un service qui permet aux agents IA d’interagir avec les sites web directement dans votre navigateur, comme le propose OPERATOR d’OpenAI par exemple. Grâce à une extraction précise des éléments interactifs, il arrive à naviguer dans les sites et ainsi réaliser les taches que vous lui demandez.
📌 TRICKLE AI est un service en ligne conçu pour créer des sites web, des applications basées sur l’IA et des formulaires, le tout en quelques clics. Grâce à ses fonctionnalités innovantes, il simplifie le processus de création tout en offrant des résultats impressionnants.
📌 BUILDER.io est une application révolutionnaire pour le développement visuel, qui permet de transformer les processus web avec rapidité, efficacité et simplicité et de convertir automatiquement vos Figma en code.
📌 Midscene.js s’appuie sur un modèle de langage multimodal (LLM) capable de « comprendre » intuitivement une interface utilisateur. Il suffit de décrire les interactions ou les formats de données attendus, et l’IA se charge de l’exécution.
📌 V0 est une application révolutionnaire pour les développeurs et designers. Annoncée par Vercel il y a quelques mois, V0.dev utilise une technologie similaire à ChatGPT pour générer du code React dédié à l’interface utilisateur. Ce qui le distingue, c’est sa capacité à transformer directement des designs Figma en code React, facilitant ainsi la transition entre conception et développement.
📌 Je vous mets ici une traduction d’un article vraiment sympa sur les compétences clés d’un UX designers. Je me suis permis également d’amender, de compléter et d’ajouter un certain nombre de commentaires 😉
https://github.com/paperclip-ui/paperclip 📌 PAPERCLIP propose une approche hybride de la construction d’interfaces utilisateur qui vous permet de concevoir et de coder en parallèle. Il se concentre uniquement sur l’aspect visuel de votre application – juste du HTML, du CSS, que vous pouvez ensuite importer directement dans votre application type VSCODE. PAPERCLIP fonctionne actuellement avec React, d’autres…
📌 PRELINE UI est un design system, open-source, basés sur le framework CSS Tailwind, et bien évidement FIGMA.
📌 MONDAY HERO est un outil permettant de convertir vos conceptions Figma, Sketch et XD en code mobile pour les développeurs
📌 GLASSMORPHISM UI GENERATOR est un outil en ligne permettant de générer le code CSS d’une interface en glassmorphism qui est une nouvelle tendance de conception qui repose principalement sur l’effet de flou d’un élément et d’un arrière-plan.
📌 EPICONS est une librairie d’icônes modernes soigneusement conçues. Composé de plus de 2000 icônes de qualité supérieure, EPICONS vous permet de renforcer vos conceptions UI.
📌 DESIGN NOTES est un site de curation, proposant une bibliothèque de ressources gratuite pour Product Designer.
📌 UXTOAST est une application mobile iOS et Android se proposant d’apprendre les lois et principes fondamentaux de la conception UX et UI.
📌 PENPOT est un #outil de #conception et de #prototypage #OpenSource, destinée aux équipes pluridisciplinaires. #CrossPlatform, PENPOT est basé sur le des technologies web, il vous suffit d’utiliser un navigateur moderne et il fonctionne avec un format de fichier ouvert, standard du web : le #SVG.
#cmondary #tools #UX #UI
📌 KRITA est une application open source conçue pour les illustrateurs, les concepteurs, les dessinateurs, les créateurs de bandes dessinées, les matte-painters et les texturistes.
#cmondary #illustration #texture #UI #tools
📌 UX MASTER CLASS est un ensemble de #ressources qui vise à vous aider à apprendre les bases et les meilleures pratiques du #design #UI / #UX pour réussir sur ce marché en expansion. Le tout est hébergé sur un espace #NOTION , en anglais et est vraiment très complet.
📌 OPEN PEEPS est une bibliothèque de personnages vectoriels. Créé par @PabloStranlay, elle fonctionne comme des blocs de construction faits de bras, de jambes, de vêtements, de coiffures et de visages avec émotions. Vous pouvez alors mélanger ces éléments pour créer différents Peeps / personnages.
Le tout utilise les fonctions symboles de Sketch / Figma, donc très simple d’utilisation et surtout directement depuis votre outil de création habituel.
#UI #cmondary
📌 ARTICLE sur les différences entre les différents métiers :
UX , XD, UXD, UED pour User eXperience
UI pour User Interface
CX pour Customer eXperience
IXD pour Interaction Design
UXE pour User eXperience Ecosystem
IA pour Information Architecture
#UX #XD #UXD #UED #UI #CX #IXD #UXE #IA
#cmondary
📌 ARTICLE super intéressant sur ce qu’est l’UI et l’UX.
L’article est composé de la manière suivante :
Qu’est-ce que l’UX ?
– Alors pourquoi le UX est-il si important ?
– UX, UI : quelle est la différence ?
– #UX, c’est la conception de l’expérience utilisateur
– #UI, c’est la conception de l’interface utilisateur
En bref, rien de très neuf, mais j’ai particulièrement bien aimé le « pourquoi est-ce important ? » avec la petite infographie #IBM 😉
Et puis je me dis que peut être est il encore nécessaire de le rappeler en 2020 pour ceux qui ne ferait pas encore bien la différence.
#cmondary
📌 ARTICLE sur la manière qu’a le DesignSystem de changer nos métiers.
En effet, l’autrice présuppose ici qu’une fois que vous aurez un DesignSystem, les emplois commencerons à changer, et vous serez à la recherche de nouvelles compétences CX/UX pour vos candidats.
Parce qu’avec un DesignSystem, n’importe qui peut faire un joli wireframe en utilisant les composants prédéfinis. La tache de conception sera donc une tache d’assemblage, accessible à tout le monde.
Les compétences CX / UX valorisés seront alors plus axés sur la méthodologie et certainement la Recherche, Co-conception et Tests.
#cmondary
📌 ARTICLE sur le lexique du Designer
On ne s’en pas toujours compte en travaillant tous les jours dans le domaine mais c’est assez fournis !
Et vous, en voyez vous des manquants ?
#cmondary
📌 ARTICLE très complet sous forme de guide pas à pas pour créer de petites animations, et micro-intéractions sous after effect après importation des sources Sketch / Figma.
L’idée est simplement d’utiliser les animations sous #AfterEffect pour donner vie à votre interface et montre comment toutes les éléments doivent se comporter et interagir.
📌 DEVICES SHOTS est une petite application web qui vous aide à générer un #mockup de vos #devices en haute résolution. Elle prend en charge presque tous les types d’appareils auxquels vous pouvez penser, vraiment très complet !!
#UX #UI #cmondary
📌 BOOTSTRAP FRAMEWORK FOR SKETCH est un #librairie gratuite en ligne très bien conçue qui vous permettra de très facilement et rapidement créer vos interfaces #Bootstrap sur #Sketch.
#UI #UX #cmondary
📌 GRADIENT HUNT est un service en ligne qui offre un grand nombre de #Gradients.
Vous aurez la possibilité de télécharger ce gradient en #PNG, mais aussi de récupérer les #Hexadécimales.
Une extension chrome est même disponible !
#UI #cmondary
📌 ARTICLE super sympa sur les clichés UX.
J’adore ce genre de petite lecture légère, car cela permet de se positionner par rapport au cliché… De plus j’aime beaucoup cet article car le temps est volontairement très décalé !
#UX #Cmondary
📌 CSS.GG est une #librairie, gratuite, en ligne proposant plus de 700 #icons sous différents formats : #SVG, #FIG, #XD, #CSS, etc
#UX#UI#cmondary
📌 FRAMER. J’étais complètement passé à coté de cette nouvelle version FRAMER FOR WEB mais elle est plutôt intéressante.
En effet FRAMER est maintenant accessible directement depuis votre navigateur. Il permet aussi la #co-creation comme FIGMA et des #interactions poussées pour PROTOPIE.
Un concurrent sérieux donc !!
Et vous, avez vous franchi le pas, et testé FRAMER FOR WEB ?
#Tools #UX #UI #cmondary
📌 DESIGN RESSOURC.ES est une liste d’outils de #design regroupés d’une #librairie en ligne pour aider les designers à progresser et à rechercher de nouveaux outils. Super liste, vraiment très bien fournies
📌 FEATHER est une bibliothèque de 280 #icônes dont vous pourrez paramétrer la taille, l’épaisseur et la couleur.
📌 FEEE MOCKUPS est un ensemble de #mockups pour #photoshop et #sketch, assez divers mais surtout très bien réalisés.
📌 ARTICLE très bien réalisé sur comment « simplifier votre #design ». Plus simple, plus sobre, plus propre, mieux organisé.
J’aime beaucoup de genre d’article.
📌 LINE ICONS est une librairie de + de 500 #cônes gratuites.
(2 000 icônes en version payante). Les #icônes sont disponibles dans les formats #SVG, Web Font, #AI et #React. Interface super claire, si vous chercher un pack homogène et complet, c’est par ici !
#UX #UI #cmondary
📌 #BRAND FETCH est un #plugin qui vous permet de récupérer lse logos #vectoriels de différentes marques. Il suffit d’entrer le nom de la société. Le #plugin est disponible pou #SKETCH, #ADOBEXD, #FIGMA, #CHROME et bientôt #MIRO
📌 BG ERASER est une application permettant de détourer et supprimer le fond des vos photos. Très efficace; a conserver dans votre boite à outils.
Si vous chercher une solution offline vous pouvez toujours vous rabattre sur REMOVE BG, donc je vous avait déjà parlé ( https://www.remove.bg/ )
#Photos #Background #UI #Tools #cmondary
📌 NORDE est un outil de collection d’icônes et plus généralements de SVGs. Il vous permettra de créer des bibliothèques d’assets graphiques et même d’en éditer les couleurs directement au sein de la biblothèque sans avoir besoin de lancer Sketch ou Illustrator !!!
Merci à @Manuel Dorne (Korben) pour la découverte 😉 #SVG #Librairies #UI #Tools #cmondary
📌 USE ANIMATIONS est une librairie d’icônes animés au format JSON.
Très pratique pour donner rapidement du feedback à l’utilisateur, sans trop surcharger les devs 😉 #Icons #Animation #Feedback #UI #cmondary
📌 FLIGHT ICON est une bibliothèque d’icons animés.
Disponible en .GIF ou JSON. Elle s’avère très pratique surtout lors de la communication avec les développeurs.
📌 BOOTSTRAP GRID est un plugin SKETCH qui d’un simple raccourcis vous permettra de générer et afficher une grille bootstrap sur vos artboards.
Plus besoin de paramétrer les grilles directement dans sketch.
📌 DECIMAL NUMBER GENERATOR est un plugin SKETCH permettant de générer de manière aléatoire des nombres décimaux, avec paramétrages du nombre de chiffres après la virgule et unité.
📌 ARTICLE présentant quelques astuces pour gérer vos créations avec du contenu de densité variable.
📌 PRECURSOR est un service de whiteboard collaboratif en ligne.
📌 VECTORIZER est un service de vectorisation d’image en ligne.
📌 IMG LARGER est un service en ligne basé sur une intelligence artificielle et qui fonctionne assez bien. L’idée est d’uploader une image et que l’AI l’agrandisse et « sans perte de qualité »
📌 HEXCOLOR est un site proposant des palettes de couleurs pour inspiration, mais également un color #picker en ligne.
📌 TWILIO est un plugin pour Sketch permettant d’insérer de la data un peu plus réaliste qu’un simple Lorem Ipsum. En plus de fournir des données réalistes, il supporte un grand nombre de langues.
📌 ARTICLE très intéressant sur les 20 règles clés du recrutement d’un designer.
📌 TIPS sketch avec le plugin ANIMA pour créer des prototypes #responsives et ainsi gérer les différents BreakPoints.
📌 WEBFRAME est une source d’inspiration design gratuite en ligne. Chaque source est catégorisée et vous trouverez donc facilement l’inspiration que vous cherchez. Je suis assez étonné de ne pas y trouver de moteur de recherche, mais on s’y fait assez vite en flânant d’un contenu à l’autre.
📌 13 PLUGINS SKETCH pour gérer vos palettes de couleurs.
📌 ARTICLE génial de @Jason Yuan sur son projet MERCURY, un nouveau paradigme visant à remplacer celui du Bureau. Le tout est d’une excellente facture et très inspirant !
https://jeremiahlam.com/blog/why-empty-states-should-never-be-neglected
📌 ARTICLE sur la nécessité de ne pas négliger le status « vide » de vos écrans qui peuvent « être utilisés pour guider vos utilisateurs sur les actions a réaliser, leur apprendre à connaître votre application ou simplement renforcer l’identité de votre marque. »
#EmptyState #Application #Interface #UX #UI #Tips #cmondary
📌 PHRASE est plugin Sketch qui vous permet de gérer très facilement les différentes versions linguistiques.
📌 CULRS est une application mac qui vient se loger dans la barre d’état et qui permet d’obtenir rapidement des palettes de couleurs.
📌 BOOKMARKS DESIGN est un site listant un grand nombre de services en ligne pour les métiers du design. ll vient avantageusement compléter la liste des outils de curation des immanquables du designer !
📌 AWESOME DESIGN TOOLS / PLUGINS est un site qui référence un ensemble de ressources utiles pour designer. On regrette l’absence de ScreenShots, mais la liste et très complète et le moteur de recherche fonctionne très bien !
📌 MINIMAP est un plugin Sketch offrant une vue globale de votre plan de travail afin de localiser vos différents artboards. Un peu à la manière de ce que propose MURAL ou MIRO.
📌 CORE DESIGN SYSTEM est un kit gratuit pour Sketch vous offrant une base de « symbols » pour votre design system !
📌 FREEBIE LOBSTER est un site proposant des ressources UI en version Free voir Freemium. L’ensemble est plutôt quali et assez moderne.
📌 FIGMA se dote de plugins et comble par la même occasion son « retard » sur SKETCH. Ici un article sur les 15 meilleurs
📌 VECTORNATOR est un outil de design vectoriel gratuit, pour Ipad
et bientôt MacOS.
📌 AMADINE est un soft de créaction vectoriel très, très inspiré de illustrator.
📌 ARTICLE très intéressant sur la manière de tracker l’état d’avancement de chacun des composants de votre design system au travers des équipes.
📌 PINIT est un plugin SKETCH offrant des raccourcis pour les configurations de Pin and Resize les plus souvent utilisés.
📌 IRA DESIGN est une librairie gratuite pour créer vos illustrations flat design.
📌 MOBILE ERROR UI KIT est un petit kit .PSD d’écran d’erreur très bien réalisés et contextualisés. La gestion des erreurs est trop souvent négligée lors de la conception !
📌 Je vous propose un petit article très intéressant sur l’évaluation des compétences de votre équipe UX. J’ai dû ajouter des compétences qui n’y figure pas. Et vous, quelles compétences rajouteriez-vous à cette matrice ?
📌 Je parle souvent d’outils d’animation sur linkedin.
📌 Article bien réalisé proposant un ensemble de ressources gratuites pour Sketch.
📌 UI GOODIES ajoute de nouvelles sections à sa liste de ressources :
– Livres
– illustrations
– UI kits
https://uxplanet.org/ux-vs-ui-design-stages-participants-roles-and-skills-28b1d75455c1
Petit ARTICLE des roles de chacun. A transmettre au client 😉
📌 Difficile exercice que de se lancer dans un article sur les futurs tendances Design. Cependant c’est typiquement le type d’article à lire avec attention et qui peut modifier votre prisme de lecture pour les prochains mois à venir. Je recommande 😉
📌 UI LOGOS est un plugin pour sketch qui va vous permettre de rapidement remplacer un ensemble de forme par des Logo de marque. Les logos étant aléatoires et pas nécessairement très connus, cela peut malgré tout se réveler pratique pour un wireframe / maquette, en mode Lorem Ipsum logo
📌 FELIPE est un #plugin pour #sketch assez bluffant qui va transformer des formes simples en éléments graphique. La vidéo devrait vous en convaincre …. !
📌 PURE AGENCY recherche un MANAGER de formation UX / UI afin d’encadrer une équipe jeune, dynamique et motivée, en plein cœur de Paris (châtelet). Si l’idée de nous rejoindre vous tente, faites-moi signe !
📌 UI MOVEMENT est un site d’inspiration pour toutes les micro-interactions que vous pouvez créer au sein de vos applications. Si vous vous essayer à after-effect / hype / Haiku / etc Cela peut être une bonne base pour reproduire des effets sympas
📌 DIVERSE UI est une banque d’image pour créer des profils utilisateurs. Le service est gratuit et met à disposition un ensemble de photos de profil utilisateurs téléchargeable d’un simple clic. Pratique !! Il y même un plugin sketch, (un peu moins utile depuis que Craft propose la même chose, mais bon…)
📌 Article vraiment sympa à base de DO et DON’T pour vos éléments d’interfaces. J’aime beaucoup de type de compte Twitter. Quelqu’un à des conseils de personnes à suivre sur twitter avec ce type de contenu ?
📌 JUSTINMIND mets a disposition un kit pour Salesforce, Je trouve ça génial, et au final assez pratique pour personnaliser son interface Salesforce, que l’on retrouve chez beaucoup de grands groupes maintenant. L’un d’entre vous aurait un kit similaire sous Sketch?
êtes-vous prêt(e) à me soutenir sur Patreon pour lire mes articles en avance ?
Total de 0 votes.