OUTIL's Créa & Prod'

APP's & WebSite's

(FuLL LisT *° ))

Outils d'accessibilité

L'accessibilité consiste à créer des sites Web et des applications utilisables par toutes les personnes, y compris les personnes souffrant de troubles visuels, moteurs, auditifs, de la parole ou cognitifs. Vous trouverez ici des outils d'accessibilité Web, des outils de test d'accessibilité et des applications d'accessibilité pour les développeurs et les concepteurs:

• A11ygator - un outil Web pour analyser les sites Web par rapport aux règles du WCAG. Également disponible en tant qu'extension de navigateur et en tant que bot Twitter.
• Accessibility Insights - aide les développeurs à trouver et à résoudre rapidement les problèmes d'accessibilité.
• AChecker - application Web de test d'accessibilité utilisée pour évaluer le contenu HTML en termes de problèmes d'accessibilité.
• ANDI - outil de test d'accessibilité pour le contenu Web (bookmarklet). Il détectera automatiquement les problèmes d'accessibilité, formulera des suggestions pour améliorer l'accessibilité en ligne et vérifiera la conformité 508.
• Axe - moteur d'accessibilité conçu pour fonctionner avec tous les navigateurs modernes et avec tous les outils, frameworks, bibliothèques et environnements que vous utilisez aujourd'hui. C'est un outil de test d'accessibilité automatisé pour les développeurs.
• ColorBox - une application Web qui construit de manière algorithmique des systèmes de couleur accessibles. Fait par l'équipe de conception de Lyft.
• Contraste - une application pour vérifier l'accessibilité du texte par rapport aux directives pour l'accessibilité au contenu Web (WCAG).
• Contraste - une application macOS permettant aux concepteurs et aux développeurs d’accéder rapidement aux taux de contraste des couleurs WCAG.
• Hex Naw - vous aide à tester le contraste et l'accessibilité de systèmes de couleur entiers.
• PA11Y - outil de test d'accessibilité pour trouver des problèmes avec vos pages Web. Il exécute HTML CodeSniffer à partir de la ligne de commande pour la création de rapports d'accessibilité par programme. C'est un outil de développement d'accessibilité.
• Sim Daltonism - simulateur de daltonisme pour macOS et iOS qui vous permet de visualiser les couleurs telles qu'elles sont perçues avec différents types de daltonisme.
• tota11y - une boîte à outils de visualisation d'accessibilité. Fait intéressant: dans le nom de l'outil, vous pouvez voir "a11y". C'est une abréviation d'accessibilité sous la forme "a" suivie de 11 lettres supplémentaires, suivie de "y".
• WAVE - vous permet d’évaluer le contenu Web de problèmes d’accessibilité directement dans Chrome et Firefox. C'est un vérificateur d'accessibilité Web.

La fonctionnalité de vérification de l'accessibilité est également disponible dans VisBug à partir de la catégorie Outils de débogage visuel.

Outils d'animation

Les animations guident les gens à travers le produit, de manière conviviale et en douceur. L'interface utilisateur interactive en direct permet aux utilisateurs de se sentir ravis d'un retour instantané et d'un contact émotionnel. Ces outils gratuits et payants sont conçus pour faciliter la création d’animation. Si vous envisagez de créer des transitions animées, des micro-interactions ou des animations à base de défilement, utilisez ces outils:

• After Effects - une application numérique d'effets visuels, d'animation et de composition développée par Adobe.
• BeatFlyer - un outil Web qui vous permet de créer très rapidement des animations en boucle et accrocheuses à partir de vos compositions multicouches.
• Flare - un puissant outil de conception et d'animation permettant aux concepteurs et aux développeurs de créer des animations pour leur application ou leur jeu.
• Flow - un outil d'animation professionnel pour les conceptions Sketch qui exporte également du code prêt à la production pour les fichiers iOS, Web ou SVG.
• GSAP - une suite d'outils pour des animations HTML5 scriptées et performantes dans tous les principaux navigateurs.
• Haiku Animator - animation basée sur des images clés reliant vos outils d'interface utilisateur à un code que les développeurs peuvent facilement utiliser.
• Keyshape - outil d'animation 2D permettant d'exporter des animations SVG.
• Kite Compositor - une puissante application d'animation et de prototypage pour Mac et iOS.
• LightBox - Ensemble d' animation 2D dessiné à la main.
• Lottie - une bibliothèque mobile pour Android et iOS qui analyse les animations Adobe After Effects exportées au format json avec Bodymovin et les rend en mode natif sur mobile et sur le Web.
• Mantra - un outil d'animation de chronologie basé sur le Web.
• Meteoritic - bibliothèque de délices d'animation pour iOS et Android. Choisissez parmi une variété d'animations qui conviennent à différents styles d'application.
• OFFEO - un fabricant de vidéos en ligne permettant aux petites entreprises de créer des annonces vidéo telles que les grandes marques sans gros budget.
• Slider - créez des publications animées stylées pour Instagram et Facebook en quelques clics, le tout à partir de votre téléphone mobile.
• Spirit - L'outil d'animation qui vous aide à créer et à gérer les animations en temps réel dans le navigateur.
• Stylie - un outil d'animation graphique CSS3 basé sur le Web.
• Tumult Hype - l'application de création d'animation / interactif HTML5 pour macOS.

Principle, Framer, Invision Studio, Flinto font également partie des applications d’animation UI & UX et des outils d’animation logicielle.

Réalité augmentée

La réalité augmentée est une technologie qui met à niveau notre monde réel en y ajoutant une couche d'informations numériques. L'utilisation de la RA augmente de jour en jour avec des dizaines de nouvelles applications, de kits de développement et de nouvelles infrastructures pour la RC. Ainsi, dans cette section, sont rassemblés différents outils de réalité augmentée pour la création, la projection et le prototypage d'applications axées sur la RA:

• Daqri - offre une réalité augmentée de niveau professionnel au personnel en superposant des informations numériques sur l'environnement physique.
• EasyAR - une application mobile et un moteur de réalité augmentée facilitant la résolution des incidents .
• HP Reveal - ajout de valeur au contenu imprimé grâce à l'interactivité visuelle.
• Layar - Trouvez divers objets basés sur la technologie de réalité augmentée.
• Lens Studio - créez, publiez et partagez vos propres expériences d'AR pour Snapchat avec ou sans code.
• Lightform - un outil de conception pour la RA projetée.
• Spark AR Studio - Créez des expériences de RA pour Instagram sans code.
• Torch - une application de conception et de prototypage 3D basée sur le cloud, axée sur la résolution des incidents liés aux arrières.
• Unity - créez des jeux 3D et 2D de haute qualité et déployez-les sur des supports mobiles, de bureau et VR / AR.
• Vectary - Créez de la 3D et des RA pour votre site Web.
• Vuforia - SDK pour appareils mobiles qui permet la création d'applications de réalité augmentée.
• Wikitude - permet à vos applications iOS, Android et Smart Glasses de bénéficier du suivi des images et des objets, du suivi instantané (SLAM), de la géolocalisation, etc.

Outils de collaboration

Vous souhaitez essayer des outils de collaboration pour la conception et le développement agiles? Bonne idée car de tels outils facilitent grandement la vie des concepteurs et des développeurs, permettent de gagner du temps et d’améliorer la productivité. Eh bien, vous savez tout cela à l'ère de Slack. Vous trouverez ici les meilleurs outils de collaboration pour les équipes de produits:

• Airtable - une feuille de calcul, une base de données de pièces et des équipes entièrement flexibles utilisent Airtable pour organiser leur travail à leur manière.
• Appear.in - un simple outil de collaboration vidéo.
• Asana - la plate-forme de gestion du travail utilisée par les équipes pour rester concentré sur les objectifs, les projets et les tâches quotidiennes qui font croître l'activité.
• Basecamp - la suite de gestion de projet conçue pour organiser les employés, déléguer des tâches et suivre les progrès de manière centralisée.
• Filestage - un logiciel de validation de contenu agile qui vous aide à visionner des vidéos, des conceptions et des documents avec des clients et des collègues.
• Galerie : outil de collaboration permettant de télécharger des travaux de conception, d'obtenir des commentaires et de suivre les révisions.
• HiveDesk - un suivi automatique du temps pour les employés distants avec des captures d'écran. Cela facilite la surveillance de la productivité des employés distants et la gestion des projets.
• Jira - outil de développement logiciel utilisé par les équipes agiles.
• Jitsi - vidéoconférence multi-plateforme à code source ouvert que vous pouvez installer vous-même ou utiliser sur leurs serveurs.
• Keybase - une application de collaboration gratuite avec une conversation cryptée de bout en bout, un partage de fichiers, des référentiels git intégrés, etc.
• Mattermost - une plate-forme de messagerie flexible et open source qui répond aux normes de confidentialité et de sécurité les plus strictes.
• Milanote - un outil collaboratif facile à utiliser pour organiser vos idées et vos projets dans des tableaux d'affichage.
• Tableau mixte en temps réel et outils de collaboration pour les équipes distribuées.
• MURAL - Pensez et collaborez visuellement. N'importe où, n'importe quand.
• Nextcloud - plate-forme de collaboration open source pour les fichiers, les forums kanban, le chat et les appels, le calendrier, etc.
• Notion - écrivez, planifiez, collaborez et organisez-vous. La notion est tout ce dont vous avez besoin - dans un seul outil.
• ProofHub - le lieu unique pour tous vos projets, équipes et communications.
• RealtimeBoard (Miro) - plate-forme de tableau blanc pour la collaboration d’équipes interfonctionnelles. Il a récemment été renoncé à Miro.
• Slack - un centre de collaboration pour le travail, peu importe le travail que vous faites. C'est un endroit où les conversations se passent, les décisions sont prises et l'information est toujours à portée de main.
• Sunsama - un gestionnaire de tâches magnifiquement conçu et axé sur l’équipe qui regroupe les billets Trello / Jira / Asana en une seule vue orientée calendrier.
• Taskade - la productivité des équipes rendue simple, amusante et conçue pour les équipes distantes. Taskade est collaboratif et se synchronise en temps réel sur le Web, les mobiles et les ordinateurs de bureau.
• Trello - une application de gestion de projet basée sur le Web qui vous permet d'organiser et de hiérarchiser vos projets de manière amusante, flexible et enrichissante.
• Witeboard - tableau blanc simple en temps réel pour le travail en collaboration.
• Workzone - un logiciel de gestion de projet simple et puissant.
• Wrike - un logiciel de gestion de projet en ligne qui vous donne une visibilité et un contrôle complets sur vos tâches.
• Zenkit - un outil pour planifier des réunions, suivre les progrès du projet et lancer de nouvelles idées.
• Zulip - associe l’immédiateté de la conversation en temps réel à un modèle de thread de messagerie, ce qui permet de se concentrer sur les conversations importantes tout en ignorant celles qui ne le sont pas.

