Maintenant que vous connaissez les mécanismes de l'Atomic Design, vous allez pouvoir pratiquer. Pour cela, nous utiliserons le logiciel qui est aujourd’hui l’un des plus utilisés pour la conception d’interface : Sketch.
Sketch est le logiciel de conception d’interface. C’est simple, vous devriez le retrouver sur toutes (ou presque) les offres d’emploi pour un UX ou UI designer.
Pourquoi ce logiciel est-il si populaire ? La première raison est qu’il n’est pas très cher (99$/an) et il propose également une période d’essai de 30 jours, parfait pour vous préparer en pratiquant avec ce cours.
Créez et organisez les premiers éléments
Faites un artboard
Faisons un petit tour d’horizon avant tout, voilà à quoi ressemble un nouveau projet Sketch :
Avant toute chose, il faut comprendre un peu le fonctionnement de Sketch. Vous avez des pages dans lesquelles vous pouvez créer des artboards. Dans chacune de vos pages, vous pouvez créer le nombre d’artboards que vous voulez.
L’artboard définit la taille de votre écran pour votre interface. Vous pouvez en créer un en cliquant sur “Insert” -> “Artboard” ou en tapant sur a. C’est dans ces artboards que vous allez pouvoir créer vos premiers éléments ! 😁
Comme vous pouvez le voir sur le menu de droite, il y a des tailles prédéfinies pour les différents devices ! Sélectionnez celui que vous souhaitez :
Ajoutez du contenu
Une fois que votre artboard est créé, vous allez pouvoir y ajouter du contenu. Créez une forme en cliquant sur “Insert” en haut à gauche et ensuite choisissez quel type d’élément vous voulez ajouter. Grâce à ces formes, vous allez pouvoir créer vos premiers atomes : un bouton, un label et un input. Important : ici les exemples n’ont pas pour but d’être jolis, mais de vous montrer étape par étape comment faire. Libre à vous de faire l'esthétique qui vous plaît !
Le bouton :
Le label :
L'input :
Vous allez créer votre molécule, il suffit pour cela de dupliquer et placer vos atomes ensemble. Vous pouvez changer le texte du label, de l’input et du bouton. Sélectionnez ensuite tous les éléments puis faites Ctrl + G(ou cliquez sur le bouton Group dans la barre d’outil en haut) pour grouper tous les éléments ensemble :
Enfin, avec ces éléments vous pouvez créer votre organisme. Pour cela, vous allez réaliser un header :
dupliquez votre search bar ;
dupliquez 3 labels que vous pouvez placer à gauche de votre search bar ;
ajoutez un carré (qui délimite la zone du logo de votre site web par exemple) tout à gauche.
Vous devriez obtenir quelque chose comme ceci :
Essayez dans un premier temps de faire ces quelques éléments pour vous familiariser avec les fonctionnalités de base de Sketch. Au final, vous devriez obtenir quelque chose qui ressemble à :
N’oubliez pas que même si nous suivons un certain ordre ici dans le cours, c’est pour vous faciliter la tâche, mais chacune des étapes de l’Atomic Design peut être créée dans l’ordre que vous souhaitez — tant que ça n'engendre pas des incohérences.
Par exemple, vous ne pouvez pas ajouter un bouton à votre search bar s’il n’existe pas dans vos atomes :
Dans ce cas-là, soit vous changez le bouton avec un atome existant, soit vous ajoutez le bouton dans les atomes.
Si vous ajoutez des éléments dans vos étapes, n’oubliez pas de mettre à jour en conséquence si besoin. Nous verrons dans le prochain chapitre que nous pouvons automatiser ces modifications pour qu’elles s’effectuent directement sur tous les éléments.
Organisez votre contenu
Il ne faut pas du tout sous-estimer l’intérêt de nommer les pages, elles vous permettront d’organiser votre travail. Cela peut être des thèmes (Home page, Inscription, etc.) mais ça peut être aussi pour du rangement en fonction des devices (iOS, Android, desktop, etc.). Libre à vous de décider comment organiser vos pages.
Sur votre plan de travail, vous pouvez décider d’ajouter des titres à vos artboards, mais également de faire des sections pour les ranger. Cette méthode peut être pratique pour ajouter un niveau de hiérarchie.
En nommant vos éléments, vous vous retrouverez beaucoup plus rapidement dans votre page Sketch. Au fur et à mesure de la création de vos interfaces, si vous ne faites aucun effort de nomination, vous vous rendrez compte qu’il sera très difficile de vous y retrouver.
N’hésitez pas à grouper des éléments pour en faire des paquets (comme pour la molécule) plutôt que de nommer forme par forme. Nous verrons également dans le chapitre suivant l’intérêt de nommer des éléments particuliers : les symboles.
Avec toutes ces possibilités, vous pouvez facilement organiser votre fichier Sketch. Même sur un projet très complexe, vous pouvez regrouper vos informations et interfaces ensemble pour vous y retrouver simplement. N’hésitez pas à prendre du temps à ranger vos interfaces si vous vous apercevez que c’est de plus en plus le bazar ! Le temps “perdu” à ranger est un gain de temps conséquent pour la suite de votre projet. 😉
En résumé
Pour conclure, dans cette partie nous avons vu :
Comment commencer à pratiquer et mettre en forme les éléments de l’Atomic Design. N’hésitez pas à suivre pas à pas sur votre ordinateur dès maintenant pour vous familiariser avec l’outil Sketch.
Pourquoi être vigilant sur l’organisation de votre fichier Sketch dès le début de votre projet vous permettra de gagner beaucoup de temps par la suite.
