Premiers pas avec UX Design dans Sketch

Une introduction pour les nouveaux designers UX et les étudiants en design

Nous avons beaucoup écrit sur les astuces Sketch chez UX Power Tools au cours des deux dernières années et je voulais les organiser de manière à aider les concepteurs qui commencent tout juste à entrer dans UX.

Je dois également mentionner que je ne vais pas débattre de quel outil est le meilleur - je suppose simplement que vous avez déjà réalisé que Sketch est le meilleur (pour l'instant) et que vous voulez savoir comment l'utiliser en tant que concepteur UX

J'ai divisé nos articles en 5 sections qui décrivent comment je pense que les nouveaux concepteurs progressent du novice à la maîtrise:

  • Faire sortir les idées
  • Commencer
  • Accélérer
  • Être plus intelligent
  • Obtention visuelle

Faire sortir les idées

La conception UX commence avant que vous n'utilisiez les outils - elle commence au moment de vous faire sortir des idées (… elle commence en fait bien avant cela avec la recherche, mais gardons cet article sous 20 minutes).

Certes, je me lance directement dans les outils numériques. Mais c'est en grande partie parce que je fais plus dans ma tête et esquisse en collaboration sur un tableau blanc avec mon équipe de conception. Les concepteurs UX qui débutent devraient vraiment rester en basse fidélité tout en explorant l'espace problématique et en faisant des erreurs.

Une fois que vous êtes prêt à afficher quelque chose à l’écran, il y a deux outils qui, je pense, facilitent cela très bien. Le premier est un outil InVision appelé Freehand, que nous avons examiné:

Le deuxième outil qui facilite cette phase de conception est un ensemble de bibliothèques premium pour Sketch appelé Flowkit par Matt D. Smith. Cela vaut bien le prix de 29 $.

Il est non seulement idéal pour le wireframing à faible fidélité, mais peut être utilisé à des étapes ultérieures de votre conception lorsque vous avez besoin de cartographier des flux de travail clés en haute fidélité pour communiquer votre conception.

Commencer

De loin, la plus grande force de Sketch for UX Design est son emphase à rendre les choses reproductibles et rapides.

Il est encore assez alarmant de voir combien de concepteurs de Sketch n'utilisent pas des choses aussi simples et puissantes que les styles partagés, ou des avancées plus récentes comme les symboles imbriqués. Je suppose que c'est parce que les designers s'impatientent et veulent juste sortir les choses. Je comprends parfaitement.

Mais un grand design n'est aussi bon qu'un designer est organisé. Nous aimons la métaphore de la cuisine:

Et nous aimons également étendre le concept de feuilles de style du code à la conception (depuis que nous avons écrit cela, les systèmes de conception ont vraiment explosé sur la scène, mais la plupart de ces techniques sont toujours pertinentes aujourd'hui):

Et enfin pour le Saint Graal des articles sur la façon de démarrer un projet dans Sketch, qui couvre tout (jusqu'à la structure des dossiers):

Avec un article bonus sur la façon de configurer les mises en page dans Sketch de manière réactive:

De plus en plus vite

Ok, maintenant que vous savez comment démarrer efficacement un projet Sketch, il est temps de commencer à accélérer avec l'outil. Personnellement, je trouve carrément offensant de voir un designer n'utiliser aucun raccourci lors de la conception - je veux dire, cela me fait vraiment mal. Ne soyez pas ce gars / fille:

Environ un million et demi de nouveaux outils et plugins sont sortis depuis que nous avons écrit cet article, mais à vrai dire, les meilleurs compagnons pour Sketch n'ont pas vraiment changé à mon avis (Nudg.it est maintenant pris en charge nativement dans Sketch, Anima est également utile même si une partie a été intégrée à la fonctionnalité de mise en page de Sketch):

Trucs et astuces

Jon Moore a transmis sa sagesse d'utilisateurs avertis dans quelques articles qui vous épateront par leur simplicité et leur puissance:

Être plus intelligent

Vous savez comment configurer un projet, vous avez appris à accélérer avec Sketch et il est maintenant temps d'appliquer tout cela à la conception UX.

Comme je l'ai dit plus tôt, Sketch est parfait pour la conception UX car il facilite la répétition, la cohérence et la modularité. Voici quelques exemples d'utilisation de Sketch pour créer intelligemment des éléments d'interface utilisateur (et ils sont tous livrés avec des cadeaux ):

Gestion efficace des icônes et des graphiques

Nous aborderons le côté de la conception visuelle d'UX dans la section suivante, mais traiter des graphiques est souvent en dehors de la timonerie d'un concepteur UX. Au lieu de vous soucier de la création d'icônes, découvrez comment vous les utilisez:

Les symboles imbriqués peuvent en fait automatiser un peu:

Enfin, je m'en voudrais de ne pas souligner la plus grande avancée de Sketch au cours des 12 derniers mois - Bibliothèques:

Obtention visuelle

Comme si tout cela ne suffisait pas, les concepteurs UX ont aujourd'hui une norme beaucoup plus élevée à respecter en matière de conception visuelle.

Lorsque je me suis lancé dans la conception UX, j'ai trouvé difficile de me familiariser avec les «matériaux» dont j'avais besoin pour concevoir: les rapports d'aspect, les tailles de police, les poids, le contraste des couleurs, etc.

Pour aller mieux, j'ai commencé par copier des produits existants afin de pouvoir comprendre la composition de l'interface utilisateur.

Nous avons couvert cette dernière année et fournissons des liens vers quelques produits communs recréés dans Sketch (bien que certains d'entre eux aient depuis été repensés):

De là, vous pouvez vraiment commencer à utiliser quelques petites techniques pour ajouter un peu de flair à vos créations:

Mais n'oubliez pas que des données d'échantillonnage précises sont tout aussi essentielles à la conception visuelle que les visuels eux-mêmes:

* nous n'avons jamais écrit la partie 2

Enfin et surtout, à un moment donné de votre carrière, vous devrez concevoir un tableau de bord et c'est souvent l'un des plus grands cauchemars pour un designer UX. Personnellement, je trouve que les tableaux de bord apportent une valeur marginale à la table, donc je préfère ne pas passer des jours à faire bien paraître les graphiques:

Cela a été une période incroyable de 18 mois pour aider la communauté du design via UX Power Tools. Et bien que Sketch ne soit certainement pas le seul outil qu'un designer devrait avoir dans son arsenal, il est certainement le plus puissant. J'espère que cette annexe aidera ceux d'entre vous qui commencent tout juste une carrière UX ou qui passent à Sketch pour votre flux de travail de conception.

Si vous êtes intéressé par un système de conception vanille parfait pour démarrer de nouveaux projets, nous serions ravis si vous jetez un œil à ceux que nous avons construits. Ils vous feront gagner des milliers d'heures de conception:

Lorsque je ne collecte pas d'articles Sketch sur Medium, je travaille sur les outils de conception Sketch sur UX Power Tools pour faire de vous un meilleur concepteur, plus efficace.

Suivez UX Power Tools sur Twitter
Suis moi sur Twitter