L'essentiel de Sketch

Construire une grille et aligner les éléments

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La grille est la base de construction et d'alignement des éléments. Elle est utile à l'harmonisation de l'interface et à sa mise en place.
07:20

Transcription

Maintenant que j'ai positionné la plupart de mes éléments graphiques, et puis aussi que j'ai réussi à intégrer les textes, il va falloir vraiment que je rentre dans le vrai boulot du designer qui est d'avoir une précision sur la mise en forme, une précision sur les alignements pour qu'il y ait une lisibilité optimale et une harmonie graphique qui soit vraiment présente. Donc, du coup, comment est-ce que je vais pouvoir m'aider pour positionner tous ces éléments de manière précise ? Plutôt que de devoir tout faire à la main, comme me dire, tiens, là voilà, il va falloir que j'aligne. Du coup, vu que c'est un texte, je l'ai mis avec le bord du texte ici. Mais comment est-ce que je vais faire pour être vraiment précis ? Ou là, comment est-ce que je peux aligner Paris avec la photo d'avatar correctement ? Il va falloir que j'aie des outils pour ça. Des outils déjà visuels. Donc, sur l'artboard, dans le panneau View, juste là, je vais pouvoir activer les layouts. Alors, pour pouvoir activer les layouts, voyez, cela n'a pas marché, c'est normal. Il faut que je sélectionne un élément graphique de l'artboard où je veux l'afficher, et ensuite tu cliques sur layout. Là maintenant que s'est affiché, vous pouvez voir, je m'en suis servi du coup pour aligner vraiment le bouton et les icônes sur les bords, pareil, aligné ici, et vous avez donc la même gouttière là que là, la même gouttière à l'intérieur que toutes les autres gouttières, et sur quatre colonnes. Ça, c'est un layout que j'utilise quand je travaille avec mes amis développeurs Web pour les applications Web et les applications mobiles, et vous pouvez travailler avec différents développeurs qui vont avoir leurs layouts différents, donc ça sera à ajuster par rapport à eux. Donc, pour pouvoir ajuster un layout, vous pouvez aller dans View, et ça se passe dans Layout Settings. Layout Settings, vous voyez qu'ici il y a quatre colonnes sur la largeur complète avec des gouttières 34 et des colonnes de 60. En tout cas là, je ne vais pas changer, vu que c'est ce qui correspond à mon projet, et ça va me servir pour positionner déjà un petit peu les éléments. Donc là, si je reviens sur ma board, j'ai le même layout qui est appliqué dessus. Là, je suis déjà quasiment bien aligné. J'ai juste à sélectionner... ces éléments-là. Je suis bien aligné. Là, pour aligner le texte, je ne vais pas pouvoir le faire sur le layout, et là pareil, ce n'est pas aligné sur le layout, mais un petit peu en retrait. Donc, pour pouvoir ce faire, je vais avoir besoin d'un autre outil qui est l'outil juste ici de Règles. Vous avez donc des règles qui se mettent, et vous allez pouvoir quand vous êtes sur une des règles positionner des petites barrettes rouges qui vont vous permettre d'être vraiment très précis sur la construction de votre page. Donc là, par exemple, je veux mettre une réglette juste ici, je vais en mettre une autre qui va être à ras de mon image, juste là, et pareil à ras de… ... qui va me permettre d'aligner ensuite ces éléments-là pour être complètement cohérent par rapport à mon exemple. Bien sûr, je le fais avec le clavier et les touches directionnelles pour être précis. Là, le texte, pareil. Ici, ce texte-là, il sera aligné là aussi, à voir ensuite comment on va positionner vraiment cet élément pour que ce soit propre. Ma photo de profil, normalement, elle est alignée avec mon texte. Mais, toujours pareil, garder l'oeil sur le design et l'exemple, on voit que la photo de profil est un peu grosse parce que je n'avais pas réduit la taille. Donc, on va revenir sur notre symbole qui est donc en taille de 35 par 35, et c'était même pas précis non plus là-dessus. Donc là, je vais faire mieux, je vais mettre en 35. La photo dedans forcément est en motif et n'a pas forcément été ajustée. Donc là, je vais pouvoir revenir dessus pour la mettre correcte, toujours sur Tile et paramètres dans Tile. Maintenant que j'ai ma photo d'avatar, je vais pouvoir venir l'aligner parfaitement. Et puis pareil, là, pour que ce soit bien ajusté, j'avais une réglette qui traînait, vu l'utilisation que j'ai faite avant. Quand vous avez une réglette qui traîne comme ça et que vous voulez l'enlever, vous pouvez faire clic droit et enlever toutes les réglettes qui étaient sur cette colonne-là. Donc là, maintenant, pour pouvoir vraiment aligner mes différents boutons, je m'étais ajouté, là par exemple, cette petite ligne-là. Vous pouvez faire pareil ici. On va se la mettre juste là. Comme ça on pourra toujours être bien propre dans les alignements. On va la remettre un peu plus comme ça. Pareil, ça va permettre de voir bien l'alignement avec mon bloc de texte qui donc est à ras. Et là, ce n'est pas le texte qui doit être sur la ligne rouge, mais c'est.. le bloc en lui-même. Là, je suis aligné par rapport à mes boutons. Et quand on a cette base d'alignement qui est en place. Pareil, pour ces éléments texte que j'ai de ce côté-là. Là, le layout ne s'affiche pas et j'ai sélectionné un élément. Je vais faire Afficher le layout, et je vais pouvoir comparer avec ce que j'ai au-dessus. Je vais sélectionner l'élément, et je fais pareil. Je fais Afficher le layout aussi. C'est tout aligné là vraiment sur le layout. Donc, je vais le faire aussi ici. Je sélectionne tout avec le clavier et le petit pavé, et là je viens aligner précisément pour être super propre. Là... un petit encore, un petit. Là, vous remarquez que je fais tout à la main. Ça peut paraître un petit peu laborieux des fois de faire ça tout à la main. Alors, c'est là où entre en compte un autre outil qui est super pratique et qui va vous permettre de faire certains alignements. Si je prends sur cet exemple-là, je vais regarder mon espacement, donc du coup je maintiens Shift appuyé, c'est bien Shift appuyé, la petite flèche qui va vers le haut sur votre clavier pour pouvoir déplacer juste sur l'horizontale. Je déplace donc. Je déplace. Et là, c'est complètement aléatoire le positionnement, et ce que je veux, c'est que tous mes éléments soient alignés pareil à gauche. Et ici, vous voyez que vous avez des outils justement pour faire un alignement parfait à gauche, un centrage pareil et parfait, un alignement sur la droite, un alignement haut, un centrage sur la hauteur, et un alignement sur le bas. Donc là, ce que je veux, c'est un alignement sur la gauche. Je clique sur ce bouton. Et là, tous mes éléments sont alignés. Ensuite, je n'ai plus qu'à positionner le bloc sur la grille, et je suis sûr et certain qu'au pixel exact, je vais avoir mon alignement. Bon début pour cette partie-là, et pareil pour ces éléments-là, je peux par exemple sélectionner mes deux textes que je veux aligner. J'essaye à droite, vous voyez, ça ajuste un tout petit peu. Là, je veux pareil que Paris et la photo d'avatar soient alignés sur la gauche, et puis je veux aussi que mon texte qui est là soit aligné sur ma photo d'avatar, mais en centré. Donc là, sur la hauteur, en centré, et voilà. Et maintenant, j'ai quelque chose qui est beaucoup plus précis. Il va y avoir quelques différences peut-être entre les espacements sur la hauteur, et à ce moment-là je vais pouvoir continuer mon ajustement. Là, pour m'aider à y voir, je vais enlever le layout. Et puis, je vais pouvoir rentrer maintenant dans le détail, et vraiment le peaufinement plus précis. D'ailleurs, regardez ce qui traîne là, ce n'était pas aligné. Eh bien là, c'est au fond. Je suis aligné bien à gauche, je suis aligné bien à droite. Bien en hauteur, mes boutons et mon texte aussi. D'ailleurs, pour être sûr pour mon texte, regardez, je sélectionne tout, et là je fais, Aligner, Centrer. Et là, j'ai un petit message en plus proposé par Sketch qui me dit qu'il n'arrivera pas à positionner exactement au pixel près parce que c'est des blocs de texte, et des fois l'alignement n'est pas forcément exact. Donc, soit on reste sur l'alignement pas exact, sinon on dit qu'on place sur un pixel juste en dessous, et là, on est sûr que c'est parfaitement aligné. Maintenant, on va pouvoir entrer dans le détail vraiment de la mise en forme, et puis les derniers petits peaufinages d'interface.

L'essentiel de Sketch

Concevez des interfaces utilisateur applicatives pour les mobiles et pour le web avec Sketch. Créez des éléments d'interface, du simple bouton au pictogramme plus complexe, etc.

1h53 (25 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !