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 — in the unfortunate event you're designing UI in PS, AI, or ID this tool creates redline annotations.
• Sympli — automated specs and assets handoff from Sketch, Photoshop and Adobe XD. Integrated with Jira, Xcode and Android Studio.
• Zeplin — handoff designs and styleguides with accurate specs, assets, code snippets automatically.

You can also make design handoff within Relay, mentioned in the Design Version Control section.

Design Inspiration

The creative process can be tough. So if ideas don’t come to your mind right away, try to search for inspiration in the work of other designers. These design inspiration sites feature design patterns, user flows, email markups and creative solutions of popular companies and great products:

• Behance — an online platform to showcase & discover creative work.
• CodeMyUI — handpicked collection of web design & UI inspiration with code snippets.
• Collect UI — a platform for your daily inspiration collected from daily ui & beyond. Based on Dribbble shots, 14419 hand picked designs.
• Creative Portfolios — a curation of the most creative portfolios made by designers & developers.
• Design Hunt — a daily collection of the best products, apps, and inspirations for all creatives.
• Dribbble — an online community for showcasing user-made artwork. Great resource to get inspired from others work.
• Ficture — a font in use archive that will inspire you.
• Inspiration UI — community that aims to provide the best design resources for those who create for the web.
• Hover States — showcase great work from the bleeding edge of digital culture for, and with, the creative community.
• Httpster — an inspiration resource showcasing totally rocking websites made by people from all over the world.
• H69.Design — landing page colletions & Free resources for designers.
• Lapa Ninja — landing page design inspiration from around the web. 1800+ landing page examples and updated daily.
• Microcopy Inspirations — curated examples of good microcopy on websites and apps.
• Mobile Patterns — a design inspirational library featuring finest UI UX Patterns (iOS and Android).
• Mobbin — browse mobile design patterns for popular apps. Explore common user flows such as onboarding, account sign up and log in, core functionality, and more.
• One Page Love — a collection of beautiful unique One Page websites for website design inspiration.
• Owwly — home for digital products crafted with passion to design.
• Page Flows — user flow videos and screenshots to inspire you when you're stuck. Discover mobile and web design patterns for over 160 different tasks.
• pttrns — design patterns for popular mobile apps.
• Really Good Emails — 4,150+ handpicked email design.
• ReallyGoodUX — screenshots and examples of great UX from real mobile and web products. Discover the best UX examples—including onboarding tours and walkthroughs.
• The Design Team — comics about a design team for a tech startup in Silicon Valley.
• Typewolf — helps designers choose the perfect font combination for their next design project.
• UI Garage — the one stop shop for designers, developers and marketer to find inspiration, tools and the best resources.
• UI Sources — over 500+ interactions from the best designed and top grossing apps on the App Store today.
• UI Recipes — weekly 15 min lessons on UI design from the hottest apps.
• UX Archive — browse more than 400 user flows across 120 mobile apps. Examine tasks such as booking, logging in, onboarding, purchasing, seaching, and more.
• Waveguide — a design knowledge bank with thousands of artificially enriched examples of product and brand experience (examples of Mobile App, Landing pages, eCommerce, CX/UX Patterns).
• Web Design Museum — over 1,200 carefully selected web sites that show web design trends between the years 1994 and 2006.

Design System Tools

I bet you heard about Design Systems, as it’s a pretty trendy topic. Design systems provide consistent, robust design patterns to keep design and development in sync. They are essentially collections of rules, constraints, and principles, implemented in design and code. Here you can find tools to build, maintain and organize your own design system.

