Comment pimper son design tout en sobriété ?

Aujourd’hui, on parle design. Le but n’étant pas de vous donner une leçon de style car les goûts et les couleurs (ça ne se discute pas nien nien) c’est évidemment subjectif. Cet article s’adresse donc à quiconque. Que vous soyez à la pointe des tendances, artiste dans l’âme, féru d’art moderne ou de minimalisme, ou un original incompris aux idées un peu douteuses et peut-être largement dépassées. Pour illustrer la deuxième option, prenons l’exemple de Robert ayant insisté pour faire l’annonce du club des 50 ans et plus du Québec. Parce que, Robert nous l’a dis, il sait faire, mais on lui a répondu qu’il fallait déléguer pour cause de migraine inévitable. 

L’idée est, peu importe qui vous soyez et pour qu’elle organisation vous travaillez, de vous prouver qu’il est possible de faire plaisir au pôle créa tout en étant économe sur le design. Et donc, de ne vraiment pas faire comme Robert. 

Écoconception, you know ? 

Il est vrai que lorsque l’on crée un site internet, on peut être tenté d’y poser une ribambelle de couleurs, des animations à droite et à gauche et des images en veux-tu, en voilà. Le digital nous offre une panoplie de fonctionnalités séduisantes et on comprend qu’il peut être difficile de rester raisonnable. 

Il ne faut pas abuser des bonnes choses comme on dit. Au risque de voir votre prochain site ressembler à un véritable sapin de Noël, composé des boules, guirlandes et autres babioles clinquantes et multicolores que vos parents traînent depuis des générations, même si c’est la tradition et que ça fait plaisir à mamie. On vous le déconseille car cela vient souvent en contradiction avec une bonne expérience utilisateurs (et ça c’est quand même un des points les plus importants) et qu’autant d’éléments sont ultra énergivores et pas du tout écoresponsables. 

Peut-être que vous ne vous méfiez pas du digital et pourtant il est à l’origine d’environ 4% des émissions de gaz à effets de serre mondiales. L’écoconception, c’est donc, par un ensemble de pratiques, le fait de prendre en compte les enjeux environnementaux au sein de l’élaboration d’un site web. Le but générique étant de produire des sites qui consomment peu d’énergie en allant à l’essentiel. 

Et nous on est là pour vous donner 5 de ces pratiques, hyper faciles d’accès, à appliquer pour réaliser un site web écoconçu au design quand même stylé. Et ouais.

1. Des typos écolos

Le premier conseil va vous sembler évident. Suffisamment pour que vous pussiez dire haut et fort “ah celui-là je le savais” en regardant Sophie assise au bureau de droite d’un air assuré. 

La règle est simple, on ne sélectionne pas plus de 3 polices d’écriture différentes. Pour les plus consciencieux, il est tout à fait envisageable de s’arrêter à 2 typos. Prenez-en une un peu plus originale et marquante pour les titres et optez pour une typo parfaitement lisible pour le corps du texte. Vous avez, de ce fait, moins de risques qu’elles ne s’harmonisent pas entre elles, ce qui pourrait nuire à votre design. 

Pour aller encore plus loin, vous pouvez choisir d’opter pour des typos systèmes, déjà installées sur la plupart des ordinateurs : Helvetica, Arial et Courier, pour ne citer qu’elles. 

On aime bien illustrer nos propos ici, alors on vous propose de découvrir cet exemple au design simple et réussi. Sustainable web design est une plateforme pédagogique sur la conception digitale durable, c’est une très bonne source d’informations sur le sujet si vous êtes tentés d’en savoir plus. Deux typographies différentes ont été utilisées et on retrouve d’ailleurs notre chère Courier.

2. Bas en couleurs

Les couleurs ici on adore ça, explorer nos différentes catégories de contenus vous le prouvera. Cependant, les couleurs ont quand même une légère empreinte carbone, qui dans une démarche d’éco-conception optimisée nous emmènera à en sélectionner un nombre limité. En effet, dans la même logique que le point précédent, plus on est gourmand, moins on est économe en énergie. 

