• Principal / Autre

52 outils de conception Web pour vous aider à travailler plus intelligemment en 2021

Page 1 sur 2: Page 1

• Page 1
• Page 2

SAUTER À:

• Outils de conception complets
• Maquettes et prototypes
• Concevoir des cadres et des bibliothèques

Il y a tellement d'excellents outils de conception Web de nos jours. Quel que soit le problème que vous essayez de résoudre dans votre flux de travail de conception Web, il est probable que quelqu'un ait créé un outil pour cela, qu'il s'agisse d'un utilitaire autonome ou d'une fonctionnalité dans une application plus grande. Et même si la communauté de conception Web a beaucoup changé depuis les débuts, il y a toujours un esprit de partage de votre travail, tant de ces excellents outils sont gratuits.

La prolifération des outils est une grande aubaine, mais elle peut aussi vous laisser l'embarras du choix car il y a tellement de façons de faire la même chose. Dans cet article, nous avons rassemblé ce que nous pensons être les meilleurs outils du moment. Bien sûr, il ne s’agit pas d’une liste exhaustive, mais nous espérons qu’en la réduisant et en mettant en évidence certains des meilleurs, nous vous aiderons à créer plus facilement la boîte à outils adaptée à votre flux de travail.

Comme il s'agit d'une liste assez longue, nous avons organisé les outils en sections pour faciliter la navigation dans l'article. Sur cette page, vous trouverez un logiciel de conception Web complet, suivi d'outils de wireframing dédiés plus basiques, ainsi que de cadres et de bibliothèques de conception Web. À la page deux, il existe une gamme d'outils plus petits et plus spécialisés pour tout, du travail avec des images au tamponnage en AR et VR.

Pendant que vous êtes ici, vous voudrez peut-être consulter les résumés des meilleurs services d'hébergement Web et le meilleurs constructeurs de sites Web pour 2020

Outils de conception complets

01. InVision Studio

Studio InVision vise à couvrir toutes les bases et à être le seul outil d'interface utilisateur dont vous aurez besoin. Il est livré avec une multitude de fonctionnalités pour vous aider à créer de belles interfaces interactives, y compris des outils de prototypage rapide, de conception réactive et collaborative et de travail avec des systèmes de conception.

Si vous utilisez déjà InVision avec des outils tels que Sketch, il y a un peu de croisement dans les fonctionnalités. Cependant, la puissance de Studio réside dans le département de prototypage, en particulier si votre conception implique une animation. Le prototypage rapide vous permettra de créer des transitions complexes et imaginatives, vous permettant d'atteindre réellement le niveau d'animation que vous désirez. Déterminez simplement comment vous voulez que votre interface utilisateur regarde le début de sa transition, puis concevez le résultat final. InVision Studio s'occupe du reste pour vous.

En plus de cela, vous pouvez créer ces animations et transitions personnalisées à partir d'un certain nombre de gestes et d'interactions comme le glissement, le clic et le survol.

Lorsque vous avez terminé, exportez vos prototypes via InVision et invitez les gens à collaborer. Vous pouvez afficher votre projet sur sa plate-forme prévue - un excellent moyen d'explorer et de tester votre conception. Les clients pourront alors commenter directement la conception.

Pour couronner le tout, vous pouvez arrêter de penser à créer de nombreux plans de travail pour plusieurs appareils - le moteur de mise en page de Studio ajuste automatiquement votre conception à n'importe quel écran. Ce gain de temps vous permet de réfléchir beaucoup plus à votre conception.

02. Croquis

Codage bohème Esquisser est l'une des plates-formes de conception Web les plus utilisées; c'est un outil vectoriel très puissant pour créer des interfaces et des prototypes de manière collaborative. Sketch a été spécialement conçu pour créer des sites Web et des applications, de sorte qu'aucune fonctionnalité inutile n'encombre votre interface et qu'il est plus rapide et plus efficace que les logiciels qui ont une portée plus large.