• Cabana — a Premium Design System for Sketch that helps you create amazing products faster than ever before.
• Catalog — a living style guide for digital products, combining design documentation with real live components.
• Design System Manager — Invision's design system manager.
• EOS Design System — an open source and customizable built on top of Bootstrap following the Atomic Design concept.
• Frontify — create graphical guidelines, patterns libraries, design systems.
• Lingo — create a shared asset library with your entire team.
• Lucid — tool for creating, managing and sharing a design system. From a simple component library through to detailed descriptions of your styles.
• Prime Design System Kit — it includes device templates, charts, UI kit and even illustration kit.
• Specify — a tool to create, scale and maintain a design system.
• Storybook — an open source tool for developing UI components in isolation for React, Vue, and Angular.
• Symbol Design System — design System for Sketch based on atomic elements.
• Zeroheight — styleguides created by designers, extended by developers, and editable by everyone.

We can also add to this in Sketch, Figma, UXPin and Framer X (Framer X Team Store).

Design to Code Tools

Everyone can learn development but it takes time and effort. If you need a website or an app right now and you don’t want to hire a developer, pay attention to the website builders. Such design to code tools will help you to make a portfolio, simple landing or an app pretty fast and beautiful.

• Anima — a web app with a Sketch plugin that converts Sketch to HTML.
• Blocs — a fast, easy to use and powerful visual web design tool, that lets you create responsive websites without writing code.
• Bootstrap Studio — a powerful web design tool for creating responsive websites using the Bootstrap framework.
• Grapedrop — design your components, web projects and publish them instantly online, with an easy to use editor.
• Mason — a feature-building platform where modern product teams design, build, and deploy front-end features together.
• Mobirise — an offline drag and drop website builder software that is based on Bootstrap 3/4 and \ AMP.
• PageCloud — the fastest and most customizable website builder that allows anyone to create their ideal website.
• PaintCode — vector drawing app that instantly converts drawings into Swift, Objective-C, JavaScript or Java code.
• Pinegrow — a professional visual editor for CSS Grid, Bootstrap 4 and 3, Foundation, responsive design, HTML, and CSS.
• px.div — a proper site build tool for developers and designers.
• Readymag — a visually-pleasing tool for designing on the web from landing pages to multimedia long-reads, presentations and portfolios.
• Sparkle — the easiest way to make a real website, no code, no jargon.
• STUDIO — design from scratch, collaborate in real time and publish websites.
• Tilda — create a website, landing page or online store for free with the help of Tilda modules and publish it on the same day.
• Wix — the easiest and fullest-featured website builder, that allows you to create your own highly customized site.
• 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 — gorgeous interface and good collection.
• Fontface Ninja — browser extension to discover what fonts are being used on any website.
• FontPair — a simple tool that helps you pair Google Fonts together.
• Fontown — a typographic tool with a non stop growing font catalogue which facilitates designer workflow.
• Fonts — thousands of beautiful fonts by Adobe.
• Fonts Arena — curated typography website with high quality free fonts, done-for-you research articles, free alternatives to premium fonts, news, and more.
• FontSelf — an extension for Illustrator and Photoshop CC that lets you turn any lettering into OpenType fonts in minutes!
• FontSpark - un outil simple permettant aux concepteurs de trouver rapidement les meilleures polices pour leurs projets.
• Police Squirrel - Télécharger des polices gratuites avec un vaste choix de polices.
• Google Fonts - Rendre le Web plus beau, plus rapide et plus ouvert grâce à une excellente typographie.
• Google Webfonts Helper - une façon compliquée d’auto-héberger Google Fonts. C'est gratuit et open-source.
• LostType - la première fonderie de type Pay-What-You-Want.
• Mesurer - mesurez la longueur des lignes typographiques avec cette extension de navigateur pour Chrome.
• RightFont - application de gestion des polices, aide à prévisualiser, synchroniser, installer et organiser les polices sur iCloud, Dropbox ou Google Drive.
• Sans Forgetica - une police téléchargeable conçue scientifiquement pour vous aider à vous souvenir de vos notes d'étude.
• Calculateur de taille - calculez la taille perçue en utilisant la distance de visualisation et la taille physique de la typographie imprimée.
• Police de caractères - gestionnaire de polices qui améliore votre flux de travail de conception avec des aperçus de polices en direct et un marquage flexible.
• Wakamai Fondue - l'outil qui répond à la question "que ma police peut-elle faire?".
• Webfont - créer et gérer des polices d'icônes SVG personnalisées, constituant une bibliothèque partagée d'icônes.
• WordMarkIt - affiche votre mot / expression écrit avec toutes les polices déjà installées sur votre ordinateur.