Vous pouvez également avoir une collaboration de conception dans l' outil InVision Freehand .

Outils de sélecteur de couleur

Si vous recherchez un outil Pipette, un identificateur de couleur ou une capture de couleur, consultez cette section. Avec les sélecteurs de couleurs mentionnés ici, vous pourrez créer de nouvelles combinaisons de couleurs et en définir de véritables. Presque tous ces outils sont gratuits:

• BrandColors - la plus grande collection de codes de couleurs de marques officielles.
• Chroma - application Web gratuite qui vous permet d'identifier la couleur.
• Couleur - créez des palettes de couleurs avec la roue des couleurs ou parcourez des milliers de combinaisons de couleurs de la communauté Couleur. Fabriqué par Adobe.
• Color by Cloudflare - un outil permettant de prévisualiser les palettes en fonction des éléments de l'interface utilisateur, de parcourir des combinaisons de couleurs accessibles et de créer des palettes manuellement, via une importation d'URL ou de manière générative.
• Color Deck - une collection de palettes de couleurs basée sur HSL. C'est aussi open-source.
• Color Hexa - outil couleur gratuit fournissant des informations sur toutes les couleurs et générant des palettes de couleurs correspondantes pour les dessins.
• Colour Leap - faites un saut dans le temps et découvrez les couleurs de l'histoire.
• Colorpicker - un outil complet et open-source de manipulation de couleurs avec picking.
• ColorSlurp - le booster ultime de productivité couleur pour les concepteurs et les développeurs.
• Colorwise - recherchez dans les palettes de couleurs des produits les plus votés dans Product Hunt.
• Color Cafe - Les couleurs qui ont inspiré la palette de couleurs moderne dans Instagram.
• Colourcode - outil de conception en ligne, qui vous permet de combiner facilement et intuitivement les couleurs.
• Coolors - le générateur de couleurs extrêmement rapide.
• Culrs - palettes de couleurs conçues avec soin et faciles à utiliser.
• Geenes - un outil pour créer des thèmes de couleurs harmonieuses avec exportation de code et de fichier d’esquisse.
• Pipette instantanée - un outil de pipette minimaliste pour Windows, prend en charge plusieurs formats de couleur pour les concepteurs et les développeurs.
• Just Color Picker - Sélecteur de couleurs hors-ligne et éditeur de couleurs portable gratuit.
• Khroma - outil basé sur l'IA pour générer des palettes de couleurs en fonction de vos préférences.
• Matériau Couleurs Natif - La palette de couleurs de conception du matériau de Google sous la forme d'une application Mac.
• Générateur de palettes de conception de matériaux - obtenez des palettes de couleurs parfaites pour la conception de matériaux de toutes les couleurs
• Paletton - un outil de conception permettant de créer des combinaisons de couleurs qui fonctionnent bien ensemble.
• Picular - un générateur de couleurs primaires de fusée rapide utilisant la recherche d'images de Google.
• Pigment - un générateur de palette de couleurs avec d'innombrables configurations de couleurs suggérées par l'application.
• Pikka - sélecteur de couleurs et générateur de combinaisons de couleurs pour macOS.
• React Color - une collection de sélecteurs de couleurs de Sketch, Photoshop, Chrome. C'est gratuit et open-source.
• SIP - un meilleur moyen de collecter, d’organiser et de partager des couleurs. Pipette globale pour MacOS.
• Skala Color - fonctionne avec une grande variété de formats, couvrant tout ce dont vous aurez probablement besoin pour le développement Web, iOS, Android et macOS.
• Nuancier - application iOS qui vous permet de collecter, d'inspecter et de partager les couleurs qui vous inspirent dans votre vie quotidienne.
• Viz Palette - sélecteur de couleur pour la visualisation de données.

Outils de rétroaction de conception

Comment fournissez-vous et obtenez-vous des commentaires pendant le processus de développement? Ce processus est généralement assez compliqué pour de nombreuses équipes de produits, ce qui a entraîné des retards et des pertes de temps pour les produits lors de la communication aller-retour. Donc, si vous souhaitez obtenir un retour d'information rapide et structurel sur les problèmes d'interface utilisateur ou les bugs visuels, jetez un coup d'œil à cet outil:

• Commentaires sans faille - passez en revue et annotez les applications iOS, puis partagez vos commentaires dans Jira ou Trello.

Outils de transfert de conception

Le transfert de conception a lieu lorsque les concepteurs ont terminé le travail et qu'ils doivent fournir aux concepteurs des conceptions avec toutes les spécifications et tous les actifs. Les outils de transfert de conception permettent de générer automatiquement des guides de style, de commenter la conception et d'inspecter des éléments. Ces outils minimisent les approximations et améliorent l'efficacité du processus de conception.

• Avocode - conceptions ouvertes sans outils de conception. Exportez des images sans préparer de calques. Cliquez sur les calques pour obtenir le code.
• Application sans faille - un outil permettant de comparer la conception attendue et l'application réelle directement dans le simulateur iOS (utile pour les concepteurs utilisant Xcode ou les développeurs mobiles).
• Inspecter - préparer les dessins pour le développement. Fabriqué par Invision.
• Sketch Measure - Le plugin Sketch Redline. Annoter la distance et la taille des éléments.
• Specctr - dans l'événement malheureux que vous concevez l'interface utilisateur dans PS, AI ou ID, cet outil crée des annotations en trait rouge.
• Sympli - transfert automatisé de spécifications et d’actifs de Sketch, Photoshop et Adobe XD. Intégré à Jira, Xcode et Android Studio.
• Zeplin - conceptions de transfert et guides de style avec spécifications précises, ressources, extraits de code automatiquement.

Vous pouvez également effectuer un transfert de conception dans Relay, mentionné dans la section Contrôle de version de conception .

Inspiration de conception

Le processus de création peut être difficile. Alors, si les idées ne vous viennent pas tout de suite à l'esprit, essayez de vous inspirer du travail d'autres designers. Ces sites d'inspiration de conception présentent des modèles de conception, des flux d'utilisateurs, des annotations de courrier électronique et des solutions créatives de sociétés populaires et d'excellents produits:

