Hémisphère Droit

C’est un projet d’école « De la forme au design » en collaboration avec Joanna Pons. Nous avons dû réaliser un site internet sur base de 6 critères piochés. Le but était de travailler notre design et d’inventer des nouvelles approches graphiques tout en adoptant, au fur et à mesure, les contraintes piochées. Une des cartes tirées au sort était « l’Art ». Nous avons choisi le design et plus précisément un podcast dédié au design qui s’appelle Hémisphère Droit. Il a pour but de faire découvrir les enjeux du design et de l’UX. Il a été créé par Hannah Sellam.

Recherches

Nous avons pioché les cartes critères les unes après les autres. Après chaque pioche nous avons dû dessiner, découper tout ce qui nous venait à l’esprit. C’était un exercice qui, au début, n’était pas évident car je n’avais pas l’habitude de dessiner et de passer par le papier. Mais c’est une méthodologie qui nous a beaucoup servi car nous avons rapidement eu l’idée de notre projet. Ce processus nous a aussi permis d’abattre toutes les barrières des contraintes car le projet avait été réfléchi dans son ensemble avant de passer au design.

Wireframes

Après de multiples recherches sur des références, du design et du style concernant la « ligne claire », les animations, l’insertion d’un cheminement, le design d’un player etc, nous avons créé plusieurs wireframes. Sur la première version, on voit très bien que le concept de l’univers filaire n’était présent que sur des petits éléments graphiques et non sur le design à part entière. La version 2 ci-dessous est la version la plus proche du résultat final et elle respecte beaucoup plus aux critères tirés au sort. On y retrouve : le cheminement avec les différentes saisons et épisodes, la multicouche avec la superposition de volets, la boutique etc.

Charte graphique

Nous avons, au début, voulu jouer sur une bichromie entre le blanc et un bleu royal léger. Puis au fur et à mesure que notre projet avançait et prenait forme, nous avons ajouté deux couleurs secondaires qui ne sont autres qu’un jeu d’opacité de la couleur primaire bleue.

Nous avons choisi d’utiliser deux typographies sans-sérif. Avec la contrainte « typographie condensée », nous nous sommes dirigées vers la August créée par Ellen Luff. Elle sort de l’ordinaire avec ses arrondis et son épaisseur de trait. Nous l’avons donc choisie pour le titrage. Pour contraster la graisse de la August, nous avons choisi la Sofia Pro pour le labeur. Celle-ci est ronde, douce et fine et convient au labeur.

Afin de pallier au critère de l’univers filaire, nous avons mis en place une grille de 20 colonnes de 93px de largeur et de 3px de gouttière. Ces 3px sont notre univers filaire. En effet, chaque contour d’élément graphique, chaque bouton et chaque espacement entre les différents volets font 3px.

Site internet

La homepage du site internet d’Hémisphère Droit comprend les derniers épisodes du podcast. Sur la droite on retrouve les volets qui contiennent les différentes saisons. L’élaboration du player a été un des éléments les plus compliqués à concevoir. En effet, nous avions plusieurs critères : qu’il puisse être visible en permanence et qu’il ne nuise pas au design déjà mis en place. La solution a été d’ajouter une autre colonne et d’avoir un player à la verticale.

Design system

Nous avons répertorié quelques éléments comme les différents états des boutons, ou encore les différents éléments essentiels, volets et cartes, et graphiques.