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. 🙂

Une nouvelle mue

J’ai aujourd’hui 32 ans. Je fais du développement à titre personnel depuis quasiment 18 ans, à titre professionnel depuis quasiment 10 ans. Et je travaille avec des créatifs depuis 8 ans.

8 années d’observation

J’ai passé 8 ans à concevoir des interfaces graphiques avec des experts du graphisme et du design qui ont su sublimer les idées pour les rendre agréables à l’oeil.

Là-dessus, j’ai repris leurs travaux pour les transformer en code, de sorte à concevoir des applications et des sites web sur mesure. En phase avec une harmonie technique et esthétique amenant à une sublimation naturelle de l’ensemble. Au service du bon goût et de l’expérience utilisateur. Le tout assaisonné d’une méticulosité technique source de sérénité d’usage.

Ces 8 années m’ont permis d’affiner ma technique tout en observant avec soin le travail de mes binômes, de sorte à garantir la meilleure expérience possible.

Se recentrer sur le beau

En abandonnant la plateforme Android, j’ai fait le choix de me recentrer sur le beau.

Dans ce domaine, Apple est indiscutablement leader du domaine. Centrée sur l’esthétique et l’innovation (innovation ne signifie pas invention), la firme à la Pomme a toujours été source d’inspiration pour ses concurrents. Et c’est tant mieux : il en faut pour tout le monde.

De la manière la plus naturelle possible, je souhaite m’engager quasiment exclusivement sur la plateforme Apple, reléguant les concurrents au rang des expérimentations qui permettent d’être en phase avec l’actualité.

Je conserve malgré tout la compétence web, que ce soit pour les sites ou les services web, mais uniquement sur des technologies modernes.

La sécurité, la fiabilité et l’esthétisme resteront au coeur de mes préoccupations, de sorte à offrir la meilleure expérience utilisateur possible.

Les compromis ne faisant pas partie de ce domaine, je les laisserai désormais de côté au profit d’une expérience optimale. Pour mieux servir les utilisateurs.

Le design

Comme je l’ai déjà dit, j’ai observé pendant de nombreuses années le travail des designers. Ce qui m’a permis d’adapter leur travail pour le transformer en code. Puis en application en y ajoutant animations et contenu, tout en respectant la qualité esthétique imposée par le modèle.

Si la compréhension est une chose, la capacité à concevoir en est une autre. Et c’est toujours mieux de connaître à la perfection le métier de l’autre pour pouvoir travailler en parfait osmose.

Et, il faut bien avouer, concevoir des applications en ayant la double compétence est une expérience des plus excitantes. D’autant que j’ai pu faire sauter la barrière psychologique du « on ne peut pas être bon développeur et bon designer » grâce aux Apple Design Awards de l’an dernier, qui ont montré que c’était possible avec du talent et de la persévérance. L’un étant au service de l’autre.

Si des développeurs ont pu prendre la casquette de designer pour devenir des concepteurs complets, je ne vois pas pourquoi je ne le pourrais pas moi aussi.

On s’enlève les excuses et prétextes bidons et on fonce !

Phase 1 : observer – analyser

J’ai déjà passer 8 années à observer d’assez loin le travail de mes collaborateurs, bien qu’en ayant malgré tout une implication directe.

Aujourd’hui, je commence à être dans une démarche plus active, finalisant cette phase et ouvrant la voie à une nouvelle étape.

Phase 2 : copier – imiter – reproduire

Après avoir observé avec ses yeux et analysé après réflexion, la phase 2 de l’apprentissage est enclenchée.

Je peux commencer à copier et reproduire les interfaces d’autres applications.

C’est également par la formation que je peux acquérir de nouvelles compétences, comme j’ai pu le faire récemment grâce à 5 heures (hors exercices) de formation active via Udemy. La nouvelle étape de mon cursus est le suivi d’une formation de 16h assortie d’un nombre important de mises en pratique.

A partir de là, j’aurai environ 20h de théorie et autant de mise en pratique. L’objectif est d’observer, étudier, copier, imiter : bref, apprendre activement pendant un total de 300 heures environ. De manière intensive, en parallèle du travail quotidien. Assorti de quelques heures de dessin sur mon temps libre, me permettant de doucement glisser sur le domaine périphérique qu’est le graphisme.

Phase 3 : créer

Dès lors, je pourrai prétendre au titre de designer apprenant.

Ce qui me permettra de travailler à mes premières interfaces à titre personnel pendant l’été. De sorte à avoir quelques références dans mon portfolio me permettant de prétendre au titre de designer junior.

En ayant la capacité à comprendre à 100 % mes collaborateurs, je pourrai offrir le meilleur de mes compétences. A un niveau supplémentaire de compréhension et de force de proposition.

Un processus d’apprentissage optimisé

N’étant pas de nature à accepter la perte de temps, j’ai choisi de profiter de mon expérience de formateur pour me former moi-même et ainsi choisir les bonnes composantes d’apprentissage.

J’ai donc choisi de sélectionner les formations en suivant le modèle de Kolb, quitte à compléter les sources d’apprentissage si nécessaires, l’important étant d’absorber l’information efficacement et durablement.

Bien entendu, tout ceci est assorti d’une mise en pratique différée de quelques heures par rapport à la pratique de sorte à optimiser l’apprentissage, aussi bien pour la durée que pour la diversité des capacités développées. Une capacité venant en seconder une autre pour faire un maillage optimal de compétences.

Par exemple, mon cycle de révision est le suivant :

  • 10 – 30 minutes après la lecture initiale
  • 24 heures
  • 7 jours
  • 30 jours
  • 3 mois
  • 6 mois

Cela permet la mémorisation à long terme. La pratique quotidienne aide également. Et, dans un apprentissage tel que le design, la mise en pratique représente l’essentiel du travail. Bien que la prise d’inspiration permette de rester « à jour ». Et Internet est un outil formidable pour ça.

À suivre

Évidemment, ceci est un travail de longue haleine. D’autant qu’il faut assurer sur le reste, notamment avec l’arrivée des nouvelles technologies issues des prochaines versions de iOS, tvOS, watchOS et OS X.

Mais, avec un processus d’apprentissage optimale et une bonne hygiène de vie, chacun peut s’améliorer quotidiennement. De nombreux hommes et femmes à travers l’histoire – mais aussi parmi nos contemporains – ont su démontrer que cette capacité était à la portée de chacun. Quelle que soit son origine, son éducation et autres conditions purement sociétales.

Bref. On se tient au courant. Au plaisir de vous revoir pour partager mon expérience.

Portez-vous bien 🙂