• Behance - une plateforme en ligne pour présenter et découvrir le travail créatif.
• CodeMyUI - une collection triée sur le volet de conception de sites Web et d'inspiration d'interface utilisateur avec des extraits de code.
• Collect UI - une plate-forme pour votre inspiration quotidienne recueillie à partir de l' interface utilisateur quotidienne et au-delà Basé sur les plans de Dribbble, 14419 dessins choisis à la main.
• Portefeuilles créatifs - une sélection des portefeuilles les plus créatifs réalisés par les concepteurs et les développeurs.
• Design Hunt - une collection quotidienne des meilleurs produits, applications et inspirations pour toutes les créations.
• Dribbble - une communauté en ligne pour présenter des œuvres d'art réalisées par les utilisateurs. Excellente ressource pour s'inspirer du travail des autres.
• Ficture - une archive de polices en cours d'utilisation qui vous inspirera.
• Interface utilisateur Inspiration - communauté qui vise à fournir les meilleures ressources de conception à ceux qui créent pour le Web.
• Hover States - présentez un travail exceptionnel à la pointe de la culture numérique pour et avec la communauté créative.
• Httpster - une ressource d’inspiration mettant en vedette des sites totalement rock créés par des personnes de partout dans le monde.
• H69.Design - collections de pages de destination et ressources gratuites pour les concepteurs.
• Lapa Ninja - conception de pages de destination inspirée par le Web. 1800+ exemples de pages de destination et mis à jour quotidiennement.
• Microcopy Inspirations - exemples de bonnes microcopies sur des sites Web et des applications.
• Mobile Patterns - une bibliothèque de conception inspirante contenant les meilleurs modèles d'interface utilisateur UX (iOS et Android).
• Mobbin - parcourir les modèles de conception mobiles pour les applications populaires. Explorez les flux d’utilisateurs courants tels que l’intégration, l’inscription et la connexion à un compte, les fonctionnalités essentielles, etc.
• One Page Love - une collection de sites Web uniques, magnifiques et uniques, inspirés par la conception de sites Web.
• Owwly - la maison pour les produits numériques conçus avec passion pour concevoir.
• Flux de pages - vidéos de flux d'utilisateurs et captures d'écran pour vous inspirer lorsque vous êtes bloqué. Découvrez des modèles de conception Web et mobiles pour plus de 160 tâches différentes.
• pttrns - modèles de conception pour les applications mobiles populaires.
• Vraiment bons e - mails - plus de 4,150 designs de courriels triés sur le volet.
• ReallyGoodUX - captures d'écran et exemples de l' expérience utilisateur exceptionnelle de véritables produits Web et mobiles. Découvrez les meilleurs exemples UX, y compris les visites et les procédures pas à pas.
• The Design Team - BD sur une équipe de conception pour une startup technologique dans la Silicon Valley.
• Typewolf - aide les concepteurs à choisir la combinaison de polices idéale pour leur prochain projet de conception.
• UI Garage - le guichet unique des concepteurs, des développeurs et des spécialistes du marketing pour trouver inspiration, outils et meilleures ressources.
• Sources d'interface utilisateur - Plus de 500 interactions des applications les mieux conçues et les plus rentables sur l'App Store aujourd'hui.
• Recettes d'interface utilisateur - leçons hebdomadaires de 15 minutes sur la conception d'interface utilisateur à partir des applications les plus populaires.
• UX Archive - parcourez plus de 400 flux d'utilisateurs à travers 120 applications mobiles. Examinez des tâches telles que la réservation, la connexion, l’intégration, les achats, la recherche, etc.
• Waveguide - une banque de connaissances en conception avec des milliers d’exemples d’expériences de produits et de marques enrichis artificiellement (exemples d’applications mobiles, de pages de renvoi, de commerce électronique, de modèles CX / UX).
• Web Design Museum - Plus de 1 200 sites Web sélectionnés avec soin, qui montrent les tendances en matière de conception de sites Web entre 1994 et 2006.

Outils du système de conception

Je parie que vous avez entendu parler de Design Systems, car il s'agit d'un sujet plutôt à la mode. Les systèmes de conception fournissent des modèles de conception cohérents et robustes pour maintenir la conception et le développement synchronisés. Ce sont essentiellement des ensembles de règles, de contraintes et de principes, implémentés dans la conception et le code. Ici vous pouvez trouver des outils pour construire, maintenir et organiser votre propre système de conception.

• Cabana - un système de conception premium pour Sketch qui vous aide à créer des produits étonnants plus rapidement que jamais.
• Catalogue - Guide de style de vie pour les produits numériques, combinant une documentation de conception avec des composants réels.
• Design System Manager - Le responsable du système de conception d'Invision.
• EOS Design System - une source ouverte et personnalisable construite sur Bootstrap selon le concept Atomic Design.
• Frontify - crée des directives graphiques, des bibliothèques de modèles, des systèmes de conception.
• Lingo - créez une bibliothèque de ressources partagée avec toute votre équipe.
• Lucid - outil pour créer, gérer et partager un système de conception. D'une simple bibliothèque de composants à des descriptions détaillées de vos styles.
• Prime Design System Kit - il comprend des modèles de périphérique, des graphiques, un kit d'interface utilisateur et même un kit d'illustration.
• Spécifiez - un outil pour créer, mettre à l'échelle et gérer un système de conception.
• Storybook - un outil open source permettant de développer des composants d'interface utilisateur isolés pour React, Vue et Angular.
• Symbol Design System - Système de conception pour Sketch basé sur des éléments atomiques.
• Zeroheight - Des guides de style créés par les concepteurs, étendus par les développeurs et modifiables par tous.

Nous pouvons également ajouter à cela Sketch, Figma, UXPin et Framer X ( Framer X Team Store ).

Outils de conception pour coder

Tout le monde peut apprendre le développement, mais cela prend du temps et des efforts. Si vous avez besoin d'un site Web ou d'une application dès maintenant et que vous ne voulez pas embaucher de développeur, faites attention aux constructeurs de sites Web. De tels outils de conception sur code vous aideront à créer un portefeuille, un atterrissage simple ou une application rapide et esthétique.

• Anima - une application Web avec un plugin Sketch qui convertit Sketch en HTML.
• Blocs - un outil de conception de sites Web visuel rapide, facile à utiliser et puissant, qui vous permet de créer des sites Web réactifs sans écrire de code.
• Bootstrap Studio - un puissant outil de conception Web pour la création de sites Web réactifs à l'aide de la structure Bootstrap.
• Grapedrop - concevez vos composants et vos projets Web et publiez-les instantanément en ligne avec un éditeur facile à utiliser.
• Mason - une plate-forme de création de fonctionnalités dans laquelle des équipes de produits modernes conçoivent, construisent et déploient ensemble des fonctionnalités front-end.
• Mobirise - logiciel de création de sites Web basé sur Bootstrap 3/4 et \ AMP, créé par glisser-déposer hors ligne.
• PageCloud - le constructeur de site Web le plus rapide et le plus personnalisable permettant à quiconque de créer son site Web idéal.
• PaintCode - application de dessin vectoriel qui convertit instantanément les dessins en code Swift, Objective-C, JavaScript ou Java.
• Pinegrow - un éditeur visuel professionnel pour CSS Grid, Bootstrap 4 et 3, Foundation, responsive design, HTML et CSS.
• px.div - un outil de construction de site approprié pour les développeurs et les concepteurs.
• Readymag - un outil visuellement attrayant pour concevoir sur le Web des pages de renvoi aux lectures multimédias de longue durée, aux présentations et aux portefeuilles.
• Sparkle - le moyen le plus simple de créer un véritable site Web, sans code ni jargon.
• STUDIO - concevez à partir de zéro, collaborez en temps réel et publiez des sites Web.
• Tilda - créez un site Web, une page de destination ou une boutique en ligne gratuitement à l'aide de modules Tilda, puis publiez-le le même jour.
• Wix - le créateur de site Web le plus simple et le plus complet, qui vous permet de créer votre propre site hautement personnalisé.
• Webflow - créez des sites Web réactifs dans votre navigateur, puis hébergez-nous avec nous ou exportez votre code pour héberger où que vous soyez.

Contrôle de version de conception

Les développeurs utilisent activement les outils de contrôle de version depuis longtemps, probablement depuis 2005 (première version de Git). L'utilisation d'un système de contrôle de version n'est pas une tâche facile pour les équipes de développement, alors que le système de contrôle de version design est apparu récemment. Ce marché se développe rapidement et nous espérons voir encore plus de contrôle de version pour les concepteurs:

• Résumé - une plate-forme permettant aux équipes de conception de mettre en version, de gérer et de collaborer sur des fichiers Sketch.
• Folio - un système de contrôle de version simple pour les équipes de conception basé sur Git.
• Kactus - concevez le contrôle de version sans changer vos outils. Gérez les modifications, documentez le travail et gardez votre équipe synchronisée.
• Plant - Application Mac et plug-in Sketch offrant un contrôle de version complet pour les concepteurs et les équipes.
• Relay for Figma - Relay transfère vos derniers actifs de Figma directement sur votre base de code (non encore publiée).
• Versions - un outil de contrôle de version pour les concepteurs avec résolution visuelle, fusion et résolution de conflit. Fonctionne avec GitHub, Bitbucket, GitLab et Azure Devops.

Navigateurs de développement

Les navigateurs de développement ont des fonctionnalités qui aident les développeurs et les concepteurs à créer et à tester des sites Web et des applications.

• Blisk - fournit un espace de travail de développement pour développer et tester des applications Web modernes deux fois plus rapidement.
• Édition développeur Firefox - édition développeur du navigateur Firefox.
• Polypane - un navigateur créé à partir de la base pour créer et tester des sites Web et des applications.

Suivi d'expérience

L'écoute des utilisateurs est importante, mais il est encore plus crucial de voir l'utilisation réelle. Pour cela, vous devez installer différents outils d'analyse, un logiciel de surveillance d'expérience et des applications de comportement utilisateur. Utilisez simplement ces solutions d’analyse par rapport aux données des utilisateurs:

