Dans cette 3ème partie, nous allons vous expliquer comment commencer au mieux son projet sur Sketch qui nous paraît être le meilleur outil à l’heure actuelle.

Sketch est simple d’utilisation et permet de créer l’ensemble de son concept, même si la plupart des utilisateurs ne l’exploitent qu’à 50%. Nous allons donc vous présenter les principes avancées de Sketch, tel que l’utilisation des symboles, de composants de base, d’icônes ou même de styles de texte pour simplifier et optimiser le travail, tout au long de votre projet.

Ces outils vous permettront de connecter l’ensemble de vos éléments ce qui formera l’ensemble du projet. Ainsi vous serez en mesure de réaliser des changements très ciblés dans votre design avec des itérations globalisées et automatiques.

Visu 1

 

L’utilisation des symboles

 

Lors de la création de votre application, une architecture va tout d’abord être construite lors de la phase de wireframing. Celle-ci formera par la suite la structure de votre application qui sera composée de plusieurs boxes ayant chacune leur propre identité. Dans l’exemple présenté, nous utiliserons des symboles qui formeront  des “inputs box”, des “product box”, des “CTA” (call to action), des “details box” et d’autres “box” en fonction de votre structure.

 

Visu 2

 

Pour éviter de réaliser des boxes identiques sur toute l’application, il est important d’associer à chaque box un symbole propre. Vous allez donc, en quelque sorte, créer un composant de base qui formera une partie de votre architecture et qui gardera les mêmes informations données sur chaque boxe utilisée. Dans notre exemple, nous avons donc créé des boxes de produits avec un visuel et des textes informatifs placés en fonction de notre design.

 

Visu 3

 

Lorsque vous utilisez une boxe semblable, vous devez donc reprendre le même symbole pour modifier le visuel ou les textes sans en impacter le placement.

 

Visu 4

 

Si par la suite, vous décidez de supprimer l’un de vos textes, il vous suffira de modifier le symbole caractéristique de la box en question, ainsi le changement sera effectif sur toutes les boxes de votre application. Cette méthode représente un véritable gain de temps et vous garantit une uniformité au sein de votre projet.

Votre travail sera donc composé d’un ensemble de symboles reliés à un symbole maître qui en définit les règles d’affichage. Il est important de préciser qu’il est impératif de bien nommer chaque symbole pour permettre au logiciel de bien ranger et classer votre plan de travail. Dans notre exemple, nos boxes se trouvent dans la catégorie “box” plus précisément “car” au nom de “covers” ou “classic” ou “little” qui les différencie.

 

L’utilisation de symboles de base

 

Avant même de commencer à travailler vos symboles, il est important de réaliser une “charte graphique” composée des bases de votre application. On y trouvera les couleurs ou même les icônes sous forme eux aussi de symbole qui vous permettra de réaliser l’ensemble de vos boxes.

 

Visu 5

 

Prenons pour exemple notre tab-bar qui est un symbole composé d’autres symboles de base. Pour la réaliser, nous avons donc utilisé pour commencer, un composant de base blanc, rectangulaire et sans radius qui formera le fond du tab-bar. Par la suite, nous avons ajouté nos icônes (symbole de base préalablement créée) directement sur notre symbole en cour de création. Nous avons donc créé un symbole avec une composition d’autres symboles.

 

Visu 6

 

En utilisant cette technique de symboles inclus dans d’autres symboles, il nous est donc très facile de changer à tout moment le fond, comme les icônes simplement dans la mise en place de nos pages. Nous avons, en quelque sorte, connecté l’ensemble de nos éléments.

 

Visu 7

 

L’utilisation de style de texte

 

Tout comme les symboles, il est possible de connecter l’ensemble de vos textes en créant un style de base que vous allez pouvoir réutiliser. Une fois le style de texte créé, comme le Big Title dans notre exemple, il vous est possible de le modifier et de changer l’ensemble des textes qui ont ce même style de texte. Il est donc conseillé de créer plusieurs styles de textes à utiliser dans votre application.

 

En conclusion

 

Il est important d’organiser au mieux son espace de travail avant même de commencer son projet pour gagner en efficacité et en rapidité. C’est l’un des meilleurs moyens de gérer son temps et de simplifier son travail pour permettre un travail optimal. En utilisant ce système de symbole ou de style de texte, il est très simple de faire des modifications sur l’ensemble de son application en n’utilisant que des symboles.

 

Visu 8

 

Notre prochain chapitre se penchera sur Prototype classique : Invision & Principle.