Rory Berry, directeur créatif chez Superrb , est passé à Sketch en 2017 et le recommande vivement. «Par rapport à Photoshop, trier tous vos documents et faire des révisions sur Sketch est beaucoup plus facile», commence-t-il. «Sketch contient de petits documents, tandis que Photoshop en a de gros. En raison du fait qu'il s'agit d'une application vectorielle, la taille des fichiers est considérablement plus petite que celle de Photoshop. »

Et ce n’est pas tout. «Le système de grille intégré dans Sketch est excellent et rend la conception d'interface beaucoup plus facile. Je pense que l'interface utilisateur globale et la sensation minimale le rendent beaucoup plus propre à concevoir et convivial. Photoshop semble très compliqué en comparaison. »

La communauté propose des centaines de Plugins d'esquisse pour rendre votre flux de travail de conception plus facile et plus fluide.

L'inconvénient de Sketch est qu'il n'est disponible que sur Mac et qu'il n'est pas prévu de prendre en charge d'autres systèmes d'exploitation. Cela a posé problème, car les concepteurs voudront souvent partager des fichiers .sketch avec des développeurs utilisant Windows. Heureusement, il existe maintenant une application 'Sketch for Windows' appelée Folie qui ouvrira et modifiera les fichiers .sketch et éliminera la plupart de ces problèmes - lisez-en dans le Exportation et conversion section de cet article.

Ne manquez pas notre principaux conseils d'utilisation de Sketch .

03. Adobe XD

Adobe XD offre le meilleur environnement pour les projets numériques sous la suite Adobe Creative Cloud. Si vous êtes un utilisateur adepte d'Adobe et que vous êtes nouveau dans XD, vous ne trouverez peut-être pas l'interface très 'Adobe' pour commencer. Cependant, il se compare aux autres outils de pointe. C'est un saut si vous concevez dans Photoshop depuis un certain temps également, mais cela en vaut vraiment la peine pour la conception d'interface utilisateur.

Cet outil de conception vectorielle et de wireframing ne cesse de s'améliorer, avec des ajouts tels que la prise en charge de prototypage vocal s'assurer que l'outil peut suivre les dernières tendances en matière d'UX. XD comprend des outils de dessin, des outils qui vous permettent de définir des interactions non statiques, des aperçus mobiles et de bureau, et des outils de partage pour donner des commentaires sur les conceptions. Il vous permet de sélectionner une taille de plan de travail spécifique à l'appareil pour démarrer un projet, et vous pouvez même importer un kit d'interface utilisateur populaire, par exemple le Material Design de Google.

Fondamentalement, Adobe XD s'intègre avec le reste de Creative Cloud, ce qui signifie que vous serez en mesure d'importer et de travailler facilement avec des actifs de Photoshop ou Illustrator. Si vous utilisez déjà d'autres applications Adobe, l'interface utilisateur vous semblera agréable et familière et ne devrait pas présenter trop de courbe d'apprentissage.

Andrei Robu , directeur du design chez Robu Studio à Barcelone, est parmi ses fans. «Pour des maquettes rapides, c'est génial», dit-il. «C’est une interface très légère, avec de nombreuses photos chargées, et idéale pour les moodboards. Le prototypage est très utile pour montrer aux clients comment les choses fonctionnent, en particulier parce que vous pouvez mettre le contenu en ligne tout de suite.

Ellis Rogers, graphiste chez Receptional Ltd le recommande également. «Lorsque la conception / le prototype ou le wireframe est terminé, Adobe XD vous permet de sélectionner très rapidement des éléments et de créer des transitions de page pour un prototype fonctionnel, qui peuvent être partagés via un lien», explique-t-il. Le lien vous permet également de recueillir des commentaires par page, tout en gardant tout organisé. Le lien peut être mis à jour dans Adobe XD afin que le client puisse toujours voir la dernière version sans avoir à se soucier des versions incorrectes. C'est une joie absolue de travailler avec. '

04. Merveille