Vous pouvez également gérer les polices avec Specify, mentionné dans la section Outils de conception du système .

Outils de dégradé

Vous pouvez voir que les dégradés de couleurs sont omniprésents: interface utilisateur, marque, illustration, typographie. Un dégradé est créé en utilisant deux couleurs différentes ou plus pour peindre un élément tout en s’effaçant progressivement entre eux. Il pourrait sembler comme couleur mémorable, fraîche et unique. Pour créer un tel dégradé pour votre conception, utilisez ces palettes de couleurs.

• Mélanger - créez et personnalisez de superbes dégradés CSS3.
• Colorffy - obtenez des fichiers css, des images, des aperçus d’ interface utilisateur ou créez vos propres dégradés.
• ColorSpace - la palette de couleurs parfaite pour votre prochain projet! Générez de belles palettes de couleurs.
• ColorSpark - aide les concepteurs à trouver des couleurs uniques et des combinaisons de dégradés saisissantes.
• Arrière -plans sympas - explorez une sélection de superbes arrière-plans cools que vous pouvez ajouter à des blogs ou à des sites Web.
• CoolHue - palette de dégradés triés sur le volet et échantillon pour vos prochains trucs incroyables.
• CSS Gradient - un outil de génération de gradient gratuit css, ce site Web vous permet de créer un fond dégradé coloré.
• Gradients d'oeufs - une page de collection de couleurs comprenant des nuances de 12 couleurs différentes.
• Grabient - interface utilisateur simple et belle pour la génération de dégradés Web.
• GradientsList - la plus grande collection de gradients faisant appel à un grand nombre de personnes, avec des contributions quotidiennes d'utilisateurs sur Gradients Maker pour 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.
• Feather Icons — each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
• Flaticon — 1593000+ vector icons in SVG, PSD, PNG, EPS format or as icon font.
• Font Awesome — the web's most popular icon set and toolkit, also it's open source.
• Fontello — tool to build custom fonts with icons, also open source.
• Iconscout — get high-quality Icons, Illustrations and Stock photos at one place.
• Iconfinder — a marketplace for vector icons (SVG). Icon sets available in IconJar format.
• IconJar — store all your icons in one icon manager.
• Iconmonstr — discover 4412+ free icons in 305 collections.Big and continuously growing source of simple icons.
• Icon Store — a library of free vector icons for personal and commercial projects, designed by first-class designers.
• ICONSVG — a tool to simplify the process of finding and generating common icons for your project.
• Icons8 — free iOS, Android and Windows styled icons.
• Ikonate — customise, adjust and download free vector icons.
• illustrio — a smarter icon library. Build something great with 100% customizable icons.
• Ionicons — beautifully crafted open source icons.
• Material Design Icons — free material design icons made possible by open source contributons.
• Material Icons Library — free collection of 1000+ icons for popular graphics tools.
• 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 de Pngtree - plus de 13142 illustrations de styles différents conçues par des professionnels.
• IRA Design - créez des illustrations étonnantes à l'aide de composants d'esquisse dessinés à la main, d'une sélection de 5 dégradés et d'une palette de sons, etc. ou png. formats.
• JoeSchmoe - une collection d'avatar illustrée pour les développeurs et les concepteurs, parfaite en tant qu'espace réservé ou site actif .
• LukaszAdam - illustrations, icônes vectorielles gratuites. Ils sont disponibles pour un usage personnel et commercial.
• ManyPixels - des illustrations libres de droits pour dynamiser vos projets.
• Aïe - des illustrations vectorielles pour classer votre projet. Gratuit pour une utilisation personnelle et commerciale.
• unDraw - collection de belles images SVG.
• 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 — card sorting tool that allows you to understand how people categorize content in your UI.
• Treejack — upload your proposed sitemap to see how a user would move through your site.

