Aller au contenu

Influence du Bauhaus dans le digital par l’exemple

Par Guillaume Abel

Mini-conf (15 mn) :
Langue :
Français
CC

Liens connexes

Le sujet

Né en Allemagne en 1923, le Bauhaus est un courant qui toucha, l’architecture et le design, mais également la photographie, le costume et la danse.

L’un des objectifs de ce courant était d’unifier l’art, l’artisanat et la technologie. L’usage de la machine est considéré comme positive. Le design industriel et produit en sont donc des composantes importantes.

Après avoir inspiré certain succès en terme de design produit (Apple), beaucoup notent une tendance de fond dans les expériences digitales qui reflètent plusieurs principes et valeurs du design Bauhaus.

Dans cette intervention, il sera peu question de théorie sur le design Bauhaus, mais plutôt d'illustrer son influence par une série d’exemples de sites web, d'applications mobiles et tablettes.

Présenté par

Transcription

(Transcription par Tanguy Lohéac. Merci à lui)

Bonjour à tous. Je pensais avoir pris un sujet pas trop passionnant.
Mais je vois que je me suis trompé un peu.

Donc Guillaume Abel. Je suis designer chez Ekino.

Je vais vous parler de l'influence du Bauhaus dans le design digital.

Pour commencer j'ai fait un petit historique de qu’est-ce que le Bauhaus.
Le Bauhaus ce qu'il faut savoir c'est que ce n'est pas forcément un cours, pardon, pas un cours, mais un mouvement artistique.
C'est avant tout une école avec le statut des arts et métiers qui a été créée en 1919 à Weimar dans un contexte un peu particulier puisque l'Allemagne venait de ressortir de la première guerre mondiale.
L'Europe venait de ressortir de la première guerre mondiale.
Et il y avait nécessité de former de nouvelles élites qui allaient distribuer ou faire de l'architecture.
Elle a été fermée en 1933 à Berlin par le régime nazi.
Bauhaus étymologiquement ça veut dire quoi ? Bau ça veut dire bâtiment en construction. Et haus pour maison.
Et donc le Bauhaus : la maison du bâtir, la maison de la construction.

Donc, qu'est-ce qu'il y avait derrière ?

La volonté de mixer plusieurs courants artistiques et aussi de l'artisanat.
De l’artisanat, comme je disais, de l'architecture, de la typographie, le design, le théâtre, peinture, sculpture, et donc de créer un lien entre ces deux mondes qui à l'époque étaient totalement hermétiques.
Et donc casser un petit peu l'élitisme qu'il y avait côté artistique pour les tirer vers l'artisanat, et que l'artisanat aille plus vers le monde artistique.
Là je vous ai juste mis les 3 bâtiments du Bauhaus. Ils ont donc commencé à Weimar. Ils ont déménagé ensuite à Dessau.
Pour terminer à Berlin. Ce bâtiment est emblématique, puisque vous voyez que pour un bâtiment qui a été fait en 1924, il a des lignes très épurées et très modernes.
Et c'est un petit peu justement les premiers fondamentaux qu'on va avoir sur le Bauhaus.
Le Bauhaus ça a été aussi 3 directeurs qui ont apporté leur pierre à l'édifice, et aussi à chacun leur philosophie.
Il y a eu donc le fondateur Walter Gropius dont un des éléments qui était dans le manifeste du Bauhaus c'était : le but de toute activité créatrice est l'architecture.
Donc, cette pluridisciplinarité il y avait autour du Bauhaus avait comme but de pousser vers l'architecture.
Un autre des directeurs était Hannes Meyer qui disait lui : « les besoins du peuple plutôt que les besoins du luxe. »
C'est-à-dire que toutes les productions qui pouvaient sortir du Bauhaus devaient avoir un objectif d'être diffusées auprès du Peuple.
Et enfin Ludwig Mies Van der Rohe lui, on va dire, c’est l’une des phrases qui a été le plus retenue dans le monde du desing, et souvent reprise c’est : « less is more » moins c’est plus.

Et donc il y a eu vraiment, comment dire, une émulsion au niveau de la créativité sur le design d’objets, de l’architecture.

Avec différents exemples ici.

Cette poterie par exemple, euh pardon pas poterie puisque du coup c'est une théière.
Une théière en métal qui a eu beaucoup de succès, qui est un des premiers objets qui a été vendu par l'école et qui a eu énormément de succès.

On peut voir aussi un petit peu donc ce qui est ameublement.

