Cas client : mon design pour la page Ulule d’Oniriq

Cas client : mon design pour la page Ulule d’Oniriq

Cas client : mon design pour la page Ulule d’Oniriq 2560 1905 Nina Gil-Martinez

Il y a quelques temps, Rodolphe Rosier, CEO de la start-up Oniriq, m’a contacté car il était à la recherche d’un designer capable de lui créer une mise en page qui mette en valeur son projet sur Ulule.

Oniriq est une start-up qui a créé un kit solaire innovant pour les familles africaines rurales afin de leur fournir un accès à l’électricité, à internet et au multimedia via une énergie autonome.

La mission consistait à réorganiser le texte, repenser le contenu de sorte à faire ressortir l’essentiel du projet, et créer une charte graphique séduisante et en accord avec les valeurs du projet. J’ai donc relevé le défi, voici l’explication de la refonte de la page.

#1. Le constat de départ

Voici un extrait de la page Ulule avant que j’intervienne :

Le texte avait été posé tel quel, sans mise en forme, et quelques photos venaient agrémenter l’ensemble. Mais aucun élément ne ressortait, aucune hiérarchie des informations n’était présente. On ne comprenait pas rapidement le projet, pour qui, comment, etc. Or on dispose de peu de temps pour capter l’attention du lecteur, il faut donc être efficace et très concret, avoir un visuel qui donne envie de continuer la lecture.

#2. Réorganiser les parties

Dans un premier temps, mon travail a été de revoir l’ordre des sections, afin de mieux expliquer le projet. Voici l’ordre des parties que l’on retrouve ici ainsi que dans la plupart des pages Ulule qui cartonnent, et qui permet d’être clair, limpide, et donc rapidement compris.

  1. Résumé en quelques mots du projet, pour comprendre rapidement
  2. La vision : mettre en avant le but du projet, ses bienfaits
  3. Les valeurs du projet : pour que le lecteur se reconnaisse dans vos valeurs
  4. L’explication très concrète du projet, le but étant de synthétiser les principales caractéristiques, celles qui vont le plus intéresser le potentiel contributeur
  5. L’histoire du projet : on retrace le cheminement des porteurs de projet pour créer de l’empathie, impliquer les lecteurs dans votre parcours.
  6. Les détails du projet : après avoir posé les bases, en ayant mis en avant les principales informations, on peut ici apporter un peu plus de détails et de précisions. On peut donner plus de détails sur les fonctionnalités.
  7. La livraison : On explique ensuite éventuellement les détails de la livraison
  8. Le financement pour être transparent avec ses donateurs
  9. Les contreparties pour donner envie de participer
  10. Présentation des porteurs du projet

Voici la page repensée : page Ulule de Oniriq

#2. Créer une charte graphique

Dans un second temps, afin d’améliorer le visuel de la page et inspirer la confiance, mon travail a consisté à créer une charte graphique cohérente avec le projet.

J’analyse donc les valeurs du projet, afin de les incarner visuellement. La demande d’Oniriq était d’avoir une charte graphique moderne et élégante, qui rappelle à la fois l’univers start-up mais aussi l’aspect premium et luxueux du concept.

En effet on est dans l’univers start-up, focalisé sur l’avenir et les nouvelles technologies mais pensées de manière durable, avec un soucis de l’environnement. Il était donc important d’exprimer visuellement la modernité, les technologies, tout en ayant un aspect doux et humain.

#3. Insuffler de la modernité

Pour ce faire, j ‘ai donc d’abord mis en place une typographie moderne, qui fait référence aux nouvelles technologies : la typographie Comfortaa.

Astuce de graphiste : les typographies sans empattements appelées les linéales (typographies “batons”), sont préférables pour donner un caractère moderne et novateur à votre visuel. À l’inverse, une typographie avec empattements rappellera la tradition, les anciens manuscrits, et sera plus utilisée si l’on crée un visuel plus classique, ancré dans le passé. 

