Agence de Communication à Nice

Étude de cas : créer un site web à partir d’une affiche

création de site internet

Dans le cas d’une demande de création ou de refonte de site internet, plusieurs cas de figure peuvent se présenter et le travail à réaliser pour obtenir un bon résultat peut varier sensiblement.

Parfois, le client sait exactement ce qu’il souhaite et l’agence web ou le webdesigner se contente de réaliser et mettre en œuvre les souhaits exprimés. ll peut d’ailleurs arriver que le client fournisse un design déjà « tout fait » que l’on va découper, intégrer et transformer en site internet fonctionnel,  responsive et fidèle au design statique.

Parfois, il faut partir d’une feuille blanche et le projet peut également englober la création d’une charte graphique (logo, couleurs, slogan, polices d’écriture, supports dérivés…) sur laquelle on s’appuie pour proposer un design de site internet.

Et parfois, le client fournit un support de communication existant, comme une affiche, un flyer ou une bannière, et la mission est de s’en inspirer pour proposer un design en adéquation avec « l’esprit » du support fourni et l’adapter et le transformer en un site internet cohérent et qui respecte l’univers graphique. C’est ce cas que nous allons détailler ici.

Pour cette mission, le festival de musique Marvellous Island, à Paris, nous a missionné pour réaliser une refonte complète de leur site internet qui avait plusieurs années d’existence.

Le point de départ

Marvellous Island prépare sa nouvelle édition et celle-ci marque le 10ème anniversaire du Festival.

Pour cette occasion ils ont fait réaliser une nouvelle affiche et désirent donner un « coup de jeune » à leur site web. Leur souhait est que l’on s’inspire de leur nouvelle affiche mais sans pour autant faire une copie conforme.

Les mots d’ordre :

  • Coloré
  • Fun
  • Moderne
  • Aéré
  • Lisible
  • Responsive

Voici l’affiche en question.

Il s’agit d’une création très colorée, avec un ensemble riche et complexe de formes et d’éléments divers. Notre idée de base est de sélectionner les couleurs principales que nous allons utiliser pour le site en « piochant » parmi la palette de l’affiche. Ces couleurs seront le point de départ de notre design.

Sur un site plus « classique », on essaiera de garder un choix plus restreint mais ici, l’esprit est très coloré, presque psychédélique.

Après plusieurs essais et diverses combinaisons, voici la palette retenue :

L’architecture du site

Avant d’attaquer la phase de design, il est important de définir quelle seront l’architecture et la structure du site : les différentes rubriques, pages, éléments à intégrer…

Une fois cet aspect bien bordé, nous pouvons nous atteler à proposer les maquettes préliminaires au client.

Les wireframes

Ces maquettes préliminaires vont se présenter sous forme de wireframes.
 
Il s’agit d’un design ultra simplifié qui permet d’avoir un aperçu de l’aspect général des pages en termes de zoning et visualiser le positionnement des différents éléments, textes et visuels à intégrer. Cela permet d’avoir un aperçu de l’ergonomie et préparer l’UX (expérience utilisateur). Il y a de nombreux outils permettant de faire des wireframes et il est même tout à fait possible de les faire sur une feuille de papier. Ici, nous avons utilisé l’outil open source Pencil Project.
 
Le client nous fait part de quelques souhaits qui vont nous permettre d’aller dans la bonne direction :
  • Une vidéo pleine largeur en haut de la page d’accueil
  • Un bandeau d’annonce défilant
  • Un menu full screen
  • Des galeries en masonry
  • Des sections infos en accordéon et en tabs
  • etc.

Le design graphique des pages

Après quelques aller-retours et diverses modifications, les wireframes sont validés et nous pouvons passer à la phase de design.
 
Cette étape va définir l’apparence finale des pages telles qu’elles devront s’afficher sur le site web terminé.
 
Pour cela, nous allons nous appliquer à créer un design pour chaque page, indépendamment. Pour cela il est possible d’utiliser plusieurs outils. Ceux que nous privilégions sont ceux de la suite Adobe, notamment Adobe XD, Photoshop et Illustrator.

L’intégration

Une fois le design de toutes les pages validé, vient l’étape de l’intégration.
 
Les différents éléments graphiques sont exportés du logiciel puis importés dans le CMS qui va faire fonctionner le site. Nous avons choisi WordPress qui est un CMS puissant, flexible, évolutif et qui permet également une prise en main relativement aisée et, une fois le site livré, de donner la main au client pour des modifications simples du contenu.
 

Certaines sections et éléments du sites sont animés, des options et fonctionnalités sont ajoutées (filtre dynamique sur la liste des artistes, possibilité d’exportation, messages personnalisés aux contacts…) et les pages peuvent être revues par le client.

Après la mise en ligne de toutes les pages, il y a toujours quelques petits ajustements mais, si l’étape de design a été réalisée « dans les règles », le résultat sera conforme à 95%.
Dans notre cas, la seule modification que le client a souhaité apporter a été de garder un fond de page uni au lieu du dégradé initialement choisi.
 
Nous voilà presque prêts à mettre le nouveau site de Marvellous Island en ligne.
 
Avant la publication, nous vérifions également la version responsive pour nous assurer que le site se comporte bien sur mobile.
La mise en page s’adapte à la résolution de l’écran de l’appareil utilisé et certains éléments sont affichés ou pas selon qu’il s’agissent de la version ordinateur ou de la version mobile.
 
Dans le cas de cette refont de site internet, il peut y avoir parfois des ajustements à faire après le lancement car la variété et le nombre de terminaux mobiles existants amènent parfois des comportements un peu différents d’un appareil à un autre.

La publication

Une fois que tous les contenus ont été intégrés et le site testé, nous procédons à la mise en ligne et nous nous assurons que tout fonctionne correctement.

Le site est maintenant publié et vous pouvez le visiter pour le voir en action :
www.marvellous-island.fr

Offrez-vous un nouveau site internet
Vous avez un projet de création ou de refonte de site internet ?
Quitter la version mobile