Créer une interface de Login avec Sketch

Sketch est une excellente application pour le design d'interface. Armando Sotoca nous conduit pas à pas dans la réalisation du design d'une interface de connexion, une excellente introduction à Sketch3.

Par

Sketch est développé par la formidable équipe de Bohemian Coding, c'est un excellent programme pour le design d'interface. Ce tutoriel vous donnera une bonne introduction au design avec Sketch. Vous n'avez pas besoin d'expérience préalable, tout juste d'un peu de temps libre pour apprendre quelque chose de nouveau.

Je vais vous montrer comment créer et organiser un artboard (un “espace de travail”), comment créer des formes grâce à des outils simples, utiliser le panneau d'inspection et la liste des calques. Vous verrez comment modifier les propriétés, organiser les calques, importer des images et bien d'autres choses.

NdT : La Cascade a déjà proposé un excellent tutoriel d'introduction à Sketch (Sketch, tutoriel 01), les deux se complètent bien. Selon les cas, certaines infos seront plus détaillées dans l'un que dans l'autre, donc n'hésitez pas à consulter les deux !

image
Ce que vous allez réaliser

Créer votre artboard

Étape 1

Commençons en créant un premier document. Si ce n'est déjà fait, installez Sketch et ouvrez-le. Lorsqu'un message apparaît, n'ouvrez pas de template spécifique, faites juste “OK” pour ouvrir un nouveau document. Vous avez déjà ouvert Sketch 3 ? Formidable, c'est tout ce qu'il y a à faire ! Je m'explique : par défaut, Sketch vous propose un canevas infini sur lequel travailler. Vous pouvez commencer à créer des éléments sans crainte de manquer d'espace.

Mais allons un peu plus loin et créons un artboard. Les artboards vous permettent de créer des cadres fixes à l'intérieur du canevas infini de Sketch.