Vous l’aurez compris, le choix de vos typographies joue un rôle primordial sur l’impression visuelle que vous voulez donner au lecteur. Il doit donc être réalisé avec la plus grande attention.

L’excellent article de La Bande à Part détaille tout le pouvoir d’une typographie dans vos supports.

#4. Le choix des couleurs lourd de sens

J’ai choisi d’apporter un dégradé de couleurs afin de créer un aspect luxueux et novateur. Cela rappelle les nouvelles technologies. Le bleu fait référence aux technologies également, au monde des start-up. Le rose vient donc apporter de la douceur et permet de ramener une humanité et une certaine chaleur au visuel. L’humain étant le centre de ce projet, il était important d’évoquer les nouvelles technologies sans avoir un visuel qui paraisse trop froid, trop lisse.

J’ai également introduit des fonds de couleurs dans les mêmes tons pour que la page paraisse plus vivante, plus joyeuse.

#5. L’utilisation de pictogrammes

Comme je l’expliquais dans un précédent article sur le succès sur Ulule de La Saperie Française , l’ajout de pictos est une autre très bonne astuce de graphiste afin d’apporter de la modernité à une mise en page. Ils permettent également de rythmer un texte, de synthétiser votre discours et de créer des petits blocs qui seront plus agréables à lire.

Avant :

Après :

 

#6. L’importance des titres

Pour mieux hiérarchiser la page, il est important que les titres soient mis en évidence, qu’ils apparaissent en premier aux yeux du lecteur. Ici j’ai choisi de rythmer les différentes sections par le choix d’une typographie grise sur fond blanc qui contraste avec les couleurs des sections. De plus les lettres sont en capitales ce qui permet d’accentuer le contraste avec le texte des sections.

Déjà rien qu’en faisant ce travail, votre page sera mieux hiérarchisée, on comprendra plus vite votre discours, et votre page sera plus efficace !

#7. Trop de textes tue le texte

N’étouffez pas votre lecteur avec des pavés et des pavés de texte, cela ne servira qu’à le faire fuir ! Synthétiser au maximum vos textes, ne gardez vraiment que l’essentiel.

Pour donner envie de lire vos textes je vous conseille la technique que j’utilise : je mets certains mots en avant en modifiant leur couleur et/ou leur typographie et/ou leur épaisseur. Cela permet de varier le texte, de mettre en avant des mots, et ne pas ennuyer le lecteur avec de longs paragraphes qu’il n’aura pas envie de lire.

#8. Une image vaut 1000 mots

Parfois, une simple image peut résumer un long pavé de texte. Voici un exemple d’une petite infographie que j’ai réalisé pour la page Ulule d’Oniriq, qui permet de résumer un long texte.

Exemple d’un profil de consommation, avant mon intervention : 

Après ma refonte : 

On comprend ainsi plus rapidement ce que veut dire le porteur de projet, et on retient mieux son discours.

En conclusion

Vous voyez donc qu’avec ces quelques techniques de graphiste, on comprend plus rapidement le projet, la page fait plus professionnelle et inspire donc plus confiance. Vos futurs contributeurs seront séduits et rassurés par votre communication visuelle.

Grâce à cette refonte, la page Ulule d’Oniriq est mieux hiérarchisée, les sections sont bien délimitées, et les informations importantes sont mises en avant, les détails étant apportés à la fin ou supprimés. Le lecteur comprend rapidement de quoi il s’agit et ce qui motive les porteurs du projet. Le design de la page se veut plus moderne, et n’est pas surchargée d’informations.

Si vous souhaitez des conseils sur votre page, n’hésitez pas à me contacter via cette page, ou bien à lire mes autres articles où vous trouverez d’autres astuces pour améliorer votre page. 

Cet article vous a-t-il été utile ? N’hésitez pas à me donner vos retours en commentaire, je ne tarderai pas à vous répondre !