Concentrer sa créativité grâce à Sketch

9 mai 2017 - by Adeline Radius
Adeline Radius
Vignette Sketch article DigitalHub Inovae

Photoshop m’a accompagné fidèlement depuis plus de 10 ans au service de la création numérique et plus spécialement du web design. Si vous pensez que sa maîtrise est incontournable je vais vous choquer en vous affirmant qu’il n’est pourtant plus l’outil le mieux adapté à la réalisation de maquettes web.

Au commencement, il y avait Photoshop

Image
PSD - Inovae

 

Photoshop a toujours été un outil très lourd, il a été conçu pour répondre aux divers besoins des métiers de la création graphique. Si les infographistes d'hier étaient amenés à faire autant de la photo, du print que du web, aujourd’hui ils se sont spécialisés, rendant certaines des fonctionnalités du logiciel superflues à chacune de ces expertises.

Cette évolution a permis à d’autres outils de se faire une place au soleil, Sketch en fait partie.

Un apprentissage

Image
Apprentissage Sketch Inovae

 

Se lancer sur Sketch quand on est habitué à Photoshop, c’est un peu comme passer d’une voiture manuelle à une voiture automatique. Au début c’est dur de s’y mettre, toutes vos habitudes sont bouleversées et vous avez sans cesse envie de revenir en arrière. Après tout, c’était si bien avant...

A quoi bon avoir passé dix années sur Photoshop à en maîtriser toutes les subtilités pour retourner à des balbutiements ? Pourquoi subir l’humiliation de plonger dans la documentation pour effectuer un vulgaire copier coller ? 


Alors autant vous l'avouer, mes premiers balbutiements sur Sketch ont été une épreuve difficile... La promesse de fonctionnalités innovantes m’a cependant rapidement motivé à continuer l’expérience. Chaque difficulté devenait l’occasion d’apprendre un nouveau raccourci ou une nouvelle manière de construire. Petit à petit je commençais a retrouver de l'aisance ! 

Un environnement Front-end safe

Image
Front Safe Inovae

 

Sur Sketch, la créativité s’arrête là où commence le boulot des intégrateurs. L’environnement de travail est conçu pour réaliser des interfaces de manière créative tout en restant viable techniquement. Cela se traduit par des fonctionnalités qui pourraient, à première vue, paraître moins élaborées que sur Photoshop, mais qui, en réalité, tiennent bien compte des limitations techniques. Le vectoriel devient une norme. Les effets applicables pour le traitement des images se réduisent à ceux disponible en CSS. Plus possible de tricher avec les polices en forçant le bold

Travailler dans un tel environnement est rassurant, car cela favorise la bonne intelligence entre designer et front-end.  On peut cependant lui reprocher de ne pas favoriser la créativité. En effet, en demandant au designer de s’aligner sur les standards d’intégration, ne limite-t-on pas sa capacité à innover et a challenger les développeurs ?

Less is more

Image
Poids Sketch Inovae

 

Bâtir un prototype demande du temps, de la rigueur et de la concentration.

La réalisation d’un projet graphique nécessite souvent une multitude de maquettes et beaucoup d’itérations et voici comment Sketch vous simplifie la vie. Tout d'abord il propose un système d’espaces de travail réparti entre des pages et des artboard, chaque page pouvant contenir un nombre illimité d’artboard. Ce système permet de passer rapidement d’une itération à une autre et de grouper certains éléments ou maquettes. L’ensemble du projet peut donc être sur un seul et même fichier, limitant ainsi les possibilités d’erreur ou d’oubli. Finalement, l’utilisation du vectoriel permet d’obtenir un fichier très léger ce qui est un avantage appréciable lors d'une synchronisation éventuelle avec Invision.

La synchronisation sans effort

Image
Synchro Sketch Inovae

 

InVision est un outil de prototyping qui permet de réaliser des présentations de travaux de manière interactive. Il y a quelques années , chaque maquette était transposée en une page HTML. Chaque modification ou évolution du prototype nécessitait alors de gérer la cohérence et le lien entre les différentes pages mises à jour. Cela se révélait extrêmement pénible et nécessitait bien souvent de soudoyer un développeur afin d'arriver à ses fins !

