De nouveaux outils passionnants pour les designers, juin 2020


Les meilleurs nouveaux outils pour les designers sont ceux qui vous facilitent la vie et accélèrent vos flux de travail. Vous en trouverez certainement quelques-uns dans cette liste ce mois-ci. Des outils pour vous aider à capturer et à gérer les palettes de couleurs aux analyses de conception basées sur l’IA, en passant par de simples animations, il y en a pour presque tous les concepteurs ou développeurs.

Voici ce qu’il y a de nouveau pour les designers ce mois-ci.

Le générateur de héros

Le générateur de héros est un outil amusant qui vous aidera à créer le bon en-tête de héros sans avoir à écrire le code vous-même. Téléchargez votre image, définissez quelques spécifications pour l’espacement et la couleur, ajoutez un bouton, et vous obtenez le code pour un exemple que vous pouvez construire directement sur l’écran. Veillez à jouer avec le dégradé pour obtenir la bonne couleur et la bonne orientation afin que l’en-tête de votre héros ait une belle apparence et comporte des caractères très lisibles.

herogen

Couleurs triées

Couleurs triées regroupe les couleurs CSS nommées de manière à faire apparaître les couleurs apparentées entre elles. C’est un bon moyen de vérifier les couleurs côte à côte lorsque vous essayez de prendre une décision finale sur une teinte ou une palette de couleurs. Vous pouvez également l’utiliser pour créer une palette monotone.

trié

Attention Insight

Attention Insight est un outil d’analyse de conception alimenté par l’IA qui vous permet de comparer plusieurs conceptions et de mesurer quel objet attire le plus l’attention. Il utilise une combinaison de cartes thermiques et de mesures du pourcentage d’attention pour vous aider à mesurer la clarté globale de votre design. De nouvelles fonctionnalités, telles qu’un vérificateur de contraste, sont également en préparation. Il fonctionne comme une application web, un plugin pour les logiciels populaires ou une extension de Chrome.

attention

Copier-coller couleur

Copier-coller couleur est une application qui vous permet de capturer une couleur à partir de pratiquement n’importe quoi et de la coller ensuite sur Figma, Sketch ou un navigateur web. C’est un moyen rapide d’obtenir des petits bouts d’inspiration quand vous les voyez.

colorcopy

Runme

Runmequi est encore en version bêta, vous permet de créer, de déployer et de lancer une application à partir de n’importe quel Git-repo public en un seul clic. Entrez une URL et quelques commandes et vous êtes prêt à partir. C’est un outil open-source et les contributions sont les bienvenues.

runme

Notation brute

Notation brute est une petite bibliothèque JavaScript permettant de créer et d’animer des annotations sur une page web. Elle utilise RoughJS pour créer un aspect et une sensation de dessin à la main. Les éléments peuvent être annotés dans un certain nombre de styles différents. La durée et le délai de l’animation peuvent être configurés ou désactivés. Choisissez parmi les options suivantes : souligner, encadrer, entourer, mettre en évidence, barrer, barrer, grouper les éléments, etc.

roughnotation

Sentiers

Il s’agit d’un simple bonbon, mais utile. Sentiers est un simple tracé géométrique sur un axe x et z que vous pouvez attacher à des objets Three.js. L’animation simple est hypnotisante.

trails

Animateur de pose

Animateur de pose prend une illustration vectorielle en 2D et anime en temps réel les courbes qui la contiennent en se basant sur un résultat de reconnaissance de PoseNet et FaceMesh. Il emprunte l’idée d’une animation à base de squelette à l’infographie et l’applique à des personnages vectoriels. (C’est un moyen rapide de se caricaturer.) Vous pouvez construire à partir d’une vidéo de webcam ou d’une image unique dans Chrome ou Safari.

pose

Neumorphisme UI

Neumorphisme UI est un kit d’interface utilisateur composé de composants de style néumorphique. Il comprend plus de 200 composants, 10 sections et cinq pages d’exemples pour construire un site web dans ce style.

neumorph

Photographie 3D avec peinture en profondeur par couches en fonction du contexte

Ce projet, mené par un groupe de chercheurs, a prouvé qu’il était possible de convertir un seul Une image RGB-D en une photo 3Dcomme ce que vous verriez sur un iPhone. Le code source inclus montre comment utiliser une image de profondeur stratifiée dans le cadre d’un modèle basé sur l’apprentissage qui crée un effet tridimensionnel.

3d-foto

Méandre

Méandre est une micro-bibliothèque pour la mise à l’échelle des chaînes de trajectoires de mouvement CSS. Et elle a l’air plutôt bien conçue. Tout ce dont vous avez besoin est un objet avec un chemin (typiquement un SVG) et vous êtes prêt à l’essayer.

