Le métier du web designer par Mike Monteiro

metier webdesigner

Après le livre du Design Emotionnel de la sympathique collection A Book Apart, je vous présente le dernier livre que je viens tout juste de terminer : « Metier : Web Designer » de Mike Monteiro.

Mike nous partage, sans gêne et sans ménagement, ses différentes expériences professionnelles en tant que salarié, freelance et, aujourd’hui, co-fondateur de l’agence Mule Design.

« Vous voyez ces panneaux d’avertissement qu’on placarde partout, ces pictogrammes de main coincée entre deux engrenages ou de bonhomme foudroyé ? Ce livre est une collection de panneaux d’avertissement. Chaque leçon qu’il contient a été apprise à mes dépens. »

J’ai trouvé les propos de l’auteur très pertinents, sincères et honnêtes dans son approche du métier de designer. Même si ce livre à une vision très entrepreneuriale, les fondamentaux et les réfléxions sur le métier de webdesigner y sont abordées :

  • Qu’est-ce qu’un designer ?
  • Trouver des clients
  • Facturer votre travail
  • Présenter un design
  • Gérer le feedback
  • Etc.

« Un designer qui ne présente pas son travail n’est pas un designer. Présenter le travail, expliquer le raisonnement, répondre aux questions et recueillir du feedback, tout cela ce fait partie du métier. Si vous restez planté devant votre ordinateur pendant que quelqu’un d’autre présente le travail au client, vous n’aurez pas le droit de vous plaindre du feedback que vous obtiendrez. Les absents ont toujours tort. »

Que vous soyez salarié, freelance ou chef d’entreprise, je vous invite à lire ce livre qui vous permettra sans doute de réfléchir sur votre situation, vos projets en cours, vos collaborateurs, vos râlements (car oui, il y a en sûrement, surtout si vous êtes français !).

Ce livre transpire la personnalité de Mike, son humour et sa franchise. A lire !

Disponible chez Eyrolles : « Metier : Web Designer »


Collection A Book Apart - Eyrolles

A lire aussi de la même collection :


Le métier du web designer par Mike Monteiro

Datavision, conférence de David McCandless

Expoviz
Pour les personnes qui me suivent sur Twitter, vous avez pu constater que vendredi dernier ce fut journée #Expoviz.

Avant de clôturer cet évènement, une journée fut consacrée à plusieurs interventions de professionnels sur le thème suivant : « LA DATAVISUALISATION AUJOURD’HUI ET DEMAIN ».

La matinée commença très bien avec l’intervention de David McCandless et d’une table ronde sur le nouveau métier du « Data-journaliste ».

En revanche, l’après-midi fut assez… décevante.

Certaines interventions s’orientèrent trop sur les usages et les intérêts de l’Open-data. Après plusieurs moments de doute sur mes facultés intellectuelles de compréhension, les personnes qui m’accompagnaient et d’autres du public eurent le même sentiment que moi : Le thème du design d’information fut totalement oublié au détriment de l’Open-Data.

Les interventions étaient parfois inaccessibles et trop théoriques. Le manque de profil technique parmi les intervenants comme des designers ou développeurs se furent aussi ressentir par l’absence de cas concrets.

En tout cas, je tenais tout de même à féliciter cette initiative qui est la première en France. L’exposition était enrichissante, et d’ailleurs, vous pouvez la consulter sur le site : panneaux.expoviz.fr

David McCandless, data-journaliste ou designer de l’information ?

Datavision de David McCandless

Si vous vous intéressez à la Data-visualisation, vous avez sans doute déjà lu le livre de référence Datavision de David McCandless. Ce dernier a inauguré cette journée avec humour, dérision et partage de méthodes de travail en toute simplicité.

Selon ses dires, son objectif est de synthétiser les données récoltées, de leurs donner du sens et surtout de les rendre compréhensible par tous. Si son lecteur saisi dans l’instant l’information retranscrite graphiquement, c’est gagné !

David nous explique aussi que les données ne sont rien si ces elles ne sont pas rattachées à une histoire ou à un contexte. Les data-visualisations permettent de comprendre et de corréler des sources à une interprétation retranscrite visuellement.

