En engloutissant rapidement ses concurrents, Sketch est sur le point de dépasser Photoshop en tant qu'outil de prototypage d'interface incontournable, au point que de nombreux développeurs préfèrent désormais que les concepteurs transmettent des fichiers Sketch plutôt que des fichiers Photoshop en couches.
Contrairement à Photoshop, le logiciel graphique Sketch a été entièrement conçu pour la conception d'interfaces interactives.
Il crée des compositions en direct afin que les clients puissent prévisualiser ce qui se passe lorsqu'ils cliquent, glissent ou tapotent votre conception sur leur ordinateur de bureau, ordinateur portable, tablette ou téléphone.
Pour cette raison, les concepteurs qui utilisent Photoshop pour créer des interfaces utilisateur pour les ordinateurs de bureau et les appareils mobiles voudront peut-être examiner de plus près Sketch.
Originaire des Pays-Bas, Sketch est un programme de conception vectorielle uniquement pour Mac qui se concentre sur la création de prototypes interactifs de conceptions Web et d'applications.
Le type de conception fonctionnelle que Sketch produit permet à vos clients d'avoir une meilleure idée de l'apparence et de la réponse de tout.
Cela leur permet à leur tour de fournir des commentaires plus utiles sur les fonctionnalités (interface utilisateur ou UI) et l'expérience utilisateur (UX), et permet par conséquent une approbation éclairée avant la phase de développement, ce qui permet de réduire la frustration et d'économiser du temps et de l'argent.
La conception relativement récente de Sketch (2008) était axée sur la conception collaborative pour les écrans, elle a donc un avantage sur Photoshop, qui a fait ses débuts 30 ans plus tôt, lorsque le mot écran avait à voir avec la mesure de la densité des demi-teintes.
Les concepteurs ont commencé à s'appuyer sur Adobe Photoshop (9,99 $ / mois chez Adobe) pour organiser et remettre les fichiers de conception d'interface, car c'était le meilleur outil dans la boîte pour faire le travail - pas parce que c'était un outil spécialement conçu à cet effet.
Cependant, Sketch n'est pas seul dans l'espace de conception UX.
Adobe XD (XD signifie Experience Design), sorti en 2016 dans le cadre du Creative Cloud d'Adobe pour Windows et Mac, est également un outil vectoriel pour le wireframing et la production de prototypes interactifs à clic.
Un deuxième concurrent basé sur le vecteur, présenté comme l'outil de conception d'écran le plus puissant au monde, est Studio de la plate-forme de gestion de système de conception lourde, InVision (gratuit pour un prototype, 25 $ par mois pour des prototypes illimités).
Contrairement à Sketch et XD, Studio dispose d'un module d'animation avancé intégré.
Le travail effectué dans Sketch peut être synchronisé avec la plate-forme InVision à l'aide de leur propre plugin Craft Manager.
Adobe propose un plan de démarrage XD gratuit avec un stockage limité (2 Go) et une utilisation d'une partie de la collection Adobe Fonts.
La version complète de XD est disponible dans le cadre de l'abonnement Adobe Creative Cloud (CC), à partir de 20,99 $ par mois pour l'application unique, ou à partir de 54,99 $ par an pour toutes les applications Creative Cloud, y compris Illustrator (19,99 $ chez Adobe), InDesign et Photoshop.
Sketch utilise une variante sur un modèle d'abonnement, coûtant 99 $ par an et par appareil (ordinateur ou mobile), pour les particuliers.
Cela comprend un an de mises à jour et Sketch Cloud (pour le partage et la collaboration en ligne), après quoi vous pouvez conserver et utiliser votre version actuelle pour toujours ou la renouveler pour 69 $ par an pour retrouver les mises à jour régulières et les avantages du cloud.
Les licences en volume vont de 64 $ par an et par appareil pour deux à neuf appareils jusqu'à 49 $ chacun pour 50 appareils ou plus.
Il est à noter que lorsque vous achetez une licence, vous n'avez droit qu'à un seul siège (pour une utilisation sur un seul ordinateur).
Si vous utilisez plusieurs Mac, comme un ordinateur de bureau et un ordinateur portable, vous n'avez pas de chance et devrez acheter deux sièges.
De nombreuses applications basées sur un abonnement autorisent deux sièges par licence, ce qui est un bon tour pour les créatifs qui travaillent dur sur leur bureau au bureau et sur leur ordinateur portable à la maison.
Un inconvénient connexe est que si vous souhaitez utiliser Sketch sur un nouveau Mac ou si vous avez dû reformater votre lecteur, vous devez désenregistrer Sketch de votre ancien ordinateur / lecteur, puis vous réinscrire.
Commencer
Sketch est un jeu d'enfant à télécharger à partir du site de l'entreprise (sketchapp.com); il y a un essai gratuit de 30 jours, sans carte de crédit requise.
Sketch nécessite MacOS 10.13.4 (High Sierra) ou version ultérieure.
La société prévient que si vous travaillez avec des documents complexes de plusieurs pages avec des centaines de plans de travail, l'un des Mac les plus puissants et chargés en RAM est recommandé.
J'ai testé Sketch 53.2 sur un MacBook Pro 2018 avec un processeur Intel Core i9 à 2,9 GHz, 32 Go de RAM et une carte graphique Radeon Pro 560X.
Directement sur la page de téléchargement, Sketch propose un guide du débutant, une documentation complète, des tutoriels et des conseils, ainsi que des liens vers ses réseaux sociaux et ses communautés de développeurs, son blog et ses chats, ainsi que Dribble.
C'est accueillant et inspirant de voir une liste de rencontres et d'événements de la communauté mondiale du design.
De plus, le site propose une multitude de ressources UX / UI Sketch App gratuites et premium, notamment des kits filaires, des kits d'interface utilisateur mobile, des modèles, des maquettes, des tableaux de bord, des concepts et des icônes.
Interface et canevas
Sketch donne l'exemple et fournit une interface utilisateur propre et contextuelle avec trois sections principales et (de par sa conception) aucun panneau flottant.
Si vous êtes déjà un utilisateur Mac, vous trouverez l'interface utilisateur de Sketch familière, car elle est modelée sur les interfaces d'applications Apple telles que Pages, Numbers et Keynote.
Avec cette dernière version, le mode sombre d'Apple est désormais pris en charge.
Sur le côté gauche de l'écran, vous trouverez la liste des pages avec un inventaire de vos calques, des éléments de contenu individuels sur ces calques et plans de travail, et le contenu nommé sur ceux-ci.
À droite se trouve l'inspecteur où vous pouvez jouer avec les propriétés du contenu sur le calque que vous avez sélectionné.
En haut, vous avez la barre d'outils qui abrite des outils et des actions.
La scène centrale est votre toile où vous créez la magie.
La liste des pages facilite l'organisation, l'attribution ou la modification des calques, ainsi que la possibilité de nommer, regrouper, sélectionner et dupliquer des éléments de contenu afin que votre flux de travail soit efficace.
Vous serez en pleine forme au moment de confier des fichiers à un développeur.
Sketch lubrifie votre flux de travail en facilitant ou en automatisant les tâches courantes avec des bibliothèques, des styles de texte et de calque, des instances de symboles et des paramètres prédéfinis faciles à créer.
De plus, il existe des centaines de kits d'interface utilisateur, de modèles et de plug-ins disponibles qui permettent d'étendre les fonctionnalités de Sketch de multiples façons.
Dessin et composition dans Sketch
Comme un guépard est à la course, Sketch est au prototypage.
Un guépard est certes capable de marcher, mais ce pour quoi il a évolué, c'est la course.
De même, vous pouvez absolument dessiner dans Sketch, et c'est bien pour cela, mais ce qui est extraordinaire à propos de Sketch, c'est son prototypage.
Néanmoins, cela vaut la peine d'avoir un aperçu de ce qui peut être fait avec les outils de dessin de Sketch.
Toute la création, l'importation et l'assemblage de contenu commence par un clic sur la liste déroulante Insérer.
Vous y trouverez les outils de forme, de dessin et de texte attendus.
Commodément à droite se trouvent les opérations d'agencement telles que la mise en avant, l'alignement et la distribution; et des outils booléens de base non destructifs comme Union, Subtract, Intersect et Difference.
Les outils vectoriels intuitifs et efficaces permettent la création et l'édition de formes, de leurs points et de courbes de Bézier.
Bien que Sketch puisse gérer les tâches de dessin essentielles, ce n'est pas Illustrator et ce n'est pas censé l'être.
La typographie de base dans Sketch est simple, avec des fonctionnalités familières de type Microsoft Word ainsi que des options décoratives pour les ombres, les remplissages et les bordures.
La mise en forme de blocs de texte peut nécessiter un effort manuel dans Sketch qui, par exemple, ne prend pas en charge la tabulation.
Vous devez utiliser la touche d'espace pour simuler l'effet souhaité.
C'est très bien, car toute composition complexe est inutile lors de la conception de mises en page réactives: tout ce qui est typographique (taille, sauts de ligne, césure, etc.) change lorsqu'il est visualisé sur les différents appareils de différentes tailles.
Prototypage et conception réactive
Contrairement à d'autres programmes de dessin (mais très similaires à Adobe XD), Sketch facilite la création d'un prototype interactif.
Pour simuler le chemin de votre site ou application (UI) et à quoi ressemblera l'expérience (UX), vous pouvez attribuer certaines zones sous forme de menus déroulants ou non, de liens et de liens croisés, de symboles, de sections, de pages et instances, et définissez les hotspots (zones cliquables).
Non seulement vous pouvez prévisualiser vos efforts à partir de l'application, mais vous pouvez également utiliser Sketch Mirror (plus d'informations sur cette fonctionnalité ci-dessous).
Une nouveauté dans Sketch est que vous pouvez remplir les champs de texte et de forme du prototype avec des données réalistes dynamiques plutôt que d'être attaché à l'ennui habituel de Lorum Ipsum.
Dans les calques de texte ou de forme sélectionnés, vous pouvez attribuer un fichier source à partir duquel importer du texte ou des images.
Sketch joue très bien avec les autres, et pas seulement dans l'application.
C'était un plaisir de découvrir que je pouvais copier et coller une icône créée dans Illustrator.
Lors de l'importation, Sketch a créé un calque groupé pour mon art, et à partir de là, je pouvais utiliser l'icône telle quelle, l'ajouter à une bibliothèque ou créer un symbole, comme vous pouvez le faire avec n'importe quelle illustration créée dans l'application.
Dans le marché actuel, toute conception bien conçue et destinée à l'écran doit être réactive.
Cela signifie que le contenu de l'écran d'une application ou d'une page Web se redimensionne et se décale automatiquement en fonction de l'appareil de visualisation (ordinateur de bureau, ordinateur portable, mobile, tablette).
Ainsi, le redimensionnement du texte, les sauts de ligne changent et les images se rétrécissent, s'agrandissent ou se masquent, en fonction de ce qui convient le mieux à chaque appareil.
Dans Sketch, vous devez créer manuellement des variantes de mise en page et des simplifications des différents rapports hauteur / largeur, en copiant et en collant chaque élément ou groupe.
Je souhaite cependant qu'il y ait une option d'ajustement intelligent pour les modifications de mise en page réactives, comme le redimensionnement réactif dans XD ou même la fonction Ajuster la mise en page d'InDesign.
Bien que Ajuster la mise en page ne rend presque jamais une solution parfaite, il fait certainement gagner du temps et offre un meilleur point de départ qu'une page vierge.
Pour prévisualiser vos conceptions Sketch en temps réel sur vos appareils, il existe le miroir Sketch gratuit pour iOS, ainsi que plusieurs applications pour le faire sur les appareils Android.
Dans tous les cas, les appareils auront besoin d'une connexion Wi-Fi ou USB.
Prendre des décisions de conception éclairées profite au flux de travail de tout le monde et, à cette fin, pouvoir voir vos ajustements, vos recadrages et le dimensionnement du texte en direct avec Sketch Mirror sur l'appareil réel est un atout majeur.
Résultats et collaboration
Lorsque votre travail est prêt pour les commentaires des clients ou la collaboration en équipe, il existe plusieurs façons de partager.
La méthode principale consiste à télécharger votre document sur Sketch Cloud.
Après le téléchargement, vous obtenez une URL et pouvez choisir qui inviter à afficher le document, et définir l'un des trois niveaux d'accès: Commentaire, Télécharger ou Utiliser comme bibliothèque.
Toute personne disposant du lien peut utiliser les outils de commentaire intégrés, et si elle ouvre la page sur une tablette ou un téléphone, elle pourra prévisualiser le (s) plan (s) de travail en pleine résolution tant qu'il existe une mise en page pour leur.
.