Heureusement, le processus de réalisation est maintenant simplifiéSketch peut synchroniser les fichiers directement avec InVision. En clair, les modifications effectuées sur Sketch se reportent automatiquement sur les pages du prototype correspondant ! S’il reste toujours à bâtir le prototype au départ, les mises à jour, si pénibles par le passé, s’effectuent de manière transparente.
 

R.I.P Lorem ipsum

Image
RIP Lorem Ipsum - Inovae

 

Le lien entre InVision et Sketch peut aller plus loin encore que la synchronisation, notamment en gérant les contenus présents dans la maquette de manière personnalisée voir dynamique via les onglets custom et duplicate : L'équipe d’InVision Lab vous présente craft un plugin plus qu’indispensable.

Du contenu maîtrisé

L’utilisation de Lorem Ipsum durant l'étape de maquettage se révèle souvent nécessaire mais l’usage de textes en latin ne valorise pas le travail effectué, il rend l'interface moins réaliste et le client a alors plus de mal à se plonger dans les détails et à fournir des retours pertinents.

La fonction custom va permettre d’afficher, soit des données stockées et personnalisées, soit du contenu issu de site en ligne. Par exemple, afin d'afficher une liste de livres il est possible d‘utiliser une liste de 50 titres et 50 couvertures, qui seront répartis aléatoirement ou dans un ordre défini.

Image
Placement Sketch Inovae

 

Une multiplication des éléments en bonne intelligence

Il arrive fréquemment d’avoir à traiter des listes d’éléments. Que ce soit pour un site e-commerce ou un site de presse, la problématique reste la même : afficher un grand nombre d’éléments contenant chacun un contenu propre sans perdre de temps. La solution se trouve dans un autre outil du plugin craft : duplicate.
Combiné à la fonction custom précédemment évoquée, il permet de dupliquer rapidement un élément pour créer une liste originale.

Ô, joie!

Image
Duplicate Sketch - Inovae

 

Structure identique mais contenu unique

Image
Duplicate illustration Sketch - Inovae

 

Toujours dans la perspective de proposer l’utilisation de contenu au plus proche de la réalité, Sketch renoue avec l’utilisation des symboles. Que ceux qui auront connu Flash à son heure de gloire se réjouissent ! Il s’agit effectivement du même principe, la création d'éléments réutilisables et encapsulables. Sketch ne se contente pas de proposer ce système, certes bien pratique, il résout également le problème lié au contenu contextuel.

Si je crée une structure de bloc avec texte et image et que je souhaite voir cette structure réutilisée de nombreuses fois sur l’ensemble des maquettes, je peux en faire un symbole. Mais que se passe t-il si je souhaite que le texte s'adapte en fonction de l’endroit où il se trouve ? C’est là où Sketch va plus loin en proposant systématiquement que le contenu texte ou image des symboles puisse être neutralisé et remplacé par des contenu de notre choix.

Image
Symbols - Sketch - Inovae

 

Pour conclure

Image
Be Creative - Inovae

 

En une dizaine d’années, les manières de présenter ont beaucoup évoluées. 
Si Photoshop reste un outil important pour le traitement de l’image, il perd nettement du terrain dans le domaine du digital. Sketch fait partie de ces évolutions qui, en prenant en charge les aspects rébarbatifs de certaines tâches, permettent au designer de se concentrer pleinement sur son métier.

Si en agence les processus de travail changent pour passer du silo à l’itératif, c’est aussi vrai pour les designer qui voient leur manière de travailler évoluer. Désormais, ils doivent se créer un écosystème de travail dans lequel les différents outils se complètent avec comme objectif, de toujours chercher à consacrer plus de temps à la créativité.

Adeline Radius
Adeline Radius
UX/UI designer

Adeline conçoit des univers visuels épurés alliant esthétisme et efficacité pour permettre aux utilisateurs d’accéder aux contenus de manière intuitive et interactive.

Contactez nos experts et construisons ensemble votre transformation digitale.