• Amplitude - comprenez vos utilisateurs, publiez rapidement de meilleures expériences de produit et développez votre entreprise.
• Chalkmark - augmentez votre taux de conversion client et vos taux de réussite en fonction des tâches en obtenant des commentaires rapides sur les conceptions avant leur mise en œuvre.
• Fathom - fournit des statistiques de sites Web simples et utiles sans suivre ni stocker les données personnelles de vos utilisateurs.
• FullStory - une application qui capture toutes les données de l'expérience client sur une plate-forme puissante et conviviale.
• Google Analytics - mesurez le retour sur investissement de votre publicité et suivez vos sites et vos applications.
• Heap : saisissez automatiquement toutes les interactions Web, mobiles et dans le cloud, puis analysez vos données de manière rétroactive sans écrire de code.
• Hotjar - découvrez comment les visiteurs utilisent réellement votre site Web et recueillez les réactions des utilisateurs.
• Inspectlet - enregistrez des vidéos de vos visiteurs lorsqu'ils utilisent votre site pour voir tout ce qu'ils font.
• LogRocket - voyez ce que les utilisateurs font sur votre site, vous aidant à reproduire des bogues et à résoudre les problèmes plus rapidement.
• Mixpanel - obtenez des informations sur l'ensemble de vos données centrées sur l'utilisateur pour prendre des décisions plus éclairées et agir plus rapidement en fonction de la manière dont les clients utilisent votre produit ou votre site Web.
• Mouseflow - enregistre les mouvements du curseur de la souris.
• Pendo - mesurez et améliorez l'expérience client au sein de leurs applications.

Outils de police

Les polices sont couramment utilisées pour faire du Web un endroit plus beau. C'est une partie essentielle de tout design. Dans cette section, vous trouverez des générateurs de polices et des outils de recherche de polices vous permettant de gérer et d'utiliser des polices:

• BeFonts - une collection décente de polices gratuites.
• Behance Free Fonts - une liste de polices gratuites téléchargées sur Behance.
• DaFont - archive de polices téléchargeables gratuitement. Naviguez par ordre alphabétique, par style, par auteur ou par popularité.
• Emotype - facilite la recherche de polices en fonction des émotions que vous souhaitez exprimer sur votre site Web.
• Fontbase - la gestion des polices simplifiée.
• FontFabric - une interface magnifique et une bonne collection.
• Fontface Ninja - extension de navigateur permettant de connaître les polices utilisées sur n’importe quel site Web.
• FontPair - un outil simple qui vous aide à coupler Google Fonts ensemble.
• Fontown - un outil typographique avec un catalogue de polices en croissance constante facilitant le flux de travail du concepteur.
• Polices - des milliers de belles polices Adobe.
• Fonts Arena - un site Web de typographie organisé avec des polices gratuites de haute qualité, des articles de recherche conçus pour vous, des alternatives gratuites aux polices premium, des actualités et plus encore.
• FontSelf - une extension pour Illustrator et Photoshop CC qui vous permet de transformer n'importe quel lettrage en polices OpenType en quelques minutes!
• FontSpark — a simple tool to help designers quickly find the best fonts for their projects.
• Font Squirrel — download free fonts with wide collections.
• Google Fonts — making the web more beautiful, fast, and open through great typography.
• Google Webfonts Helper — a hassle way to self-host Google Fonts. It‘s free and open-source.
• LostType — the first Pay-What-You-Want type foundry.
• Measure — measure typographic line lengths with this browser extension for Chrome.
• RightFont — font managing app, helps preview, sync, install and organize fonts over iCloud, Dropbox or Google Drive.
• Sans Forgetica — a downloadable font that is scientifically designed to help you remember your study notes.
• Size Calculator — calculate perceived size using viewing distance and physical size of the printed typography.
• Typeface — font manager that improves your design workflow with live font previews and flexible tagging.
• Wakamai Fondue — the tool that answers the question "what can my font do?".
• Webfont — create and maintain custom SVG icon fonts, made a shared library of icons.
• WordMarkIt — displays your written word/phrase with all the fonts which are already installed on your computer.

You can also handle fonts with Specify, which is mentioned in the Design System Tools section.

Gradient Tools

You can see gradient colors are everywhere — UI, branding, illustration, typography. A gradient is created by using two or more different colors to paint one element while gradually fading between them. It might look as memorable, fresh and unique color. To make such gradient for your design, use these gradient color palettes.

• Blend — create and customize beautiful CSS3 gradients.
• Colorffy — get css, images, ui previews or create your own gradients.
• ColorSpace — the perfect matching color scheme for your next project! Generate nice color palettes.
• ColorSpark — helps designers find unique colors and striking gradient combinations.
• Cool Backgrounds — explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites.
• CoolHue — handpicked gradient palette and swatch for your next super amazing stuff.
• CSS Gradient — a free css gradient generator tool, this website lets you create a colorful gradient background.
• Egg Gradients — a color collection page which includes shades of 12 different colors.
• Grabient — beautiful and simple UI for generating web gradients.
• GradientsList — largest crowdsourced collection of gradients, with daily contributions from users on Gradients Maker for iOS
• Arrière -plans dégradés - découvrez les meilleurs arrière-plans dégradés à partir d'une collection organisée de la liste finale des sites de dégradés.
• Gradient Hunt - une plate-forme libre et ouverte pour l'inspiration de couleurs avec des milliers de dégradés de couleurs tendance faits à la main.
• Gradients Guru - images de fond en mode de fusion et de beaux dégradés de fond pour votre interface utilisateur.
• HtmlColours - réalisez combien il est facile et beau de créer des dégradés avec ce générateur de dégradés.
• UI Gradients - Collection triée sur le volet de beaux dégradés de couleurs pour les concepteurs et les développeurs.
• Dégradés Web - une collection gratuite de 180 dégradés linéaires que vous pouvez utiliser comme arrière-plan de contenu dans n’importe quelle partie de votre site Web.

Outils d'icônes

En plus des polices de caractères, des icônes sont utilisées dans chaque dessin. Ces éléments de base prennent en charge et guident de nombreuses actions utilisateur dans le produit. Les icônes sont sans aucun doute un élément essentiel de la navigation de l'utilisateur. Il est difficile et fastidieux de créer de petits éléments de conception, mais vous pouvez obtenir des milliers d’icônes vectorielles pour un usage personnel et commercial.

• Animaticons - Les animaticons sont un ensemble croissant d'icônes GIF animées haute résolution haute résolution que vous pouvez personnaliser.
• Digital Nomad Icons - icône de style de vie et pack emoji pour votre prochain projet. 25 icônes plates haute résolution.
• Essential Glyphs - créés pour répondre à vos besoins sous forme d'icônes aux formes parfaites. Adapté pour les petites et grandes tailles.
• Icônes Feather - chaque icône est conçue sur une grille 24x24 avec un accent mis sur la simplicité, la cohérence et la lisibilité.
• Flaticon - 1593000+ icônes vectorielles au format SVG, PSD, PNG, EPS ou en tant que police d'icônes.
• Font Awesome - le jeu d'icônes et la boîte à outils les plus populaires du Web, également open source.
• Fontello - outil pour construire des polices personnalisées avec des icônes, également open source.
• Iconscout - Obtenez des icônes, des illustrations et des photos de grande qualité en un seul endroit.
• Iconfinder - une place de marché pour les icônes vectorielles (SVG). Jeux d'icônes disponibles au format IconJar.
• IconJar - stockez toutes vos icônes dans un gestionnaire d'icônes.
• Iconmonstr - Découvrez plus de 4412 icônes gratuites dans 305 collections.Plus grande source d’icônes simples en croissance constante.
• Icon Store - une bibliothèque d'icônes vectorielles gratuites pour des projets personnels et commerciaux, conçues par des designers de premier plan.
• ICONSVG - un outil pour simplifier le processus de recherche et de génération d’icônes communes pour votre projet.
• Icons8 - icônes de style iOS, Android et Windows gratuites.
• Ikonate - personnaliser, ajuster et télécharger des icônes vectorielles gratuites.
• illustrio - une bibliothèque d'icônes plus intelligente. Construisez quelque chose de grand avec des icônes 100% personnalisables.
• Ionicons - des icônes open source magnifiquement conçues.
• Material Design Icons ( Icônes de conception matérielle) - icônes de conception matérielle gratuite rendues possibles par des contributeurs open source.
• Bibliothèque d'icônes de matériaux - collection gratuite de plus de 1000 icônes pour les outils graphiques populaires.
• Noun Project - des icônes pour tout.
• Nucleo - une application Mac et Windows pour collecter, personnaliser et exporter toutes vos icônes.
• Orion Icons - Icônes vectorielles SVG avec une application Web interactive avancée.
• Simple Icons - icônes SVG gratuites pour les marques populaires. Cliquez simplement sur l'icône de votre choix et le téléchargement devrait démarrer automatiquement.
• Streamline Emoji - une collection gratuite de 850 emoji vectoriels. Le style est inspiré du style japonais «Kawaii» (mignon).
• Svgsus - Outil de gestion des icônes SVG.
• SVG Colorizer - un outil pour changer automatiquement la palette de couleurs de tout pack d'icônes svg donné en conservant intelligemment les nuances, les hautes et les basses.
• Tilda Icons - Téléchargez des icônes pour les pages d'atterrissage. Plus de 700 icônes vectorielles, rassemblées en 43 ensembles pour les entreprises.
• Twemoji - L'emoji open source de Twitter vous permet de couvrir tous les besoins emoji de votre projet.
• Unicons - Icônes vectorielles de plus de 1000 pixels et Iconfont pour votre prochain projet.
• VisualPharm - Icônes SVG gratuites avec recherche ultra rapide et Coca-Cola gratuit. Construit pour le plaisir par Icons8.
• Xicons - icônes vectorielles gratuites à mettre à jour tous les 10 jours.
• Zwicon - iconset fabriqué à la main pour votre prochain projet.