D'autres exemples ici. Avec par exemple, moi j'ai eu des années cette chaise-là chez moi.
Je savais pas du tout que c'était issu du design Bauhaus.
Et après les caractéristiques du design de ces produits qui viennent des objets, c'est d'avoir un but d'industrialisation.
À l'époque, c'est pour ça qu'il y avait ce besoin d'avoir des artisans, à l'époque les notions d'industrialisation et de production de masse étaient pas encore vraiment… ne faisaient pas partie des normes.

Et c'est là où ils ont inventé, on peut dire, le design industriel moderne.

Encore quelques exemples ici au niveau de l'architecture.

Donc là j'ai parlé justement à l'intérieur de l'école de Dessau.
Des maisons de maître. Donc ils ont construit l'école, mais aussi autour, les maisons des enseignants qui étaient appelés des maîtres. J'vais pas parler de comment était organisée l'école. Ça va être un peu long sinon.
Et on a aussi ici une autre façade du bâtiment Bauhaus que vous voyez. Une construction assez carrée, des lignes, des effets de, pardon, de grille.
Et je vais prendre un dernier exemple de production de l'époque sur du travail sur le design graphique et sur la typographie.
Et c'est vraiment ces points-là qui ont plutôt influencé sur le design digital.
J'vais y revenir après.

Donc justement quelques exemples, enfin pas exemples, mais influences du Bauhaus.

"less is more", comme je le disais, c'est on va dire, qui a vraiment influencé beaucoup le design moderne, le design graphique moderne.

Et pour illustrer le propos « form follows function ».
Excusez-moi hein.

Sur ce point-là c'est pas quelque chose qui est issu directement du Bauhaus.
Mais c'était un courant dans l'architecture qui est venu se greffer aussi au Bauhaus.
Et le Bauhaus on va dire a été l'école qui a beaucoup plus poussé cette notion comme quoi la fonction d'un objet et de n'importe quel type de construction doit suivre sa forme.
Donc, à la limite c'est une illustration de vraiment différentes philosophies au niveau architecture.

On a le Seagram Building qui a été construit par le dernier directeur, donc Van der Rohe à New-York (ou Chicago ?).
Chicago je crois.
Et à côté la Sagrada Familia donc.
Certes, c'est deux exemples où on a une architecture qui est plus du monde religieux et une autre qui est plus du monde fonctionnel, mais qui montrent que l'essentiel du Bauhaus se dégageait de tout ce qui est ornement, tout ce qui est accessoire dans par exemple l'architecture.
Au niveau de l'influence, suite au démantèlement du Bauhaus en 1933, beaucoup de maîtres, beaucoup d'enseignants sont partis aux Etats-Unis et ont fondé différentes écoles.
Comme par exemple le Black Mountain College qui a produit beaucoup de grands noms dans l'architecture. L'IIT Institut of Design donc c'est l'Illinois Institut of Technology and Design.
De la même manière, il y a aussi un des enseignants qui est parti là-bas et qui a aussi monté toute une école d'architecture, mais aussi de design produit.

Et aussi des expériences sur la typographie.

Et enfin, dans la continuité du Bauhaus en Allemagne, l'Ecole Supérieur de Design d’Ulm.
Et je vais illustrer justement l'héritage suite à cette école par Dieter Rams qui est issu de cette école, héritage du Bauhaus, et qui travaillait chez Braun.
En quoi c'est important ?
Il était designer produit chez Braun.
Et ses produits ont beaucoup inspiré Apple, donc dans la construction.
On a un poste radio, par exemple, sur la droite, et à gauche l'Ipod.
Ou encore, je ne sais plus exactement ce que c’est, un poste radio et à côté, c'est quoi ? C'est un Mac Pro.
Et enfin, un haut-parleur et à côté, l'Imac.
Dans sa version la plus récente.

Donc, quels sont, on va dire, les différents éléments qu'on peut retenir du design Bauhaus ?

Symétrie : vous avez vu le bâtiment qui est construit assez carré.
Angulaire : donc, pareil sur l'illustration.
Même sur le travail du design graphique, vous avez vu qu'il y a beaucoup de travail sur l'angle.
Ça peut être abstrait aussi. Les constructions typographiques que vous avez vues.
Ou même certains objets.
On ne comprend pas tout de suite exactement à quoi ça pourrait servir.
Mais c'est une notion d'abstraction.
Consistance : consistance ? ouais.
Unité. c'est donc quelque chose qui sont assez uniformes.
Organisation. Je vais aller un peu plus vite parce que bon...
Economie, subtilité, continuité et régularité.

Ces éléments-là, dans les exemples que je vais vous montrer, j'essaie de les faire ressortir dans certains exemples de design digital.