Marvel est un autre outil de conception Web idéal pour produire des idées rapides, affiner une interface en fonction de son apparence et créer des prototypes. merveille offre une manière très soignée de créer des pages, vous permettant de simuler votre conception à travers un prototype. Il existe de merveilleuses intégrations pour insérer vos conceptions dans le flux de travail de votre projet. Fait intéressant, il existe une fonctionnalité de test utilisateur intégrée, qui est encore assez inhabituelle dans le paysage des outils de conception Web. Tout est également en ligne, donc pas besoin de télécharger quoi que ce soit.

05. Figma

Figma est un outil de conception d'interface qui permet à plusieurs concepteurs de collaborer en temps réel. Ceci est très efficace lorsque plusieurs parties prenantes du projet sont impliquées dans l'élaboration du résultat. Il est disponible dans le navigateur, ou sur Windows, Mac ou Linux, et il existe des versions gratuites et payantes en fonction de l'utilisation que vous en faites.

Voici quelques-unes de ses caractéristiques exceptionnelles:

«Figma a un USP similaire à Sketch, à l'exception du fait qu'il est multiplateforme», explique le concepteur du frontend. Benjamin Lire . «Lorsque je l'ai utilisé pour créer quelques icônes, j'ai trouvé le flux de travail incroyablement fluide. Cela ne m'a pas pris de temps pour apprendre et a eu l'avantage supplémentaire d'être collaboratif: vous pouvez partager des graphiques avec d'autres dans l'application.

«J’ai essayé de passer à Linux pour mon travail et parfois nous utilisons Windows, donc Figma a du sens pour moi d’un point de vue pratique», ajoute-t-il.

Rédacteur de contenu et graphiste indépendant David Eastwood a aussi de bonnes choses à dire sur Figma. «C'est aussi un outil vraiment utile lorsque nous avons eu besoin de nous moquer rapidement des MVT; parfois de petits ajouts à une mise en page existante. Nous aimons que vous puissiez créer rapidement des designs pour ordinateur de bureau, tablette et mobile.

06. Concepteur d'affinité

'Serif's Concepteur d'affinité a été surnommé le `` tueur de Photoshop '' par certains, et il est facile de comprendre pourquoi '', déclare le concepteur de produit Et Edwards . «Il y avait quelques fonctionnalités que j'ai vraiment appréciées, y compris des couches réglables et non destructives. Cela signifie essentiellement que vous pouvez ajuster les images ou les vecteurs sans les endommager.

«Le zoom de 1 000 000% était juste un bonheur; c'est particulièrement utile lorsque vous travaillez avec des images vectorielles, car vous pouvez vraiment vous rapprocher. Les fonctions d'annulation et d'historique sont également très pratiques: Affinity vous permet de revenir en arrière sur 8 000 pas!

«En ce qui concerne la conception, l'interface utilisateur est familière. En quittant Photoshop, tout le monde semble vouloir recommencer, ce qui peut poser un véritable défi. Ce qu'Affinity a fait est de garder la mise en page familière, tout en resserrant tout et en cachant les distractions. J'ai facilement pu me lancer directement dans la conception.

Affinity Designer est également disponible pour l'iPad . Et notez qu'il ne s'agit pas de la version réduite de l'application mobile à laquelle vous vous attendez: c'est la même version complète que vous obtenez sur le bureau.

Ne manquez pas nos guides d'utilisation du Personne pixel , le Exporter une personne et le Outil plume dans Affinity Designer. Notez également que Serif propose également une alternative à Photoshop, Photo d'affinité et une alternative à InDesign, Éditeur d'affinité ; qui jouent tous bien ensemble.

Maquettes et prototypes

07. UXPin

Le prochain outil de conception Web de notre liste est UXPin. Cette application de prototypage dédiée est disponible pour Mac, Windows ou dans le navigateur. Avec la plupart des autres outils de conception, vous ne pouvez imiter les interactions qu'en liant différents éléments sur votre plan de travail, UXPin se rapproche du code et vous permet de travailler avec des états interactifs, des composants logiques et de code.

