Designer pour le web avec sketch

Publié il y a environ 3 ans
Victor Darras
Votre formateur
Victor Darras

Mordu de l'Internet dès mon plus jeune âge, j'ai vite pris goût à l'image et tout particulièrement au webdesign. Après un BTS de Design de communication en 2011, j'ai commencé à m'intéresser plus précisément à l'expérience utilisateur au coeur du processus créatif.

De Sketch à SASS en passant par jQuery, j'ai toujours aimé découvrir et explorer de nouvelles solutions, de nouvelles technologies et garder une certaine polyvalence.

Où nous retrouver ?

Catégories : UI / UX

Je vous présente une petite selection des fonctionnalités de l'application Sketch et vous montre en quoi c'est une alternative sérieuse à la suite Adobe pour le webdesign.

Afficher le transcript complet de la vidéo

Bonjour à tous, aujourd'hui je vais vous parler de Sketch.

C'est une application dédiée aux graphistes et web designers qui recherchent un outil épuré et spécifique au web.
C’est avant tout un logiciel de dessin vectoriel dont les fonctionnalités - que nous aborderons par la suite - seront particulièrement adaptées au wireframing et au design d’application.
Il n’est malheureusement disponible que sur OSX et cela ne devrait pas changer avant un moment puisqu'il utilise des outils disponibles exclusivement sur ce système.
Cette application - qui a su remplacer mes usages de Photoshop ou d'Illustrator dès les premières utilisation - continue de convaincre partout dans le monde que nous pouvons avoir des outils adaptés au web design actuel.

Je n'aborderais pas dans cette vidéo le logiciel de manière basique en vous expliquant chacuns des boutons ou chacunes des fonctionnalités, il est pensé pour être agréable et facile à utiliser. Nous ferons donc un tour des fonctionnalités qui devraient vous interesser.


Vectoriel, pourquoi est-ce mieux ?

Le web s'étant beaucoup diversifié ces dernièes années. Nous avons pris pour habitude de travailler avec des supports différents, des tailles d'écran variables et des résolutions toutes aussi variables.
Comme avec illustrator Sketch vous permet de gérer des éléments vectoriels afin de ne pas se limiter en terme de taille ou de résolution d'image.

Voici une comparaison de 2 éléments, identiques au premier abord nous remarquons qu'en zoomant apparaissent les pixels sur le rond de droite tandis que celui de gauche reste net.
Tout les éléments graphiques de Sketch sont en vectoriel.


Symbols

De la même manières qu'avec Illustrator, les symboles permettent de retrouver des éléments communs sur plusieurs pages en parallèle.
Modifier un symbol modifie toutes les occurences du même symbol.

Par exemple je peux ici modifier le bouton de gauche. D'abord le texte... puis le border-radius, le bouton de droite est modifié en conséquence.

Très utile pour un boutton ou un avatar c'est surtout une révolution pour définir un footer ou un header commun sur chaque page de votre site.


Style de calque

Les styles de calques vous permettent de garder la couleur de remplissage d'une forme, un dégradé, des ombres ou encore ses bordures.
Ils peuvent être plus pratique que les symboles pour un boutton par exemple. La forme et le style du bouton resterons les mêmes mais le texte peut être modifiés indépendemment des autres boutons.
Ici par exemple; si je modifie ce bouton Bleu pour le rendre Vert, chaque occurence de ce style de calque deviendra verte.


Styles de texte

Relativemeent semblables aux styles de calques, les styles de textes servent à définir un titre ou un paragraphe réutilisable.
Ils garderont pour vous la taille, la couleur ou les ombres de votre texte.
De la même manière que vous définiriez vos styles pour un header ou un paragraphe en css, vous ne définissez qu'une fois un style de texte.

J'ai ici défini des styles de texte pour afficher un article. Je peux selectionner ce second article pour lui assigner les même styles très rapidement.
Tout d'abord le header, je choisis un style de texte existant crée précedemment. Idem pour le sous-titre , ou encore le paragraphe.

Export avec résolution multiple

Grâce à l'utilisation du vectoriel, nous avons la possibilité de zoomer à l'infini et par la même d'exporter des assets de n'importe quelle taille ou résolution.
Sketch nous facilite la tache en reprenant le principe des slices de photoshop mais de façon plus naturelle et en gardant en mémoires les différentes taille d'élément dont nous aurions besoin.
Nous pouvons aussi glisser un élément en dehors de sketch pour qu'il crée un .png . C'est aussi simple que ça.


Artboard

Dans Sketch, nous utilisons des artboards, ce sont des espaces prévu pour définir des pages. Facilement réutilisable, ils nous permettent sur un même espace de travail qui n'est pas délimité de visualiser l'ensemble ou une partie de votre application.


Générateur de grille

Le générateur de grille est un outils formidable pour gagner du temps sur certains éléments.
De la gallerie de photo à l'ensemble d'artboard, nous avons toujours besoin des grilles. Il suffit de selectionner un élément et nous pourrons le dupliquer, en choisissant les marges qui sépareront les éléments, le nombre de ligne et de colonne.


Smart Guide and ALT

Vous aurez la possibilité d'ajouter des repères grâce aux règles comme sur la plupart des soft de la suite adobe, les smart guide vous permettent rapidement de positionner vos éléments les uns par rapport au autres. Associé à l'utilisation du raccourci ALT qui vous donne les distance entres les éléments, vous n'avez plus de raison de vous tromper :)


Palette de couleur

Sketch plutot que de vous proposer des palettes de couleurs plus ou moins adaptées à vos besoin - que vous mettriez du temps à configurer ou à retrouver - s'adapte à votre projet.
Il garde en mémoire les différentes couleurs utilisée au sein de votre document afin de vous permettre de les réutiliser le plus rapidement possible.


Polices utiles

De la même manière qu'il retient vos couleurs favorites, l'application propose en premier lieu les différentes police de caractère déjà utilisées dans votre maquette.
Ainsi vous avez rapidement la liste des fonts à envoyer à un collègue ou à ajouter à vos CSS et vous pouvez plus facilement les retrouver et les réutiliser.


Ecraser en bitmap

De la même manière qu'un simple cliqué-glissé hors de l'application génére un .png, vous pouvez - pour des raisons souvent lié à la performance de votre document -  écraser des parties de votre interface en une seule image réutilisable.
Nous pourrions apparenter ça à l'utilisation des symbol mais c'est irréversible et donc beaucoup moins souple.
On utilisera cette technique pour figer des effet parfois lourd sur une image, comme un Flou.
J'ai rarement eu l'occasion de l'utiliser mais ai déjà eu le retour sur un fichier devenu trop lourd par l'utilisation abusive de flou sur les images, au point de ne quasiment plus pouvoir ouvrir le fichier.

 


Pour avoir utilisé les outils d'Adobe pendant quelques années, j'ai été émerveillé de découvrir un outil qui répond seulement à mes besoins, simple et efficace.

Je vous remercie d'avoir visionné cette vidéo, et vous incite grandement à essayer Sketch si ce n'est déjà fait et à partager cette vidéo si elle vous a plu.

A bientot !