Expérimentations conceptuelles et physiques

Je souhaiterais vous faire découvrir aujourd’hui deux sites expérimentaux très… expérimentaux (vous comprendrez). Soit parce qu’ils cassent complètement les codes de conception, soit parce qu’ils adoptent une approche graphique disruptive… soit les deux !

Nous avons donc en premier lieu le mini-site Design and the Elastic Mind du MoMA qui se présente sous la forme d’une mosaïque de concepts rangés par catégories (dans des colonnes). Les concepts sont liés entre eux et lorsque vous cliquez sur une entrée, les liens vers les autres concepts s’affichent. De plus la page est animée par des courbes qui passent sur l’écran pour vous faire découvrir des concepts de façon aléatoire :

elasticmind

Cette interface est en fait censée représenter la métaphore du tag et de son mode de navigation par rebond. (Merci à Thierry pour le lien)

Autre exemple avec le site de Nuuro, un groupe de musique électro où les différents contenus sont représentés par des éléments qui tombent et s’entrechoquent au sein d’une même page :

nuuro1

Il est possible de « réorganiser » la page en faisant du drag&drop avec les différents éléments et on peut même écouter les albums en cliquant dessus (ce sont les galettes noires), les petites boules de couleur s’animent alors en fonction du tempo :

nuuro2

Il y a un côté hypnotique pour cette page où on ne se lasse pas de voir les éléments rebondir et se comporter selon les lois de la physique. (via Hebiflux)

Rien à redire, ces deux exemples sont une très bonne source d’inspiration pour une utilisation disruptive des interfaces riches. Vous aimez ?

3 commentaires sur “Expérimentations conceptuelles et physiques

  1. L’interface de Nuuro est géniale. C’est chaotique mais très bien pensé, on n’est jamais vraiment perdu. Un bel exemple de « bordel ergonomique », j’applaudis !

  2. J’aurai bien aimé sur l’interface de Design and the Elastic Mind le drag and drop dans la page. Plus facile pour naviguer ^^
    Sinon, c’est vraiment super :D

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s