Olivier Lainé

Infographiste - Développeur Web - Motion Designer

Ososphère | Maquette

Ososphère | Maquette
Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

 

Voici le dernier projet que j’ai eu à réaliser, en binôme, dans ma formation de MMI. Il s’agissait d’un projet spécifique à la spécialité « Graphisme & Communication Visuelle » que j’ai suivie. Le but était de refaire l’identité d’un festival des arts numériques et digitaux de Strasbourg qui change son identité visuelle chaque année.

 

Je me suis attelé à la partie web. J’ai produit la vignette des réseaux sociaux, la maquette du site internet et le teaser. Ce dernier n’est pas fini (il est finalisé à 80%) car ce ne sont pas forcément les images des artistes (j’ai pris celles-ci sur internet), la vidéo d’arrière-plan ne correspond pas exactement à ce que j’imagine et il y a encore des transitions qui ne sont pas calées. Il faut changer les images. Le but du teaser est de promouvoir les différents artistes.

 

Charte graphique

J’ai voulu donner à la maquette un style assez épuré et original. Nous avions défini les couleurs et typographies avant la conception de quoi que ce soit. L’Arial a été choisi pour le texte courant car très lisible et contraste bien avec la Distro (pour le logo, titres, textes importants).

Pourquoi cette police?  Elle se rapproche de la font Blur de Neville Brody mais aussi de l’univers que nous voulions dégager (effets de spot, lumières). L’effet de flou fait penser à des faisceaux lumineux qui traversent les lettres. De plus, il y a un rappel historique puisque Neville Brody a créé la Blur en appliquant des effets de flou superposés. On a l’impression que la lumière transperce la typographie.

Les couleurs jaune et violet nous ont été inspirées par la chaîne Youtube Proximity, une chaîne de musiques électroniques qui a 3 couleurs dans sa charte graphique : bleu, jaune et violet. Nous avons seulement gardé le jaune et le violet car nous trouvions que cela correspondait plus à nos critères et à nos goûts.

Pour que les titres (de couleur blanche) soit visibles quelle que soit la couleur en arrière-plan, on a utilisé des blocs de couleurs foncées avec une opacité réduite. Le texte est lisible et on reste en cohérence avec le thème de la lumière que nous travaillons dans notre charte graphique. On peut créer différentes couleurs de lumières, grâce à la projection d’une lumière sur un filtre de couleur non-opaque (la lumière doit passer). Ces blocs foncés transparents sont un rappel de ce procédé.

 

Maquette « Version Ososphère 2015 »

La maquette reprend donc les couleurs et les typographies citées ci-dessus. J’ai ensuite recherché un style épuré pour cette maquette avec des espaces et un contenu aéré, j’ai utilisé des images qui, se substituant au texte, l’ont beaucoup réduit. « Une image vaut mille mots », dit-on et en plus elles peuvent faire aimer instantanément un produit ou un site.

Comme le site de l’Ososphère fait partie d’un site plus « gros » (celui des organisateurs : la Laiterie), il y avait beaucoup de menus et de sous-menus. Il y a le menu site principal (tout en haut), le menu principal pour naviguer sur le site de l’Ososphère (celui en blanc) et un sous-menu (en violet foncé à côté de la rubrique « Appli Artefact »).

Cela pose un problème de disposition et de hiérarchisation. Pour cela, on a conservé le menu du site principal tel quel. Il était sous la forme d’une fine bande noire avec les différents items. Cela permet de garder l’unité sur toutes les plateformes du site et de ne pas perdre le visiteur.

Le menu principal d’Ososphère 2015 a été placé de manière à ce qu’il soit visible et disposé de façon à faire comprendre aux visiteurs que c’est le menu principal pour naviguer sur le site du festival. Le sous-menu a été placé avec les différentes rubriques mais pour le rendre suffisamment visible, je l’ai placé sur la même ligne que le titre du festival (et du site), ainsi que collé à un bloc « Call-To-Action » qui attire l’œil.

La partie « gauche » du site est dédiée aux rubriques qui permettent d’accéder aux différentes informations sur le festival. La programmation est la section la plus mise en avant, viennent ensuite les dernières nouvelles et la connexion à son compte pour accéder à des informations personnalisées.

La colonne de droite est réservée aux informations externes au festival. On trouve le lien pour télécharger l’application « Artefact » sur son smartphone (pour suivre les news sur son portable), les réseaux sociaux du festival et les partenaires du festival.

 

J’espère que vous avez apprécié le projet (si c’est le cas pourquoi ne pas le partager?) et je vous remercie de visiter mon portfolio et mes travaux.

 

Me Contacter