Typographie
Space Grotesk est une typographie sans-serif qui combine des éléments de design modernes avec une touche de classicisme. Elle a une structure assez géométrique avec des formes arrondies. Les lettres présentent des corps verticaux un tout petit peu plus épais que les horizontaux. Cette structure lui confère une lisibilité claire même à petite taille. Space Grotesk n'a pas d'empattements mais ses terminaisons sont souvent arrondies ou légèrement biseautées, ce qui adoucit l'ensemble.
Logotype
Un monogramme simple, facilement reconnaissable et très lisible. Il est directement repris de mon identité de 2020. L'écriture tout en lettres minuscules prend ses sources du brutalist design et permet une composition plus compacte. Les espaces entre les formes sont réduits, ce qui rend le tout plus impactant.
Design system
Un système de design classique avec une mise en page des contenus modulaire. L'harmonie colorée est nivelée sur une plage de gris foncé et de blanc cassé. Un orange d'accent qui incarne la high-tech et le futurisme.
Emojis 🎉
Lors de ma précédente refonte, j'avais déjà mis l'accent sur les emojis et son importance pour amener de la chaleur dans l'interface. Cette fois-ci, j'augmente la dose ; leur utilisation rapproche et engage l'utilisateur dans sa visite. Parfait pour faire passer une idée ou une émotion, les emojis sont universels et permettent en un coup d'œil la compréhension du sujet.
Thème sombre
Concevoir une interface avec un fond sombre est un exercice difficile. Il est plus compliqué qu'avec une page blanche car il pose 3 challenges :
Lisibilité
Sur fond sombre, il est tentant d'utiliser du blanc pour rendre le texte ultra lisible. Ce fort contraste devient vite un piège qui peut faire mal aux mirettes. Il est important de trouver le bon équilibre entre le contraste et la taille du texte pour maintenir une bonne lisibilité et ne pas surcharger l'interface.
Dans mon cas, j'utilise le blanc uniquement pour les titres et les boutons. Plus le texte est long, plus la couleur du texte s'assombrit pour atténuer la brillance du paragraphe.
Hiérarchie visuelle
Les couleurs claires peuvent paraître plus vives sur un fond sombre. Il est important de lever le pied sur la saturation des couleurs pour ne pas apporter trop d'attention à certains éléments par rapport à d'autres.
Dans mon cas, l'orange est souvant accompagné par du blanc pour établir un équilibre et conserver une hiérarchie dans le flow de la page. Une tuile pourra être blanche si son contenu est moins important qu'une autre.
Équilibre
Il est tentant pour rester dans son ambiance de complémenter le fond sombre avec du noir ou des couleurs sombres. Pour éviter de créer une sensation de confinement, il faut trouver l'équilibre entre les éléments sombre et clairs pour aérer la mise en page.
Dans mon cas, les éléments colorés sont répartis et les blocs ne se suivent pas toujours. Les espaces dans la mise en page créent une sensation d'ouverture.
Mise en page
Reposant sur la tendance du bento design, la mise en page utilise des tuiles et des blocs pour présenter les contenus. Une façon modulaire d'agencer les espaces qui permet d'augmenter la densité de contenu. Cette mise en page est particulièrement utile pour placer toutes les informations principales au dessus de la ligne de flottaison. Les éléments s'imbriquent et s'accordent selon l'importance qu'ils doivent avoir. Certaines personnes appellent cette conception le « web design 3.0 ».
Les titres sont grands et expansifs, ils sont proportionnels à leur importance et peuvent chevaucher d'autres éléments si besoin.
Les boutons sont grands et donnent envie d'intéragir, ils n'hésitent pas à être sur-dimensionnés par rapport à leur texte. Là aussi, ils reflètent leur importance dans le flow de la page.
Intégration
Tech stack
Encore une fois, j'utilise mon stack favori 🎉
Les pages sont intégrées avec Vue.js + Nuxt, les projets et les médias sont gérés avec WordPress et interrogés via une API REST. Les animations sont intégrées avec GSAP + ScrollTrigger.
La génération de pages statiques permet de sauter complètement l'utilisation d'un serveur PHP ou Node.js. Pas de serveur, pas d'attaque, pas d'attaque, pas de palais.
Grille
Au début du web, les blocs HTML étaient prévus pour être empilés les uns sur les autres. Au fil du temps, des propriétés CSS ont été intégrées pour pouvoir les afficher côte à côte, puis de pouvoir les aligner entre eux.
Aujourd'hui, la propriété CSS grid permet de réaliser une mise en page complexe sur la base de cellules, comme un tableau. La magie, c'est de pouvoir disposer un élément sur plusieurs colonnes ! On peut donc prévoir un gabarit de grille et mettre en page ses éléments en donnant des coordonnées de cellules. Cette technique permet à la fois d'imbriquer les éléments mais aussi de les faire se chevaucher.