Le 31 décembre, j'ai mis en ligne un tout nouveau projet web : la refonte du site de Stella Polaris.
J'ai réalisé le design de ce site et j'ai développé le thème dans WordPress.
J'avais envie de détailler quelques aspects de cette refonte dans le petit « making-of » que je vous propose aujourd'hui. :smile:
L'objectif : plus de personnalité et de professionnalisme
Héloïse (alias Stella Polaris) est, comme moi, une créative hyperactive dont l'univers personnel est foisonnant.
Elle avait besoin d'un écrin pour ses diverses activités – professionnelles (conception-rédaction, traduction) et personnelles (illustration, organisation de marchés vintage, mannequinat).
C'est ma réflexion sur le positionnement et l'identité de mon #PortfolioOfDoom qui lui a donné envie de me confier la refonte de son site.
L'ancien design de son blog mettait mal en valeur son univers : le thème WordPress qu'elle utilisait était très peu customisé, et manquait, selon elle, de professionnalisme.
Le problème principal était l'absence d'une charte graphique cohérente, en phase avec sa personnalité, et qui serait utilisée jusque dans les moindres recoins de son site.
En outre, il n'était jamais fait mention des services professionnels qu'elle propose, alors qu'un bon site web est la meilleure carte de visite qui soit.
Pire que tout, cet ancien design la décourageait au point de ralentir dangereusement son rythme de publication.
Il était temps d'agir !
Mélange des genres
Mettre en valeur les services professionnels proposés par Héloïse faisait partie du brief, même si ces services tiennent, dans l'absolu, une place de moindre importance par rapport à son blog en terme de densité de contenus.
Nous avons donc décidé de les mettre tous deux au même niveau sur la page d'accueil.
Il est vrai que cela peut surprendre !
C'est sûr, on n'est pas dans le registre du portfolio minimaliste sur fond blanc comme c'est la mode depuis – attendez – toujours. Tant mieux si ça surprend et si ça intrigue !
Ce mélange des genres permet justement de plonger dans un univers riche et atypique, de se dire : « Tiens, voici un oiseau rare ».
D'où l'idée que j'ai eue d'utiliser le dessin suivant, réalisé par Héloïse, en médaillon dans l'en-tête du site :
Il m'a semblé important d'utiliser un élément très personnel dans l'interface, un élément qu'on ne trouvera jamais ailleurs. C'est sa patte, la signature qui rend le site vraiment unique.
J'ai remplacé le brun chagrin de la « fourrure » par du violet : certes, c'est ma couleur fétiche, mais c'est surtout qu'elle épouse à la perfection noir et doré, les deux couleurs principales de la charte que je lui ai créée ! :razz:
Mystère et élégance sont, pour moi, les maîtres mots des lieux ; cette illustration était donc l'élément parfait dont l'interface avait besoin : l'aquarelle équilibrant le contraste élevé de l'interface, la rondeur du trait cassant la verticalité des pages.
L'esthétique pour tous
Parallèlement à mon travail de design, Héloïse a passé du temps à travailler les textes de son site, en particulier sur la baseline : elle a ainsi délaissé « Art + style + décadence » qu'elle utilisait jusqu'alors au profit de « La vie esthétique ».
L'approche qu'elle propose dans sa page « À propos » m'inspire d'ailleurs beaucoup :
Je suis convaincue que la vie mérite d'être vécue avec autant d’esthétique et de créativité que possible, peu importe les moyens dont on dispose.
Le site de Stella Polaris est un melting-pot passionnant, réunissant une esthétique raffinée, empruntant beaucoup au vintage et à l'Art déco, mais aussi un esprit DYI (Do It Yourself) exaltant, et des photos de soirées incroyables (les Dr Sketchy's, notamment).
Il n'est pas donné à tout le monde de savoir dessiner, peindre, écrire, parler, poser, organiser et coudre avec talent. Stella Polaris fait partie de ceux-là, et mérite à ce titre un site qui rougne.
Le moodboard
Au début du projet, nous avons passé un peu de temps ensemble pour débroussailler le terrain et savoir où nous mettions les pieds.
C'était très important pour moi de lui poser des questions, de l'écouter, et de voir comment elle réagissait au petit moodboard que j'avais commencé à constituer.
À cette occasion, j'ai pu découvrir son appartement, et tout ce que j'y ai vu a beaucoup nourri mon imagination : l'illustre couloir noir, le choix des étoffes, les miroirs, les couleurs du bois, le service à thé, la déco et les livres…
Je lis le blog de Stella Polaris depuis des années, et, ses billets étant toujours richement illustrés, je m'étais progressivement familiarisée avec l'esthétique qui l'inspire et la caractérise.
En visitant son petit chez-elle, j'ai réalisé à quel point l'image qu'elle donne d'elle-même sur le web est juste.
C'est du côté de l'Art déco et de l'édition que j'ai puisé l'inspiration nécessaire pour ce projet.
L'écueil aurait été de vouloir trop en faire, de surcharger et de noyer le propos.
On voulait créer une interface qui durerait longtemps : elle ne devait donc pas être trop marquée, et rester, sinon moderne, plutôt atemporelle.
J'ai donc opté pour des aplats et des formes très simples. La texture d'arrière-plan est discrète pour ne pas perturber le regard, irrésistiblement attiré par le centre de la page.
Il y a quelques semaines, Mike Monteiro a tweeté un truc qui m'est resté dans la tête. J'ai essayé d'en prendre de la graine.
Je peux le dire aujourd'hui : ça n'a pas été facile pour moi d'épurer. Spontanément, j'ai un style de design assez baroque : j'aime remplir.
Là, je me suis forcée à faire l'inverse : épurer, supprimer, et supprimer encore.
Je ne pensais pas écrire ça un jour, mais ce projet m'a donné envie de continuer à simplifier. (Et là vous seriez en droit de me dire : « Tu as changé. »)
Galeries et commentaires
À force de designer des sites WordPress, je commence à faire une fixette sur deux éléments d'interface précis : les galeries et les commentaires.
Galeries et commentaires WordPress sont souvent négligés, ou laissés par défaut, malheureusement : il est vrai que vouloir faire original demande pas mal de travail.
Pour les galeries, j'ai voulu casser le côté rectangulaire habituel des miniatures que l'on voit partout en utilisant des formes rondes – simple reprise du médaillon situé dans l'en-tête du site :
Pas besoin de se casser la tête à uploader des images rondes : border-radius
est notre ami.
Pour les commentaires, je dois vous avouer un truc : j'adore styler les commentaires imbriqués dans WordPress. :oops:
C'est souvent un casse-tête graphique et technique – d'autant plus que j'essaie de ne pas trop me répéter graphiquement d'un site à l'autre – mais… j'adore ça. :oops:
Vous ne trouvez pas que ça différencie d'emblée ce blog de tous les autres, et que ça donne envie de commenter ?
Niveau typographie, j'ai choisi la police Trend Sans, qui contient de très jolis glyphes décoratifs. Le corps de texte est en Georgia – pour l'avoir testé, je ne suis pas emballée par l'idée d'utiliser font-face sur tous les textes d'un site.
Un mot sur la technique
Le site de Stella Polaris est responsive, et est construit sur quatre points de rupture principaux.
C'est la première fois que je conçois un point de rupture pour les très grands écrans, à partir de 1400 pixels de large : à partir de là, le conteneur principal du site s'agrandit (jusqu'à une largeur maximale), et le corps de texte s'agrandit lui aussi, passant de 16 à 18 pixels.
Sur un écran 27 pouces, par exemple, on appréciera pouvoir lire un billet à une distance confortable sans devoir rapprocher son visage de son écran !
Comme j'ai tout intégré en em
, j'ai dû ruser pour ne pas rendre l'écriture avec Compass trop redondante. J'ai ainsi créé deux-trois fonctions qui prennent pour argument telle ou telle taille de police, et qui génèrent ensuite toutes les valeurs en em
qui vont bien.
Moi je trouve ça facile, mais je ne suis pas sûre que je ferais la même chose si d'aventure je travaillais en équipe avec une problématique similaire… Mais c'est là tout un autre débat.
Je n'ai pas rencontré de difficultés techniques particulières sur ce projet, mais il faut quand même bien dire que rendre responsive un système de commentaires imbriqués n'est pas de tout repos ! :idea:
À noter que le site a changé d'URL : de stella-polaris.fr
, il est désormais accessible depuis stellapolaris.fr
.
Le résultat
Vous pouvez voir toutes les maquettes sur Behance, et lire un compte-rendu un tout petit peu plus factuel et technique dans mon portfolio.
Héloïse quant à elle parle de cette refonte sur son blog.
Les commentaires qu'on a reçus pour le moment sont très positifs, c'est cool ! À lire ici, là, là et là aussi.
Au fait, j'en profite pour remercier mes beta testeurs qui roxent du poney : Corinne, Olivier, Mehdi et Simon. Merci !
J'espère que ce making-of vous a plu ! N'hésitez pas à le partager autour de vous, rien ne me ferait plus plaisir – ah, si : vos commentaires ! 8-)
8 janvier 2014
Merci de lutter activement contre les sites blancs, entre ton magnifique portfolio et cette refonte, le DIY est à l'honneur et prouve qu'il peut-être bien fait (enfin on le savait déjà, mais c'est juste qu'il passe tellement de temps traîné dans la boue, de la boue scintillante animée et avec des effets, certes, mais…)
C'est d'autant plus important que depuis plusieurs années, les réseaux sociaux bien qu'ils aient amené beaucoup de gens à utiliser Internet, uniformisent les univers de ces mêmes personnes. Et que l'offre inverse semble effectivement toujours culminer vers la beauté du vide. Comme si les sites devaient toujours être des galeries d'art moderne mettant en valeur le contenu. Pourtant dans la vie réelle, il existe aussi des boutiques ou des restos très personnalisés qui n'ont aucun scrupule à faire partie de l'expérience. Et c'est tant mieux. Alors pourquoi pas le web.
En tout cas j'adore le résultat final. Et finalement, tu sembles avoir trouvé un vrai compromis entre la patte personnelle et la sacro-sainte règle du design moderne.
Par ailleurs je te remercie pour l'ensemble de ton blog qui fourmille en ressources qui m'auront été bien utile cette année pour ma première expérience sur WordPress, Sass… (un site d'inspi Art Déco, justement ! Enfin, entre autres.)
8 janvier 2014
Bonsoir Messalyn,
Merci beaucoup pour ton commentaire ! ^.^
J'adore cette comparaison avec des petites boutiques ! On peut aussi penser à un salon de thé, à un disquaire old-school, bref à des endroits conviviaux, où on se sent bien, à l'opposé d'une galerie parisienne dans laquelle on n'ose pas rentrer…
Merci ! :)
C'est super, ça ! Ça m'encourage à continuer à alterner billets techniques et billets d'inspiration. Je vais aller visiter ton site ! :-)
9 janvier 2014
C'est vrai que je n'ai jamais commenté, bien que je suive ton univers depuis de nombreuses années. Mais j'avoue que ce billet précis rassemblait plusieurs univers auxquels je m'intéresse sur Internet. C'en était trop ! Sur le plan technique j'avais déjà mis en favori depuis longtemps ta page delicious, parce que quand on cherche il faut bien commencer quelque part et pas nécessairement sur un moteur de recherche. (Et même ton billet sur les bonnes adresses de Saint Malo m'a servi récemment, on trouve de TOUT ici XD)
Tu risques d'être déçue : le site que je mentionne n'est pas mon site, & il n'est pas encore lancé (un petit soucis avec l'hébergeur). Quant à mon propre site, updaté pour la dernière fois il y a un an, il est actuellement en pleine fusion site pro/site perso + adaptation WordPress (même si le design n'en bougera pas trop).
(Allez hop, un commentaire imbriqué. Tiens d'ailleurs il n'y a pas de prévisualisation, pourtant utile quand on a l'audace d'utiliser des balises)
9 janvier 2014
^.^
Tiens, c'est marrant que tu parles de ma page Delicious, car je me suis toujours demandée si elle était utile à d'autres personnes qu'à moi !
J'adore Delicious, je m'en sers tout le temps, c'est super pratique !
Héhé, oui, et ça va continuer dans cette veine.
En tout cas, quand ton nouveau site sera en ligne, fais-moi signe :)
Oui, tu fais bien de me le dire : en effet, c'est une fonctionnalité que je pourrais ajouter ! Merci pour ce commentaire inspirant :)
8 janvier 2014
J'aime beaucoup le résultat, et en plus grâce à toi j'ai découvert un chouette blog :) Bravo !
8 janvier 2014
Salut Kalys !
Super, j'en suis ravie ! Stella fait un travail remarquable, et je crois qu'elle est plus motivée que jamais à publier sur son blog désormais ;)
8 janvier 2014
J'adore vraiment le résultat final ! Du grand art (déco ;)) !
Et j'ai découvert un chouette blog grâce à toi alors merci :)
8 janvier 2014
Salut petit oiseau !
Hey, merci beaucoup pour ton commentaire ! ^.^* Je suis ravie que le site te plaise !
Et, oui, le blog de Stella Polaris est super chouette ! À noter qu'elle a une page Facebook aussi, où elle partage un peu plus que ses billets.
9 janvier 2014
J'aime toujours autant ces postes making of qui justifient bien les choix faits, les problématiques de positionnement autant de graphisme que technique <3
9 janvier 2014
Cool, car je compte en écrire d'autres ;)
10 janvier 2014
Ah comme toujours tu me surprends de plus en plus, c'est beau, agréable et merci pour ces articles "coulisses". C'est très intéressant !
Le nouveau site de Stella est Magnifique, pour moi c'est Fitzgerald, The Jazz Age, awww.... !
PS: Moi aussi j'aime beaucoup Delicious !
10 janvier 2014
Merci beaucoup Candice ! Ça me fait plaisir :)