Un premier exemple qui est Gmail.
Ils ont fait une refonte il y a environ un an, en novembre.
L'ancien Gmail ressemblait à ça. Donc déjà quelque chose on va dire, assez épuré.
Mais ils ont encore réussi à rendre les choses encore plus légères et encore plus épurées, en faisant un travail à la fois sur l'espacement des tableaux,
sur des boutons d'action qui sont très très clairement modélisés,
un jeu de couleurs totalement différent,
et des boutons qui ressemblent un peu moins à des boutons d'applications web, on va dire.
Donc quelque chose d'un peu plus...
mais ça c'est pour le web.
Pour le web il y aura des tonnes et des tonnes d'exemples sur le web.

Ce que je veux prendre comme autres exemples c'est plutôt vraiment des applications mobiles où on a une notion d'interactivité un peu plus forte.

Donc par exemple Flipboard. J'sais pas si vous connaissez Flipboard.
Mais c'est un agrégateur de flux RSS qui vous permet d'avoir une expérience de lecture différente.
Donc là par exemple on a la homepage avec une image en plein écran,
des typographies très très claires.
Et ensuite, pour les différents éléments de vos flux RSS, ils sont découpés en différentes grilles.
Et vous accédez à vos contenus en tapant dessus.
Et après en tournant des pages. Comme si c'était vraiment un livre.
Donc là j'ai réussi à placer un chat [rire salle].
Et ce qui est intéressant, c'est que le contenu et l'article est dénué de tout ce qui est feuille de style CSS.
Il est formaté pour avoir une expérience de lecture uniforme dans chaque article que vous allez regarder.

Après je vais prendre d'autres exemples en partant d'un type d'applications.

Donc gestionnaire de tâches. Donc voyez des gestionnaires de tâches.
J'ai fait quelques screenshots pour montrer à quoi ressemblent généralement les gestionnaires de tâches sur l'Apple Store et sur l'Iphone.
Donc, des choses à cocher,
des cases à cocher. C'est un gestionnaire de tâches.
Pour créer une nouvelle tâche, je passe par différents menus pour taper après le nom
ou ce genre de choses.
Et, pour les valider, j'appuie sur la coche.
Et hop ! Elle disparaît.

Il y a une application qui s'appelle Clear qui a revu vraiment de manière ultra simplifiée comment je vais pouvoir créer des tâches et comment je vais pouvoir les gérer.
Donc, là j'ai illustré les différents types d'interactions qu'on peut avoir.
Pour créer, par exemple, vous avez une liste de tâches qui sont classées par ordre de couleurs.
Donc, plus haut plus important.
Et plus bas, moins important.
Pour créer une nouvelle tâche vous glissez le doigt vers le bas.
Donc, du coup, vous recréez un nouvel item.
Pour pouvoir valider un item, vous glissez le doigt sur une tâche vers la droite.
Si vous la supprimez, vous glissez sur la gauche.
Vous voulez insérer ou ouvrir des groupes de listes, faut faire un pinch.
Donc le pinch c'est serrer, pincer des doigts sur l'écran.
Vous voulez insérer une liste entre deux tâches, vous faites l'inverse d'un pinch.
C'est quoi déjà ? Pinch appart, très bien

Sur les applications météo :
de la même manière j'ai pris l'exemple de l'application météo de base qui est sur l'Iphone, et une autre application météo qui s'appelle MeteoGroup, je crois.
Et de la même manière, comment en enlevant tout ce qui est, on va dire, fioritures, on peut arriver à une application très très simple et qui justement projette, met en avant tout ce qui est interaction avec l'objet.
Il y a Solar. Donc Solar c'est une application météo.
Avec juste la température, normal, les dates, ce sont deux choses qui sont obligatoires, on peut pas passer à côté.
Par contre ce qui est intéressant c'est qu'au lieu d'avoir des petites icônes qui nous montrent quel est le temps, ou il y a une modification de température ici, j'vous montre ici d'autres, ici vous allez avoir le temps qu'il va faire, la température ici.
Et ce qui est intéressant c'est les interactions qu'il y a où sur 24 heures je peux glisser le doigt vers le haut.
Et je vais avoir une évolution des couleurs du haut et des couleurs du bas, en dégradé,
qui va me montrer : ben là il va faire nuit.
Mais là je vois qu'il va faire froid.
De la même manière, si je glisse vers le bas, autre interaction, je vais voir le temps à 3 jours +.
Ou encore, si je glisse le doigt vers le côté, je vais voir les autres villes.
Et je peux rajouter. Et de la même manière, j'ai un pinch pour pouvoir voir les différentes villes que je peux avoir.

