Outils Et Tutoriels

Tout ce que vous devez savoir sur UX Sketching

Si vous avez travaillé sur tout type de projet créatif sérieux, vous devez être familiarisé avec le bloc créatif. On a l'impression de heurter un mur de briques: Aucune des idées que vous envisagez n'est assez bonne ou ne fonctionne pas dans la vraie vie.

Pour les designers, le sentiment est très familier. Cependant, comme tout problème compliqué sans solution apparente, un processus intelligent peut faire la différence. C'est là que ça entre en jeu Esquisse UX .

Esquisse UX c'est un aspect crucial de la conception pour l'expérience utilisateur, bien qu'il soit souvent négligé. Esquisser est un moyen très efficace de communiquer la conception de la communication, tout en permettant aux concepteurs de tester diverses idées et de les itérer, avant d'en choisir une.

Dans cet article, j'ai l'intention de couvrir tout ce que vous devez savoir sur Esquisse UX , y compris les points suivants:

Introduction à UX Sketching et wireframes
Bases, outils et techniques de l'UX Sketching
Clarifiez les croquis avec des notes, des annotations et des nombres
Trucs et astuces pour l'esquisse UX
Des mini-méthodes conçues pour améliorer la qualité et la productivité
Tout ce que vous devez savoir sur Wireflows
Guide rapide du flux d'esquisse UX

Esquisse UX est un processus en deux étapes

Dans la conception, plusieurs options doivent être envisagées, ce qui se traduit par le choix et l'exécution de la meilleure. Les concepteurs examinent leurs options, puis commencent à examiner les détails, faisant ainsi de la conception UX un processus en deux étapes:

Esquisse Ux

Générer des idées

Dans la première étape, de nombreuses idées sont générées, mais comme elles ne peuvent pas être entièrement moulées, il est courant que certains éléments soient manquants ou incomplets. Le plus important est de considérer différentes approches et de décider laquelle est la plus efficace pour cette tâche spécifique et les contraintes du projet.

Détail et raffinement

Étape par étape, vous choisissez des variantes prometteuses et commencez à travailler sur les détails, ce qui rend certaines idées inadaptées.

principe d'unité et de variété de conception

Esquisse UX Oui Maquettes : Introduction et classification

Votre Maquettes ils peuvent différer, en fonction de certains facteurs, tels que le niveau de conception, les couleurs et le style souhaités, ou s'il doit être montré à quelqu'un, etc.

De bons croquis vous aideront à penser clairement, à trouver de meilleures solutions et à gagner du temps.

J'ai mis en évidence les types de croquis suivants:

L'esquisse: idées initiales

Ce sont des esquisses initiales. Les détails de niveau inférieur ne sont que perceptibles. Un nombre limité de couleurs est traité.

J'ai dessiné de nombreux esquisses de base, afin de regarder le problème sous différents angles, d'envisager différentes solutions. Lorsque vous dessinez ces croquis, essayez de générer autant de solutions que possible.

Dans cette étape particulière, l'incomplet libère mon esprit, c'est pourquoi il est si important d'éviter de rester coincé dans des bagatelles, à ce stade. Mon objectif est de générer le plus d'idées possible et de choisir les plus prometteuses.

Wireframe: spécification, phase détaillée

Normalement, je choisis des croquis prometteurs et j'examine les détails, puis je choisis la meilleure variante et j'y travaille à fond.

Cependant, ce ne signifie pas tous les détails . Les choses évidentes peuvent être remarquées. Mais certains aspects seront difficiles à décrire par écrit.

À ce stade, j'ai dessiné tous les détails importants , mais je ne dessine pas Maquettes encore Balsamiq . Une fois que tout est prêt par écrit, je commence à dessiner.

Les outils numériques offrent plus de liberté créative que le papier et vous pouvez facilement vous concentrer sur des choses mineures. Par exemple, vous pouvez vous concentrer sur le «perfectionnement des pixels» plutôt que sur la conception.

Projet de conception visuelle

Cette approche est rarement utilisée, mais peut parfois être utile. Plusieurs solutions visuelles sont envisagées dans les premiers stades du projet, mais la création de croquis numériques pour toutes peut prendre du temps. C'est pourquoi je dessine d'abord des dessins d'esquisse sur papier pour envisager différentes options et choisir une direction de conception visuelle.