méandre

Souligner l’animation

Parfois, c’est la plus simple des animations qui peut avoir le plus grand impact sur un design. Ce Souligner l’animation Le stylo d’Aaron Iker en est un exemple avec un petit trait de soulignement qui se transforme en flèche.

underline

Créer un menu hamburger en SVG & CSS

Que vous l’aimiez ou non, vous devrez probablement créer un élément de menu hamburger à un moment donné. Cet excellent tutoriel du collectif UX explique comment le faire du début à la fin en utilisant une icône SVG et CSS. (Cette leçon est conçue pour que presque toute personne ayant un peu de connaissances en développement puisse suivre avec succès).

hamburger

Blush

Blush est un générateur d’illustrations ludiques et semi-personnalisées. Il utilise des dessins d’artistes du monde entier avec des pièces et des options de couleur que vous pouvez mélanger et assortir pour obtenir l’illustration qui convient le mieux à votre projet de conception. Choisissez vos spécifications et téléchargez un PDF. C’est aussi simple que cela.

blush

Supabase

Supabase dans une alternative open-source à Firebase et ajoute des API en temps réel et reposantes à Postgres sans code. (C’est en Alpha et gratuit à utiliser pendant ce temps).

supabase

Icônes fluides

Icônes fluides comprend 965 icônes dans un style à la Microsoft. Ces icônes colorées et cohérentes sont idéales pour les applications, les présentations, les sites web et les infographies. (Des options gratuites et payantes sont disponibles).

fluent

Domaines d’un seul mot

Vous cherchez un nom de domaine rapide et facile à retenir ? Domaines d’un seul mot vous permet de rechercher tous les domaines d’un mot disponibles à l’achat.

un mot

Icônes des appareils gratuits

Cet ensemble de icônes d’appareils gratuits comprend 67 éléments qui représentent des interfaces utilisateurs et des dispositifs. Ils se présentent sous la forme de plusieurs formats de fichiers – SVG, EPS, PNG et AI – comme un vecteur de type ligne.

icons

Windups

Windups est un outil qui vous aide à ajouter une animation de type machine à écrire aux éléments de texte. C’est une façon amusante d’aider les gens à travers votre conception et de construire un contenu dynamique. Vous pouvez voir à quel point il est attrayant en jouant avec le site Windups avec des blocs de texte et des boutons « continuer ».

windups

Jeu des glorieux glyphes

Testez votre QI en typographie avec le Jeu des glorieux glyphes jeu de ILoveTypography.com. Le jeu comprend 30 questions sur les caractères glyphes, où vous devez identifier une police de caractères. C’est beaucoup plus difficile que vous ne le pensez !

glyphs

Cosmos

Cosmos est une belle famille de polices de caractères dégradées et colorées. Elle contient des formes de lettres avec des options hologramme, multicolore, minimal, pépin et flou est un style lisible et tendance. Cette famille de polices de qualité supérieure est disponible par le style ou tout court.

cosmos

Ephemera

Ephemera est une police de caractères groovy de style nouveauté qui présente des lignes amusantes, de nombreuses formes et éléments communs, et des glyphes qui s’associent pour des combinaisons de lettres exceptionnelles. Elle pourrait faire une belle marque de fabrique ou un élément intéressant de type d’affichage. Elle comprend des caractères majuscules et minuscules, des chiffres et quelques extras.

ephe

Kavo Serif

Kavo Serif est une police de caractères propre et moderne à cinq graisses, et comprend même des modèles de logos. C’est une police polyvalente qui fonctionne très bien en petites et grandes tailles.

kavo

Republiko

Republiko est un caractère d’affichage moderne avec des styles réguliers et de contour. Bien qu’il soit conçu pour l’affichage, les caractères restent lisibles même dans des tailles plus petites.

republiko

TT Lacs Neue

TT Lacs Neue est une superfamille de polices avec 91 styles. Elle a une belle forme géométrique et l’ensemble comprend même une police variable. Il s’agit d’une police haut de gamme que vous pouvez acheter individuellement ou dans son intégralité.

tt

Bague d’erreur typographique

Bague d’erreur typographique est un caractère super rond avec beaucoup de poids (bien que la version gratuite ait des jeux de caractères limités). Elle est très lisible et comprend des majuscules et des minuscules.

typo

XXIX

XXIX est une dalle audacieuse et futuriste aux formes et aux inclinaisons amusantes. Il est entièrement en majuscules et comporte un nombre limité de chiffres et de glyphes.

xxix