Le blog de Sophie

Sketch : l’al­ter­na­tive web design à Photo­shop

Pour ce nouvel article, je tenais à vous présen­ter SKETCH, l’al­ter­na­tive web design n°1 à Photo­shop. Simple, pratique et effi­cace, Sketch permet de réali­ser des desi­gns pour diffé­rents supports (Desk­top, Smart­phone, Tablette, …) en un rien de temps. Pour vous assu­rer que même un newbie pour­rait s’en servir, j’ai réalisé le design de mon futur site de photo­graphe, moi-même (et je ne suis un aficio­nado de Photo­shop que dans le cadre de la retouche de photo­gra­phies).

Logo Sketch

Je vous laisse donc décou­vrir les nombreux avan­tages qu’il y a à utili­ser Sketch en web design.

Sketch : une solu­tion profes­sion­nelle pour les desi­gners

Sketch est une appli­ca­tion MAC qui se télé­charge sur leur site – https://www.sket­chapp.com/ – et se présente comme suit :

« Profes­sio­nal digi­tal design for Mac. Sketch gives you the power, flexi­bi­lity and speed you always wanted in a light­weight and easy-to-use package. Finally you can focus on what you do best: Design ».

Traduc­tion :

Design digi­tal profes­sion­nel pour Mac. Sketch vous donne le pouvoir, la flexi­bi­lité et la vitesse dont vous avez toujours rêvé, dans un packa­ging léger et facile à utili­ser. Enfin, vous pouvez vous concen­trer sur ce que vous faites le mieux : Desi­gner ».

Sketch - Page d'accueil

Sketch dispose d’une belle commu­nauté –  https://www.sket­chapp.com/commu­nity/ – et met à la dispo­si­tion de ses utili­sa­teurs des ressources et docu­men­ta­tions sous la forme (notam­ment) de tuto­riels vidéo, de cours et d’ar­ticles en ligne : https://www.sket­chapp.com/learn/.

Sketch : les premiers pas

La première étape consiste à créer un « artboard » (un plan de travail) du format que vous dési­rez. Pour ce faire, rendez-vous dans « insert » > « Artboard ». Une nouvelle fenêtre s’ouvre sur la droite avec les diffé­rentes options dispo­nibles. Sélec­tion­nez alors « Desk­top HD » (ou encore « Mobile Portrait » si vous préfé­rez débu­ter par la partie Respon­sive Design de votre futur site).

Sketch - Premiers pas - Tutoriel - EXIT Studio

Une fois « Desk­top HD » sélec­tionné, une nouvelle fenêtre s’ouvre sur la gauche, permet­tant de gérer les diffé­rents éléments qui seront (désor­mais) ajou­tés à l’art­board (comme on gère des calques dans Photo­shop). Enfin, la fenêtre de droite permet de modi­fier l’en­semble des para­mètres confi­gu­rables.

Sketch - Premiers pas - Tutoriel - EXIT Studio

Sketch : ajout d’élé­ments et para­mètres confi­gu­rables

En haut à gauche de la fenêtre, le carré avec le symbole « + » insert, permet d’in­sé­rer toutes sortes d’élé­ments à votre artboard (des images (Image), du texte (Text), ou encore des formes (Shape)). Dans cet exemple, j’ajoute une image.

Comme vous pouvez le consta­ter, une série d’ou­tils me permettent de modi­fier mon image dans la partie droite de la fenêtre (corres­pon­dant à la partie confi­gu­ra­tion pour chaque élément ajouté). Dans le même temps, un nouvel onglet appa­raît dans la partie gauche de ma fenêtre, sous l’on­glet « Desk­top HD » (que je peux renom­mer à ma guise ou ajou­ter à un groupe).

Sketch - Premiers pas - Insert - Tutoriel - EXIT Studio

L’ajout d’une forme rectan­gu­laire (« Shape » > « Rectangle ») me permet d’ajou­ter un filtre à mon image (par exemple). Je sélec­tionne la zone à laquelle appliquer le filtre. Sur la droite, je le rempli de rouge, j’ap­plique une opacité de 80%, avec un mélange plus foncé (Darken). A nouveau, on retrouve des auto­ma­tismes de Photo­shop.

Sketch - Premiers pas - Insert - Tutoriel - EXIT Studio

Comme vous l’au­rez compris, l’ou­til est assez complet, et les possi­bi­li­tés de confi­gu­ra­tions de chaque élément, infi­nies. Je construis ainsi rapi­de­ment et simple­ment la page d’ac­cueil de mon design, en gardant une série d’au­to­ma­tismes liés à Photo­shop.