Vous pouvez également gérer les icônes avec Spécifier, ce qui est mentionné dans la section Outils système de conception .

Des illustrations

Les illustrations peuvent être utilisées sur votre page de destination, vos billets de blog, votre application ou votre campagne de courrier électronique. Ils rendent votre conception vivante et amusante. Bien dessiner de bonnes illustrations est une tâche d'un graphiste chevronné, vous pouvez récupérer des images et illustrations SVG gratuites de personnes très gentilles de notre communauté:

• Absurd Design - des illustrations gratuites surréalistes pour vos projets.
• Blobmaker - créez des illustrations de blob vectorielles dans le navigateur, avec des couleurs, une complexité et un contraste variables.
• DrawKit - une collection d’illustrations SVG entièrement personnalisables, dans deux styles, disponibles pour votre prochain projet, application ou site Web.
• Humaaans - une bibliothèque gratuite pour mélanger et assortir les illustrations de personnes.
• Illustration by Pngtree — over 13142 professionally designed illustrations of different styles.
• IRA Design — create amazing illustrations, using hand-drawn sketch components, a cool selection of 5 gradients and ai., svg. or png. formats.
• JoeSchmoe — an illustrated avatar collection for developers and designers, perfect as placeholders or live sites.
• LukaszAdam — free vector art illustrations and icons. They are available for personal and commercial use.
• ManyPixels — royalty-free illustrations to power up your projects.
• Ouch — vector illustrations to class up your project. Free for both personal and commercial use.
• unDraw — collection of beautiful SVG images.
• Wannapik - collection d'illustrations gratuites, d'images vectorielles, de photos et d'animations pour toutes les utilisations.

Architecture de l'information

L'architecture de l'information aide les concepteurs à organiser et à structurer le contenu de sites Web, d'applications mobiles et d'autres logiciels. Ainsi, les utilisateurs comprendront les fonctionnalités du produit et trouveront tout le nécessaire. Ces outils d’architecture d’information devraient vous permettre de créer des sitemaps visuels et d’améliorer la structure du contenu de votre site Web:

• DYNO Mapper - organisez des projets de site Web à l'aide de plans de site visuels, d'inventaire du contenu, d'audit de contenu, de planification du contenu, de suivi quotidien des mots clés et de tests d'accessibilité des sites Web.
• OmniGraffle - Créez de superbes diagrammes et conceptions avec cette application puissante et facile à utiliser.
• OptimalSort - outil de tri de cartes qui vous permet de comprendre comment les gens catégorisent le contenu dans votre interface utilisateur.
• Treejack - téléchargez votre sitemap proposé pour voir comment un utilisateur se déplacerait sur votre site.

Création de logo

Un logo est le point de départ de votre identité de marque. Il reflète la mission du produit, la fonctionnalité et le message de la marque. Idéalement, le logo crée un lien fort entre votre produit et les utilisateurs. La création de logo est un art, ainsi que de nombreuses autres disciplines du design. Avec les bons outils de création de logo, cet art peut être réalisé un peu plus rapidement.

• Design Evo - une vaste collection d’icônes vectorielles et de formes vous aide à concevoir facilement des logos personnalisés.
• Création de logo gratuite - créez de superbes logos professionnels en quelques secondes.
• Ressorts graphiques - faites votre choix parmi une galerie de modèles de logo au format vectoriel, classés par secteur. Modifiez les graphiques et les textes de votre modèle, puis téléchargez-les.
• Logo Design Team - offre des services professionnels abordables de création de logo personnalisé et de création de marque.
• Logojoy - utilise l'intelligence artificielle pour générer instantanément des idées de logo uniques pour votre entreprise.
• Logo Lab - mettez votre logo à l'épreuve avec des expériences visuelles automatisées.
• Logo Maker - vous permet de créer un logo gratuit en quelques secondes. Commencez avec une toile vierge, ajoutez du texte et une icône, puis personnalisez.
• Logo Maker by Designhill - générez des milliers de logos uniques en quelques minutes à peine, sans expertise en design.
• Logo Makr - créez un logo gratuitement, choisissez parmi des centaines de polices et d'icônes, puis enregistrez un logo sur votre ordinateur.
• Logo My Way - Choisissez parmi 600 designs de logo personnalisés par des designers créatifs du monde entier.
• Logo Package Express - exportez et personnalisez automatiquement des dizaines de variantes de logo et de types de fichiers pour vos clients en moins de 5 minutes.
• Logo Rank - téléchargez votre logo pour voir comment il se positionne sur un certain nombre de mesures objectives.
• Wizlogo - créez un logo avec un outil simple et abordable, soutenu par des designers professionnels.

Vous pouvez également créer votre logo avec Adobe Photoshop, GIMP, Inkscape, Krita et Vectr, qui sont mentionnés dans les outils de conception d'interface utilisateur .

Outils de maquette

Une maquette est une manière visuelle de représenter le produit. Alors qu'une structure filaire représente principalement la structure d'un produit, une maquette montre à quoi ressemblera le produit. Ces outils de maquette vous aident à créer et à collaborer sur des maquettes, des structures filaires, des diagrammes et des prototypes:

• Artboard Studio - application de conception graphique en ligne principalement axée sur les maquettes de produits.
• Cleanmock - créez de superbes maquettes en utilisant les derniers cadres de périphérique tels que l'iPhone et des arrière-plans personnalisés.
• Craftwork Design - Des produits numériques de première qualité, gratuits et de qualité supérieure, qui rendent votre travail plus rapide et plus facile.
• Appareils par Facebook - images et fichiers Sketch des appareils populaires.
• Dimmy.club - générateur de maquette d'appareil pour votre site Web et les captures d'écran de vos applications.
• Frockes - Les maquettes Frrames sont des maquettes de fenêtres réactives parfaitement conçues pour votre présentation idéale.
• Lstore Graphics - maquettes gratuites et premium, outils UI / UX, créateurs de scènes pour les designers pressés .
• Mockflow - le moyen le plus rapide de lancer des idées sur les interfaces utilisateur.
• Mockup World - des tonnes de fichiers PSD photo réalistes entièrement superposés, gratuits et légaux, facilement personnalisables.
• Mockups For Free - Ressources de conception gratuites, fichiers PSD pour les concepteurs graphiques et Web.
• Mockuuups - outil de glisser-déposer permettant de créer de superbes aperçus d'applications ou tout supportmarketing.
• Mock Video - créez instantanément des maquettes en ajoutant un cadre de périphérique à vos vidéos.
• Moqups — helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes.
• Overframe for Mac — record your prototype & app with device frame overlay.
• PixelBuddha — free and premium high quality resources for web designers and developers.
• Ramotion Store — carefully crafted Apple and Android mockups for Sketch and Photoshop.
• Rotato — animated 3D mockups for your app designs.
• Screely — quickly frame web page designs into a minimalist browser window.
• ScreenSpace — 3D devices videos for motion designer.
• Smartmockups — create stunning product mockups with just a few clicks.
• shotsnapp - créez une superbe présentation de maquette d’appareil pour la conception de votre application numérique et de votre site Web.
• The Mockup Club - un répertoire des meilleures maquettes de conception gratuites pour Photoshop, Sketch, Figma et InVision Studio.
• Threed - générez des maquettes de périphériques 3D personnalisées dans votre navigateur.
• UI Store Design - Plus de 200 ressources de conception gratuites choisies à la main pour Sketch, Figma, Adobe XD, InVision Studio, Photoshop et Illustrator CC.
• UI8 - Design Freebies - des cadeaux épiques pour vous aider à démarrer.
• Bibliothèque de maquettes vectorielles - collection gratuite de maquettes de présentation pour Sketch, Figma & Photoshop.

Pas d'outils de code

Avec la montée des «outils sans code», chaque personne disposant d'un ordinateur portable peut construire et lancer un projet. Ces outils aident les concepteurs et les concepteurs à créer des sites Web, des applications et même des jeux. Aucun outil de code ne permet d'automatiser des tâches de routine et peut être utilisé sans contexte de développement. Jetez un coup d'oeil aux outils ici et si vous avez besoin de plus - cochez la section Design to Code.

• Bubble - créez et hébergez des applications Web sans écrire de code ni engager une équipe d'ingénieurs.
• Carrd - des sites simples, gratuits et entièrement réactifs d' une page pour presque tout.
• Coda - un nouveau type de document qui associe la flexibilité des documents, la puissance des feuilles de calcul et l’utilité des applications dans un seul et même nouveau canevas.
• PageXL - un constructeur de site Web simple d'une page pour créer rapidement des pages de destination.
• Remove.bg - un service gratuit permettant de supprimer l’arrière-plan d’une photo.
• Réaménager - vous donne des blocs de construction et vous pouvez créer des outils beaucoup plus rapidement.
• Sheet2Site - créez un site Web à partir de Google Sheets sans écrire de code.
• Shopify - une plate-forme avec toutes les fonctionnalités de commerce électronique et de point de vente dont vous avez besoin pour créer, gérer et développer votre entreprise.
• Thunkable - un outil de glisser-déposer permettant à quiconque de créer des applications mobiles natives.
• UserGuiding - créez des procédures pas à pas, des listes de contrôle, des points d'accès sans fil et des modaux pour améliorer l'intégration des utilisateurs.

