L'essentiel de Sketch

Créer et ajouter des formes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Analysez les formes d'un modèle. Vous allez pouvoir construire la structure de base d'un élément graphique d'interface.
07:32

Transcription

Eh bien, maintenant que l'on a notre interface qui est prête à être exploitée, on va pouvoir entrer dans la conception des formes de base qu'on va avoir besoin pour construire vraiment la version finale comme on la voit ici. Alors bien sûr, là, pour l'exercice, vous avez droit à la vue finale de l'application qu'on va reproduire, mais lorsque vous serez sur votre propre projet, vous n'aurez pas d'exemple final, donc il va falloir récupérer de l'inspiration d'autres applications pour voir un peu comment l'application est construite. Il va falloir que vous preniez votre feuille de papier et que vous commenciez à créer quelques vues directement juste avec le crayon et réfléchir un petit peu aux différents éléments dont vous allez avoir besoin, la disposition, l'ergonomie de navigation, tout ça. Histoire de simplifier vraiment et de se centrer sur la conception dans Sketch, vous avez déjà la version finale, mais rien n'empêche qu'on analyse ensemble. À l'intérieur, il semble y avoir beaucoup d'éléments, alors que si on regarde vraiment plus concrètement, on a vraiment trois types d'éléments vraiment différenciant que l'on va devoir réaliser. Dans la première zone du haut, on va avoir la barre standard qu'on retrouve sur iOS et donc du coup sous tous vos iPhone. Globalement, les éléments graphiques qui sont à l'intérieur peuvent être facilement redessinables et refaisables sur Sketch, mais comme on le verra dans la vidéo juste après, ça n'est pas vraiment judicieux dans un workflow de travail de refaire quelque chose qui est standardisé et qui est en plus de ça directement disponible dans Sketch via les templates iOS que l'on peut y trouver. Deuxième zone, deuxième élément graphique, la zone du menu. On a un texte, on va avoir deux icônes. Cela va nous permettre de travailler sur l'exercice de conception des icônes. Mais bien sûr, vous pouvez soit réaliser vos propres icônes ou les récupérer aussi dans des packs d'icônes qui sont libres d'accès et libres de droits ou qui sont disponibles un peu sur tous les sites d'inspiration ou sur des packs que vous récupérez directement et qui peuvent correspondre à la couleur un petit peu et à l'esthétique que vous voulez donner à votre application. Ensuite, dessous, la zone qui est et qui semble la plus complexe, la zone d'expérience de ville qui a donc une photo, une photo de profil ici, pour les personnes avec lesquelles vous partagez l'expérience, le nom de la ville, le nombre de places disponibles, le prix et aussi la date. Dessous, ça a l'air complètement différent, alors que non. En fait, la seule chose qui change, c'est vraiment les données. Donc, la photo change, les noms changent, les prix changent, mais au final on a le même élément graphique. Donc, si jamais on réalise cet élément-là, ensuite on pourra facilement l'ajuster pour construire tous les autres éléments graphiques, avec des données qui sont donc différentes. Pour cette partie-là, on retrouve un menu quasiment similaire. On verra du coup avec l'utilisation des symboles comment on peut facilement réajuster un menu pour en créer un autre sans avoir à tout refaire. Ici, une seconde zone qui n'existe pas encore, par rapport à ce que l'on a vu avant, donc que l'on devra créer. Une autre zone, pareil, à créer et une dernière zone à créer. Voilà, globalement. Ensuite, vous remarquerez qu'il y a quand même des similitudes. On a ces éléments graphiques là qui sont assez proches de ceux-là. On a ce bouton qui est assez proche de ceux-là, donc, il va y avoir des liens qui vont être faits entre les éléments de manière à ne pas avoir à tout reconcevoir à chaque fois, mais ça vous le découvrirez au fil du tutoriel. Déjà, dans un premier temps, on va voir un petit peu comment créer cette carte, l'élément principal. Ensuite bien sûr, on fera les autres éléments. Alors, pour cette carte, c'est assez simple. On va commencer déjà par faire la forme de base, c'est un rectangle. On va commencer par faire un rectangle. Du coup, je laisse ma souris appuyée et je trace ma forme, et puis ça m'a créé une forme aléatoire. Bien sûr, quand je reclique dessus, je vais pouvoir la modifier directement sur ma zone de travail, et puis je vais avoir ici vraiment tous les paramètres de ma forme. On verra plus tard vraiment comment tout paramétrer les différentes parties. Et moi, ce que je veux, c'est avoir une forme simple. Donc là, par exemple, dans les boarders, je ne veux pas afficher les boarders pour avoir juste un à-plat de gris, et pouvoir du coup définir un petit peu les bonnes tailles. Alors, bien entendu, l'idéal, lorsque vous partez de zéro, va être de pouvoir, si vous prévoyez sur papier d'avoir trois zones sous le menu, il va falloir faire en sorte que la taille de ces blocs corresponde parfaitement à la bonne hauteur au niveau de l'iPhone pour que ça rentre parfaitement, sinon ça ne va pas être esthétique du tout si la dernière carte, par exemple, était coupée ou était trop longue ou demandait à l'utilisateur de toucher l'écran pour pouvoir voir la carte d'en dessous. Là, on part sur un layout où on a vraiment trois cartes et on va devoir réfléchir à la taille idéale pour concevoir ça. Petite facilité encore avec le tutoriel plutôt que de faire des calculs mathématiques, vous pouvez directement voir la taille qu'il y a sur l'élément. Donc ici, on a 193 en hauteur. Je vais donc revenir sur ma forme, mais je vais pouvoir directement lui dire, ça va faire 193 en hauteur. Ensuite, je pourrais directement me dire, voilà, pour faciliter la conception, je vais directement positionner mes différents blocs. Il y a deux pixels d'écart entre chaque bloc, donc je vais pouvoir le mettre en place. Mais si jamais je faisais ça, je me retrouverais donc ensuite, quand je rentrerais dans le détail de confection de la carte à refaire en parallèle à chaque fois la même chose. Donc, ce que l'on va faire, c'est qu'on va déjà commencer par fabriquer une carte. Donc, je vais virer ces formats, et puis je vais mettre vraiment sur ma première carte. Ensuite, de quoi est-ce que je vais avoir besoin comme autre forme pour concevoir ça ? Je vais aller voir ici, et je me rends compte que j'ai besoin de rectangles qui sont avec des bords arrondis. Toujours aussi simplement, je vais aller dans la création de formes, et je vais sélectionner un rectangle avec bords arrondis. Je vais pouvoir le tracer ici. Et là, du coup, en général, le style standard de Sketch, c'est de créer une forme avec une bordure un peu plus foncée et une couleur grise. Je vais avoir envie de ne pas avoir de bordures, des arrondis un petit peu plus fins et aussi une couleur verte. Donc, je vais aller dessus. Je vais enlever la bordure. Je vais pouvoir commencer à mettre une couleur verte. Donc, au début, je ne mets pas la couleur définitive, bien sûr. Je vais vous montrer ensuite comment on fait pour avoir quelque chose de standardisé, la couleur verte, et puis l'arrondi du coup qui correspond au radius de la forme va se retrouver juste ici, et je vais réduire un petit peu pour pouvoir avoir quelque chose de sympa. Donc, je vais mettre un 3 pixels de radius, peut-être un peu plus, on va partir sur 5, ça sera un peu plus arrondi, un peu plus joli. Donc là, j'ai ma deuxième forme qui est créée, que je vais pouvoir commencer un petit peu à positionner sur l'artboard. Donc, qu'est-ce qu'on a ensuite comme autre forme ? Toujours la même logique, on va avoir un ovale pour la photo de profil, que je vais commencer à dessiner. Alors là, vous voyez que l'ovale n'est pas forcément régulier. Si vous voulez qu'il soit régulier, vous pouvez appuyer sur Shift en même temps, et là, en laissant un pied sur Shift, ça reste un beau cercle, un beau rond, et puis là pareil. Du coup, en attendant, je vais enlever le boarder, mais par contre, à l'intérieur, je vais mettre une autre couleur, et je vais pouvoir commencer à y disposer. L'utilisation des formes de base est assez simple, et vous remarquerez que là, esthétiquement c'est affreux et puis que là, esthétiquement, on a quelque chose de sympa, mais ça ne demande pas une complexité folle pour ce qui est des formes de base. Qu'est-ce que vous avez sinon comme autre forme de base directement dans Sketch ? Vous avez des lignes, vous avez des flèches, vous avez des formes un peu plus complexes, des polygones, des triangles. Tout ça, bien sûr, on va pouvoir l'utiliser plus tard, mais nous certainement on aura les lignes pour ce petit élément graphique qui est juste là à utiliser, et sinon nous sommes sur des formes relativement simples. Dès le moment où on va rentrer dans des choses plus complexes, comme ces petits pictogrammes-là, eh bien, ça sera un autre fonctionnement, peut-être avec l'utilisation de la Plume ou directement une récupération dans les packs d'icônes. Voilà, pour cette base de conception de formes. On va maintenant rentrer dans le paramétrage de ces formes pour leur donner le style plus proche du final qu'on aura.

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 !