Maquettes de sites Web: 4 approches populaires à explorer
Les maquettes de sites Web peuvent être créées de différentes manières. Il est vrai qu'il n'y a pas de `` meilleure '' approche, mais en fonction des styles et des préférences de certains designers UI et UX (et du processus de conception), certains fonctionneront mieux que d'autres.
Dans cet article, nous examinerons les avantages et les inconvénients de quatre des options les plus populaires: les outils UX de bout en bout, les outils de maquette, les outils de conception graphique, ainsi que les conceptions codées qui commencent à brouiller les lignes entre les maquettes de sites Web. et prototypes.
Si vous recherchez spécifiquement les outils de wireframing, consultez cet article sur le meilleurs outils filaires , ou pour une collection plus large, consultez notre méga-tour d'horizon des meilleurs outils de conception Web .
Ne faites pas l'erreur de penser que toutes les maquettes de sites Web sont identiques. Des décisions simples concernant les plates-formes, la fidélité et le codage produiront toutes des résultats très différents. Sachez ce que vous voulez et quels sont vos objectifs avant même de commencer le processus de conception - si vous voulez un outil qui prend en charge les trois phases, il est préférable de commencer à l'utiliser plutôt que de passer à mi-chemin. De même, si vous avez besoin d'une maquette stellaire et entièrement réaliste, gardez à l'esprit que vous utiliserez un éditeur de conception graphique à un moment donné.
01. Outils UX de bout en bout
Au plus haut niveau se trouvent des outils de bout en bout qui visent à satisfaire l'ensemble du flux de travail: maquettes, prototypage, documentation, transferts de développeurs et systèmes de conception. UXPin répond à ce besoin depuis le début des années 2010, mais un certain nombre d’autres marques, telles qu’Adobe et InVision, essaient désormais de créer «un outil unique pour les gouverner tous».
Alors, comment ces outils s'empilent-ils uniquement pour la création de maquettes? Ils peuvent s'y attaquer sans aucun problème - et plus encore. Avec UXPin, par exemple, vous pouvez créer des maquettes avec plusieurs états et interactions. Il imite même certaines fonctionnalités de Photoshop et Sketch en incluant un outil Stylo.
D'autre part, Studio par InVision , permet une édition d'animation assez astucieuse; tandis que Adobe XD vous permet d'ouvrir des fichiers Photoshop et Sketch dans vos conceptions XD et d'appliquer des couleurs, des symboles, des dégradés linéaires et des styles de caractères.
Plus important encore, les outils de bout en bout proposent désormais des systèmes de conception pour assurer la cohérence des maquettes entre les projets. Les systèmes de conception offrent à chacun une source unique d'informations sur les actifs et les principes de conception des outils. Si vous prévoyez de créer de nombreuses maquettes, cette fonctionnalité devient presque obligatoire.
Lors de la sélection d'un outil de bout en bout pour créer la maquette de votre site Web, il convient de prendre en compte les aspects suivants:
- fidélité : Quelle est la puissance de l'outil de conception visuelle et d'interaction?
- Cohérence : Quelles fonctionnalités assurent la cohérence de la conception dans votre travail?
- Précision : Les éléments avec lesquels vous travaillez reflètent-ils la «source de vérité» de votre organisation?
- Collaboration : Pouvez-vous collaborer avec des parties prenantes ou d'autres designers?
- Remise du développeur : Comment l'outil génère-t-il des spécifications et des actifs pour les développeurs?
02. Outils de maquette dédiés
Des solutions moins robustes telles que Principe , Encadreur , Moqups ou Balsamiq peut toujours vous fournir tout ce dont vous avez besoin pour créer votre maquette - vous perdrez tout simplement les fonctionnalités supplémentaires de flux de travail et de cohérence de la conception. Ces outils sont conçus pour rendre le processus de création aussi simple que possible, afin que vous puissiez vous concentrer davantage sur les décisions stylistiques et moins sur la façon de manipuler le programme.
Les outils de maquette dédiés présentent des avantages évidents: les débutants bénéficient de leur facilité d'utilisation, tandis que les experts apprécient les conceptions spécifiquement adaptées à leurs besoins avancés. Sur le plan plus avancé, des outils tels que Framer et Principle se spécialisent dans les animations et les interactions pour les maquettes.
À l'extrémité inférieure, Moqups et Balsamiq offrent plus de fonctionnalités que les outils non liés à la conception qui sont parfois utilisés pour les wireframes et les maquettes (tels que Keynote ), mais ils sont limités uniquement aux conceptions basse fidélité. Ils peuvent cependant être très utiles si l'objectif est de créer très rapidement des wireframes basse fidélité.
En ce qui concerne les outils de maquette, vous devez décider si une solution de wireframing simple fera l'affaire, ou si vous avez besoin d'une conception d'écran plus avancée. Quel que soit l'outil de maquette que vous choisissez, assurez-vous simplement que vous êtes prêt à accepter la perte de flux de travail collaboratif et la diminution des fonctionnalités de cohérence de conception offertes par les outils de bout en bout.
03. Logiciel de conception graphique
Certains designers ne jurent que par des logiciels comme Photoshop CC , Esquisse ou Illustrateur CC , en particulier ceux qui sont particulièrement qualifiés ou familiers avec les outils qui offrent un contrôle jusqu'au pixel. Les plates-formes de conception graphique fonctionnent mieux si vous visez le plus haut niveau de réalisme et de fidélité visuelle. Et comme nous l'expliquons dans notre guide sur prototypage rapide avec Photoshop CC , cela peut être plus facile que vous ne le pensez.
Travailler dans un logiciel de conception graphique vous donne accès à une sélection presque infinie de couleurs hautement définies, donc si vous travaillez dans les limites d'un jeu de couleurs rigide et prédéfini - par exemple, selon des règles de marque particulières - alors ces programmes peuvent être votre meilleur. option. Plus que des options de couleur, ces programmes offrent beaucoup plus d'outils visuels, vous permettant de vous attaquer aux moindres détails.
Cependant, l'inconvénient de l'utilisation de ce type de logiciel est qu'il peut être difficile à traduire lorsqu'il est temps de commencer à coder la conception. Ce qui a fonctionné dans Photoshop peut ne pas toujours fonctionner dans le code (éléments tels que les polices, les ombres, les effets de dégradé, etc.), ce qui peut se traduire par un temps perdu à trouver des solutions pour la phase de prototypage.
Pour les pages riches en style, il peut être utile de définir les détails visuels spécifiques pendant la phase de maquette, auquel cas Photoshop ou Sketch vous offrira le plus d'options. De même, si vous avez affaire à un client pointilleux ou difficile à plaire, leur présenter une maquette magnifique et impressionnante pourrait les convaincre plus facilement.
Il convient également de mentionner que les maquettes créées dans Photoshop ou Sketch peuvent être glissées et déposées dans la phase de prototypage avec UXPin. Cela vous permet d'animer facilement tous les calques (sans aplatissement) en quelques clics et vous évite d'avoir à recommencer à zéro au moment de prototyper.
Si les visuels ne sont pas votre seule priorité, vous pourriez être plus efficace en utilisant un outil qui vous permet de faire le wireframing, les maquettes et le prototypage en un seul endroit. Les logiciels de conception graphique peuvent poser plus de problèmes que les maquettes, sauf si vous recherchez une visualisation optimale - vous devrez certainement communiquer régulièrement avec votre développeur, car ces outils ne sont pas conçus pour la collaboration.
04. Maquettes codées
Si vous êtes principalement un concepteur et que vous n'êtes pas à l'aise avec le codage, ce n'est évidemment pas une option. Comme discuté dans Le guide des maquettes , les maquettes codées ne sont pas le choix par défaut.
La plupart du codage peut être reporté jusqu'à la phase de prototypage (si vous créez un prototype HTML / JavaScript) ou même plus tard (si vous utilisez un outil de prototypage). Mais malgré la complexité et les obstacles potentiels, de nombreux concepteurs respectables préconisent d'introduire du code dans la phase de maquette.
Alors que les améliorations des outils et de la technologie signifient que de plus en plus de possibilités s'ouvrent dans la conception de la mise en page, tout n'est pas facile (ni même possible) à recréer dans le code. Commencer par le code vous permet de savoir tout de suite ce que vous pouvez et ne pouvez pas faire. Si vous êtes à l'aise avec le code, on peut également affirmer que commencer par cela est moins coûteux - la maquette finira de toute façon en HTML / CSS.
Mais comme nous l'avons mentionné précédemment, les maquettes avec codage ne sont pas une stratégie populaire, pour plus de raisons que la difficulté de codage. Commencer à coder trop tôt peut limiter votre créativité et votre capacité à expérimenter, car il est facile de s'inquiéter de la faisabilité de vos idées dans le code plutôt que de leur excitation.
C'est à vous de décider quand introduire le codage. Assurez-vous simplement de connaître vos objectifs de conception et tenez les développeurs informés de la façon dont vous hiérarchisez les fonctionnalités.
Lire la suite:
- 12 meilleurs outils de prototypage
- 6 erreurs d'interface utilisateur qui tuent vos taux de conversion
- 5 façons d'accélérer vos sites Web et applications
