Esthétique de l’interface

Naissance d’une esthétique de l’interface

By Alix Cerezal Orellana

HTML brut
Typographie système
Liens bleus soulignés
Tableaux
Frames

Débuts du web (1990–1995) :
le Web 1.0

Multiple Choice

Quel était le principal type de contenu utilisé sur les sites Web 1.0 ?

• Texte

• Image

• GIF

• Vidéo

Open Ended

Quelle caractéristique visuelle était typique des liens sur ces sites ?

GIF animés
Boutons 3D
Applets Java
Flash
Pixel art

Le web graphique (1995–2003)

Open Ended

Quel outil a révolutionné le design interactif à la fin des années 1990 ?

Multiple Choice

Quel était un inconvénient majeur de ces sites “graphiques” ?

• Polices d'écriture natives uniquement

• Navigation peu intuitive / Accessibilité faible

• Beaucoup trop stylé

• Pas assez de choix de couleurs

Skeuomorphisme
Textures réalistes
Ombres portées
Reliefs
Apple design

L’ère du skeuomorphisme (2007–2012)

Multiple Choice

Que signifie le terme skeuomorphisme ?

• Surfaces texturées

• Imitation de l'espace et des étoiles

• Imitation des objets physiques dans une interface

• Design épuré et mat

Word Cloud

Qu'évoque le skeuomorphisme ?

Flat design
Minimalisme
Pictogrammes
Sans-serif
Couleurs franches

Le flat design (2012–2017)

Multiple Select

De quels courants artistiques s'inspire ce style ?

• Art Déco

• Bauhaus

• Swiss Style

• Brutalisme

Multiple Choice

Pourquoi a-t-il été adopté massivement ?

• Pour améliorer la lisibilité et la rapidité de chargement

• Pour faciliter la lecture

• Pour être plus facilement imprimable

• Parce qu'il demande moins de travail de design

Material design
Ombres douces
Hiérarchie visuelle
Responsive

Le material design & le flat 2.0 (2014–2020)

Open Ended

Qui est à l’origine du Material Design ?

Multiple Select

Quelle innovation ajoute-t-il au flat design ?

• Profondeur

• Ombres douces

• Animations logiques

• Brillance

Néomorphisme
Soft shadows
Effets d’embossage
Esthétique douce

Le néomorphisme (ou soft UI) (2020–2022)

Multiple Choice

Quel effet visuel caractérise les boutons en neumorphisme ?

• Boutons plats

• Boutons dessinés

• Boutons embossés

• Boutons contrastés

Open Ended

Quelle est une critique fréquente de ce style ?

Web brutalism
UI raw
Glitch
Anti-UX
Typographies massives

Brutalisme numérique & anti-design (depuis 2017)

Multiple Choice

Pourquoi certains critiques parlent d’“anti-UX” ?

• Préférence pour l'UI

• Ergonomie volontairement ignorée

• Utilisation des IA

• Haine des mots en x

Multiple Select

À quoi cette esthétique fait-elle souvent référence ?

• Cottagecore

• Glitch art

• Mouvement punk

• Early web

WebGL
Parallax
Storytelling interactif
Scrollytelling
Réalité augmentée

Interfaces immersives et narratives
(depuis ~2020)

Open Ended

Quelle technologie permet l’ajout d’éléments 3D dans une interface web ?

Multiple Choice

Quel effet est utilisé pour raconter une histoire par le scroll ?

• Superscrollifragilisticexpialidocious

• Doom Scrolling

• Scrollifaction

• Scrollytelling