« Il faut se détacher des formats traditionnels de présentation des données pour les comprendre et les interpréter autrement.

Datavisualisation London Population

Un des fondamentaux pour David est la transparence sur la provenance des sources de données. Cette honnêteté peux éviter de manipuler le lecteur sur des informations qui pourraient être mal interprétées.

Son Workflow pour réaliser une data-visualisation

Malgré tous les outils disponibles pour réaliser ses propres data-visulalisation, le logiciel Illustrator reste son outil de prédilection pour un meilleur rendu esthétique et surtout pour styliser ses pensées.

Afin d’expliquer ses méthodes de travail, David nous fait découvrir ses recherches et différents essais sur plusieurs créations. Son rite est pratiquement toujours le même :

  1. Récupération des données dans un tableur : hiérarchisation des informations
  2. Croquis, réfléxion sur le papier pour mieux comprendre et interpréter les données récoltées
  3. Première collaboration avec un designer graphique : matérialisation des idées à travers des essais
  4. Finalisation de la data-visualisation

Partie politique USA datavisualisation

Quand l’animation rencontre la data-visualisation

La conférence s’est fini trop tôt à mon goût mais toutes les bonnes choses ont une fin !
David aborde une nouvelle forme d’interprétation et de visualisation des données grâce à l’animation :

Le travail sur les données interactives permet de jouer avec leur aspect et d’offrir aux lecteurs une notion attractive et ludique nouvelle.

Datavisualisation Billion dollar

« Amusez-vous avec les données »

Site officiel de David McCandless

Datavision, conférence de David McCandless

Le design émotionnel au sein de vos interfaces

Il y a tout juste une semaine, j’ai acheté le livre « Design émotionnel » de Aaron Walter (designer de Mailchimp). J’aimerai partager avec vous ce livre que j’ai dévoré en moins de deux soirées. Je vous le recommande vivement car il est très inspirant et particulièrement bien écris.

Design Emotionnel Aaron Walter

J’ai trouvé ce manifeste passionnant ! Aaron Walter y aborde toutes les disciplines que touche le webdesign : la psychologie, le marketing, la publicité, le commerce, l’ergonomie, l’expérience utilisateur, l’esthétisme, etc.
Il ne faut pas oublier que notre profession de webdesigner à un impacte très important sur ces différents secteurs et bien souvent oublié au quotidien.

Ce que j’en ai retenu :

L’effet esthétique-utilisabilité au détriment de l’expérience utilisateur

Aaron Walter commence par évoquer la pyramide des besoin de Maslow en l’adaptant au design d’interface et, bien sûr, en y ajoutant la notion de « l’agréable ».

“le design a une forte influence sur l’engagement émotionnel et l’utilisabilité”

En abordant les fondamentaux, le but de l’auteur est de remettre en question la philosophie de 37 signals qui a beaucoup influencé le webdesign ces dernières années : 37 Signals soutient un design minimaliste et fonctionnel au détriment de l’expérience utilisateur. Walter leur reproche un design qui n’a pas su s’adapté dans le temps et se repose aujourd’hui sur un design, certes efficace, mais non-évolutif et statique.

la pyramide des besoin de Maslow
Un design émotionnel peut être défini sur plusieurs critères :

  • une mascotte,
  • une ligne éditoriale,
  • des fonctionnalités surprenantes,
  • un contenu provocateur,
  • etc.

Le design que vous allez définir peut avoir un impact très important sur votre interface et se doit être équilibré et homogène. Cette harmonie va permettre à l’utilisateur de prendre du recul sur ce qu’il consulte pour une meilleure mémorisation de votre contenu.

“L’attention d’un utilisateur est une ressources limitée”

Lorsque vous concevez une interface le but n’est pas de tromper ou de manipuler l’internaute mais de le faire réagir et d’améliorer son quotidien. L’usage d’une interface influence beaucoup sa réaction et son humeur. Si cette dernière y est agréable, l’utilisateur aura de la sympathie pour votre marque donc un meilleur engagement en retour.

DEFINIR UN PERSONA POUR SON INTERFACE

