Sucre d'Orge est une incroyable danseuse burlesque parisienne. La semaine dernière, j'ai mis en ligne son nouveau site web, dont la refonte avait commencé en mars1.
Une fois n'est pas coutume, je vous propose un petit making-of ! 8-)
Le contexte
Véritable caméléon, Sucre d'Orge est capable de se métamorphoser en quelques battements de cils. Ses costumes et ses accessoires sont tous plus beaux et originaux les uns que les autres, et ses talents de danseuse sont littéralement hypnotisants !
Lorsque Sucre d'Orge m'a contactée il y a six mois, sa présence en ligne se résumait à une page Facebook, à un profil Twitter et à un blog hébergé chez Blogspot, qui ressemblait à ça :
Ça manquait de branding, l'interface était mal rangée, l'information lacunaire, le site était très lent à charger, les choix iconographiques manquaient souvent de cohérence…
Bref, je me suis sentie investie d'une mission. Il fallait faire quelque chose !
Le brief
Sucre d'Orge m'a ensuite fait part de ses besoins :
- Une charte graphique raffinée et exotique, qui mette en avant la diversité de ses shows ;
- Un WordPress multilingue, qui s'adresse en priorité aux organisateurs d'évènements, notamment ceux situés à l'étranger, car Sucre d'Orge souhaite développer son activité internationale ;
- Un site responsive de qualité, qui mette notamment en valeur ses prestations, et qui encourage les prises de contact professionnelles.
Il fallait que ce site valorise l'expertise de Sucre d'Orge, l'originalité et la richesse de ses numéros, ainsi que le sérieux et la qualité de ses prestations, afin de lui permettre de doubler son carnet de commandes en un an.
Recherches d'ambiance
L'univers du burlesque m'étant totalement inconnu, j'ai fait mes devoirs. J'ai regardé à peu près toutes les vidéos de Sucre d'Orge que je trouvais, et je suis allée enquêter du côté des autres performers.
Vous vous rappelez ce que je vous disais à propos des sites web dévastés dans l'industrie musicale ? Hé bien, dans le monde du burlesque, c'est à peu près pareil. En terme de communication sur le web, ça respire le manque de budget et l'amateurisme. Je n'ai rien de trouvé de très follichon.
Parmi les sites que nous avons retenus, citons Minnie Valentine, la boutique de Serge Lutens, celle de Fifi Chachnill, ou encore celui de Dita Von Teese, qui contient quelques bonnes idées.
(Personnellement, j'ai eu un coup de cœur pour le personnage de Le Pustra, mais c'est une autre histoire.)
Pour le reste, j'ai fouiné dans mes bouquins à la recherche d'inspiration Art déco et japonaise. Les illustrations de George Barbier m'ont beaucoup inspirée. J'ai aussi trouvé quelques idées dans le catalogue de l'exposition Beauté, morale et volupté, que j'avais vue au Musée d'Orsay et que j'avais adorée.
J'ai aussi trouvé pas mal de pistes de réflexion sur Behance.
Au bout du compte, j'ai capitalisé tout ça dans un tableau secret sur Pinterest, et cela m'a rendu bien service par la suite.
Le moodboard
Mais ce qui m'a vraiment aidée, l'étape-clé de mon travail de recherche, ça a été de découvrir le superbe appartement de Sucre d'Orge : antichambre de ses spectacles, c'est l'endroit où, bien souvent, sa métamorphose commence.
Des papiers peints rares et exquis au mobilier vintage, des éventails en plumes aux chaussures de scène, des gravures Art déco aux fauteuils en velours, la cohérence de l'ensemble m'a frappée, et m'a aidée à saisir l'ADN de la personnalité dont j'allais créer le langage graphique.
Je suis même repartie avec quelques morceaux de papier peint, que j'ai gardés sur mon bureau tout le long du projet ! :grin:
De là sont nés plusieurs moodboards. Après une première piste graphique qui ne collait pas (trop « pompadour feat. IIIe Reich »), je me suis fait violence pour aller vers un univers asiatisant dont je n'avais encore jamais manié les codes.
C'était assez casse-gueule ; je sentais que j'étais sortie de ma zone de confort, et que cela allait me demander encore plus de recherches et de réflexion que d'habitude.
Loin de me freiner, cela m'a motivée. J'avais l'impression, à mon tour, de me métamorphoser, et d'ajouter une corde à mon arc.
Ainsi, ce travail de recherche, que j'ai fait en collaboration étroite avec Sucre d'Orge, a donné naissance à ce moodboard-ci :
Le résultat
Estampes japonaises, chinoiseries, doré, noir et blanc, motifs raffinés et typographie soignée m'ont aidée à porter l'univers de Sucre d'Orge à l'écran.
Le rose poudré est quant à lui un élément-clé de la charte, car il rappelle non seulement la peau claire de la danseuse et adoucit le contraste noir et blanc, mais il est également le lien entre l'interface et les éventails géants que manie avec grâce Sucre d'Orge : ce sont ses accessoires fétiches.
Les plumes jouent un tel rôle dans son répertoire, que l'artiste a choisi l'oiseau comme symbole (elle en parle d'ailleurs sur son blog). D'où la présence de grues sur le site.
En outre, le rose permet aussi de s'affranchir du rouge : bien qu'il soit traditionnellement associé à l'Asie, je voulais éviter l'écueil du « restaurant chinois ».
L'univers de Sucre d'Orge est celui de la nuit, des cabarets et de l'érotisme ; j'ai trouvé intéressant de travailler l'ombre et la lumière, tout en gardant bien en tête les bonnes pratiques d'accessibilité web en matière de contrastes et de tailles de polices.
S'il y a bien quelque chose qui me tient à cœur, c'est ça : créer des univers graphiques riches et originaux, tout en produisant des interfaces les plus accessibles, ergonomiques et performantes possible. En ça, c'est un énorme atout d'être à la fois web designer et intégratrice.
Des sites qui déclenchent immédiatement un bon gros effet « wahou » sont légion. Mais combien d'entre eux sont à la fois réussis graphiquement et techniquement ? D'ailleurs, le fait que les sites comme Awwwards se basent uniquement sur le design pour évaluer les sites lauréats, et pas sur le code, n'aide pas.
À mon petit niveau, j'essaie de proposer une alternative…
Mais revenons-en à Sucre d'Orge ! :) Une fois que les créas ont été terminées, je n'ai pas hésité à les montrer à quelques utilisateurs pour recueillir leurs premières impressions.
Dans ces cas-là, j'en dis très peu sur le projet, sur les objectifs du site et l'intention graphique, et je les laisse parler. C'est toujours très instructif.
Sous le capot
Techniquement, on a donc un site WordPress multilingue et responsive. Quelques détails :
- Pour gérer le multilangue, j'ai utilisé le plugin Polylang pour la première fois. Il est facile d'utilisation, mais l'ergonomie du plugin n'est pas toujours top (en particulier dans la gestion des tags, le switch de langue dans l'admin, etc.). Le contrôle des permaliens est assez limité (j'ai notamment rencontré un bug bien relou qui concerne Polylang et WP SEO de Yoast). Je ne le conseillerais pas pour un site énorme, mais pour un petit site comme celui de Sucre d'Orge, ça suffit largement.
- J'ai utilisé l'unité
rem
plutôt que l'unitéem
cette fois-ci, dans la mesure où IE8 était hors scope. C'est sûr que c'est pratique de pouvoir s'affranchir du contexte. Mais l'unitéem
est quand même pratique dans certains cas ! - IE8 et inférieurs ont droit à une CSS universelle toute simple.
- Le site contient pas mal de SVG, de transitions et d'animations CSS. Comme toujours, il faut avoir la main légère pour ajouter juste ce qu'il faut de finesse à l'interface, la rendre amusante et agréable à utiliser, sans trop charger la mule (éviter l'effet « sapin de Noël »).
Il subsiste encore quelques anomalies que j'espère avoir le temps de corriger dans les jours qui viennent, et d'autres optimisations qui sont sur ma todo list. Je dois aussi mettre à jour mon portfolio et mon Behance ! :roll:
J'en profite pour remercier les beta testeurs qui m'ont aidée à botter le bug en touche : Anne, Corinne, Kozlika, Sophie, Gaël, Gwénolé, Louis-Philippe, Nicolas, Olivier et Vincent, sans oublier ceux qui m'ont fait des retours sur Twitter. Merci !
Bilan
Version courte
- Ce que j'ai aimé : le travail sur la direction artistique. C'était difficile, mais je suis contente du résultat.
- Ce que j'ai moins aimé : j'ai mal estimé le temps que me prendrait ce projet. Alors que je pensais l'avoir terminé avant de déménager, j'avais à peine commencé l'intégration au moment de faire mes cartons… Pas évident.
- Ce que je retiens : la prochaine fois, prévoir plus de temps de formation à WordPress et à la maintenance d'un site.
Version longue
En matière de web, ce qui me motive le plus, c'est ça : traduire un univers personnel fort en une charte graphique originale et adaptée aux contraintes du web.
Être à la fois web designer et intégratrice, et bien connaître WordPress, me permet de modeler un projet de A à Z, depuis la direction artistique jusqu'au développement.
Et, bon sang, il n'y a rien de plus agréable que d'intégrer ses propres designs ! 8-)
Cela me permet d'être sûre du rendu, et de garantir que le résultat technique sera fidèle à l'intention artistique, mais aussi d'enrichir les maquettes graphiques initiales par des idées qui me viennent alors que j'ai les mains dans le code.
Je pense notamment aux petites animations et transitions CSS, qui ajoutent de la subtilité et de l'originalité à l'interface, et auxquelles je ne pense en général que pendant la phase d'intégration.
L'avantage de bosser en solo, c'est qu'il n'y a pas de silots. Ma réflexion est globale dès le début, et continue jusqu'à la fin.
Les différentes problématiques d'un tel projet m'intéressent toutes, même si, à l'avenir, j'aspire à faire plus de graphisme et à passer moins de temps sur la partie technique.
Cela fait un moment que je planche sur la création d'un thème WordPress tout nu qui contiendrait déjà tout ce dont j'ai besoin quand je crée un thème WordPress, et qui serait outillé pour générer soit de l'em
, soit du rem
.
L'idée est de passer de moins en moins de temps à développer le site, et à en consacrer davantage à la direction artistique et à la finesse de l'intégration. Il faut que j'améliore mon workflow.
Cette fois c'est la fin.
Pfiou ! Merci de m'avoir lue jusqu'au bout :smile: Visitez le site de Sucre d'Orge, et dites-moi ce que vous en pensez ! (Et ne manquez pas les ateliers porte-jarretelles, qui ont beaucoup de succès… ^^)
- Cela ne devait pas être si long, mais mon déménagement a un peu chamboulé le planning initial. ↩
8 octobre 2014
« pompadour feat. IIIe Reich » m'a bien fait rigoler.
Je vais m'inspirer de tes démarches et de ta méthodologie pour réaliser mon prochain site ... :) Mais l'aspect technique fait peur.
8 octobre 2014
Il faut y aller progressivement : si tu trouves un thème tout fait dont tu peux facilement changer les styles principaux, ça sera déjà bien ! C'est ce que je faisais quand j'ai commencé à utiliser WordPress (en 2006), et puis petit à petit j'ai eu envie de personnaliser davantage l'interface, jusqu'à ce que je fais aujourd'hui. Rome ne s'est pas faite en un jour ;)
Bon courage !
8 octobre 2014
Ravi d’avoir participé en coup de vent à tes tests :) Le site est vraiment superbe.
Si tu recherches un thème nu, à l’occasion je pourrais te présenter le mien (qui aurais bien besoin de regards extérieurs :p).
Encore bravo pour cette magnifique création et très belle intégration, c'est extrêmement agréable y compris sur petits téléphones !
8 octobre 2014
Salut Gaël !
Merci encore pour ton aide et pour tes compliments.
Ah bah ouais, ça m'intéresse carrément ! Je peux trouver ça où ?
8 octobre 2014
Superbe, comme d'habitude. Ça me donne vraiment envie de consulter le site souvent, alors que jusque-là je l'avais dans mes marque-pages, mais sans que ça aille vraiment plus loin. La page d'accueil est vraiment réussie... Chapeau !
8 octobre 2014
Merci Kalys ! :)
8 octobre 2014
Quel univers raffiné, sensuel et cohérent ! une véritable friandise pour les yeux ! Et quelle méthodo, quelle culture visuelle ! Très inspirant, comme d'hab ! merci pour le making of !
:-* :-*
8 octobre 2014
Merci Guillaume, ça me touche ! :-*
9 octobre 2014
Je laisse le burlesque aux copines (moi, je reste fidèle à la pole dance) mais c'est un univers que j'adore, donc forcément, je suis fan !
J'aime que le résultat final soit travaillé jusqu'aux moindres détails, mais j'imagine que quand on travaille pour quelqu'un qui, comme Sucre d'Orge, a passé autant de temps à décorer son intérieur, ça doit être "facile" de le faire pour le site web :D
En tout cas, merci de partager ton workflow de travail, c'est très intéressant de voir le moodboard par exemple !
9 octobre 2014
Salut Anne-So !
Merci pour tes retours :)
Je ne suis pas sûre que le mot « facile » soit approprié ! :-P
Au contraire, bien que l'interface soit assez épurée par rapport à certains projets que j'ai pu faire, trouver le dosage juste question chinoiseries, textures, photos et autres détails raffinés m'a donné du fil à retordre.
Mais ouais, mon objectif était de transposer son univers sur le web, avec les contraintes que l'on sait. C'est un bon exercice d'ailleurs, de penser un branding adapté au web ! :)
Il y a quelques années, je chargeais à mort les interfaces que je designais ; je constate qu'avec le temps, je charge moins la mule.
S'il y a d'autres éléments qui t'intéressaient, n'hésite pas à me dire !
9 octobre 2014
Je ne suis pas sûre que le mot « facile » soit approprié ! :-P
En fait, je disais plutôt "facile" dans le sens où tu n'as pas à te battre pour expliquer au client à quel point une image qui lui corresponde est important (et pourquoi un thème "comme tout le monde" n'est donc pas adapté).
Et donc pour Sucre d'Orge qui ne se meuble pas chez Ikea "comme tout le monde" (dont moi hein :D), cela devait sembler évident.
Le travail en lui même, je ne doute pas un seul instant qu'il a du être difficile, demander beaucoup de recherches et d'essais !
S'il y a d'autres éléments qui t'intéressaient, n'hésite pas à me dire !
C'est vraiment la partie créative qui est la plus passionnante pour moi (car c'est celle qui me manque : comment construit-on un univers ? comment arrives-t-on à retranscrire la personnalité et les goûts d'une personne dans son site web ?). (D'ailleurs, tu es très forte à ça ! entre ton site, celui d'Arcana, de Sucre d'Orge...)
Peut-être qu'il aurait été intéressant de montrer aussi les moodboards qui n'ont pas été retenus (surtout le « pompadour feat. IIIe Reich » :p)
12 octobre 2014
Merci ! Je vais continuer à publier des making-of, et je vais réfléchir à comment mettre encore davantage en valeur le travail de design.
J'ai hésité à le faire ; dans l'absolu, oui ça serait intéressant, mais dans la mesure où la commanditaire a rejeté cette première piste, je ne pense pas que ça soit publiable.
Sucre d'Orge n'a aucune raison de voir son nom et son image associés à une piste graphique qui ne lui convenait pas a priori.
Je pense qu'il vaut mieux se concentrer sur la piste qui a été choisie, pour éviter les effets de bord de type « Han, moi je préfèrais la première piste », le genre de remarque que j'ai déjà eue sur d'anciens projets, et qui n'apporte absolument rien au final…
Cela étant dit, en ce qui me concerne moi, j'avais publié les différentes pistes graphiques empruntées lors de la refonte de mon site. Tu peux voir tout ça dans le billet Refonte de mon portfolio : créa et design. :)
13 octobre 2014
Toujours aussi intéressant de lire tes makings of :) J'aime autant lire la partie visuelle que technique ^^
Je me demandais justement comment tu avais géré la partie multilingue et tu y as répondu. Je me pose une question cependant, sur l'exécution du travail graphique lui-même, la retouche de la photo, les éléments visuels japonisants, si tu as pu les récupérer de quelque part ou les redessiner ? :)
En tout cas en voyant le avant/après, on mesure tout l'aspect conseil que tu as apporté sur ce projet. Bravo !
13 octobre 2014
Merci ! :)
Y'a un truc que je n'ai pas dit dans le billet et qui me revient, maintenant que j'y repense. Créer un site en plusieurs langues exige vraiment d'avoir tous les textes principaux avant la conception et le design. C'est vraiment super important.
Un designer sans contenus réels, c'est comme un marin sans bateau.
Cela étant dit, même en ayant eu à mettre en page des contenus dont la densité était très proche de celle des contenus définitifs, j'ai quand même dû être souple et adapter l'intégration en fonction des textes qui changeaient lorsque Sucre a véritablement pris la main sur la contribution. C'est vraiment un travail d'équipe, rendu possible par le fait qu'on n'était que deux dans l'équation.
Pour tous les motifs vectoriels (textures, grues), je les ai achetés sur différents sites de stock puis je les ai un peu modifiés, simplifiés et adaptés pour le web.
Concernant les photos, c'est Sucre d'Orge qui a fourni les documents de première main ; quant à moi, j'ai passé un temps fou à retravailler la colorimétrie de la grande photo d'ouverture (signée Tom Hagemeyer), car comme tu peux le voir, elle contient des tons beaucoup plus froids en vrai, et cela ne collait pas du tout avec la charte du site.
Et je ne te raconte pas le temps que j'ai passé à détourer ces satanées plumes !!… :)
17 octobre 2014
c'est super! Merci pour ces compléments d'informations <3 Oui la photo j'avais vu l'originale, je me demandais justement, c'est clair que ça a été un sacret travail.
9 novembre 2014
Du coup, j'en profite pour enfin aller découvrir ce site ! Pas évident avec un wifi au travail minable et quand on a pratiquement perdu l'habitude de ressortir l'ordinateur une fois à la maison. En tout cas le jeu en vaut la chandelle, wow. Que c'est glamour !
11 novembre 2014
Merci Messalyn ♥︎
11 décembre 2014
Toujours aussi intéressant de lire tes makings of, moi même étant designer ,je me demande ? D'où viennent tes sources d'inspirations.
Tous tes travaux me paraissent tous unique et original
a++++