trickle 1
| | |

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

📌 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

📌 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

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…

Peeps2

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

📌 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

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

📌 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

📌 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

📌 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

📌 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

📌 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

📌 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

📌 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

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

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