Outils d'art de pixel

L'art de pixel est une forme d'art numérique dans laquelle la couleur est appliquée à des pixels individuels pour créer une image. Le pixel art peut être utilisé pour tout créer, des scènes complexes aux fonds de jeu en passant par les designs de personnage ou les emoji. Si vous êtes curieux d'essayer, consultez ce logiciel de pixel art pour MacOS et Windows:

• Aseprite - éditeur de sprite animé et outil de pixel art.
• Data Pixels - créez un pixel art par programme. Inclut DataPixels.js et l'application de bureau Data Pixels Playground.
• Dessiner! - Pixel et éditeur GIF Open Source basés sur le Web.
• Grafx2 - un programme de peinture bitmap inspiré des programmes Amiga Deluxe Paint and Brilliance. Spécialisé dans le dessin en 256 couleurs.
• GraphicsGale - comporte de nombreuses fonctionnalités spécifiques aux pixels, y compris le contrôle de la palette, l’effacement sélectif des couleurs et des outils permettant de remplacer et d’essayer rapidement de nouvelles couleurs.
• Goya - un éditeur de pixel-art construit sur ClojureScript et Om.
• Make 8 bit art - un outil de dessin au pixel art open source et intégré au navigateur.
• Piskel - éditeur en ligne pour sprites animés et pixel art.
• Pixel art to CSS - application Web de dessin et d'animation de pixel art optimisée par React.
• Poxi - un éditeur d'art pixel plat.
• Pyxel Edit - un éditeur de pixel art conçu pour rendre amusant et facile la création de jeux de tuiles, de niveaux et d’animations.

Outils de prototypage

Un prototype est une conception expérimentale simple d'une solution proposée. Cela devrait aider à tester les idées, les hypothèses de conception et les hypothèses de manière rapide et économique. Les outils de prototypage permettent aux concepteurs et aux clients de voir comment le produit fonctionnerait dans le monde réel et de collaborer sur cette solution. De nombreux outils de prototypage modernes peuvent être utilisés pour la trame filaire, le prototypage et la collaboration:

• Alva - créez des prototypes vivants avec des composants de code. C'est aussi open source.
• Axure RP - wireframing, prototyping, collaboration et génération de spécifications.
• Balsamiq - wireframing et collaboration.
• SAP Build - un ensemble complet d'outils basés sur le cloud pour concevoir et développer votre application d'entreprise.
• Creo - prototypage, exportation de code et constructeur d'applications mobiles intégré.
• InVision - plate-forme de prototypage, de collaboration et de workflow.
• Flinto - une application Mac permettant de créer des prototypes interactifs et animés de conceptions d'application.
• Framer X - un outil pour concevoir visuellement des prototypes interactifs réalistes.
• Keynote - l'application Mac intégrée pour la création de présentations pouvant également être utilisée pour le prototypage rapide (voir comment les concepteurs Apple l' utilisent pour vérifier les concepts de conception).
• Lightwell - outil visuel et SDK permettant de créer des dispositions et des animations mobiles se traduisant en éléments iOS natifs.
• Marvel App - la plate-forme de conception collaborative. Wireframe, prototype, conception en ligne et création de spécifications de conception en un seul endroit.
• Maze - un outil pour les concepteurs et les développeurs qui fournit des résultats analytiques avec des indicateurs de performance clés exploitables pour vos prototypes Invision.
• Origami - un outil gratuit pour la conception d'interfaces utilisateur modernes. Créez rapidement un prototype, exécutez-le sur votre iPhone ou iPad, effectuez-y une itération et exportez des extraits de code que vos ingénieurs peuvent utiliser.
• Pencil - outil de prototypage avec de nombreux composants intégrés que les utilisateurs peuvent facilement installer et utiliser pour créer des maquettes sur des plates-formes de bureau courantes.
• Principe - facilite la conception d'interfaces utilisateur animées et interactives.
• ProtoPie - créez des interactions hi-fi, construisez des prototypes basés sur des capteurs et partagez vos créations étonnantes en quelques minutes à peine .
• Proto.io - un outil pour créer des prototypes haute fidélité entièrement interactifs, qui ressemblent et fonctionnent exactement comme votre application devrait l'être.
• Prott - un outil de prototypage intuitif et facile à utiliser, favorise la collaboration en équipe.
• Uizard - transformez des structures filaires en prototypes interactifs haute fidélité, personnalisez les systèmes de style, exportez-les vers Sketch, exportez-les vers du code HTML / CSS.
• UXPin - construisez des prototypes réalistes, dotés des capacités des composants de code, de la logique, des états et des systèmes de conception.

Vous pouvez également réaliser des prototypes avec Figma, Adobe XD, Sketch et InVision Studio, qui sont mentionnés dans la section Outils de conception d'interface utilisateur .

Logiciel de capture d'écran

Prendre des captures d'écran est une tâche typique du flux de travail de conception et de développement. Donc, ces applications de capture d'écran gratuites et complètes peuvent vous aider à capturer un écran avec facilité. Certaines captures d'écran ne concernent que MacOS, tandis que d'autres prennent en charge les deux systèmes d'exploitation:

• Camtasia - un enregistreur d'écran fourni avec un éditeur intégré complet.
• CleanShot - capturez votre écran de manière supérieure avec l'outil d'annotation intégré et la superposition d'accès rapide.
• CloudApp - Enregistrez des vidéos, webcam, annotez des captures d'écran, créez des GIF.
• Collabshot - prenez et collaborez sur des captures d'écran en temps réel avec vos collègues.
• Gifox - délicieux enregistrement GIF et application de partage.
• Giphy Capture - capturez des parties de votre écran et exportez-les au format gif ou mp4.
• Greenshot - prend une capture d'écran d'une région, d'une fenêtre ou d'un plein écran sélectionnés.
• Kap - enregistreur d'écran source ouvert avec options pour exporter au format GIF, MP4, WebM et APNG.
• Lighshot - capture rapide de votre écran.
• Monosnap - créez des captures d'écran, annotez -les et envoyez-les sur le cloud.
• OBS - logiciel open source pour l'enregistrement vidéo et la diffusion en direct.
• Quicktime - un lecteur vidéo que vous pouvez utiliser pour enregistrer votre écran.
• ScreenFlow - logiciel de montage vidéo et d'enregistrement d'écran pour Mac.
• Screenie - filtre et recherche dans les images, modifie les types de fichiers de capture d'écran.
• ScreenToGif - enregistre un gif d'une partie de l'écran. Uniquement disponible pour Windows.
• ShareX - outil de capture d'écran, de partage de fichiers et de productivité.
• Snagit - capturez des images et des vidéos, créez des GIF, annotez, éditez et partagez.
• Snipping Tool - Outil de capture d'écran gratuit de Windows.
• Snappy - prend des photos rapides et les organise pour vous dans des collections.
• Teampaper Snap - vous permet de prendre des captures d'écran d'une zone sélectionnée.

Outils d'esquisse

Parfois, vous n'avez besoin que d'un crayon et de papier pour créer votre application ou votre site Web. Vous trouverez donc ici des outils de dessin en ligne avec d'excellents modèles de feuilles de croquis pour accélérer votre processus de création:

• Feuilles de calcul responsive - offre des modèles de pré-conception réactifs. Ceux-ci vont automatiquement adapter leur mise en page à toute taille d'écran et inclure des fonctionnalités soignées.
• Sketchsheets - un projet open source dédié à la fourniture de modèles imprimables gratuits des derniers appareils et plateformes pour les conceptions filaires.
• Sneakpeekit - imprimer des grilles de prise de notes et des cadres de périphériques.
• Sketchize - choisissez simplement l'une des feuilles d'esquisse qui convient à votre projet, imprimez-la et commencez à dessiner votre rêve.

Vous pouvez également faire des croquis avec Sketch mentionné dans les outils de conception d'interface utilisateur .

Outils de conception SMM

Les équipes marketing ont souvent besoin de matériaux bien conçus. Il peut s'agir de différentes bannières, visuels promotionnels, favicons, animations ou simplement de belles images pour les plateformes sociales, comme Twitter ou Instagram. Dans cette section, nous continuerons à ajouter des outils permettant à chacun de créer des conceptions marketing.

• Canva - Créez des designs superbes pour le travail, la vie personnelle et le jeu, même si vous n'êtes pas un expert en design!
• Crello - créez vos propres conceptions: publications, couvertures, graphiques et affiches en utilisant le meilleur logiciel du Web.
• Pablo by Buffer - concevez des images attrayantes pour vos publications sur les réseaux sociaux.
• Remove.bg - un service gratuit permettant de supprimer l’arrière-plan d’une photo.
• SocialSizes - fournit aux concepteurs les meilleures tailles à utiliser pour le contenu d'images et de vidéos sur les réseaux sociaux.
• Stencil - un outil de conception graphique permettant de créer facilement et rapidement des images de médias sociaux.

Conception sonore

