Fonts in use

Refonte d’un site d’information

Projet d’étude réalisé en 2019

Analyser le site web existant

Fonts in use est un site internet dédié aux typographies appliquées aux projets des designers-contributeurs.

Constitué d’un blog, d’une collection de projets et d’un catalogue de typographies, Font in use présente un design un peu austère sans vouloir rendre son utilisation accessible. Le volume de son contenu présente une contrainte majeure.

Comprendre le maillage interne d’un site web

Pour aborder la navigation dans sa globalité, il était nécessaire d’analyser les liens internes entre modèle de pages (page, catégorie et article) pour créer une navigation pertinente et fluide et ainsi permettre à l’utilisateur de découvrir le contenu des trois aspects du site. N’oublions pas les points d’entrée de la collection et du blog que j’ai voulu ancrer sur le côté pour faciliter le passage d’un domaine à un autre.

Renforcer l’identité du projet

Dès la première section, j’ai imaginé une animation Javascript du logo sous forme de kaléidoscope. Cela dans le but de dynamiser l’interface et faire un focus sur le titre h1 et la baseline. Ce dispositif annonce non seulement l’identité du site mais également son usage.

L’utilisation de la couleur Pantone de l’année permet d’inscrire le projet dans l’air du temps et lui permettre de changer au gré des tendances. Sur le plan technique, les propriétés customisées en css faciliteront la mise à jour des teintes en modifiant simplement les codes hexadécimaux des variables initialisées. Les aplats de camaïeu viennent donner un rythme et une segmentation visuelle.

Initier l’utilisateur à l’usage d’un site web

J’ai imaginé un système permettant à l’utilisateur de s’immerger dans la découverte de cette collection de polices. Ce dispositif de slider et d’accordéon offre la possibilité d’explorer des typographies à travers les projets les plus consultés(auteur, historique, liens internes et externes).

Améliorer la navigation

Les pages de typographies sont agrémentées de suggestions de publication pour inviter l’utilisateur à découvrir plus de projets en rapport avec la police.

Page d'accueil

Page d'accueil du projet de refonte de Fonts in use

Découverte des relations projets/typographies

Page de typographie

Page de typographie du projet de refonte de Fonts in use

Page de flux d'articles

Page de flux d'articles du projet de refonte de Fonts in use

Page article

Page article du projet de refonte de Fonts in use