Faire du design adaptatif

Qu’est-ce que c’est ?

La notion de conception adaptative (ou design responsive) est arrivée en force avec l’arrivée des smartphones en 2010 : comment produire des sites aussi élégants et fonctionnels du petit écran des mobiles et à l’écran géant d’un designer ?

Pourtant, on peut observer aussi de l’adaptatif dans les déclinaisons des logos : pour en faire un outil robuste, il faut en prévoir des déclinaisons adaptées à des contextes d’utilisation variés : en monochrome, en très petit, sur fond bigaré… Ce qui amène parfois, au delà des couleurs, à concevoir des déclinaisons légèrement différentes pour différentes échelles d’affichage, avec ou sans texte, avec ou sans la baseline…

Comment je m’y prends ?

Je me réfère à la définition d’une identité visuelle :

Ensemble d’éléments visuels cohérents qui permettent d’identifier une même entité au travers des différents médias de communication qu’elle émet.

Cette notion d’ensemble d’éléments a une place centrale dans mon approche. Ce que je cherche à faire, c’est à définir un petit nombre d’outils visuels à combiner pour la mise en page des supports. Ces éléments peuvent tenir de la composition, de la décoration, des contenus : ce sont des typographies, des couleurs, mais aussi un jeu d’illustrations ou de visuels à mobiliser, des principes de mise en page…

Des exemples ?

Vocal 26

Voilà les outils que j’ai sélectionnés pour exprimer l’identité de cette maison de production de spectacle fondée en 1994 autour de la production du groupe vocal dromois (26) Evasion.
Vocal 26 aujourd’hui, c’est 25 ans d’autogestion, de propositions artistiques d’une qualité reconnue dans le monde de la chanson de parole, beaucoup de professionnalisme.

La Copro des possibles

Pour cette co-création réalisée avec Stéphanie Castan des Hominidées, voici les outils graphiques sélectionnés et élaborés ensemble :

Et voici un aperçu des déclinaisons responsive du site web :

Votre 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 )

Photo Google

Vous commentez à l’aide de votre compte Google. 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 )

Connexion à %s