Léa Savignac

01

Contexte

Avant de parler de Had two fonts, il faut parler de Had one font. Briefing du 1er quadrimestre où il a fallu réaliser le design -l’univers- d’une font au choix. Pour résumer, nous avions libre arbitre dans le choix de la font sur google font ou typekit. Personnellement, j’ai préféré la typographie gratuite sur Google Fonts et donc plus facilement accessible. Cela peut paraître bizarre mais j’ai choisi une typographie de type script. Je la trouve très caractérielle et cela m'a inspiré. Had two fonts, c’est simple : reprendre notre design, le retravailler, le coder et essayer de créer une expérience utilisateur sympa.

02

Design

Commençons par l'inspiration, pour le choix des couleurs, je me suis inspirée d'une illustration de Mateo Morelli.

illustration Mateo Morelli

De plus lorsque que j’ai lu sa description sur Google Fonts l’auteur parle de son inspiration, et des publicités des années 60 de Bra’s. J’ai donc fait plus de recherches à ce sujet. J'ai beaucoup aimé cet univer de "femmes" fatale, feminine et forte. Cela m'a aussi rappelé les packagings de "the Balm" qui sont une signature très forte et qui savent se faire remarquer.

logo the balm

Le but du site étant de présenter la font, de donner envie de l'utiliser, de voir ce qu'elle a dans le ventre. Il faut choisir le contenu le plus pertinant possible. J'ai donc parcouru plusieurs sites qui avaient les mêmes buts que moi. Dans les plus inspirants -oui même si on a l'impression que c'est totalement différent - il y a celui-ci pour l'experience utilisateur & pour son univers et celui-ci qui met bien en valeur sa typographie. Dans le désordre, il faut faire une section de présentation, une partie pour essayer la typographie, les caractères et des exemples d'utilisation concrets. C'est ce qui me parait essentiel après avoir parcouru les sites. Certains ne présentaient pas les caractères ou des exemples. Et j'étais frustrée.

La grande question : qu'est ce que je mets en premier, la présentation ou les caractères ? Et comme je pars du principe qu'une "image" vaut mieux qu'un long discours, du coup j'ai choisis les caractères. On voit directement de quoi on parle. Donc, dans l'ordre on a : le header avec test de la typo, la présentation des caractères, la présentation de la typographie et des exemples d'utilisation.

Je savais que je ne pourrai pas utiliser la typographie parisienne pour les contenus car c'est clairement illisible et fatiguant. Mauvais point car c'est souvent le gros point faible des Scripts. Mais il y a un tas de bons points à mettre en avant : de beaux titres fins, un logo délicat, une citation posée comme une pensée légère...

styleguide had two fonts

La grille, élément essentiel à ne pas négliger. Cela structurera le site et ajoute une armature. J'ai donc choisi - totalement arbitrairement - 13 colonnes et 12 gouttières. Le nombre de colonnes est volontairement impair, pour donner un peu plus de rythme à la mise en page.

screen photoshop avec grille
03

Intégration

Niveau code, le site de base n’est pas compliqué, la difficulté a été de faire le responsive, notamment pour les caractères. Avec un peu de javascript, j’ai réussi à contourner ce problème - quand je dis qu’il faut que j’approfondisse mes connaissances, je le pense vraiment, cela m’a clairement sauvé la mise. Une autre difficulté a été d’intégrer les petites notes, censées aider l’utilisateur.

04

Pour finir...

Une fois la grosse partie du site faite, je me suis demandée : comment le rendre plus … vivant ? plus cool ? J’ai pensé aux images utilisées, elles représentent des pin ups, sexy, souriantes. Pourquoi pas ? Un peu de photoshop, des effets hovers, c'est un petit plus pour le site. Oui les détails peuvent faire la différence pour avoir un site sympa et cool. L'UX design est un domaine très intéressant, et j'aimerai le découvrir plus !

Merci ! J'ai encore beaucoup de chose à raconter, mon travail vous intéresse ? On peut en parler autour d'un café ! Vous pouvez également voir un autre projet ou tout simplement revenir à l'accueil.