Et pour le coup, dans notre quête d’un design sobre mais élégant, ça nous arrange bien. Créer une charte graphique peut être un véritable casse-tête, et le conseil à appliquer généralement est de se limiter à trois couleurs différentes, en plus du noir et du blanc. Le blanc comme couleur de fond reste un basique, il assure lisibilité et accessibilité. 

Le studio earthly made accompagne ses clients dans l’élaboration de stratégies digitales éco-responsables. Leur site web ne dispose que de trois couleurs, on vous laisse activer le bouton play pour découvrir un design plein de fraicheur et de modernité.

3. Des images imaginaires

Là, on rentre sur du lourd. Les images ça pèse et l’écoconception ne les aime pas beaucoup, elles sont très énergivores et ont une large influence sur l’empreinte carbone de votre site.  

C’est là que ça devient intéressant, il faut ruser pour réussir à créer une direction artistique sympa qui fonctionne sans visuel. Chez la boucle Média, nous avons rencontré cette contrainte car beaucoup de nos articles ne sont pas forcément évidents à illustrer. Typiquement “Les 7 caractéristiques d’un cahier des charges réussi”, euh là ça coince. On n’avait pas envie de prendre un gars shutterstock en train de lire un document ou autre. Donc le brief était clair, faire quelque chose au design qui nous plaît grâce aux typographies, aux couleurs et à la structure de nos pages. Du coup ça va on est contents.

Il y a aussi certaines techniques qui permettent d’user de visuels à fond en les compressant par exemple et en utilisant des images basse définition utilisant peu de pixels. Oui nous aussi on tique un peu en imaginant le potentiel résultat mais regardez par vous même l’exemple étonnant du site solar.lowtechmagazine.com.

4. Un poil d’animations 

La logique vous l’avez comprise, on n’en abuse pas et on ajoute des animations si leur besoin est réellement justifié, pour améliorer l’expérience du site notamment. 

Elles alourdissent les pages et multiplient les appels vers les serveurs, mais elles peuvent en plus de ça réellement gêner la lecture d’une page. Pensez à vos exposés de collège où vous découvriez powerpoint et ses pouvoirs magiques. Il n’était pas rare de voir des présentations débordantes de balayages, zoom et autres rotations. Qu’on se le dise maintenant ce n’était pas le plus élégant. 

Yuba c’est un répertoire d’adresses écoresponsables à Paris. Au menu : un design coloré, orné d’illustrations et de légères animations.

5. Un design qui shine

De manière générale, vouloir construire un design avec moins d’assets c’est se diriger vers la sobriété et le minimalisme. En faisant des choix simples, il est moins probable de s’éparpiller dans la direction artistique et d’arriver au résultat sapin de Noël. L’avantage d’un site éco-conçu est de faciliter la navigation de l’utilisateur par une structure simple et ça bah on aime bien.  

Pendant nos petites recherches pour l’écriture de cet article, on est tombé sur le site Empreinte de Castor&Pollux et là c’est un grand WOW. On est parfaitement dans le thème car le but du site est de présenter les grands principes de l’écoconception, facilitant son intégration. Avec ce site web, l’agence nous prouve totalement qu’il est possible de créer une plateforme à la direction artistique hyper réussie, tout en ayant une empreinte carbone la plus basse possible. Les choix stylistiques nous ont impressionné, chapeau bas le site est très beau.

Mention spéciale pour le menu aux touches de clavier colorées faisant clairement leur effet en plus de faciliter l’accessibilité du site. On a aussi adoré leur ton éditorial, franchement allez voir avec vos yeux. 

Et parce qu’ils n’ont pas fait les choses à moitié, le site dispose d’un testeur d’url en bas de page pour mesurer l’empreinte C02 du vôtre. 

Ça y est on arrive au bout de notre balade sur l’internet écoconçu. Enfin, de notre petite sélection qui on l’espère vous aura convaincu que l’écoconception n’était pas un frein à la création. Petite pensée pour Robert, un peu bougon, qui a délégué à son petit-fils Martin la mission de retaper l’annonce du club des 50 ans et plus. On fait confiance à Martin pour la pimper tout en sobriété, même si de toute façon il est difficile de faire moins sobre.