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
Franck GORREGUES
UX/UI Designer chez Webwag Mobile