Un autre exemple, un peu plus complexe.

Donc, à quoi ressemblent des samplers. Donc des logiciels qui permettent de faire de la musique avec des sons préenregistrés sur votre Iphone ou sur tablette d'ailleurs.
Donc on voit, c'est quelque chose qui est pas simple.
C'est des choses qui sont assez complexes où là je vais avoir les différents temps dans mon interface,
des claviers qui peuvent être un peu complexes à utiliser aussi,
des boutons qui permettent un petit peu de monter et de descendre les différentes phases d'attaque.
Donc c'est des choses qui sont sur la musique, mais des effets sonores ou on reproduit en fait des éléments qui existent dans la vraie vie.
Donc par exemple des tables de mixage. Ça ressemble beaucoup à ce genre d'éléments.
Et c'est là où vraiment le Bauhaus dans le digital design peut apporter des choses assez intéressantes.
Puisque là, ce qu'on appelle ces interfaces qui reprennent le réel c'est ce qu'on appelle les interfaces skew morphists.
Et comment pour une interface de sampler on peut se dégager de ce skew morpism.
Donc il y a un logiciel qui s'appelle Figure de Propellerhead qui est un peu connu dans le monde de la musique assistée par ordinateur.
Et eux ils ont proposé quelque chose de très simple comme ça.
Donc, je suis d'accord, une vidéo serait plus parlante, je vais essayer de vous expliquer le fonctionnement.
Et en fait, quand par exemple je fais un play, je vais avoir ces petits cercles qui vont tourner.
Et en fait ça c'est les différents temps.
Donc par exemple là je sais que, je sais plus, huit temps, je vais avoir 4 fois 4 boums.
Ça c'est un rythme, c'est un boum.
Ça on va avoir par exemple du clap ou ce genre d choses.
Et donc du coup, voilà l'interface totalement déroulée.
On va avoir aussi un style graphique qui est très proche...
J'sais pas si vous vous souvenez de ce que j'vous avais montré en termes de design graphique ?
Au niveau code couleur, au niveau interface et au niveau design graphique, on a quelque chose qui est très très similaire et très fort par rapport au Bauhaus.
Et là on a quelque chose qui peut paraître abstrait.
Mais, encore une fois une vidéo est plus parlante. Mais lorsqu'on fait un play, on voit les éléments qui vont tourner.
On va pouvoir jouer tout de suite et tout de suite s'approprier le logiciel.
Et du coup on a quelque chose qui... less is more [sourire].
C'est-à-dire qui est vraiment très très simple, qui prend toute sa logique lorsqu'on commence à l'utiliser.

Un autre exemple, qui à mon avis, et j'l'ai mis en dernier et je pense que certains y ont déjà pensé,

C'est Windows 8.

Là on assiste en ce moment, pour la prochaine sortie de Windows,
Ils ont carrément tout modifié par rapport au paradigme du bureau, de l'icône, euh pardon, oui de l'icône, du pointeur de souris.
Et par exemple sur tous les bureaux on a une corbeille.
Ils se sont totalement... [visiblement rappelé à l'ordre sur le temps dépassé]
Sans déconner ?
Déjà la fin ?! [sourires dans la salle]
Noooon !
OK. Bah Windows 8 c'est bien ! Voilà ! [rires de la salle + applaudissements]
Allez-y !
J'ai pas du tout vu.
Et puis euh, la conclusion euh, soit vous venez m'voir, soit j'ai pas de question.
C'est très bien, c'est pas grave.
2, 3 mots non ?
Non. Désolé hein. J'suis vraiment désolé.
Juste rapidement. Ce qui est intéressant dans l'héritage qui vient du design Bauhaus c'est la pluridisciplinarité.
On a vu qu'on a rassemblé des gens qui étaient d'horizons différents pour travailler ensemble sur un côté artistique de l'architecture.
Et dans le design digital on voit la même chose : des codeurs qui vont travailler avec des graphistes.
Et bon, de l'artisanat à l'industrie, le web c'est un peu de l'artisanat et encore un petit peu.
Même si on glisse vraiment de plus en plus vers de l'industrialisation.
Et enfin, on est toujours tourné vers l'humanisme.
Donc les valeurs du Bauhaus étaient très humanistes.
À l'époque c'qui a pas fait le... on va dire c'était pas très cool vis-à-vis des nazis.
Et du coup, maintenant on reprend un peu ces valeurs de mettre au centre de la réflexion de nos produits digital les utilisateurs.

Voilà ! J'ai dépassé de combien ?
OK [rire].
[applaudissements]
Merci !