Un design réussi, ma conférence au WordCamp Paris 2016

visuel de conf un design réussi

Ça y est, c’est fait. Ma première conférence à un WordCamp, le WordCamp Paris 2016. Ma première conférence tout court d’ailleurs… Après une dose massive de stress et une préparation studieuse, je respire enfin ! Le public a été vraiment super, merci à toutes et à tous pour vos gentils retours et tous vos tweets, ma crainte de décevoir l’auditoire a bien été balayée 🙂

Je vous propose ici un petit récap, une mise à dispo de mes slides, quelques liens et la vidéo publiée sur wordpress.tv.

Design ? #WTF ?

œuf de pâques

En guise d’introduction je tient à définir le terme design que l’on a vite tendance à réduire à l’aspect visuel des choses. Non, le design, c’est répondre à un problème par une solution, c’est la création d’un outil qui fonctionne et que l’on a plaisir à utiliser.
Je trouve l’exemple de l’œuf assez explicite : derrière son aspect visuel épuré, des fonctionnalités et un objectif (ce qui n’empêche pas de customiser le visuel). Pour un site, idem, un design graphique mais pas que, il faut des fonctionnalités et du contenu.

Raconte-moi une histoire

taxi driver screenshot

Le fond et la forme, le design graphique est au service du contenu : le rendre attrayant, accessible… L’un ne peut pas aller sans l’autre, difficile de travailler sans savoir de quoi on parle et à qui on s’adresse, non ? Voir la conférence de Benjamin Lupu : Architecture de l’information pour WordPress est obligatoire pour prendre conscience qu’un travail au niveau des contenus du site est primordial, avant même de travailler ses maquettes 🙂
Une autre chose importante : quel ton va-t’on adopter pour parler aux gens ? Sérieux, décalé, poétique, absurde… ? Nous sommes des humains, et nous parlons à des humains, le ton nous donnera des pistes pour trouver son identité graphique.
La conférence d’Alex Bortolotti est également intéressante car la hiérarchie des templates dans WordPress permet d’y voir clair dans ce qu’il faut concevoir pour servir ses contenus.

Design process

faire un croquis

Dans cette partie je veux proposer une autre approche que l’antique clivage « Création/Développement » encore en vogue dans certaines agence de com (heureusement ce n’est pas une généralité). Au travers de différents retours d’expérience, j’essaye d’expliquer comment profiter au mieux des compétences de chaque cœur de métier : graphiste, web designer, intégrateur, développeur… J’essaye aussi de pointer quelques erreurs récurrentes lors de la conception d’un site, que ce soit au niveau fonctionnel ou au niveau graphique. (Petit « disclaimer » : je ne prétends pas donner « la » solution, ni détenir une quelconque vérité, chaque projet est bien entendu spécifique).
Geoffrey Crofte et Matthieu Bousendorfer sont allés plus loin et plus dans les détails au niveau du travail d’équipe avec leur conférence : Réconcilier les développeurs et designers (autour d’un thème WordPress).
Ne pas oublier le côté technique en validant son code html, en pensant aux performances et surtout à l’accessibilité (voir la conférence de Claire Bizingre Tester le niveau d’accessibilité d’un thème WordPress). Il faut que notre outil soit au top 🙂

Pour conclure

la mer en décembre

En conclusion, ne pas oublier que les designers du projet, c’est vous : que vous soyez dans le concept, l’UX, l’UI, la création graphique, le web design, l’intégration ou le développement. Il ne faut court-circuiter personne et au contraire apprendre de l’expertise des autres pour améliorer notre pratique (c’est beau :). Un design réussi c’est grâce à un bon travail d’équipe 🙂

Ressources

Les slides de ma conférence sont sur slideshare
La version HTML se trouve ici (attention, c’est optimisé écrans 1024 comme en 1998 ^^)

La collection A Book Apart
Outils pour maquettes fonctionnelles : Balsamiq
Mon système de grille CSS : Prid’ responsive padding grid
Le template hierarchy de WordPress (ou par ici)

À bientôt !

Thomas

On en discute ?

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *