Design web & mobile

TFA – Benjamin Palmero

Case Study TFA

Un travail de fin d’année, affirmer sa présence en ligne.

TFquOI?

Le TFA, pour moi, c’est l’occasion de se présenter au web, de montrer qui on est, ce qu’on a fait, pour faire des rencontres.

Dans cette optique là, je me demande comment je me définis. Je ne suis pas un incroyable développeur, je maîtrise plutôt bien HTML/CSS et je ne me suis pas encore trouvé de spécialité précise (copy writing, ui designer, etc.). Je préfère alors me définir comme webdesigner, un terme plus touche à tout à mes yeux, ce qui me convient pour le moment.

Je me présente également comme photographe, parce que c’est quelque chose auquel je tiens beaucoup et que j’aimerais mettre en avant et pratiquer.

Inspiration

Depuis le début de l’année, j’avais créé un dossier de favoris dans lequel je mettais toutes les pages qui me plaisaient pour une raison ou pour une autre. J’ai donc réouvert ces pages à la recherches de ces éléments que j’avais aimé, et je me suis demandé pourquoi je les avais aimé, pour pouvoir en tirer le meilleur et m’en inspirer.

Grille, font-pairing, rythme et visuels

Tout commence avec une grille. Une grille que je vais définir selon mes hauteurs de lignes, que je vais définir selon le rythme des polices, que je vais définir selon les polices, que je vais définir selon leur “assemblage”.

J’aime utiliser des sans-serif plutôt grasses pour mes titres et sous-titres et des serifs plutôt fines pour mes corps de textes. Sur base de ça, je choisis la Work Sans, qui offre beaucoup de graisses, notamment une ultra-bold et je recherche quelle serif lui coupler en faisant des essais de font-pairing. Malheur, je ne trouve pas de serif avec une hauteur de X correspondante et en plus, je me rappelle qu’il vaut mieux commencer par choisir la police du texte.

Je recommence alors en cherchant des polices du même typographe et je me rends compte qu’il existe une Merriweather Sans qui propose plusieurs graisses et qui se couplera naturellement avec Merriweather, que j’apprécie notamment pour sa facilité de lecture.

Pour le rythme, je choisis un rapport de 1.333, qui trônera au dessus de mes fichiers CSS et qui sera présent sur toutes mes réalisations. En partant d’un corps de base de 18.5px, je propose des typos assez grandes, ce qui est important pour moi pour deux raisons: d’une part, j’ai une mauvaise vue et les textes trop petits me forcent à loucher et d’autre part, lorsque je lis un texte dont la typo est assez grande, j’ai l’impression qu’on s’adresse plus personnellement à moi, ce que j’ai voulu reproduire ici.

Au niveau du choix des couleurs, je mise beaucoup sur le blanc, idée renforcée par cet article, sur un gris foncé pour proposer des contrastes, et un bleu clair pour redonner de “l’énergie”.

Un footer

Mon footer est présent sur toutes mes pages, pour ouvrir la conversation, et proposer quelques uns de mes liens à mes utilisateurs. Après avoir lu ma page, libre à eux de me contacter ou de me suivre ailleurs.

     Projet au hasard