Il existe des bibliothèques d'éléments intégrées pour iOS, Material Design et Bootstrap, ainsi que des centaines de jeux d'icônes gratuits , pour vous aider sur votre chemin. UXPin a également récemment introduit des fonctionnalités d'accessibilité pour garantir que vos conceptions restent conformes aux normes WCAG, ce que nous applaudissons.

API Request est le dernier ajout aux capacités d'interactions d'UXPin. Cette fonctionnalité vous permet de créer un prototype d'application qui `` communique '' avec vos produits directement depuis votre outil de conception, sans avoir besoin de code. Cela fonctionne en vous permettant d'envoyer des requêtes HTTP à une API externe.

Vous pouvez créer votre premier prototype en UXPin gratuitement, et si cela vous convient, passez à un abonnement mensuel payant (les adhésions aux équipes sont disponibles). UXPin a récemment amélioré son intégration avec Sketch, il pourrait donc être un élément à introduire dans votre flux de travail si vous êtes un fan de Sketch qui trouve ses capacités de prototypage limitées.

08. Proto.io

Proto.io est une application de premier ordre qui permet la création de prototypes réalistes qui commencent par des idées approximatives et se terminent par des conceptions à part entière. L'outil vous offre également une gamme de possibilités pour vos projets, y compris des animations vectorielles détaillées et personnalisées.

Vous pouvez commencer par développer des idées initiales avec un style dessiné à la main, les transformer en wireframes et les terminer avec un prototype haute fidélité. Les plugins Sketch et Photoshop vous aident si vous souhaitez concevoir à l'aide d'autres outils, mais Proto.io gère bien le processus de conception de bout en bout. D'autres fonctionnalités, par exemple les tests utilisateur, vous aideront à valider vos conceptions. Il s'agit d'une solution tout-en-un avec un grand nombre de marques de confiance qui l'utilisent déjà.

Il existe un tas d'excellentes démos avec lesquelles commencer à jouer, et vous pouvez vraiment voir à quel point cette solution de bout en bout pourrait facilement remplacer un certain nombre d'outils actuellement en place. Des ajouts relativement récents, Proto.io a récemment inclus une étendue de nouvelles fonctionnalités - y compris des gestionnaires d'actifs, des guides de développement et la possibilité d'enregistrer votre prototype - alignant cet outil sur bon nombre des meilleurs outils de prototypage.

09. Balsamiq

Si vous recherchez un wireframing rapide et efficace Balsamiq est une forte suggestion. Vous pouvez rapidement développer une structure et des mises en page pour vos projets en toute simplicité. Les éléments glisser-déposer vous simplifient la vie et vous pouvez lier des boutons à d'autres pages. Grâce au wireframing, vous pouvez rapidement commencer à planifier vos interfaces et les partager avec votre équipe ou vos clients. Balsamiq existe depuis 2008 et se targue de son approche simple, rapide et concentrée de faible fidélité.

10. ProtoPie

Outil de conception Web Protopic vous permet de créer des interactions complexes et de vous rapprocher de la fonction finale idéale de votre conception. La caractéristique la plus remarquable est peut-être la possibilité de contrôler les capteurs des appareils intelligents de votre prototype, tels que les capteurs d'inclinaison, de son, de boussole et 3D Touch. En fonction de votre projet, c'est un excellent outil pour ceux qui souhaitent englober les fonctionnalités natives de l'application. C’est simple comme bonjour et aucun code n’est requis.

La version 4.2 récemment publiée contient deux nouvelles fonctionnalités très demandées: vous pouvez maintenant ajouter des SVG modifiables à vos scènes et trouver instantanément la distance entre deux couches lors de la sélection.

11. MockFlow

MockFlow est une suite d'applications pour le wireframing et la planification de sites Web. WireframePro vous aide à définir votre idée initiale, puis à itérer jusqu'à ce qu'elle soit parfaite - il existe un outil de suivi des révisions de l'interface utilisateur pour vous aider. Il est livré avec des milliers de composants et de mises en page prédéfinis que vous pouvez ajuster pour répondre à vos besoins, et il existe un mode de prévisualisation pour présenter votre travail à vos collègues et clients.