La conception sonore est un art de créer un paysage sonore pour un site, une application, un film, un jeu ou tout autre produit. Le son a un grand potentiel pour transformer la façon dont les gens se connectent à votre produit. Certains logiciels de conception sonore sont très avancés et peuvent être utilisés principalement par les concepteurs sonores, tandis que d'autres conviennent aux débutants.

• Appsounds - UI Sound packs pour applications, jeux et autres produits.
• AudioJungle - 836 206 pistes et sons de la communauté des musiciens et ingénieurs du son.
• Bensound - téléchargez gratuitement de la musique creative commons, de la musique libre de droits, et utilisez-la dans votre projet.
• Freesound - une base de données collaborative de sons sous licence Creative Commons. Parcourir, télécharger et partager des sons.
• Fugue Music - téléchargez de la musique de fond gratuite pour vos vidéos.
• Max - connectez les objets avec des cordons de brassage virtuels pour créer des sons interactifs, des graphiques et des effets personnalisés.
• Reaper - importez tout type d’audio et MIDI, synthétisez, échantillonnez, composez, arrangez, éditez, mixez et masterisez des chansons ou tout autre projet audio.
• Sonic Pi - un synthétiseur de musique à codage en direct.
• SoundKit - une bibliothèque de sons d'interface utilisateur conçue pour tous vos besoins d'interface.
• UI Sounds - apprenez la conception sonore pour les interfaces utilisateur par exemple.
• Wistia Music - téléchargez des pistes de fond gratuites pour ajouter de l'énergie et de l'émotion à vos vidéos.
• WOWA - téléchargez de la musique libre de droits pour les vidéos, les podcasts et les applications YouTube. Pas de copyright CC0. Musique inspirée par Unsplash.
• Bibliothèque audio YouTube : parcourez et téléchargez de la musique gratuite pour votre projet.

Outils de stock photos

Besoin d'une photo de haute qualité pour une application iOS ou une nouvelle bannière? Vous pouvez toujours le prendre vous-même ou emprunter des sites de stock photo. Heureusement, il existe des centaines de superbes photos gratuites et d'images libres de droits que vous pouvez utiliser pour tout projet:

• Burst - photos gratuites pour sites Web et utilisations commerciales.
• Duotone - des images doubles gratuites à utiliser dans tout projet ou des images personnalisées à deux tons.
• Death to Stock - Service de photos payant avec une liste de diffusion pour les packs gratuits occasionnels, et une attention particulière au fait de ne pas ressembler à la photographie de stock.
• FoodiesFeed - des milliers de belles images réalistes de nourriture gratuite en haute résolution.
• FreePhotos.cc - photos gratuites pour un usage commercial.
• Freestocks.org - des photos de haute qualité, toutes publiées sous Creative Commons CC0.
• Gratisography - collection d'images gratuites à haute résolution.
• Jay Mantri - 7 nouvelles photos publiées tous les jeudis dans le cadre du Creative Commons CC0.
• Photos Kaboom - banque de photos comprenant l'abstrait, la ville / l'architecture, la mode, la nourriture et les paysages.
• LandingStock - une collection d'images gratuites pour votre page de destination.
• Life of Pix - photos gratuites haute résolution, créées par l'équipe de LEEROY.
• LoremPixel - une API qui sert des photos de stock à des tailles et catégories spécifiées. Idéal pour le contenu généré par un utilisateur ou un espace réservé.
• Magdeleine - stock photos gratuites de haute qualité pour votre inspiration.
• Moose - ne cherchez pas de photos, créez-les.
• MMT STock - Photos haute résolution fournies par Jeffrey Betts avec Creative Commons CC0.
• New Old Stock - une collection de photos d'époque des archives publiques, sans restrictions de copyright connues.
• Pexels - un ensemble de nombreuses ressources de photos gratuites.
• Photo Creator - un outil gratuit pour créer des photos d'archives réalistes à votre demande.
• Picography - photos gratuites de Dave Meier et de nombreux autres photographes avec Creative Commons CC0.
• Pixabay - partage de photos, d’illustrations, de graphiques vectoriels et de séquences de film sous licence exclusive.
• Picjumbo — a collection of totally free photos for your commercial & personal works.
• Pngtree — millions of PNG images, backgrounds and vectors for free download.
• pxhere — free image stock.
• Reshot — a massive library of handpicked free stock photos you won’t find elsewhere.
• ShotStash — thousands of free high-resolution CC0 photos and videos.
• SkitterPhoto — a wide variety of stock photos and are released under Creative Commons CC0.
• Startup Stock Photos — free photos for startups, bloggers and publishers.
• StockSnap.io — a large selection of free stock photos and high resolution images.
• StyledStock — free feminine stock photography for every woman entrepreneur.
• The Gender Spectrum Collection — a stock photo library featuring images of trans and non-binary models that go beyond the clichés.
• UI Faces — aggregator that indexes various free avatar sources that you can use in your design mockups.
• Unsplash — stock photos free to use.
• #WOCinTech Chat Photos — free stock photos of women technologists of diverse backgrounds.
• Zoommy — helps you find awesome free stock photos for your creative product or inspiration.

Stock Videos

If you work with video-content, you will enjoy these high-quality, hand-curated stock videos. You'll find many good and free stock video sites below, which you can use on your website, in your ad campaigns or social media:

• Coverr — beautiful, free stock video footage for your homepage.
• Life of Vids — provides free stock videos, clips, and loops.
• Mazwai — great collection of free creative commons HD video clips & footages.
• Mixkit — extraordinary Free HD videos. For you to use, completely free of charge.
• Motion Places — a curated collection of beautiful footage you can use for your projects.
• Pixabay — it has more than 1.5 million royalty-free stock videos and photos shared by their community of creators.
• Vidéos Pexels - il est facile de trouver des séquences d'archives gratuites pour votre site Web, une vidéo promotionnelle ou quoi que ce soit d'autre.
• Videezy - téléchargez instantanément des millions de séquences d'archives et d'images animées gratuites et de qualité supérieure.
• Videvo - videvo propose une large sélection de clips vidéo HD, de graphiques animés et de séquences d'archives gratuites.
• 123RF - plus de 100 000 nouveaux contenus quotidiens et assistance en ligne 24h / 24 et 7j / 7.

Outils pour la conception de l'apprentissage

• Design Better - Découvrez les meilleures pratiques, histoires et idées des meilleures équipes de design et leaders mondiaux.
• Design + Code - cours complets sur les meilleurs outils et systèmes de conception.
• DesignerUp - une collection de cours personnalisés et de mentorat pour vous aider à maîtriser la conception de produits (UI / UX).
• Laws of UX - un ensemble de maximes et de principes que les concepteurs peuvent prendre en compte lors de la création d'interfaces utilisateur.
• Learn UX - une approche complète pour apprendre les outils UI & UX.
• Sketch Master - une collection de cours de formation vidéo pour les professionnels qui apprennent Sketch.

Outils de conception d'interface utilisateur

Quels sont les meilleurs outils de conception d'interface utilisateur en 2019? Vous pouvez choisir n’importe lequel des outils ci-dessous et cela vous permettra de faire des dizaines de tâches de conception - interface utilisateur pour le site ou le mobile, filaire, prototype, animation, logo. Ce sont d'excellents outils entièrement fonctionnels pour les concepteurs UX et UI:

• Adobe XD - concevez, prototypez et partagez toute expérience utilisateur, des sites Web aux applications mobiles en passant par les interactions vocales.
• Affinity Designer - éditeur de graphiques vectoriels pour macOS, iOS et Microsoft Windows.
• Akira - App Linux native pour UI et UX Design construite en Vala et Gtk.
• Botmock - conception, prototype et test d'applications de conversation vocales et textuelles. Prend en charge plusieurs plates-formes.
• CleverBrush - un éditeur de vecteurs en ligne et un outil de publication numérique en ligne basés sur un navigateur qu'il est possible d'intégrer à la page en tant que composant JS.
• Figma - un outil de conception basé sur le navigateur, qui permet de concevoir et de prototyper avec une collaboration en temps réel.
• GIMP - un logiciel gratuit et open source d’imagerie et de conception graphique.
• Gravit - une application gratuite de conception de vecteurs, disponible pour macOS, Windows, Linux, ChromeOS et un navigateur.
• Illustrator - créez des logos, des icônes, des dessins, une typographie et des illustrations pour impression, Web, vidéo et mobile. Fabriqué par Adobe.
• Inkscape - un éditeur de graphiques vectoriels gratuit et à code source ouvert. Il est capable de créer ou d'éditer des graphiques vectoriels tels que des illustrations, des diagrammes, des dessins au trait, des graphiques, des logos et des peintures complexes.
• Krita - un logiciel gratuit de peinture et de conception graphique considéré comme une bonne alternative à Adobe Photoshop.
• Lunacy - une application Windows native et gratuite qui fonctionne hors ligne et prend en charge les fichiers .sketch. Flexible et léger pesé. Intuitif et facile à utiliser. Accélération et responsabilisation des concepteurs d’UI et UX. Le doit avoir pour produire des dessins étonnants.
• Photopea - une application de création graphique gratuite basée sur un navigateur, alternative à Photoshop.
• Photoshop - logiciel d'imagerie et de conception graphique développé par Adobe.
• Pixelixe - un outil de conception graphique conçu pour les spécialistes du marketing, les blogueurs et les petites entreprises qui doivent créer en quelques minutes des images, des graphiques ou des pages Web statiques uniques et époustouflants.
• Sketch - une boîte à outils de conception construite pour Mac.
• Studio - combine la conception, le prototypage et la collaboration dans un flux de travail harmonieux. Fabriqué par InVision.
• Vectr - un outil simple multiplateforme web et de bureau pour créer des graphiques vectoriels facilement et intuitivement.
• Voiceflow - prototypez , concevez et déployez de vraies applications pour Amazon Alexa et Google Home.

