Pourquoi tu mets autant de blanc dans tes maquettes ?

“Il y a trop d’espace, le texte est trop gros, on pourrait tout réduire pour mettre plus de contenu”…
Sans revenir sur les apports du flat design (d’autres l’ont déjà fait avec brio, et puis c’est so 2013 tout ça), ni sur le concept de ligne de flottaison, on notera juste que la majorité des sites produits depuis 2012 ressemble à ça :

 

site-épuré
La recette du succès en 7 étapes : un fond photo flou et onirique + une typo custom + peu de texte et des mots audacieux + des couleurs vives + des pictos de Font Awesome + un contenu qui se dévoile sur du long scrolling = c’est une caricature, calmez-vous.

 

Outre l’effet de mode (bouh), et les raisons techniques légitimes (responsive, légèreté, accessibilité), l’engouement des designers pour ce style de site s’explique notamment…

Pour proposer aux utilisateurs une identité forte de marque

Jusqu’à récemment, on considérait que l’identité visuelle d’une marque ne s’exprimait que dans la vraie vie : déco de boutique, pubs 4×3, spots TV. Tous ces investissements sont du “branding”, de la notoriété. Ils sont mesurés par des indicateurs à l’ancienne (comme le GRP) et gérés par des métiers très sérieux (vidéo de 2002, soyez indulgents).

Internet, historiquement, a davantage été le lieu de la prouesse technique, du marketing à la performance, de l’analyse des données. Le design, qui est un des vecteurs les plus importants d’une image de marque, a souvent été négligé au profit de l’efficacité commerciale, comme le montre cette étude de l’IAB (PDF).

Pour caricaturer, dans l’ancien internet, l’image de marque c’était surtout des bannières qui clignotent, et des sites de e-commerce aux structures visuelles dictées par la technique + une couche de gros boutons “ajouter au panier”.

image-de-marque
Aujourd’hui, grâce à la professionnalisation des métiers du web (l’avènement de l’analyse des données, ce fameux “big data” + le data-marketing + l’UX), le design peut enfin concentrer ses efforts pour donner à l’utilisateur la sensation de vivre une “expérience de marque”. On comprend de mieux en mieux que le design n’est pas l’ennemi du marketing (merci Apple), ni de la technique (merci le responsive). L’image de marque, et donc le design, sont présents depuis la source du trafic (médias traditionnels, réseaux sociaux) jusqu’à l’achat sur site ou en magasin.

Pour communiquer une image de marque, on a besoin de place. On doit accueillir le visiteur, installer les codes de reconnaissance de la marque (la charte : typo, couleurs, style photographique, traitement iconographique), offrir les fonctionnalités du site, livrer le discours commercial. On construit donc un parcours visuel qui, par ces outils, mène l’utilisateur aux actions que l’on souhaite lui faire faire (se renseigner, acheter, contribuer…).

Les sites évoluent : là où on avait un site “vitrine” (ou “corporate”) d’un côté et un site e-commerce de l’autre, les intentions se rejoignent. La marque donne à voir un univers global. Le design traduit une “personnalité de marque”  à travers des codes graphiques. Ces codes portent un message, tout autant qu’un bloc de texte.

sarenza

L’impression faite sur le visiteur est meilleure que si l’on avait tout mis tout serré en haut. Il est détendu grâce à la sensation d’espace, et pas oppressé par trop d’informations à digérer d’un coup. La dimension presque cinématographique des grands visuels fait qu’on lui raconte une histoire, pour l’immerger dans l’univers, et le mettre davantage en confiance avec la marque. On favorise un climat plus propice à l’objectif fixé, grâce aux codes graphiques. Le blanc, le vide, l’espace ne sont pas une absence de signal. Ils servent, au contraire, à positionner et mettre en valeur le message.

Terminons sur le contre-exemple préféré des novices : “mais LeBonCoin c’est hyper moche, tout serré, et ça cartonne !”
Oui, mais c’est exprès. LeBonCoin reprend les codes du discount (peu ou pas de packaging, impression de vrac, besoin de fouiller pour trouver) justement pour donner une image cheap, de bonnes affaires, d’économie potentielle réalisée. C’est aussi une stratégie d’image de marque, avec un positionnement très particulier. Qui pourra vous convenir si vous souhaitez véhiculer un message discount. Sinon, prenez l’espace nécessaire pour raconter votre marque.

Pourquoi de Gildas.
Proposez vos propres pourquoi(s) ici

 

3 commentaires

  • Tommy

    Et oui ! MAIS, la caricature sur les sites à la mode d’aujourd’hui n’est pas exagérée malheureusement… J’ai un peu l’impression que tous les sites tendent à se ressembler de plus en plus non seulement sur la structure, mais également sur les codes graphiques utilisés :-/

    • Les Pourquois Du Design

      Oui c’est vrai, mais ça a toujours été le cas, pour toutes les tendances, flat ou pas (regarde le bouton “glossy” : en 2008, si tu ne faisais pas ce style de bouton, c’était dur de le défendre).

      Les tendances ont pour mérite de créer des repères visuels d’affordance pour l’utilisateur (“ah tiens, c’est un picto + une couleur, je pense que je peux cliquer là”). Et la mécanique est darwiniste : si une meilleure solution émerge, elle s’imposera naturellement, en chassant l’autre.

  • West

    Très bien expliqué !
    J’ai particulièrement apprécié les 2 grands derniers paragraphes, avec le contre-exemple pour les sceptiques :-)

    Bon, mais aujourd’hui, grâce à la “professionnalisation des métiers du web”, pourquoi ne peux t-on pas anticiper les design de demain ?
    Parceque l’on est déjà au maximum des possibilités des techno actuelles ?
    Ou bien parceque les marginaux inovateurs sont mis dans un coin et l’on suit uniquement les sites des grosses entreprises ou ceux qui font le buzz ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Proposer un pourquoi