Une fois que vous avez fait vos wireframes, le reste de la suite peut vous aider avec d'autres aspects de la planification de votre site Web, notamment l'architecture de l'information, la création d'un guide de style (cela peut être généré automatiquement) et le processus d'approbation.

Si vous souhaitez voir d'autres options, consultez notre tour d'horizon des meilleurs outils filaires .

12. Adobe Comp

Adobe Comp est un fantastique outil de conception Web pour iPad qui aide à la création de wireframes, de prototypes et de concepts de mise en page pour les pages Web. Un carnet de croquis intelligent alimenté par Creative Cloud, si vous le souhaitez. Il propose des modèles de base pour un certain nombre de mises en page pour mobile et Web, et même pour l'impression si c'est votre truc, et vous pouvez créer des espaces réservés rapides en dessinant des formes intuitives pour représenter des images, du texte, etc. Comp convertit les contours bruts en lignes droites, cercles et rectangles.

Étonnamment, Adobe n'a pas jugé bon d'inclure l'exportation directe vers XD - c'est fou! - en dépit une demande de longue date cela fait l'objet d'un examen depuis ce qui semble être une éternité. Cependant, l'exportation vers Photoshop est intégrée (avec Illustrator et InDesign), et une fois les modifications apportées à votre maquette dans l'éditeur d'image omniprésent, vous pouvez ensuite exporter de là vers XD. Malgré cette étape supplémentaire indésirable dans le parcours utilisateur du wireframer adepte d'Adobe, Comp mérite pleinement son inclusion dans cette liste avec ses capacités d'aller partout, sa facilité d'utilisation et son interface utilisateur impressionnante.

13. Flinto

Flinto est un outil de conception qui vous permet de créer des interactions uniques au sein de vos conceptions. Vous pouvez utiliser un certain nombre de gestes et effectuer des transitions faciles en concevant les états avant et après. Flinto définit simplement les différences et anime pour vous - super utile.

Gardez à l'esprit qu'il s'agit uniquement d'iOS, mais cela vous semblera familier lorsque vous commencerez à l'utiliser. Il existe une documentation en ligne pour vous aider dans votre chemin, et l’importation à partir de Sketch et Figma est également simple.

14. Axure

Axure a toujours été l'un des meilleurs outils de wireframing du marché, idéal pour les projets complexes nécessitant des données dynamiques. Avec Axure, vous pouvez vraiment vous concentrer sur la maquette de projets à la fois techniques et nécessitant une attention particulière sur la structure et les données.

Le processus de transfert d'Axure comprend la création de spécifications détaillées qui aident les développeurs à créer un produit final qui correspond à vos conceptions.

15. Justinmind

Justinmind aidera au prototypage et s'intègre à d'autres outils tels que Sketch et Photoshop. Vous pouvez choisir vos interactions et gestes pour aider à assembler votre prototype. Il contient également des kits d'interface utilisateur, ce qui vous permet de créer rapidement des écrans, et il est également réactif.

16. Fluide

Fluide est un outil simple et intuitif pour créer des prototypes rapides et élaborer des conceptions. Il contient de jolis atouts prêts à l'emploi pour vous permettre de démarrer avec des prototypes rapides. Une fois la mise à niveau effectuée, il est très facile d'assembler vos propres symboles avec vos propres éléments d'interface utilisateur préférés. Cet outil offre une conception d'interface utilisateur très rapide, avec des ressources disponibles pour les prototypes haute et basse fidélité.

17. Interaction

Réciproque est un système de prototypage qui améliore la communication et la collaboration au sein de votre équipe, notamment entre les concepteurs et les développeurs. Il est conçu pour les systèmes de conception et s'intègre à votre code pour générer une documentation facile à suivre et mise à jour automatiquement. Garder tout le monde sur la même page et à jour est une fonction essentielle - ainsi, lorsque votre code est mis à jour, votre conception l'est également. Interplay est toujours en version bêta, mais fonctionne déjà avec un certain nombre de grands outils de conception et de développement.

Concevoir des cadres et des bibliothèques

18. Bootstrap