Pour ce faire, allez sur Insert>Artboard(A) dans la barre d'outils (en haut à gauche, cliquez sur l'icône "+" appelée insert) ou dans le menu principal. Sélectionnez Artboard puis cliquez sur le canevas (une petite croix s'affiche) et faites glisser la souris en gardant la touche enfoncée, vous remarquerez que Sketch affiche la largeur et la hauteur de votre artboard à mesure que vous déplacez votre souris.

image

Dessinez-le sans vous soucier de sa taille, puis dans le panneau de droite, qu'on appelle Inspector, donnez-lui les dimensions (Size) 600px par 800px. Si vous voulez, vous pouvez aussi le positionner sur l'artboard en mettant 0 dans les Positions X et Y.

image

Vous avez sans doute remarqué que le canevas illustré ici comporte des mesures horizontales et verticales, comme une règle. Pour les faire apparaître c'est très simple, il suffit d'aller sur View>Show Rulers dans le menu principal.

Nous pouvons créer autant d'artboards que nous le voulons. Leur nom apparaît dans la liste des calques (Layers List) à gauche. Pour modifier le nom du calque, il suffit de double-cliquer sur son nom dans la liste. Une fois modifié, son nom apparaît en grisé en haut à gauche du calque sur votre canevas.

Si vous voulez supprimer un artboard, il suffit de le sélectionner dans la liste (ou en cliquant sur l'artboard lui-même) et d'appuyer sur la touche delete ou suppr de votre clavier.

image

Étape 2

Nous allons maintenant modifier la couleur de l'artboard, ça nous aidera pour la suite. Sélectionnez votre artboard et regardez le panneau Inspector, à droite. Cochez l'option Background Color et cliquez sur la boîte des couleurs à droite. Une fenêtre s'ouvre et vous propose de nombreuses options. Choisissez la couleur que vous voulez. Elle n'est pas très importante, personnellement j'ai choisi un gris chaleureux.

image

Une dernière chose utile : nous allons ajouter une grille qui nous aidera à positionner les objets exactement où nous le voulons à l'intérieur de notre artboard. Pour cela, il suffit d'aller sur View>Show Grid dans le menu principal. Chaque petit carré fait 20px de côté.

Voilà, notre artboard est prêt et nous pouvons nous lancer dans la création !

image

Le design des éléments de base

Étape 1

Allez dans Insert>Shape>Rectangle (R), créez un rectangle de 360 par 500px sur votre artboard. Comme nous l'avons fait précédemment, il suffit de dessiner un rectangle quelconque et de lui donner sa taille et son positionnement avec le panneau Inspector.

Étape 2

Avec votre rectangle sélectionné, regardez le panneau Inspector. Supprimez la bordure du rectangle en décochant la case Color de Borders. Cliquez sur la boîte Fill de Fills et choisissez la couleur blanche. Nous pouvons également ajouter des coins arrondis : faites glisser le curseur de Radius jusqu'à 10.

image

Étape 3

Créez un cercle de 40 x 40px en utilisant Insert>Shape>Oval (O). Comme toujours, vous pouvez lui donner n'importe quelle dimension et utiliser l'Inspector pour modifier ses propriétés. Cela dit, si vous appuyez sur la touche shift (⇧) en même temps que vous dessinez votre ovale, ses dimensions seront parfaitement circulaires et il vous suffira de modifier un seul des deux paramètres de Size pour que votre cercle soit aux bonnes dimensions.

Une fois votre cercle dessiné et aux bonnes dimensions, déplacez-le en haut du rectangle, au milieu. Vous pouvez utiliser l'outil Zoom si vous en avez besoin, ou faire ⌘ + "+".

image

Étape 4

Créez un autre cercle, cette fois-ci de 20 x 20px. Alignez-le avec le premier, au centre. Vous verrez des guides, sous forme de lignes rouges horizontales et verticales, qui vous aideront à aligner vos objets.

image

En fait, pour être sûr que votre contenu est correctement aligné, pressez la touche option (⌥) : Sketch vous donnera les distances exactes entre les objets, par exemple :

image

Sacrément utile ! Merci Sketch !

Étape 5

Maintenant nous allons transformer nos deux cercles en un anneau unique. Sélectionnez les deux cercles directement (en faisant glisser votre souris, touche enfoncée, au-dessus des deux objets) ou avec la liste des calques (en sélectionnant un calque puis, touche ⌘ enfoncée, en cliquant sur l'autre calque). Allez dans la barre d'outils et cliquez sur Substract.

image

Nous avons maintenant une nouvelle forme complexe :

image

Sélectionnez ce nouvel objet et votre rectangle. Cliquez maintenant sur Union pour obtenir la forme finale :

image

Arrêtons-nous un instant pour considérer ce que nous venons de faire. Lorsque nous avons besoin d'une forme non standardisée, nous devons la créer nous-mêmes. Nous pourrions la dessiner avec l'outil crayon, mais bien souvent une forme complexe se décompose facilement en formes simples. Nous pouvons utiliser des opérations booléennes à cette fin. Sketch propose les opérations booléennes union, substract, intersect et difference qui nous permettent d'obtenir des formes complexes créées avec des sous-chemins.

Ces options sont des opérations non-destructives, nous pouvons donc modifier les propriétés des sous-chemins (les formes de base) en les sélectionnant dans la liste des calques. Lorsque vous avez une forme constituée de sous-chemins multiples, jetez un coup d'oeil à la liste des calques. En cliquant sur la flèche à gauche du dossier, vous verrez la liste des sous-chemins de votre forme avec sur la droite l'opérateur booléen utilisé. Vous pouvez cliquer dessus pour le modifier.

image

Étape 6

Notre forme de départ est presque terminée ! Avec votre forme toujours sélectionnée, rendez-vous sur le panneau Inspector et sélectionnez Shadows, puis réglez ses propriétés ainsi : la couleur est R=38 G=30 B=10 Alpha=50, ensuite X=0, Y=20, Blur=20, Spread=0. Votre forme devrait ressembler à ceci :

image

Éléments de Login

Un formulaire de connexion ne serait rien sans les champs de saisie et les boutons, allons-y.

Astuce : Vous pouvez empêcher les modifications involontaires en sélectionnant la forme et en faisant Arrange>Lock Layer. Un petit cadenas apparaît à droite de l'objet dans la liste des calques, montrant ainsi qu'il est protégé.

Étape 1

Avec l'outil rectangle (R), créez une forme de 280 x 50px, supprimez ses bordures, réglez la couleur de remplissage (Fill) sur R=239, G=87, B=46 et ajoutez un arrondi (Radius) de 2, puis placez-le comme suit :

image

Étape 2

Créez une autre forme de 280 x 70px, avec un remplissage blanc, un Radius=2, une bordure de 1px d'épaisseur (Thickness) et de couleur R=234 G=234 B=234. Placez-la 10px au-dessus du rectangle orange. Dupliquez-la (⌘+D), sélectionnez la copie et déplacez-la de 80px vers le haut. Il peut être utile ici de cacher la grille, pour cela il suffit de faire View>Hide Grid ou plus simplement Ctrl+G. Pour la voir à nouveau, faites encore Ctrl+G. Lorsque vous déplacez les éléments, n'oubliez pas de vous aider avec la touche ⌥ pour faire apparaître les guides. Vous pouvez déplacer les éléments par un cliquer/déplacer, ou utiliser les flèches de votre clavier. Vous pouvez aussi utiliser les coordonnées Position du panneau Inspector.

image

Étape 3

Créez maintenant un petit carré de 20 x 20px à l'aide de l'outil rectangle (R). Comme pour le cercle, la touche ⇧ enfoncée pendant que vous dessinez vous assurera que les côtés sont égaux. Donnez une couleur de remplissage blanche, réglez le Radius sur 2, donnez une bordure d'épaisseur 1px et de couleur R=234 G=234 B=234. Placez-le 10 px en-dessous du rectangle orange :

image

Étape 4

OK, maintenant nous allons épicer un peu notre formulaire de connexion en y ajoutant quelques éléments textuels. Sélectionnez l'outil texte (T), vous pouvez cliquer n'importe où dans le canevas pour insérer votre calque texte. Vous verrez que le texte a été ajouté et vous pourrez commencer à taper ce que vous voulez. Remarquez également que l'Inspector a changé, il vous montre maintenant toutes les propriétés relatives au texte.

Astuce : Il est également possible de cliquer/déplacer pour créer une boîte de texte de largeur fixe. Lorsque le texte dépasse les dimensions de la boîte, il repart vers le bas, la hauteur de la boîte s'adapte à la longueur du texte. Si vous insérez le texte sans créer cette boîte, le texte se prolonge indéfiniment sur la droite à mesure que vous écrivez.

Ajoutez le texte “USERNAME” et fixez ses propriétés dans l'Inspecteur. Utilisez la police Montserrat, Weight=regular, Size=11, Spacing=1, Color>R=204 G=204 B=204.

Montserrat est disponible sur GoogleFonts, mais vous pouvez aussi essayer une autre police approchante et adapter les réglages le cas échéant.

Sélectionnez à nouveau l'outil texte et ajoutez le texte saisi (Armando dans mon exemple), en lui donnant les propriétés Montserrat, Weight=Regular, Size=24, Spacing=0, Color>R=113 G=87 B=44.

Sélectionnez les deux textes et placez-les comme suit :

image

Étape 5

Pour le second champ de saisie, nous aurons à nouveau un placeholder et le texte saisi. Dupliquons les calques de texte que nous venons de créer et plaçons-les dans le rectangle en-dessous. Changeons le texte pour “PASSWORD” et “**********”.

Étape 6

Ajoutez de nouveaux calques de textes en utilisant les attributs ci-dessous.

image

Le lien “Forgot your password” est souligné. Pour obtenir cet effet, cliquez sur le bouton Options pour ouvrir un choix d'effets.

image

Et voici le résultat :

image

Petit point d'étape sur l'organisation

Prenons un moment pour regarder notre liste de calques. Ce serait une bonne idée de réorganiser tout cela en donnant des noms à ces formes rectangulaires ou simplement en regroupant les éléments. Vous pouvez renommer les objets en double-cliquant sur leur nom ou bien en faisant clic-droit et en chosissant l'option Rename. Pour créer un groupe de calques, choisissez un ou plusieurs calques et cliquez sur l'icône Group de la barre de menus. Vous pouvez également déplacer les objets d'un groupe à un autre.

L'objectif principal est de transformer une liste désordonnée de calques en une structure élégante et organisée. Pensez-y dans chacun de vos projets.

image

Ajouter un logotype

Nous avons les éléments nécessaires dans notre boîte de login. Il est temps maintenant d'ajouter un logotype.

Étape 1

Ouvrez logo_icon.svg téléchargeable ici (File>Open ouvre une nouvelle fenêtre). Regardez la liste des calques : l'icône est constituée de chemins que nous pouvons facilement manipuler.

image

Étape 2

À l'aide de l'outil rectangle (R), créez une forme de 30 x 60px et placez-la comme montré dans l'image qui suit. Inutile de la placer parfaitement pour l'instant. Rappelez-vous que vous pouvez ajouter une grille (grid) et pensez à la touche option (⌥) pour que Sketch vous montre les distances précises.

image

Étape 3

Dans la liste des calques, faites glisser le calque Path à l'intérieur du groupe Shape, placez-le au-dessus des autres. Vous obtenez une nouvelle forme composée : c'est la puissance des opérations booléennes et des formes vectorielles dans Sketch !

image

Étape 4

Vous vous rappelez les petites icônes dont nous avons parlé, à droite des sous-chemins ? Nous pouvons choisir une opération booléenne pour chaque sous-chemin. Modifions le premier qui devient Substract et le deuxième qui devient Difference.

image

Étape 5

Une étape facile. Shape étant sélectionné, allez sur Layer>Paths>Flatten. Le résultat est que les sous-chemins sont perdus et qu'on ne peut plus les modifier, mais l'étape suivante est maintenant aisée.

Étape 6

Shape est toujours sélectionnée, cliquez sur le bouton Edit de la barre d'outils. Vous remarquez quelques changements dans le panneau Inspector et dans la forme elle-même. Sélectionnez tous les points vectoriels en cliquant et en déplaçant la souris sur le canevas.

image

Dans le panneau Inspector, réglez Corners sur 5. Cliquez sur Fill pour ouvrir la fenêtre d'options et sélectionnez le second type de remplissage, Linear Gradients. Vous verrez deux points connectés par une ligne qui s'affichent par dessus votre calque. Chaque point sur la ligne représente un stop couleur le long du dégradé.

image

Pour modifier la couleur d'un des stops, cliquez dessus dans le canevas. Vous constatez que le tableau des couleurs s'adapte à la couleur de ce stop. Choisissez une nouvelle couleur et vous verrez le résultat. Ajustons la première couleur à R=245 G=166 B=35 et la seconde à R=239 G=87 B=46. Vous pouvez modifier les couleurs directement sur le schéma en déplaçant le petit point.

image

Et voici notre forme finalisée.

image

Étape 7

Copiez la forme (Ctrl+C) et collez-la (Ctrl+V) dans votre formulaire de login.

image

Étape 8

Votre logotype est presque terminé, ajoutons un texte. Tapez ce que vous voudrez, pour ce tutoriel j'ai écrit “myapp” et les position et propriétés suivantes :

image

Notre formulaire de connexion est terminé !

image

Ajouter un background

Étape 1

Avec Sketch il est possible d'utiliser des images bitmap en plus des objets vectoriels. Pour le background, je vais sélectionner une image du site Unsplash. Il y a de superbes photos sur ce site ! J'ai choisi celle-ci, de Nick West.

NdT : Pour trouver de superbes photos libres de droits, vous pouvez consulter la liste des ressources photo de La Cascade, régulièrement mise à jour !

Revenez à votre document. Sélectionnez votre artboard dans le panneau des listes de calques et rendez-vous sur Insert>Image pour sélectionner la photo. Attention : Cette image est énorme ! Nous allons réduire sa taille en utilisant le panneau Inspector et en modifiant ses dimensions à 1280 x 876px. Nous la positionnons à X=0 Y=0 et nous nous assurons qu'elle se trouve en dernier dans la liste de nos calques, c'est à dire en-dessous des autres dans l'ordre d'affichage.

image

Astuce : Si vous importez une image alors que votre artboard est sélectionné, votre image sera automatiquement masquée aux dimensions de l'artboard. Déplacez le calque en dehors du groupe artboard pour sortir du masque. Pour en savoir plus sur les masques, consultez la documentation officielle.

Étape 2

Sketch nous permet de jouer avec les couleurs d'une image en utilisant le panneau Color Adjust situé dans l'Inspector. Nous pouvons modifier la Saturation, la Luminosité et le Contraste. Réglez la saturation sur 0 et le contraste sur 1,9.

Créez maintenant un rectangle de 600 x 800px avec l'outil Rectangle. Placez-le à X=0 et Y=0. Dans la liste des calques, déplacez-le juste au-dessus de l'image. Dupliquez-le et réglez ses propriétés ainsi :
Pour le premier rectangle Opacity=100%, Blending=Multiply, Color>R=173 G=166 B=152.
Pour le second rectangle (situé au-dessus du premier) Opacity=50%, Blending=Normal, Color>R=173 G=166 B=152.

C'est fini !

Voici le résultat final.

image

J'espère que ce tutoriel vous a plu.

Mais attention, ce n'est pas fini !

Puisque vous créez un élément d'interface utilisateur, quelques détails additionnels seront les bienvenus, n'est-ce pas ? Les interfaces ont de nombreux aspects : différents états, et le feedback. Toutes les technique que j'ai présentées dans ce tutoriel vous ont donné les moyens d'aller plus loin et d'ajouter des éléments tels que ceux-ci :

image

Vous pensez que vous pouvez y arriver ? Si vous êtes bloqués sur un détail ou si vous voulez me demander quelque chose, contactez-moi sur Twitter. J'ai hâte de voir ce que vous avez réalisé !


Intéressé par Sketch ? Sur la Cascade, retrouvez des articles et ressources.


Ressources complémentaires en français

Sketch tutoriel 01, par Sébastien Gabriel
Créer une icône flat, par Abhijeet Wankhade
Sketch et les vecteurs, par Peter Nowell


original paru le dans Tuts+.

Sur l'auteur : est un rêveur passionné de design. Retrouvez-le sur Dribbble, Twitter, Google+ ou sur son blog (en espagnol).

Traduit avec l’aimable autorisation de Tuts+ et de l’auteur.
Copyright Tuts+ © 2014.