L'essentiel de Sketch

Harmoniser les formes et le texte

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Ajoutez du contraste entre les éléments pour une meilleure lecture. Assurez-vous également d'avoir une harmonie de forme et de taille entre les éléments.
04:21

Transcription

On va maintenant troquer nos yeux de designer pour des loupes de designer, car il va falloir vraiment regarder dans le détail pour pouvoir arriver à raffiner ce design et avoir une qualité qui peut être similaire à celle d'au-dessus. Donc, suite à nos alignements, on va pouvoir désactiver le layout pour y voir déjà un peu plus clair, et aussi au niveau des règles, après une dernière petite vérification, on va pouvoir y désactiver aussi. Les alignements sont faits pour le moment. On y voit plus clair, et on va pouvoir entrer dans le détail. Qu'est-ce que nous avons au niveau de la photo d'avatar ? Ici, nous avons donc la photo qui est détachée du fond par une bordure extérieure de 4 pixels qui est blanche complètement avec une opacité dessus qui est de 32. L'idée, c'est qu'il va falloir trouver une valeur standard d'opacité pour avoir une bordure qui s'intègre bien avec le fond, mais qui détache suffisamment pour tout type de photos derrière. Parce que vous comprendrez bien que si je veux choisir d'utiliser une opacité différente pour tous les blocs, ça n'est pas possible, car pour une application, le développeur aura cet élément comme étant un élément standard qui va se dupliquer. Il faut donc garder des paramètres standards aussi. Donc là, je vais venir sur ma photo d'avatar, je vais pouvoir créer une bordure que je vais mettre donc en blanc avec une opacité à 32, et puis elle était de 4 d'épaisseur, sans oublier de la mettre en extérieur. Et là, on a quelque chose d'assez sympa qui permet de détacher un peu la photo d'avatar du fond. Bien entendu, après, suivant votre design, suivant le style que vous voulez lui donner, vous pouvez ajuster ça par rapport à votre charte graphique. Ensuite, on a les textes. Les textes ne sont pas en noir, mais sont en blanc. Le problème, comme vous pouvez le voir, c'est que sur une image foncée, ça se passe bien, c'est bien détaché, mais par contre sur une image claire, c'est illisible. Là, on perd complètement tout le potentiel de cette application, car les gens ne pourront même pas lire le nom de la ville. Donc, c'est très important de trouver une technique. Alors, je vais vous montrer la technique que j'ai utilisée, mais avant ça, une autre technique qui peut être utilisée, c'est d'utiliser le flou gaussien. J'en parlais tout à l'heure, et lorsqu'on applique un flou gaussien, ça permet de détacher des éléments qui sont très précis d'autres éléments qui sont plutôt flous. Sauf que le problème, dans le cas présent, c'est que lorsqu'on applique le flou gaussien, on ne voit plus la photo derrière. Donc, ça peut être une option dans certains cas, et dans d'autres cas, il vaut mieux utiliser d'autres techniques. Alors, j'utilise la technique de foncer les parties qui méritent d'être plus foncées pour créer un contraste de couleur avec les textes. Et pour ce faire, j'utilise l'outil de dégradé. Donc, je vais directement sur le bitmap, et je vais lui dire que je veux utiliser un remplissage, mais qui sera en dégradé. Et pour mon remplissage en dégradé, je veux qu'il parte d'une couleur noire et qu'il aille rejoindre une couleur noire aussi. Pour le moment, rien de bien intéressant. Mais ce qu'il va se passer, c'est que je vais lui dire que je veux aussi en double cliquant ajouter une autre couleur à mon dégradé en plein centre, et cette couleur sera noire aussi. Sauf que ce que je vais vouloir, c'est que ce noir au milieu ait une opacité à zéro. Et ensuite, je vais garder pour le moment un noir complet pour mes extrémités, mais je vais vouloir que mon dégradé démarre à peu près au-dessus du texte, juste ici, et puis que l'autre, pareil, démarre au niveau de mon texte. Ce qui va donc laisser apparaître au centre parfaitement, clairement la photo, mais va nous permettre de détacher les différents textes. Alors là, ce que je vais faire, vu que là ce n'est esthétiquement pas terrible, je vais donc réduire cette opacité jusqu'au moment où j'arriverai à suffisamment détacher le nom de la ville pour que ce soit lisible. Donc là, par exemple, je vais m'arrêter à 60. Pour le haut, je vais réduire jusqu'à arriver à quelque chose de plutôt sympa. Là, j'arrive à peu près à détacher la date, et je vais m'arrêter ici. Ce qui fait qu'on a un effet foncé sur la photo qui est le même effet foncé qui a été ajusté sur les autres images, juste ici, que je vous ai montrées. Là, si je rentre sur mon image, il y a bien ici mon dégradé qui a été ajouté par-dessus mon image. Vous vous rappelez la deuxième technique que je vous avais donnée pour l'avatar tout à l'heure. On peut aussi l'utiliser pour les blocs directement. Et je vais utiliser cette technique-là. Vous voyez qu'il n'y a pas de grande différence à utiliser les deux techniques, c'est plus une histoire de commodité suivant comment vous vous organisez. Là, maintenant, on peut dire que j'ai, à la même manière que les autres blocs, terminé ce bloc-là, et il est prêt à être utilisé.

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
 
Logiciel :
Sketch Sketch 41
Spécial abonnés
Date de parution :7 déc. 2016

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 !