Amorcer n'est certainement pas un nouvel outil, mais il a révolutionné le développement et continue de façonner la façon dont nous créons des éléments sur le Web.

Au moment de la rédaction de cet article, la dernière version (4.4.1, lancée en novembre 2019) a introduit de nouveaux conteneurs réactifs qui sont fluides jusqu'à un certain point d'arrêt, et de nouvelles classes .row-cols réactives pour spécifier efficacement le nombre de colonnes entre les points d'arrêt.

Bootstrap a également récemment lancé sa propre bibliothèque d'icônes open source, Icônes Bootstrap , qui est conçu pour fonctionner avec les composants Bootstrap.

Trouvez le meilleurs thèmes Bootstrap gratuits dans notre guide .

19. Démarrage 3

Si vous aimez Bootstrap mais que vous ne voulez pas vous plonger dans le brut, Startup 3 est le moyen le plus simple; c'est une application en ligne avec des modèles et des thèmes intégrés pour la création de sites Web basés sur Bootstrap 4 avec une grille de 12 colonnes. Vous pouvez créer votre site sans écrire de code à l'aide de l'interface glisser-déposer, mais vous aurez besoin de quelques connaissances en HTML et CSS pour terminer les choses.

20. Vue.js

Vue.js est un cadre pour la construction d'interfaces utilisateur et utilise un DOM virtuel. Comme son nom l’indique, la bibliothèque principale de Vue se concentre sur la couche de vue.

Regardez un exemple de code, tiré de la documentation de Vue, qui utilise les entrées de l'utilisateur et démontre l'élégance de la bibliothèque. Nous allons commencer par le HTML:

{{ message }}

Reverse Message

Notez le gestionnaire v-on personnalisé qui appelle le reverseMessage méthode. Voici le JavaScript:

var myApp = new Vue({ el: '#example', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split(''). reverse().join('') } } });

Cet exemple a rempli le paragraphe avec des données et définit le reverseMessage méthode. Vue est idéal pour les moins expérimentés avec des bibliothèques complexes, mais dispose également d'un certain nombre de plugins pour aider au développement d'applications Web complexes d'une seule page.

21. Laboratoire de modèles

Pattern Lab est un magnifique outil de conception axé sur les modèles créé par Dave OIsen et Brad Frost. Il est basé sur le concept de Conception atomique , qui dit que vous devez décomposer votre conception en ses plus petites parties - les atomes - et les combiner pour former des composants plus grands et réutilisables - des molécules et des organismes - qui peuvent ensuite être transformés en modèles utilisables.

Bien qu'il s'agisse à la base d'un générateur de site statique qui assemble les composants de l'interface utilisateur, il y a beaucoup plus à Laboratoire de modèles que ça. Il est indépendant du langage et des outils; il vous permet d'imbriquer des modèles d'interface utilisateur les uns dans les autres et de concevoir avec des données dynamiques; il comporte des outils de redimensionnement de la fenêtre d'affichage indépendants de l'appareil pour vous aider à vous assurer que votre système de conception est entièrement réactif; et il est entièrement extensible afin que vous puissiez être sûr qu'il se développera pour répondre à vos besoins.

22. Conception matérielle

Conception matérielle est un langage visuel de Google qui vise à combiner les principes classiques d'un bon design avec des innovations technologiques et scientifiques pour créer une base cohérente et flexible pour votre site Web.

Les sites Web et les applications créés à l'aide du framework Material Design auront l'air moderne et seront familiers à l'utilisateur, de sorte que les utilisateurs trouveront facile d'utiliser votre produit tout de suite. Il existe de nombreux outils disponibles pour aider avec ce système de conception; cliquez sur Ressources dans la barre de navigation pour les trouver.

Rejoignez-nous en avril 2020 avec notre gamme de superstars JavaScript à GenerateJS - la conférence qui vous aide à créer un meilleur JavaScript. Réservez maintenant à generateconf.com

Page suivante: Des outils de conception Web spécialisés pour résoudre tout problème

• 1
• deux

Page actuelle: Page 1

Page suivante Page 2