Skeuomorphic Web Design - Définition  

Accueil > lettre S > Skeuomorphic Web Design

Skeuomorphic Web Design

Le skeuomorphic web design (traduction : design web skeuomorphique) est un type de web design qui reproduit des éléments graphiques présent de manière esthétique mais qui sont présent dans l'objet d'origine. Autrement dit, le design sur un support papier ou sur un écran ne peut normalement pas avoir d'effets spécifiques (texture ou 3D) mais il les représente tout de même.

Poussé à son maximum, un design skeuomophique est une représentation très familière d'éléments que l'ont retrouve dans le monde physique.

Exemples

Exemple : application web d'une calculatrice

Pour concevoir un design skeuomorphique d'une application web d'une calculatrice, il est par exemple possible d'utiliser un design qui place les boutons et le résultat à la même position que sur une calculatrice "réelle" et avec la même représentation. Il est aussi possible d'afficher des boutons qui semblent être en 3D et d'afficher le résultat sur un faux écran avec une police d'écriture adaptée.

Exemple : application "bloc note"

Un design skeuomorphique d'un logiciel ou d'une application "bloc note" peut par exemple utiliser les concepts suivants :

  • Représentation d'une feuille de papier et de spirale
  • Police d'écriture qui ressemble à une écriture manuscrite
  • Coin corné pour tourner les pages

Avantages et inconvénients

Avantages

  • Design très engageant qui améliore en général l'expérience utilisateur
  • Design théoriquement simple à comprendre puisque ça reproduit des éléments du monde réel qui sont connus par le plus grand nombre
  • Démontre que le design n'a pas été conçu au hasard

Inconvénients

  • Parfois ça cache des problèmes d'ergonomie (bouton peu visible, trop petit, mal placé...)
  • En réalité l'interface ne fait preuve que de peu de créativité et d'originalité
  • Relativement long et compliqué à concevoir en terme de conception graphique
  • Lourd à charger s'il s'agit d'une application web puisqu'il faut télécharger plus d'image et d'effet spécifique.
Partager :
Faire un lien :



Glossaire du webmaster