Some News

Some News est une newsletter créée dans un but éducatif. L’objectif est d’explorer et d’expérimenter avec le web.

Painting with the web - Matthias Ott

Un peu de contexte

Beyond Tellerrand est un événement sur le web design et development, le graphic design, la typographie... Il se produit à Berlin et Düsseldorf annuellement. C’est un lieu d’échange. Chaque année, plusieurs conférenciers discutent de diverses pratiques liées aux thèmes mentionnés ci-dessus. C’est un festival reconnu non pas seulement par la qualité des conférences présentées mais aussi par l’aspect communautaire présent en son sein.

en noir et blanc de la scène vide du festival Beyond Tellerrand vue depuis le public.
Visuel du site de
Beyond Tellerrand

Matthias Ott se décrit comme un UX designer, un ingénieur en web design, un professeur de prototype d’interface à l’université de Muthesisus des beaux-arts et du design et il supervise des workshops sur le web design et l’accessibilité du web. Il est l’auteur de la news letter “Own your web” qui couvre divers sujets concernant la possession d’un coin du web. Il accorde une importance aiguë à l'expérience utilisateur et a une approche holistique de la création d’interface. Il est à l’intersection entre le design et le développement. Il transforme des design visuel et des concepts d'interactions en composants utilisable, accessible, responsive et performant.

Photo rapprochée de Matthias Ott en train de parler. C'est un homme âgé d'une trentaine d'année aux cheveux bruns et courts. L'arrière de la photo est floutée, on ne voit que cet homme de manière nette
Photo de Matthias Ott issue de son site :
Matthias Ott - About

Une nouvelle manière d’envisager le web

La boucle créative

Dans cette conférence, Matthias Ott met le doigt sur une problématique du web. Celle du feedback dans le processus créatif ou en l'occurrence, l’absence de feedback dans ce cas. En effet, une grande partie du processus créatif se crée dans l’expérimentation, dans l'essai-erreur. Pour ce faire, il est nécessaire de pouvoir prendre du recul afin de prendre des décisions éclairées. Or dans le web, cette boucle est brisée. Le support utilisé dans le web ne permet pas de feedback clair. Pour un peintre, il suffit de regarder sa toile, le support est fixe et il est donc aisé de porter un regard critique. Aujourd’hui, beaucoup de web designers reprennent cette approche artistique statique.

La réalité est tout autre

Dans le web, le support n’est ni fixe ni clairement délimité et continue d’évoluer avec le temps. Le décalage entre ce que les designers désignent et ce qui est possible de créer sur le web n’a jamais été aussi prononcé.

Pour remédier à cette problématique, Matthias Ott propose une approche différente. À la place de considérer le web comme une toile blanche à peindre, il propose de le considérer comme un matériau avec lequel construire. Pour travailler avec un matériau, il faut avant tout le comprendre, comprendre ses points forts et ses contraintes. À son origine, le web était centré sur l’idée d’un système d’information universel, l’aspect graphique a volontairement été laissé de côté. Ce n’est que plus tard qu’est apparu le concept de design dans le web avec la création de ce qu’on appelle aujourd’hui le langage CSS. Dans cette vision, le designer web ne ferait que suggérer à son utilisateur l’apparence de la page au lieu d’imposer sa vision, ce que Jeremy Keith appelle le “Declarative Design”. Il y aurait donc une collaboration entre divers acteurs du web et on retrouverait cette cascade énoncée dans le nom CSS entre le browser, l’utilisateur et puis seulement l’auteur de la page dans cet ordre.

Le browser comme point de départ ?

Le conférencier nous propose quelques domaines du web dans lesquels nous pourrions appliquer cette approche et des pistes concrètes pour les mettre en œuvre. Parmi ces divers domaines, on retrouve par exemple la typographie. C’est un domaine dans lequel subsiste encore un réel manque de contrôle. Pour remédier à ce problème, Matthias Ott nous propose le concept de “Fluid Web Typography”. Ce concept consiste à échelonner progressivement la taille de la typographie en fonction de la taille de l’écran. Plusieurs autres solutions pour créer des design responsive sont abordées comme les CSS grid, différentes manières de créer des palettes de couleurs…

Pour conclure, Matthias Ott propose une approche différente du design sur le web, ce qu’il appelle le web design engineering, un point d’intersection entre le design et le développement. L’objectif serait de décider dans le browser ce qui fonctionne ou non au lieu de designer de manière statique et puis dans l’implémenter dans celui-ci.

Mon opinion

Designer à l'aveugle