Sketch : dupli­ca­tion d’art­board

Je désire à présent ajou­ter un menu dérou­lant, et l’ajou­ter à une variante de mon design. Il me suffit de dupliquer mon premier design (en sélec­tion­nant l’art­board a dupliquer puis en passant par « Edit » > « Dupli­cate »).

Sketch - Premiers pas - Duplication - Tutoriel - EXIT Studio

L’en­semble des éléments d’un artboard peuvent être « copiés /collés » d’un artboard à un autre. L’or­ga­ni­sa­tion des « calques » et groupes est égale­ment assez intui­tif.

Au cours de la concep­tion de mon design, je peux à ma guise ajou­ter de nouveaux artboard, du format désiré. Ma vue me permet de me concen­trer sur un seul de mes desi­gns, ou sur l’en­semble (sans limite d’ajout puisqu’il nous est déjà arrivé de travailler sur 20 artboards au sein d’un même fichier). Pour plus de clarté, et afin d’évi­ter de faire souf­frir un ordi­na­teur aux perfor­mances limi­tées, la subdi­vi­sion en diffé­rentes pages est possible, via le symbole « + » situé dans la fenêtre de gauche, au dessus des calques.

Sketch - Premiers pas - Pages - Tutoriel - EXIT Studio

Sketch : affi­chage de grilles et/ou layout, et système de repère commenté

Dans Sketch, il vous est possible d’af­fi­cher une grille (via l’on­glet « View » > « Show Grid ») ou des colonnes de mise en page (« View » > « Layout »), ce qui peut-être d’une grande aide lorsqu’il s’agit d’ali­gner correc­te­ment les éléments de son design.

Sketch - Premiers pas - Grid et Layout - Tutoriel - EXIT Studio

En paral­lèle, chaque élément peut être déplacé avec l’aide de repères commen­tés.

Sketch - Premiers pas - Repères dynamiques commentés - Tutoriel - EXIT Studio

Sketch : expor­ta­tion d’art­board et d’élé­ments spéci­fiques

Je peux enfin expor­ter mes artboards via « export » situé en bas dans la fenêtre de droite, et ce, dans le format de mon choix (PNG, JPG, TIFF, PDF, EPS, SVG).

Sketch - Premiers pas - Exportation - Tutoriel - EXIT Studio

Le symbole « + » situé à côté de l’ex­port permet de sortir, en même temps, plusieurs tailles d’art­board (x2 corres­pon­dant au format rétina, par exemple).

Sketch - Premiers pas - Exportation - Tutoriel - EXIT Studio

Enfin, il m’est égale­ment possible d’ex­por­ter un élément précis de mon artboard, en l’ayant sélec­tionné préa­la­ble­ment puis, en sélec­tion­nant l’on­glet « Make Expor­table » situé tout en bas, dans la fenêtre de droite.

Sketch - Premiers pas - Exportation - Tutoriel - EXIT Studio

En conclu­sion : Sketch, une alter­na­tive viable à Photo­shop en web design ?

Sketch aura su prendre ce que Photo­shop a à offrir de meilleur, tout en corri­geant les manque­ments et en mettant en avant les fonc­tion­na­li­tés les plus employées par les web desi­gners, au moment de la concep­tion d’un design.

Sketch Logo - Design with Sketch App

Parmi les avan­tages non négli­geables de Sketch (et qui renforce l’idée que son utili­sa­tion est beau­coup plus pratique que Photo­shop dans le cadre de la concep­tion de desi­gns), on notera que :

  • Il n’existe aucune limite au retour en arrière, comme c’est malheu­reu­se­ment le cas dans Photo­shop ;
  • Le zoom dans Sketch est (égale­ment) infini (dans Photo­shop, le zoom maxi­mal est de 3200% du projet) ;
  • Il est possible de créer des formes ou du texte en SVG (vecto­riel) – il est donc possible d’y créer un logo ou encore une icône, expor­table direc­te­ment depuis Sketch en SVG ;
  • Le prix d’achat de Sketch est enfin gran­de­ment moins élevé qu’un abon­ne­ment mensuel à Photo­shop. Sketch coûte 99$ (soit +/- 110€) payable une seule fois, contre +/- 24,19€ mensuel (pour la formule de base), pour dispo­ser de Photo­shop.