Les outils de l’UX/UI designer

Concevoir avec Sketch

Les outils de L’UX/UI designer n’ont cessé d’évoluer ces dernières années. Beaucoup de nouvelles apps de conception ont vu le jour, mais une se démarque plus que les autres : Sketch.

Pourquoi ?

Tout d’abord c’est un outil uniquement dédié à la conception d’interface utilisateur Web et mobile. C’est un outil simple d’utilisation, intuitif, complet aux niveaux de ses fonctionnalités et surtout très rapide.

Cette rapidité provient de son modèle vectoriel, contrairement au modèle bitmap de Photoshop. En revanche ce n’est pas un outil capable de retoucher des images ou de réaliser une illustration à la manière d’Illustrator.

Mais Sketch dispose d’autres atouts ! Mis à jour régulièrement, il attire de plus en plus d’utilisateurs. Parmi eux, certains enrichissent mêmes ses propres fonctionnalités en développant des plugins.

Ces nouvelles extensions offrent par exemple : la possibilité de découper des assets pour les plateformes Android & iOS ou d’appliquer une couleur à plusieurs objets en même temps.

 

Interface de Sketch – Conception de Grazia tablette

 

Prototyper et collaborer avec Invision

Vous allez me dire: génial ! je crée mes interfaces graphiques dans sketch je réalise mon parcours utilisateur… mais après comment puis-je ajouter mes interactions? comment vais-je partager ce prototype avec mes clients ou à mon équipe de développeurs ?

Et là je vous dis « Invision ».

Invision est une webapp, donc consultable uniquement avec un browser ou les applications mobile hybride

Cet outil en ligne moyennant un abonnement  mensuel, vous permettra de créer un vrai prototype animé et interactif partageable avec vos clients grâce à une URL.

Ils peuvent consulter vos écrans sur leur navigateur et même sur leur mobile, ajouter des annotations sur le prototype et valider les écrans.

Invision est un atout aussi pour votre équipe. Il permettra une meilleure compréhension de votre interface et du parcours utilisateur auprès des développeurs. Votre chef de projet suivra les itérations sans devoir échanger, PNG/JPEG par mail avec vous ou avec vos clients.

Maquette avec zone d’interaction sous Invision

 

Synchroniser avec Craft

 

Craft est un plugin qui facilite la passerelle entre Sketch et Invision.

Auparavant vous deviez exporter vos PNG vers Invision, et les développeurs les consulter. Dorénavant vous synchronisez vos maquettes à l’aide de l’outil Craft.

Les développeurs peuvent non seulement consulter vos maquettes mais surtout consulter toutes les données de conception : par exemple la police utilisé pour un titre, le corps du texte, les données de positionnement.

Ces spécifications sont très importantes lors de l’intégration des interfaces par les développeurs.

Fini les rajouts manuels de spécifications sur vos écrans, pas de regret cette étape était longue et ennuyeuse.

 

Grâce à Craft non seulement vous vous épargnez cette démarche mais surtout vous permettez à vos devs de consulter beaucoup plus d’infos. Craft vous permettra aussi de disposer d’une bibliothèque d’images libres de droit, de récupérer vos images sur votre Dropbox ou encore mieux de récupérer les textes ainsi que les images d’un site en un seul clic ! Magique !

Le plugin Craft

 

Animer avec Atomic.io

 

Dans Invision vous pouvez ajouter des transitions et des interactions. Celles-ci sont limité et non configurable. Atomic va plus loin, il permet de créer vos propres effets, simplement, à partir des maquettes réalisées sous sketch.

 

Le plugin Atomic relié à Sketch permet à l’utilisateur de récupérer les calques, puis d’appliquer des interactions ou des transitions à vos maquettes. Par exemple : la transition d’un floating button d’android vers un écran. Cet outil puissant et accessible vous permettra de concevoir rapidement des prototypes animés à présenter à vos équipes ainsi qu’à vos clients.

 

Interface d’Atomic io

 

Facile d’utilisation et très efficace je vous invite à tester ces 4 outils…

concevoir, prototyper, synchroniser, collaborer et animer.

 

Retrouvez le lien de tout ces outils ci-dessous

https://www.sketchapp.com/

https://www.invisionapp.com/

https://www.invisionapp.com/craft

https://atomic.io/

 

Franck GORREGUES

UX/UI Designer chez Webwag Mobile

Articles liés
Le paiement mobile, pour ou contre ?
Webwag Mobile vous présente son nouveau site internet
CES 2016 LAS VEGAS
L’internet des objets

Laissez votre commentaire

Votre commentaire*

Votre Nom*
Votre site internet

3 × un =