Un design system, ce n’est pas (juste) un UI kit et pourquoi construire un Design System ?

Un design system, ce n’est pas (juste) un UI kit et pourquoi construire un Design System ?

Parpouark

📌 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.

DEEPSITE : l’IA qui révolutionne la création de sites web sans coder
| |

DEEPSITE : l’IA qui révolutionne la création de sites web sans coder

Parpouark

📌 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 : Installez vos IA en local
| |

PINOKIO : Installez vos IA en local

Parpouark

📌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

BROWSER-USE : L’ia controle votre navigateur web
| | |

BROWSER-USE : L’ia controle votre navigateur web

Parpouark

📌 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 1
| | |

TRICKLE : Build stunning websites, AI apps, and forms with ease

Parpouark

📌 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.

v0 : Figma to Code
| | |

v0 : Figma to Code

Parpouark

📌 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.

PAPERCLIP : Une approche hybride de la conception et du codage d’interfaces utilisateur web
|

PAPERCLIP : Une approche hybride de la conception et du codage d’interfaces utilisateur web

Parpouark

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…

Penpot
| |

PENPOT : Outil de conception OpenSource

Parpouark

📌 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

Peeps2

OPENPEEPS : Bibliothèque d’illustrations dessinées à la main

Parpouark

📌 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

UX IBM
|

UX vs UI en 2020

Parpouark

📌 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

DesignSystem
|

Le design System détruit il le métier d’UX ?

Parpouark

📌 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

static1
|

GUIDE : From Sketch / Figma to After Affect

Parpouark

📌 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.

deviceshots

DEVICE SHOTS

Parpouark

📌 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

GRADIENT HUNT

GRADIENT HUNT

Parpouark

📌 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

framer
|

FRAMER FOR WEB

Parpouark

📌 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

lineicon

LINE ICONS

Parpouark

📌 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

NORDEsvgicons

NORDE : collection d’icônes SVG

Parpouark

📌 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

Empty
|

Empty states

Parpouark

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

UI motion design
| |

Motion Design : Le recueil

Parpouark

📌 Très bon article sur le Motion Design. J’aurai tendance à utiliser KITE ou HYPE TUMULT pour effectuer ce genre de projet. Je compte bien essayer rapidement SVGATOR pour les petites animations de feedback et les intégrer à un proto (https://app.svgator.com/) Et enfin pour compléter cet article, je vous met un lien un autre article sur le même sujet :
https://www.webdesignerdepot.com/2017/10/3-smart-ways-to-engage-users-with-animation/