Répartition des composants ou des articles

Je trouve cette technique très utile lorsque j'ai déjà une idée générale, et que je pense à la fonctionnalité d'une page particulière, ou aux parties intégrantes des composants d'interface. Je dessine différents éléments de page en détail, puis dessine différentes positions possibles des éléments de page.

Les éléments, même les plus simples, doivent avoir un état; un bouton qui peut être pressé qui a un bloc de texte qui peut être vide ou non. Plus il est complexe, plus il a d'états.

Commencer par les bases

Préparez vos outils - Trouvez l'endroit le plus pratique possible, une grande table avec suffisamment d'espace. Prenez beaucoup de papier et ayez des crayons et des marqueurs à portée de main.
Chauffage - Pour être prêt, je recommande de dessiner des lignes, des cercles, des modèles de base et des icônes.
Définissez vos objectifs - Décidez de ce que vous voulez dessiner. Fixez votre objectif et décidez quelle histoire vous avez à raconter. Déterminez le niveau de détail souhaité. Décidez si vous êtes prêt à dessiner en vrac.
Définissez ce que sera votre public - Si vous le faites pour vous-même, ne vous inquiétez pas de l'apparence de votre croquis. Cependant, si votre intention est de montrer votre dessin à un client, assurez-vous de consacrer plus de temps au travail pour ajouter plus de détails à votre croquis.
Définir un délai - Après avoir décidé du temps que vous êtes prêt à consacrer à l'esquisse, disons 30 minutes, cela vous aidera à vous concentrer sur le travail. Maintenant, vous êtes prêt et vous pouvez commencer:

Dessinez les frontières - Dessinez les cadres, une fenêtre de navigateur ou de téléphone, une partie de l'interface, etc.
Ajouter les éléments les plus élémentaires ou les plus volumineux - Menu, pied de page, contenu principal.
Ajouter des détails - ajoutez des détails pertinents, mais restez simples à ce stade.
Ajouter des annotations et des notes - Ils ne sont nécessaires que si vous prévoyez de partager vos croquis. Cependant, ils peuvent être utiles, même si vous le faites pour un usage personnel uniquement.
Alternatives d'esquisse - Avoir des alternatives à résoudre.
Choisissez la meilleure solution - Choisis la meilleure option.
Ajouter une ombre et un biseau - Ceci est particulièrement important lors du partage. Ajoutez une ombre pour rendre votre croquis plus frappant visuellement, ce qui est important si vous prévoyez de le partager avec des membres de l'équipe ou des clients.
Enregistrer l'esquisse - Prenez une photo ou mettez-la dans un dossier. J'ai des bacs à papier sur ma table à croquis.
Partager - J'utilise l'une des méthodes de partage suivantes: * Scannez les croquis via Evernote et fournit un lien permanent pour les autres membres de l'équipe ou d'autres parties prenantes. * Prenez une photo et téléchargez-la sur InVision . * Attribuer et télécharger des images sur Tableau en temps réel . * Ou envoyez simplement une photo par courrier électronique .
Examiner les croquis et ajouter des notes - Reposez-vous puis revenez à vos croquis, un peu plus tard. Regardez-les à nouveau. L'esquisse a-t-elle encore un sens pour vous? Un bon croquis doit être facile à suivre.

Si vous en tant que concepteur ne pouvez pas comprendre quelque chose dans votre esquisse, la solution ne fonctionnera pas. Soit le croquis ne vous permet pas de bien visualiser vos idées, soit les idées sont très complexes.

Clarifier les esquisses avec des éléments supplémentaires

Trouvez ou dessinez une esquisse appropriée, puis ajoutez les détails suivants:

Titre - L'ajout d'un titre est parfois une bonne option. Écrivez une description et une date, si vous en avez envie, en haut du croquis. Ce titre vous aidera à comprendre ce que vous regardez, et aussi si le croquis est pertinent ou non. Ceci est particulièrement utile si vous avez beaucoup de croquis ou si vous allez les montrer à d'autres personnes.
Annotations - Les annotations sont des noms et des notes placés à proximité d'un élément, pour expliquer son contenu ou ses attributs. Ceux-ci ajoutent des détails qui clarifient d'autres éléments et peuvent généralement être difficiles à dessiner. Par exemple, cela peut être le nom du bloc, des détails d'interaction, une explication d'une photo, des idées pour de futures variations de conception, etc. Tu peux vérifiez un de mes exemples pour comprendre à quoi ressemble une annotation d'esquisse.
Nombres - Listez les éléments de votre croquis ou les croquis eux-mêmes. Vous pouvez décider comment les ordonner (par exemple par flux d'interaction, l'ordre dans lequel vous les avez commandées, etc.). Cela peut également être utile pendant les discussions (en particulier les discussions à distance), car vos collègues et clients peuvent nommer le numéro du croquis dans leurs commentaires afin que vous puissiez facilement comprendre à quel croquis ils font référence dans leurs commentaires.
Flèches - Vous pouvez utiliser des flèches pour indiquer les transitions d'écran. Ils peuvent également être utilisés pour relier différentes parties d'esquisses, pour indiquer une séquence d'actions, etc. Puisque la signification des flèches peut varier, vous pouvez ajouter juste au-dessus de la flèche une description ou une explication de ce que signifie la flèche. Voici une exemple d'une esquisse de base, qui montre une transition et plusieurs états différents.
Remarques - Comme les annotations, les notes sont utilisées pour expliquer les concepts. Cependant, les notes diffèrent des annotations par leur emplacement. Ils ne sont pas attachés à un article ou proches de l'article décrit, similaire à cet exemple . Les notes peuvent être situées en haut ou en bas de la page. Ils peuvent même décrire des éléments qui ne sont pas inclus dans la conception, des questions que vous pourriez avoir, des explications générales, des idées sans tirage au sort, etc.
Gestes - Les gestes sont importants dans le cas d'un appareil de conception tactile. Dessiner un geste de la main peut demander de la pratique. Il existe de nombreuses variantes de gestes, qui sont utilisées pour indiquer différentes actions, il est donc préférable de décider à l'avance comment désigner une action particulière (ce n'est pas évident, bien sûr) et de s'entraîner à la dessiner.
Retour d'information - Vous pouvez recevoir des suggestions pour corriger ou améliorer le croquis après l'avoir montré à d'autres personnes ou après l'avoir examiné vous-même. Il est souvent utile de marquer ces commentaires avec une couleur différente, pour différencier les commentaires de l'esquisse d'origine.

Vous pouvez utiliser différentes couleurs pour différents types d'éléments. Parfois, j'utilise le noir pour les dessins, le bleu pour les liens, le vert foncé pour les notes et le rouge pour les titres et les commentaires. Essayez d'utiliser des couleurs dans vos croquis mais assurez-vous que les couleurs que vous choisissez sont cohérentes!

Trucs et astuces plus spécifiques

Ne vous inquiétez pas de la qualité - Ne regardez pas les croquis sur Dribble; il s'agit de quelque chose complètement différent. Gardez à l'esprit que l'objectif principal des croquis est de vous aider à penser clairement, à trouver de meilleures solutions et à gagner du temps.
Entraine toi - Pour commencer, vous pouvez essayer de dessiner quelques applications. Ouvrez une application Web ou mobile et essayez de copier l'écran en décrivant les éléments dans les notes. Lorsque vous avez du temps libre, entraînez-vous à dessiner les éléments de base de votre conception. En général, la pratique rend parfait. Au fil du temps, il fera partie de votre architecte d'intérieur.
Acheter un dossier - Habituellement, je ne travaille pas depuis mon bureau, mais depuis un café ou depuis chez moi. Les croquis sur papier sont susceptibles de s'endommager, alors achetez un classeur simple pour les garder sains et saufs.
Emportez des outils avec vous où que vous alliez - Cela permet de garantir que vous pouvez capturer votre idée sur papier à tout moment, sinon vous pourriez perdre l'idée ou être incapable de vous en souvenir en détail. Je porte toujours un cahier, des feuilles A4 et des crayons.
Partager avec d'autres - Il est très important d'inclure d'autres personnes et de communiquer avec l'équipe. Inclure les autres et obtenir leurs commentaires, en particulier au début du processus, permet d'économiser du temps et des ressources à long terme. Vous pouvez également encourager les autres à tracer le chemin où ils voient que le design peut aller.
Bacs à papier - Pensez à placer des bacs à papier sur votre table de travail. Par exemple, j'en ai trois: pour les tâches immédiates, pour les croquis, des feuilles de papier propres.
Expérimentez et personnalisez - Mes recommandations sont basées sur mon expérience. Au fil du temps, vous trouverez ce qui vous convient le mieux; quelles méthodes, quelle séquence d'étapes, exactement ce qui remplit votre potentiel créatif. Mais vous n'y arriverez que si vous essayez constamment quelque chose de nouveau, il est donc important d'expérimenter différents formats, styles et essayer de nouveaux modèles.
Utiliser des modèles - Les modèles gagnent du temps et prennent implicitement en compte les restrictions de formatage, ce qui vous laisse plus de temps pour vous concentrer sur ce qui est important.

Mini-méthodes supplémentaires pour améliorer vos croquis

Ce ne sont pas nécessairement des trucs et astuces, mais un ensemble de méthodes, d'outils et de conseils qui devraient améliorer votre productivité et la qualité de vos croquis.

Créer un tableau de croquis - L'un des plus grands avantages d'utiliser un crayon et du papier, au lieu d'un outil de dessin numérique, est que vous pouvez le coller sur un mur. Tout le monde dans l'équipe peut voir et participer (bien que je recommande de faire des sessions de révision). * Vous verrez les croquis vous-même, ce qui stimulera votre réflexion et vous permettra de vous concentrer sur l'objectif, pas d'isoler des parties, mais sur l'ensemble du système. Ces interactions entre les pièces et la manière dont elles s'emboîtent. * Créez le tableau de croquis - attachez vos croquis de tableau blanc. S'il n'y a pas de tableau blanc dans votre bureau, vous pouvez utiliser du ruban adhésif double ou des notes autocollantes pour coller vos croquis sur le mur. Si vous ne voulez pas les coller au mur, vous pouvez utiliser un grand morceau de carton. Je recommande d'utiliser un tableau de croquis, car c'est l'un des meilleurs outils de conception.
Utilisez un tableau blanc - Un tableau blanc est un excellent outil de dessin. Il présente de nombreux avantages: il est complet; il est également facile pour les autres membres de l'équipe de s'impliquer dans la discussion et le dessin. Même si leurs idées ne vont pas avec le design, vous pouvez comprendre leur façon de penser et cela vous aidera à vous comprendre.
* Les signets ne vous permettent pas de vous concentrer sur les détails, vous devez penser aux choses générales. Les croquis, laissent place à l'interprétation.
* Un tableau blanc est facile à nettoyer et à y apporter des corrections. * Il y a beaucoup d'espace et vous pouvez facilement réfléchir au flux du système. * Vous pouvez joindre des croquis, des impressions et des documents de référence à l'aide d'aimants.
Prototypes - Réalisez un prototype cliquable, pour évaluer votre conception. Essayez d'obtenir des commentaires sur certains éléments. Cela fonctionne particulièrement bien lorsque vous utilisez des modèles - vos croquis sont de la même taille. Évidemment, il serait plus facile de dessiner des croquis de même taille, si vous utilisez des modèles. Je vais essayer de vous faciliter la tâche en fournissant des modèles que vous pouvez télécharger et utiliser: Mobile , Navigateur multi-fenêtre , Défilement du navigateur , Des personnes .
Utilisez votre imprimante et votre scanner - Dessinez le cadre à la main (vous pouvez utiliser une règle pour dessiner plus précisément), puis numérisez-le à l'aide d'un scanner ou d'une application mobile, et imprimez-le. Vous pouvez modifier votre modèle dans l'éditeur d'image avant l'impression. Vous pouvez supprimer des détails inutiles ou dupliquer certains éléments. Vous pouvez également imprimer une page de site prête à l'emploi, des photos et d'autres éléments descriptifs. Vous pouvez coller les découpes dans votre esquisse.
Utilisez Evernote pour numériser - Evernote est un excellent outil de conception. Là, vous pouvez avoir et partager vos croquis, vous pouvez créer des thèmes et utiliser des balises pour organiser vos croquis. Les capacités du mode 'Scanner' sont particulièrement impressionnantes. Vous placez votre croquis devant et il le numérise, vous obtenez donc une copie de votre croquis. Vous pouvez ensuite inviter vos collègues sur Evernote et leur donner le lien vers votre note. Puisqu'il existe une application pour téléphones et tablettes, vous pouvez toujours avoir vos croquis sous la main.
Esquisse hybride - Pour donner vie et réalisme à vos croquis, vous pouvez les combiner avec des photos. Cela signifie que vous devez prendre une photo, puis dessiner une histoire avec des éléments d'interface. Cela peut également vous aider à remarquer les problèmes d'interaction et de détail.
quand le langage c a-t-il été inventé
Suivre le monde réel - Si vous avez besoin de créer un storyboard, d'illustrer une expérience dans un contexte spécifique (exemple, une personne utilisant un smartphone dans une gare routière), vous devez inclure des représentations de personnes, de lieux et d'objets divers de la vie réelle. Ceux-ci peuvent être difficiles à dessiner, surtout si vous ne maîtrisez pas les techniques de dessin, mais voici un conseil très simple:

Prenez une photo de l'objet ou de la situation, puis obtenez le contour clé des objets à l'aide d'un éditeur d'image. Vous pouvez utiliser le contour résultant dans vos croquis, plus tard.

Bien sûr, si vous en avez un tablette et stylet ce sera encore plus facile.

Wireflow: schéma du système de branchement

Wireflow est essentiellement une séquence de flux système, écran après écran, avec des branches et des points de décision. Nous devons tenir compte de la façon dont un utilisateur gère ses tâches, de la façon dont il passe d'un écran à l'autre et de l'expérience globale de son expérience avec le produit.

Wireflow, ou ce que vous dessinez et la façon dont il se connecte, peut être organisé selon les approches suivantes:

Séquence - Une séquence est un trajet direct, écran après écran. Cela peut être une histoire avec des points de décision; Vous affichez non seulement le trajet, mais également les points de décision et les différents chemins que l'utilisateur peut choisir. Vous pouvez afficher la structure de l'interaction avec l'écran.
Changements d'état - Ils représentent différents états d'écran de certains éléments et les conditions ou actions qui provoquent les transitions entre ces états.
Écran vs. Éléments d'écran - Vous pouvez dessiner les écrans complets ou envisager des micro-interactions ou des interactions.
Plateformes - Vous pouvez envisager une expérience de plate-forme unique ou plusieurs plates-formes.
Portée - Allez-vous représenter une partie du parcours de l'utilisateur ou l'intégralité du parcours? Une seule interaction utilisateur avec le système ou plusieurs interactions utilisateur?

J'essaye généralement de définir les types de wireflow suivants, en fonction de l'organisation et de l'utilisation pratique:

Cartographie de flux générale et de haut niveau - Faites un rapide croquis des changements d'écran et dessinez le parcours global d'utilisation du produit. Ici, vous pouvez inclure du contexte et éventuellement, vous pouvez afficher l'interaction de l'utilisateur. Par exemple, un service d'achat électronique est un parcours un peu long, qui peut comprendre de nombreuses étapes: comment l'utilisateur a trouvé le magasin, les étapes qu'il a suivies pour trouver le produit, comment il a payé, etc.
Flux d'écran - Ceci se concentre sur un flux fonctionnel spécifique à travers le système. Il peut s'agir d'une séquence courte et simple ou d'un parcours de ramification. Par exemple, un utilisateur télécharge des photos ou une vidéo.
Schéma de navigation - Dessinez votre écran et les options qu'il contient. Ce n'est pas censé cartographier le voyage. Cette étape contient des informations qui montrent les options que l'utilisateur peut choisir, les adresses dont il dispose et les différentes parties de l'application. Normalement, je crée un schéma de navigation au début d'un projet. Il sert à comprendre comment la navigation doit être structurée. (Quels points devraient être inclus et combien de niveaux sont nécessaires).
États de l'écran - Dessinez l'écran ou l'état des éléments (un exemple peut être une boîte de dialogue de téléchargement de fichier). Dans ce cas, par exemple, l'écran aura les états suivants: * Vierge * Un utilisateur prend le fichier dans la zone active * Le fichier est en cours de chargement * Le fichier est chargé * Il y a une erreur

Flux d'esquisse UX: un guide pratique rapide

Le processus de conception filaire est similaire à celui de filaire . De nombreuses étapes sont similaires ou identiques, mais il existe des différences importantes:

Définissez ce dont vous avez besoin pour dessiner - Décidez exactement de ce que vous devez dessiner (par exemple l'histoire générale ou un fragment de votre dessin). Vous souhaitez générer différentes options ou réfléchir en profondeur aux détails d'un voyage? Décidez si vous allez montrer vos croquis à quelqu'un d'autre ou non.

Définissez les cadres et les transitions à inclure dans votre dessin - Si vous ajoutez tous les écrans et modifications, votre wireflow sera très long et complexe. Réfléchissez aux écrans clés que vous devez afficher pour transmettre l'essence de l'interaction, ce qui contribue à compléter votre zone. La même chose s'applique aux changements d'écran. Vous devez décider quels changements seraient les plus utiles pour exprimer votre idée. Check-out cet exemple comme référence.

Définir le point de départ - Quel sera le point de départ du voyage? Vous pouvez commencer par le point d'entrée, comme le début du trajet, par exemple, que l'utilisateur voit lorsqu'il se connecte à votre application. Alternativement, vous pouvez commencer à mi-chemin ou avec les écrans les plus difficiles / intéressants / importants, ou les étapes du processus. Ou vous pouvez commencer par la fin, avec le résultat final obtenu par un utilisateur, et décrire les étapes que l'utilisateur a suivies pour arriver à ce point.

Définissez votre approche et faites un croquis général sur papier.

Décidez de la suite - Après avoir dessiné les étapes initiales, décidez quoi faire ensuite en répondant aux questions suivantes:

Dans quelle direction ces étapes conduisent-elles les utilisateurs?
Dans quelle direction voulez-vous qu'ils aillent?
Que doivent-ils faire pour y arriver?

Esquisse alternative et itinéraires de billets - Pensez à des moyens alternatifs permettant à l'utilisateur d'accéder à chaque étape:

Que faire si la connexion Internet de l'utilisateur échoue?
Quelles autres options ont-ils?
Que peut-il se passer en cas d'erreur d'utilisateur ou d'application, que se passerait-il?
Que se passe-t-il si l'utilisateur ferme l'application à cette étape?
Où l'utilisateur commencerait-il la prochaine fois qu'il ouvrirait l'application?

Pensez à des flux alternatifs - Analysez l'histoire, concevez un flux alternatif et faites un croquis.

Ajouter des annotations, des notes et des détails - Ajouter des éléments explicatifs qui clarifieront les détails, qui ne sont pas évidents.

Garde - Faites une copie numérique du croquis.

Partager - partager le croquis (comme par, via Evernote ou Invision ).

Trucs et astuces essentiels pour le flux d'esquisse UX

Tout d'abord, créez un brouillon Wireflow - Si vous envisagez un long voyage, il est préférable de faire un croquis rapide, afin de comprendre l'espace dont vous avez besoin, afin de ne pas oublier les étapes et les détails importants. Il sera difficile de les ajouter au croquis sur papier plus tard.

Ne créez pas une grande carte avec de nombreux détails - Les croquis papier n'ont pas de bouton Annuler, il sera donc difficile d'apporter des modifications. Peut-être que vous dessinez les détails très spécifiquement et cela peut distraire votre imagination de générer différentes variantes de haut niveau. Au lieu de créer un grand schéma qui illustrerait l'ensemble du système, essayez de vous concentrer sur les scripts clés et essayez de dédier une page individuelle à chacun.

Éliminez les détails inutiles et combinez plusieurs niveaux de détail - Il n'est pas nécessaire de dessiner toutes les descriptions d'interaction, essayez donc de n'utiliser que les éléments clés de votre voyage. Lorsque vous dessinez une grande carte d'interaction, vous n'avez pas besoin de parcourir tous les détails de chaque écran. Certains écrans peuvent être représentés avec plusieurs cases et d'autres écrans clés en détail.

Utilise différentes tailles de papier - Essayez d'utiliser différents formats de papier, A3 ou a5. La taille des feuilles de papier vous limitera et affectera votre processus de différentes manières. Un petit morceau de papier ne vous permettra pas d'ajouter beaucoup d'écrans ou de détails, mais cela vous aidera à vous concentrer sur beaucoup d'idées. En utilisant une grande feuille de papier, vous pourrez dessiner un beau voyage, beaucoup de détails et des notes supplémentaires. Alternativement, vous pouvez y effectuer un certain nombre de petits voyages.

Les notes autocollantes peuvent vous aider aussi - Vous pouvez essayer d'utiliser des notes autocollantes. Vous pouvez dessiner des écrans ou des pieds de page séparés sur eux, ou dessiner des états supplémentaires pour vos éléments d'esquisse. Leur avantage est qu'ils peuvent être facilement remplacés, vous pouvez également déplacer la note vers un autre endroit. Par exemple, en cas de changement de flux, vous pouvez modifier l'ordre de vos notes autocollantes.

Utiliser des modèles - Essayez d'utiliser des modèles. Ils vous feront gagner du temps et vous permettront de créer des prototypes cliquables de haute qualité.

Essayez d'utiliser un tableau blanc - Un tableau blanc présente de nombreux avantages. Il est devenu plus populaire, car il vous permet de dessiner un grand voyage avec de nombreuses branches. Vous pouvez dessiner de nombreux composants d'application, sur papier, puis les attacher au tableau blanc à l'aide d'aimants, les ajoutant ainsi au voyage.

Créer une esquisse d'ombre - Les ombres peuvent vous aider à marquer des éléments importants, ce qui ajoute un attrait visuel à votre croquis. J'utilise trois types d'ombres différents

Lignes suivant la direction de la lumière - Cela n'a pas toujours l'air beau, mais vous pouvez utiliser la graduation et amener les objets à différentes «hauteurs»
Soulignez certaines parties avec une couleur plus foncée (uniquement le bouton ou la partie inférieure ou le côté droit)
En utilisant le Pro-marqueur (ou son équivalent dans l'application que vous utilisez pour dessiner)

Éléments à dessiner - Une objection comme 'Je ne peux pas bien dessiner' cela peut étouffer votre initiative. C'est beaucoup plus facile qu'il n'y paraît. Même les esquisses les plus complexes sont constituées d'un certain nombre de blocs de base, comme dans cet exemple .

Si vous pouvez dessiner un point, une ligne, un triangle, un carré et un cercle, vous disposez déjà des éléments de base essentiels dont vous avez besoin pour dessiner une esquisse.

Mettre tous ensemble - Les éléments de base, les boutons, les boutons radio et listes déroulantes Ils sont constitués d'éléments de base. Une fois que vous avez appris à dessiner ces éléments, vous pouvez les combiner dessinez des blocs et des composants complexes.

Pour terminer

Le but de cet article n'était pas de créer le guide ultime pour tous Esquisse UX , ou Esquisser en général, parce que les designers ont des besoins différents ainsi que des préférences personnelles.

comment concevoir un site Web réactif

Comme vous pouvez le voir, c'est beaucoup expliquer. Les concepteurs utilisent une grande variété d'outils, de techniques et d'approches pour créer des croquis UX, et c'est en fait quelque peu subjectif. Certaines techniques peuvent ou non fonctionner pour certaines personnes travaillant sur différents projets. Si vous débutez, vous devriez expérimenter.

Une pratique et une expérimentation cohérentes vous aideront à trouver ce qui fonctionne le mieux pour vous.

A vous de choisir les techniques et astuces qui conviendront le mieux à votre projet et à votre approche du design. Avez-vous des conseils de Esquisser extra pour les collègues UXers ? Partagez-les en toute confiance dans la section des commentaires.

En relation: L'art du design UX significatif