Logo Design

A logo is the starting point of your brand identity. It reflects the product mission, functionality and brand message. Ideally, the logo creates a strong connection between your product and the users. Logo design is an art, as well as many other design disciplines. With the right logo design tools, this art can be done right a bit faster.

• Design Evo — a large collection of vector icons and shapes help you design custom logos easily.
• Free Logo Design — create stunning professional logos in seconds.
• Graphic Springs — choose from a gallery of vector format logo templates, categorized by industry. Edit the graphics and texts of your template, then download.
• Logo Design Team — offers affordable professional custom logo design and brand design services.
• Logojoy — uses artificial intelligence to instantly generate unique logo ideas for your business.
• Logo Lab — put your logo to the test with automated visual experiments.
• Logo Maker — allows you to make a free logo within seconds. Start with a blank canvas, add text and an icon, and then customize.
• Logo Maker by Designhill — generate 1000s of unique logos in only few minutes, without design expertise.
• Logo Makr — design a logo for free, choose from hundreds of fonts and icons, then save a logo on the computer.
• Logo My Way — choose from 600 custom logo designs from creative designers worldwide.
• Logo Package Express — export and package dozens of logo variations and file types for your clients automatically in under 5 minutes.
• Logo Rank — upload your logo to see how it rates on a number of objective measures.
• Wizlogo — create a logo with simple and affordable tool backed by professional designers.

You can also do your logo design with Adobe Photoshop, GIMP, Inkscape, Krita and Vectr which are mentioned in UI design tools.

Mockup Tools

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 - vous aide à créer et à collaborer en temps réel sur des structures filaires , des maquettes, des diagrammes et des prototypes.
• Overframe for Mac - enregistrez votre prototype et votre application avec une superposition de cadres d'appareils.
• PixelBuddha - des ressources gratuites de qualité supérieure pour les concepteurs et les développeurs Web.
• Ramotion Store - des maquettes Apple et Android soigneusement conçues pour Sketch et Photoshop.
• Rotato - des maquettes 3D animées pour la conception de vos applications.
• Screely - encadrez rapidement les conceptions de pages Web dans une fenêtre de navigateur minimaliste.
• ScreenSpace - Vidéos de périphériques 3D pour le concepteur de mouvement.
• Smartmockups - créez des maquettes de produits étonnantes en quelques clics.
• 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

Pixel art is a digital art form where color is applied to individual pixels to create an image. The pixel art can be used to create everything from intricate scenes and game backgrounds to character designs or emoji. If you feel curious to try, check this pixel art software for both macOS and Windows:

• Aseprite — animated sprite editor & pixel art tool.
• Data Pixels — create pixel art programmatically. Includes DataPixels.js and Data Pixels Playground desktop app.
• Draw! — open source and free web-based pixel art and GIF editor.
• Grafx2 — a bitmap paint program inspired by the Amiga programs ​Deluxe Paint and Brilliance. Specialized in 256-color drawing.
• GraphicsGale — has many pixel-art specific features, including palette control, selectively erasing colors, and tools for quickly replacing and trying new colors.
• Goya — a pixel-art editor built on ClojureScript and Om.
• Make 8 bit art — an open source and in-browser pixel art drawing tool.
• Piskel — online editor for animated sprites & pixel art.
• Pixel art to CSS — pixel art animation and drawing web app powered by React.
• Poxi — a flat pixel art editor.
• Pyxel Edit — a pixel art editor designed to make it fun and easy to make tilesets, levels and animations.

Prototyping Tools

