Sketch - alternative webdesign a photoshop - EXIT Studio

Pour ce nouvel article, je tenais à vous présenter SKETCH, l’alternative web design n°1 à Photoshop. Simple, pratique et efficace, Sketch permet de réaliser des designs pour différents supports (Desktop, Smartphone, Tablette, …) en un rien de temps. Pour vous assurer que même un newbie pourrait s’en servir, j’ai réalisé le design de mon futur site de photographe, moi-même (et je ne suis un aficionado de Photoshop que dans le cadre de la retouche de photographies).

Je vous laisse donc découvrir les nombreux avantages qu’il y a à utiliser Sketch en web design.

Sketch - alternative webdesign a photoshop - EXIT Studio

Sketch : une solution professionnelle pour les designers

Sketch est une application MAC qui se télécharge sur leur site – https://www.sketchapp.com/ – et se présente comme suit :

« Professional digital design for Mac. Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design ».

Traduction :

Design digital professionnel pour Mac. Sketch vous donne le pouvoir, la flexibilité et la vitesse dont vous avez toujours rêvé, dans un packaging léger et facile à utiliser. Enfin, vous pouvez vous concentrer sur ce que vous faites le mieux : Designer ».

Sketch dispose d’une belle communauté –  https://www.sketchapp.com/community/ – et met à la disposition de ses utilisateurs des ressources et documentations sous la forme (notamment) de tutoriels vidéo, de cours et d’articles en ligne : https://www.sketchapp.com/learn/.

Sketch - alternative webdesign a photoshop - EXIT Studio

Sketch : les premiers pas

La première étape consiste à créer un « artboard » (un plan de travail) du format que vous désirez. Pour ce faire, rendez-vous dans « insert » > « Artboard ». Une nouvelle fenêtre s’ouvre sur la droite avec les différentes options disponibles. Sélectionnez alors « Desktop HD » (ou encore « Mobile Portrait » si vous préférez débuter par la partie Responsive Design de votre futur site).

Sketch - alternative webdesign a photoshop - EXIT Studio

Une fois « Desktop HD » sélectionné, une nouvelle fenêtre s’ouvre sur la gauche, permettant de gérer les différents éléments qui seront (désormais) ajoutés à l’artboard (comme on gère des calques dans Photoshop). Enfin, la fenêtre de droite permet de modifier l’ensemble des paramètres configurables.

Sketch - alternative webdesign a photoshop - EXIT Studio

Sketch : ajout d’éléments et paramètres configurables

En haut à gauche de la fenêtre, le carré avec le symbole « + » insert, permet d’insé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 constater, une série d’outils me permettent de modifier mon image dans la partie droite de la fenêtre (correspondant à la partie configuration pour chaque élément ajouté). Dans le même temps, un nouvel onglet apparaît dans la partie gauche de ma fenêtre, sous l’onglet « Desktop HD » (que je peux renommer à ma guise ou ajouter à un groupe).

Sketch - alternative webdesign a photoshop - EXIT Studio

L’ajout d’une forme rectangulaire (« Shape » > « Rectangle ») me permet d’ajouter un filtre à mon image (par exemple). Je sélectionne la zone à laquelle appliquer le filtre. Sur la droite, je le rempli de rouge, j’applique une opacité de 80%, avec un mélange plus foncé (Darken). A nouveau, on retrouve des automatismes de Photoshop.

Comme vous l’aurez compris, l’outil est assez complet, et les possibilités de configurations de chaque élément, infinies. Je construis ainsi rapidement et simplement la page d’accueil de mon design, en gardant une série d’automatismes liés à Photoshop.

Sketch - alternative webdesign a photoshop - EXIT Studio

Sketch : duplication d’artboard

Je désire à présent ajouter un menu déroulant, et l’ajouter à une variante de mon design. Il me suffit de dupliquer mon premier design (en sélectionnant l’artboard a dupliquer puis en passant par « Edit » > « Duplicate »).

Sketch - alternative webdesign a photoshop - EXIT Studio

L’ensemble des éléments d’un artboard peuvent être « copiés /collés » d’un artboard à un autre. L’organisation des « calques » et groupes est également assez intuitif.

Au cours de la conception de mon design, je peux à ma guise ajouter de nouveaux artboard, du format désiré. Ma vue me permet de me concentrer sur un seul de mes designs, ou sur l’ensemble (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’éviter de faire souffrir un ordinateur aux performances limitées, la subdivision en différentes pages est possible, via le symbole « + » situé dans la fenêtre de gauche, au dessus des calques.

Sketch - alternative webdesign a photoshop - EXIT Studio

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

Dans Sketch, il vous est possible d’afficher une grille (via l’onglet « 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’aligner correctement les éléments de son design.

En parallèle, chaque élément peut être déplacé avec l’aide de repères commentés.

Sketch - alternative webdesign a photoshop - EXIT Studio

Sketch : exportation d’artboard et d’éléments spécifiques

Je peux enfin exporter 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 - alternative webdesign a photoshop - EXIT Studio

Le symbole « + » situé à côté de l’export permet de sortir, en même temps, plusieurs tailles d’artboard (x2 correspondant au format rétina, par exemple).

Enfin, il m’est également possible d’exporter un élément précis de mon artboard, en l’ayant sélectionné préalablement puis, en sélectionnant l’onglet « Make Exportable » situé tout en bas, dans la fenêtre de droite.

En conclusion : Sketch, une alternative viable à Photoshop en web design ?

Sketch aura su prendre ce que Photoshop a à offrir de meilleur, tout en corrigeant les manquements et en mettant en avant les fonctionnalités les plus employées par les web designers, au moment de la conception d’un design.

Parmi les avantages non négligeables de Sketch (et qui renforce l’idée que son utilisation est beaucoup plus pratique que Photoshop dans le cadre de la conception de designs), on notera que :

  • Il n’existe aucune limite au retour en arrière, comme c’est malheureusement le cas dans Photoshop ;
  • Le zoom dans Sketch est (également) infini (dans Photoshop, le zoom maximal est de 3200% du projet) ;
  • Il est possible de créer des formes ou du texte en SVG (vectoriel) – il est donc possible d’y créer un logo ou encore une icône, exportable directement depuis Sketch en SVG ;
  • Le prix d’achat de Sketch est enfin grandement moins élevé qu’un abonnement mensuel à Photoshop. Sketch coûte 99$ (soit +/- 110€) payable une seule fois, contre +/- 24,19€ mensuel (pour la formule de base), pour disposer de Photoshop.

Mots-clés

  • Sketch
  • Web design
  • Photoshop
  • Artboard

Sources

Plus d'articles pouvant vous intéresser

Voir tous les articles

Envie de faire partie de l’aventure EXIT Studio ?

Envie d’un site attractif et performant, tant optimisé pour le référencement qu’accessible sur tablettes et smartphones ?

Demander un devis