Parlons un peu design

Un petit article sur le design, ça change de la technique : il en faut pour tous les goûts 🙂

Designer ou Développeur ???

Si vous êtes encore dans le cliché du développeur qui ne doit pas toucher au design, vous avez 10 ans de retard.

Après une formation complète au design UX/UI, une bonne vingtaine de design pour l’exercice, 8 ans de développement orienté UX/UI (et donc des dizaines d’apps et sites web à découper / intégrer) et quelques designs pour des clients, il me semble savoir de quoi on parle.

Source: https://creativemarket.com/blog/8-lame-stereotypes-that-all-designers-hate
Source: https://creativemarket.com/blog/8-lame-stereotypes-that-all-designers-hate

Autant être clair sur le sujet : je ne parle pas des compétences d’un graphiste qui fait des super retouches de photos dans Photoshop ou de super illustrations dans Illustrator. Ces compétences artistiques et techniques sont un autre métier que celui de designer.

Tout comme de nombreux développeurs manquent cruellement de compétences en design UX/UI, il y a autant de graphistes qui manquent de ces mêmes compétences.

Source: https://creativemarket.com/blog/8-lame-stereotypes-that-all-designers-hate
Source: https://creativemarket.com/blog/8-lame-stereotypes-that-all-designers-hate

Ce n’est pas parce qu’on sait intégrer techniquement un design qu’on sait concevoir un design adapté à une bonne expérience utilisateur.

Et ce n’est pas parce qu’on sait réaliser des graphismes esthétiques qu’on sait faire un design adapté à une bonne expérience utilisateur.

Cette compétence doit être transversale : le développeur et son binôme graphiste doivent l’un et l’autre maîtriser le design.

Source: https://creativemarket.com/blog/8-lame-stereotypes-that-all-designers-hate
Source: https://creativemarket.com/blog/8-lame-stereotypes-that-all-designers-hate

Une méthode de travail profitant de la transversalité des compétences design en mode agile a d’ailleurs été développée en ce sens : le Design Studio. J’ai pu en faire l’expérience au travers d’une formation UX par Alexandre Jubien au sein du programme Start Innov’ et c’est vraiment efficace pour un travail en équipe.

C’est bon, j’ai cassé vos clichés ? Nous sommes revenus en 2016 ? (attention, 2017 arrive !)

Quelques chouettes outils

Les outils présentés dans le reste de l’article fonctionnent exclusivement sur Mac.

Sketch

Sketch est un outil assez génial. Il permet de réaliser des interfaces soignées dans un workflow adapté au design.

Une vidéo vaut mieux qu’un long discours.

Illustrator est adapté aux illustrations. Photoshop est adapté à la retouche photo.

Sketch est adapté au design d’interfaces. On peut faire du design en mode « responsive » en choisissant les éléments qui restent à des positions fixes ou accrochés à d’autres éléments !

Sachant que d’un clic on peut extraire tous les assets à réutiliser dans le code au format PNG, PNG @2x, PNG @3x, SVG, et autres. Et, d’un clic droit, on récupère le code CSS.

Il est notamment utilisé chez Apple, Facebook, Google, DropBox, PayPal, Booking.com et bien d’autres. Sa réputation n’est plus à faire.

https://www.sketchapp.com/

InVision

Vous avez un design au top : il faut maintenant le faire tester à vos utilisateurs.

Pour cela, InVision est un outil complet qui se couple très bien avec Sketch.

Non seulement, InVision permet de concevoir des maquettes interactives (que l’on peut tester sur mobile ou ordinateur) mais il va aussi beaucoup plus loin en proposant un système de commentaires, un gestion de projet complète, le partage de ressources, l’extraction de code depuis l’interface, et le branchement avec de nombreux outils (Slack, GitHub, UserTesting et bien d’autres)

C’est un outil utilisé par Twitter, Netflix, Uber, Shopify, et d’autres. Il a donc fait sa renommée.

https://www.invisionapp.com/

Sketch + InVision + Craft

InVision a conçu un plugin pour Sketch qui permet d’intégrer tout le workflow de A à Z. Avec plein de petits outils pratiques en plus.

https://www.invisionapp.com/craft

PaintCode

Vous avez un super design : maintenant, il faut l’intégrer. Sur toutes les plateformes.

C’est là que PaintCode intervient.

PaintCode se base sur votre interface Sketch et peut générer le code en Swift / Objective-C (iOS, macOS, tvOS, watchOS), Java (Android), C# (Xamarin), Javascript (web) ou SVG (générique).

Ce qui est génial ? Les animations aussi sont gérées par PaintCode. On peut concevoir des super animations vectorielles et le code est généré pour chaque plateforme.

C’est utilisé chez Apple, Amazon, Google, DropBox, Twitter, etc.

https://www.paintcodeapp.com

PAINTCODE + Sketch

Encore une fois, tout ce petit monde fonctionne bien ensemble.

Je l’utilise souvent : le plugin PaintCode pour Sketch.

Aujourd’hui, il ne fonctionne que sur iOS avec Swift / Objective-C car les autres langages sont gérés par PaintCode depuis seulement quelques jours.

Mais, à terme, il y a de bonnes chances pour que tous les langages soient gérés.

https://www.paintcodeapp.com/sketch

Pour finir

Que vous soyez développeur, graphiste ou simple curieux, j’imagine que vous avez découvert aujourd’hui le riche workflow à disposition de tous ceux qui souhaitent travailler sur un design efficace.

Si vous connaissez d’autres outils ou souhaitez partager votre expérience, n’hésitez pas à en faire part dans les commentaires. 🙂

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s