Certains designers créent des Personas utilisateurs pour une meilleure conception face à une cible bien précise. Aaron Walters recommande de créer un Persona de votre interface en même temps. Le but est de créer un portrait émotionnel de votre site ce qui va vous permettre une approche plus émotive et de donner un caractère à ce dernier.

github octocat

Création d’un persona pour un design d’interface

Pour la création de votre persona, l’auteur vous recommande de répondre à ces quelques questions ci-dessous :

  • 1. Nom de la marque

  • 2. Aperçu : Qu’est-ce qui rend votre marque unique ?
  • 
3. Image de personnalité : photo d’une vrai personne qui incarne les traits souhaités (personnalité, star..). Si vous possédez une mascotte, décrivez la personnalité de cette dernière.
  • 
4. Traits de la marque : lister 5 traits de la marque qui la caractérise et 5 traits non souhaitez.

  • 5. Carte de la personnalité : définir 2 axes, en abscisse : sympathie vs méchanceté et en ordonnée : soumission vs domination
.
  • 6. Voix : si votre marque parle, quel est le ton utilisé : familier ? fleurie ? stricte ? sobre ? Guindé ?

  • 7. Exemple rédactionnel : exemples de textes susceptibles d’être utilisés (message de bienvenue, message d’erreur, etc.)
  • 
8. Lexique visuel : charte graphique des couleurs, typographies, nuancier, etc.

  • 9. Méthode d’engagements : définir une expérience permettant un engagement au sein de votre interface. Exemples : Doddle de Google qui change selon l’actualité, la blague ou la vidéo du jour proposer par MailChimp, etc.

CONCLUSION

Le design doit être considéré comme un complément à un système fiable, ergonomique et fonctionnel. Si votre site internet est lent ou instable, votre design dit émotionnel perds de sa valeurs et décridibilisera votre marque. Je vous recommande vivement de lire ce livre qui est aussi un bon moment de détente.

Collection A Book Apart - Eyrolles
– Collection A Book Apart des éditions Eyrolles
– Auteur du livre Aaron Walter
– Extrait fourni par les édition Eyrolles : Chapitre 1 (PDF) Révolution : Un gagné pour un perdu

A lire aussi de la même collection :


Le design émotionnel au sein de vos interfaces

Flupa Ux-Day : utilisabilité, ergonomie et expérience utilisateur

Le 11 mai prochain (à Paris) aura lieu le Flupa UX-Day ! Un évènement dédié à l’ergonomie, l’expérience utilisateur et surtout le partage / témoignage de plusieurs professionnels.

Et vous savez quoi ?… J’y serai présente en tant qu’oratrice !

Atelier : Refonte d’un site à grande échelle

Vous vous souvenez sans doute des billets que je n’ai jamais pris le temps de finir (Honte à moi !) sur la refonte du site Deezer ?

A l’occasion de cette journée, j’ai décidé de finir ce que j’ai commencé mais cette fois-ci cela sera présenté lors d’un atelier. Etant plus à l’aise à l’oral qu’à l’écrit, cet évènement va me permettre de partager plus spontanément cette aventure à la fois humaine mais aussi technologique.

Donc on s’y retrouvera peut-être ?

Au PROGRAMME :


Sur le site web officiel : http://uxday.flupa.eu/programme/

Lien

Gestuelle multi-touch pour tablette

Sur le site de Gestureworks.com vous trouverez plusieurs ressources vous permettant de créer facilement vos storyboards ou wireframes avec des éléments vectoriels ou des typographies.

Une typographie multi-touch


Ce Pack typographie comprend 4 fonts différentes vous permettant d’illustrer vos documents rapidement avec une gestuelle prédéfinie. Chaque geste est représenté par des interactions multi-touch que cela soit pour des tablettes, smartphones ou toutes autres interface tactiles.

Ce pack typographique est disponible ici au format ZIP »

Poster et icones pour la gestuelle multi-touch

Un poster au format vectoriel, png et bitmap est disponible ici ». Une bonne alternative pour gagner du temps lors de la conception de vos storyboards.

– Illustrations provided by GestureWorks®

Autres ressources :

Image