Outils de flux utilisateur

Le flux d'utilisateur est une série d'étapes qu'un utilisateur prend pour atteindre un objectif significatif. C'est un moyen rapide de planifier les parcours de vos clients et d'améliorer UX. Donc, si vous devez créer un diagramme de flux utilisateur, une carte de flux utilisateur ou un sitemap, jetez un coup d'œil à ces outils:

• Draw.io - un logiciel de création de diagrammes en ligne gratuit pour la création d’organigrammes, de diagrammes de processus, d’organigrammes, de diagrammes UML, ER et de réseaux.
• Flowmapp - un outil en ligne pour créer des plans de site et des flux d'utilisateurs qui vous aide à concevoir et à planifier efficacement l'expérience utilisateur.
• Google Drawings - créez des diagrammes et des graphiques gratuitement; tous dans Google Docs.
• Lucidchart - outil en ligne pour la création de diagrammes, organigrammes, plans de site, etc.
• MindNode - une application de cartographie conceptuelle qui rend le brainstorming simple et facile.
• NinjaMock - outil en ligne filaire et flux d'utilisateurs. Liez vos vues et créez un prototype de flux logique. Tous avec un style visuel à main levée.
• OmniGraffle - une application de création de diagrammes et d’illustrations numériques pour MacOS et iOS.
• Débordement - transformez vos conceptions en diagrammes de flux d'utilisateur lisibles racontant une histoire.
• Sketch.systems - Conception de l'interface utilisateur et des flux avec des machines à états interactives.
• SQUID - créez de magnifiques flux d'utilisateurs dans Sketch en quelques minutes seulement.
• WebSequenceDiagrams - une simple application Web pour élaborer des interactions d'objet organisées par ordre chronologique.
• Fantaisiste - créer facilement des organigrammes, des structures filaires et des notes autocollantes.
• Wireflow - outil gratuit, en ligne et à code source ouvert permettant de créer de magnifiques prototypes de flux utilisateur.
• XMind: ZEN - un outil de brainstorming et de mind mapping qui permet de basculer entre les contours et les arborescences. Liez les sujets avec d'autres graphiques.
• yEd - outil de bureau gratuit pour la création de diagrammes. Utilisable pour une grande variété de cas d'utilisation. La mise en page automatique aide beaucoup lors de la création d'organigrammes.

Outils de recherche utilisateur

La recherche auprès des utilisateurs vous aide à comprendre les comportements, les besoins et les motivations des utilisateurs grâce à diverses méthodes qualitatives et quantitatives (entretiens, observation, formulaires, etc.). Ces outils de recherche utilisateur peuvent vous être utiles:

• Calendly - Calendly vous aide à planifier des réunions sans les courriels alternatifs.
• Crowd Signal - recueille, organise et analyse des données provenant de diverses sources, y compris les médias sociaux et les appareils mobiles.
• Feedback Lite - recueillez des commentaires clients de haute qualité à l'aide de solutions Voice of Customer conçues pour améliorer les performances de votre site Web et renforcer l'engagement de vos clients.
• GoToMeeting - un service de conférence Web simple, extraordinairement puissant.
• JotForm - créez des formulaires en ligne, recevez un email pour chaque réponse, collectez des données.
• Lookback - exécutez, enregistrez et prenez des notes à distance pour vos sessions de recherche utilisateur, soit avec un produit réel, soit avec un prototype.
• Reflector - Reflector est un outil de base de mise en miroir et d'enregistrement d'écran vous permettant de réaliser des tests utilisateur à distance, en utilisant les structures filaires ou les prototypes existants.
• Reframer - un outil de recherche qui aide votre équipe à capturer, marquer (coder) et identifier des modèles de données qualitatives sur plusieurs participants à la recherche.
• Survey Monkey - outil de sondage en ligne pour capter les voix et les opinions des personnes qui comptent le plus pour vous.
• Typeform - utilisez une simple interface glisser-déposer pour créer tout type de formulaire, enquête ou questionnaire, et même prendre des paiements par carte de crédit.
• Wufoo - Créez des formulaires, collectez des données et des paiements, et automatisez vos flux de travail.
• YesInsights - une simple question et des sondages NPS pour améliorer votre entreprise.
• UserBit - une plate-forme d'outils de recherche en temps réel pour votre équipe. Entretiens et commentaires sur les balises / codes, capturer des idées, créer des personas, des sitemaps visuels, etc.
• Interviews d'utilisateurs - recrutez des participants dans une communauté de 125 000 membres basée sur la profession, la démographie, la géographie et plus, pour tout type de recherche.

Outils de débogage visuel

• LogRocket - un outil pour enregistrer ce que les utilisateurs font sur votre site afin que vous puissiez reproduire les bogues et résoudre les problèmes plus rapidement.
• PixelSnap - la manière magique de tout mesurer sur votre écran.
• VisBug - sur n'importe quelle page Web: débogage visuel, style d'inspection rapide et toujours, modification visuelle du CSS, clic et déplacement d'éléments, etc.
• Visual Inspector - outil de collaboration pour les commentaires de sites Web et la résolution de bugs de conception.

Outils filaires

Une structure filaire est une maquette visuelle qui décrit la structure de base du site ou d'une application. Il contient les éléments les plus essentiels et le contenu, ce qui vous permet d'expliquer facilement des idées sur le design. Les structures filaires sont un moyen peu fidèle de montrer un dessin. Dans cette section sont présentés les meilleurs outils de wireframing pour une variété de cas d'utilisation.

• Balsamiq Cloud - esquisse d’interface utilisateur sans effort. Capturez vos idées, collaborez sur vos conceptions, impliquez tout le monde.
• BLOKK - une police permettant de créer rapidement des maquettes et de réaliser des encadrements de fil pour les clients qui ne comprennent pas le latin.
• CSS Grid Builder - avec cet outil, la grille ne contient aucune partie HTML. La grille n'apparaît que lorsque du contenu (éléments) est ajouté et positionné selon les règles de la grille.
• Gliffy - un outil pour créer le cadre, les diagrammes UML, les organigrammes, les structures filaires et plus.
• Gridzzly - le moyen le plus simple de créer du papier quadrillé imprimable.
• Layoutit - un constructeur d'interface pour CSS Grid & Bootstrap qui veut être le coup d'envoi de vos développements front-end.
• Pidoco - un logiciel qui vous permet de créer rapidement des images filaires à cliquer et des prototypes UX entièrement interactifs.
• Wireframe.cc - un outil simple d'encodage filaire qui ne vous gêne pas.
• Wireframes lunatique - wireframing instantanée à portée de main. Bibliothèque riche d'éléments configurables tels que des boutons, des entrées, des cases à cocher.
• Système de grille 1200px - vous aide à créer un système de grille pour des conceptions de sites Web beaucoup plus larges que le style 960 pixels.

Logiciel de modélisation 3D

Les graphiques 3D sont utilisés dans les jeux, la réalisation de films, l'architecture, l'ingénierie et l'impression 3D. Les artistes et concepteurs 3D utilisent un logiciel de modélisation 3D spécifique, mentionné dans cette section.

• Autodesk - logiciels intégrés de CAO, FAO et CAE. Unifiez la conception, l'ingénierie et la fabrication sur une seule et même plateforme.
• Blender - Logiciel de création 3D gratuit et open source.
• FreeCAD - un modeleur paramétrique 3D multiplateforme gratuit et à source ouverte.
• MatterControl - un progiciel tout-en-un gratuit, à code source ouvert, qui vous permet de concevoir, de découper, d'organiser et de gérer vos impressions 3D.
• Maya - créez des outils, des animations, des environnements, des graphiques animés, la réalité virtuelle et des personnages.
• Onshape - un logiciel de modélisation spécialement conçu pour la conception de pièces techniques et de pièces de rechange, a été le premier logiciel 3D en nuage complet créé.
• OpenSCAD - un logiciel permettant de créer des objets de CAO 3D solides.
• Rhino - un logiciel de modélisation 3D basé sur les courbes qui crée des modèles mathématiquement précis des surfaces 3D.
• SketchUp - Logiciel de conception 3D qui rend la modélisation 3D réellement accessible à tous, avec un ensemble d'outils simples à apprendre et robustes.
• Tinkercad - une application gratuite et facile à utiliser pour la conception 3D, l'électronique et le codage.
• Vectary - créez de beaux modèles 3D avec notre outil de modélisation 3D par glisser-déposer.
• 3D Slash - Outil de modélisation 3D, disponible sur tous les appareils et tous les systèmes d'exploitation, en ligne et hors ligne.