Dû aux supports constamment changeant, le design web relève pour moi encore beaucoup du mystère. Cette conférence répond à autant de questions qu’elle n’en pose. Je vais essayer de développer dans les points suivants les notions qui ont éclairé ma vision ainsi que les zones de flou.

Comme l’explique Matthias Ott et comme cité précédemment, le processus créatif réside dans une conversation constante, il y a parfois des erreurs ou des “bons accidents” mais pour pouvoir s’en assurer, il faut être capable de prendre du recul. Il faut un feedback sur sa création.

Sur le web, cette boucle de feedback est brisée. La raison ? Le support. Il ne cesse d’évoluer. Tablettes, ordinateurs, téléphones de toutes tailles, comment s’assurer que le design fonctionnera sur tous ces différents appareils ? Un des piliers du design est la gestion de l’espace. Comment designer sur un espace dont on ne connaît pas réellement les limites ? Si on ne connaît pas le support sur lequel prendra forme le design, il n’est pas possible d’avoir un feedback clair.

représentation des différentes tailles d'écrans que l'on peut trouver en rose sur un fond bleu
Visuel issu de la présentation "Painting with the web - Matthias Ott"

Le web comme matériau

Le web design d’aujourd’hui ne s’adapte pas réellement à cette problématique. Nous empruntons la méthodologie du peintre. On peint le web comme si on peignait une toile fixe. Or, on le sait, cette méthodologie ne tient pas compte des particularités du web. Certains outils essaient de s’adapter à cette problématique, mais à l’heure actuelle, aucun ne semble suffisant.

Pour s’adapter à cette problématique, Matthias Ott propose une solution. Au lieu de considérer le web comme un support fixe, il faudrait le considérer comme un matériau avec lequel travailler.

Pour envisager le web comme un matériau, il faut pouvoir comprendre ce dit matériau, ses contraintes et points forts. Pour cela, le conférencier remonte aux origines du web, la raison même de pourquoi il a été créé. À l’origine, le web avait pour unique objectif d’être un système universel d’informations. Le côté esthétique était volontairement mis de côté.

Chaise en bois sur fond blanc avec une inscription pas dessus : The web as a design material
Visuel issu de la présentation "Painting with the web - Matthias Ott"

Un design collaboratif

Par la suite, le créateur du web Tim Berners-Lee s’est associé à Hakon Wium Lie pour créer ce qu’on appelle aujourd’hui le langage CSS. Le langage CSS n’a pas été inventé pour que l’auteur d’une page web puisse imposer son design mais plutôt pour le suggérer.

C’est cette notion qui est à l’origine du “C” dans CSS. Le design se fait en cascade. L’auteur du web n’a pas le monopole du design, il le partage avec le browser et l’utilisateur. Il vient seulement se placer en troisième position dans cette cascade. Je pense que c’est une notion souvent oubliée et pourtant cruciale. Le peintre, le musicien ou autre, a le contrôle total sur son œuvre. Nous, designers, devons accepter de la partager.

Le blog comme terrain d'expérimentation

Cette vision offre un champ de possibilités très large. Certaines de ces possibilités sont abordées de manière concrète lors de la conférence avec des typographies responsive en CSS ou des palettes de couleurs plus vives par exemple mais il n’y a probablement pas assez d’une seule conférence pour lister tout ce que cette nouvelle méthodologie apporte. C’est peut-être ce point-ci qui me laisse le plus sur ma faim. Il aurait été ennuyant de suivre un cours purement théorique sur toutes les techniques possibles. Il est effectivement bien plus intéressant d’ouvrir la vision sur les différentes possibilités et laisser le créateur faire ses propres recherches et ses propres choix. Elle me laisse sur cette zone de flou, elle répond à ma question initiale par une infinité de questions supplémentaires.

Pour finir, Matthias Ott aborde son opinion sur l’objectif d’un blog personnel au travers de ce prisme. J’avais pour habitude de penser que le blog personnel avait pour objectif de faire un étalage de nos capacités, que c’était un peu la meilleure pub pour un web designer. Au vu de mon niveau actuel qui est pour le moment restreint, je n’en voyais pas bien l'intérêt. À la place, le conférencier nous propose de l’envisager comme un terrain libre, comme une zone d'expérimentation.

C’est probablement ce dernier point qui me sera le plus utile. Je me trompe peut-être mais je pense que pour se permettre de designer directement en CSS, il faut un certain niveau que je ne possède pas actuellement. Comme on dit, il faut apprendre les règles pour mieux les enfreindre ensuite. Peindre le web de manière fixe me semble être une bonne première approche pour un débutant mais je garde l’idée du blog personnel comme une manière d’explorer.