A prototype is a simple experimental design of a proposed solution. It should help to test ideas, design assumptions, and hypothesis in a fast and cheap way. Prototyping tools allow designers and clients to see how the product would function in the real world and collaborate on this solution. Many modern prototyping tools can use for wireframing, prototyping, and collaboration:

• Alva — create living prototypes with code components. It's also open source.
• Axure RP — wireframing, prototyping, collaboration & specifications generation.
• Balsamiq — wireframing and collaboration.
• SAP Build — a complete set of cloud‑based tools to design and build your enterprise app.
• Creo — prototyping, code exporting and built-in mobile app builder.
• 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 - une collection de photos totalement gratuites pour vos travaux personnels et commerciaux.
• Pngtree - des millions d'images, d'arrière-plans et de vecteurs PNG à télécharger gratuitement.
• pxhere - images libres.
• Reshot - une immense bibliothèque de photos gratuites, triées sur le volet, que vous ne trouverez pas ailleurs.
• ShotStash - des milliers de photos et de vidéos CC0 haute résolution gratuites.
• SkitterPhoto - une grande variété de photos et sont publiés sous la licence Creative Commons CC0.
• Startup Stock Photos - Photos gratuites pour les startups, les blogueurs et les éditeurs.
• StockSnap.io - un grand choix de photos gratuites et d'images haute résolution.
• StyledStock - Banque d'images féminines gratuites pour chaque femme entrepreneure.
• The Gender Spectrum Collection - une banque de photos avec des images de modèles trans et non binaires allant au-delà des clichés.
• UI Faces - agrégateur qui indexe diverses sources d'avatar gratuites que vous pouvez utiliser dans vos maquettes de conception.
• Unsplash - stock gratuit de photos.
• Photos de chat #WOCinTech - photos libres de femmes technologues d'origines diverses.
• Zoommy - vous aide à trouver des photos gratuites gratuites pour votre produit créatif ou votre inspiration.

Vidéos de stock

Si vous travaillez avec du contenu vidéo, vous apprécierez ces vidéos de grande qualité, préparées à la main. Vous trouverez ci-dessous de nombreux sites de vidéos de qualité et gratuits que vous pouvez utiliser sur votre site Web, dans vos campagnes publicitaires ou sur les réseaux sociaux:

• Coverr - belles séquences vidéo gratuites pour votre page d'accueil.
• Life of Vids - fournit des vidéos, des clips et des boucles gratuits.
• Mazwai - grande collection de clips et de séquences vidéo HD gratuits et créatifs de Creative Commons.
• Mixkit - extraordinaires vidéos gratuites en HD. Pour que vous puissiez utiliser, totalement gratuit.
• Motion Places - une collection de superbes séquences que vous pouvez utiliser pour vos projets.
• Pixabay - il contient plus de 1,5 million de vidéos et de photos libres de droits partagées par leur communauté de créateurs.
• 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 — a free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams.
• Flowmapp — an online tool for creating sitemaps and user flows that helps you to effectively design and plan user experience.
• Google Drawings — create diagrams and charts, for free; all within Google Docs.
• Lucidchart — online tool for creating diagrams, flow charts, sitemaps, and more.
• MindNode — a mind mapping app that makes brainstorming simple and easy.
• NinjaMock — wireframe and user flow online tool. Link your views and create logic flow prototype. All with freehand visual style.
• OmniGraffle — a diagramming and digital illustration application for macOS and iOS.
• Overflow — turn your designs into playable user flow diagrams that tell a story.
• Sketch.systems — ui and flow design with interactive state machines.
• SQUID — create beautiful User Flows in Sketch in just minutes.
• WebSequenceDiagrams — a simple webapp to work out object interactions arranged in time sequence.
• Whimsical — easy to create flow charts, wireframes and sticky notes.
• Wireflow — free, online and open source tool for creating beautiful user flow prototypes.
• XMind: ZEN — a brainstorming and mind mapping tool that can switch between outline and tree-chart. Link topics with other charts.
• 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.