fleche gauche
Logo SR
fleche droite

MUSICALES EN FOLIE

Petite introduction

Bien, maintenant que l'on connaît un peu mieux le travail à effectuer lors de la création d'une maquette de site, passons à un nouvel exercice : la « landing page ». Techniquement, cette page d'atterrissage (dans la langue de Bernard Pivot) n'a qu'un seul but (parfois deux, mais pas plus) : nous faire acheter un produit, réserver un billet, constituer une communauté, etc. Ici, le client est l'association « Musicales en Folie », qui organise chaque année une semaine de concerts à travers toute la France lors de son festival itinérant du même nom. Son but est de promouvoir des artistes amateurs dans plusieurs genres musicaux. Comme chaque année, un artiste confirmé les accompagne et les aide à se faire connaître. Cette année, cet artiste est Stromaé, et pour l'occasion, « Musicales en Folie » souhaite que je monte une landing page qui permettra aux visiteurs de réserver leurs places pour le festival en fonction de la ville où ils se trouvent.

Le moodboard

Pour la planche des tendances de cette maquette, je vais me tourner vers une ambiance festive. Le festival se déroulant pendant l'été (en juillet), je m'imagine des couleurs flashy, de gros concerts en extérieur avec plein d'effets spéciaux (confettis, fumigènes...) et « du soleil et des nanas »... (oui, j'ai plus de 30 ans...) « Solidays », « Les Eurokéennes », « Les Francofolies » ou « Les Vieilles Charrues », les événements sont nombreux l'été, et cela devrait grandement m'aider à orienter mon design. Tous ces festivals ne manquent pas de couleurs et ils évoquent bien la joie et la fête. Ma planche des tendances va donc y ressembler.

Planche des tendances

Style board

Le client ayant fourni son propre logo, je vais me baser sur son code couleur pour mon site, c'est à dire le noir et le pourpre (code héxa : #ec409a). J'ajouterai pas mal de textes et titrages en blanc car j'envisage de mettre un fond d’écran très coloré. Les boutons devront avoir un côté fun, d'où leur forme de « noisettes de dentifrice » et je mise sur une police de texte manuscrite au pinceau, notamment pour mes grands titres car elle est moderne et très tendance cette années, surtout dans les publicités visant les 18-35ans, cible de mon festival. Comme je le disais plus haut, les idées qui vont inspirer mon site devront tourner autour de la joie, de la fête et de la musique bien entendu !

Planche de style

Zoning

Mettons-nous dans la peau d'un 18-35ans qui souhaite s'amuser cet été et trouver le festival qui lui plaira parmi la grande sélection disponible. Il (ou elle) aime la musique et découvrir de nouveaux sons. Il (ou elle, ça n'a pas changé), est prêt à vadrouiller un peu car c'est les vacances après tout. Il (ou elle, mais vous aurez compris cette fois) utilise son smartphone comme un pro et il y a de fortes chances que mon site soit consulté depuis ce périphérique.
Donc, sachant que le visiteur du site souhaite s'informer sur le festival, acheter son billet ET réserver un hôtel (sur cette même page), je vais m'organiser pour placer mes éléments de façon accessible (surtout pour la version mobile). Vous verrez donc de grosses boîtes, de gros boutons et des infos facilement accessibles grâces à des photos de grande taille.
Enfin, j'ai proposé à mon client et à notre sponsor, Sony (oui, rien que ça) d'intégrer un lecteur audio sur cette landing page, à partir duquel nous pourrons écouter les titres chantés par les artistes amateurs que nous verrons en live le moment venu. Le visiteur saura alors « qui chante quoi » et pourra, à loisir, choisir une date en fonction des artistes présents !

Zoning du site

Maquettes

Voilà ma maquette finale de « Musicales en Folie » !
- Une grande vidéo qui fait toute la largeur de l'écran pour l'accueil (vidéo montée de l'édition précédente).
- Un fond d'écran de concert très coloré qui « agrippe » immédiatement l'œil du visiteur.
- La mise en avant de notre parrain 2018, Stromaé.
- Une brève présentation des artistes qui participeront au festival. - Une présentation des salles, ville par ville, sous forme de slider.
- Un formulaire de réservation des places.
- Une offre de réduction sur les hôtels.
- Le lecteur audio intégré.
Enfin, j'ai utilisé des « mock up » pour placer virtuellement mes maquettes dans une tablette et un mobile (respectivement un iPad 3 et un iPhone 6), histoire de rendre le tout plus crédible.

Maquettes du site

Conclusion

Voilà une maquette qui a été très amusante à monter car le côté fun et branché des festivals permet une grande liberté dans la création et la mise en avant de couleurs, d'animations et de sons, tout ce que contiendra le site d'ailleurs. N'est-ce pas « fooormidable » ça ?

Outil utilisé pour ce travail :

logo photoshop

Photoshop