image analyse de typo Case study fleche pour scroller

Had Two Fonts

La demande

Le projet "Had Two Fonts" s'est déroulé en deux temps.

Pour la première partie, Had One font, nous devions imaginer une page web qui présente une Google Font de notre choix.

Il fallait la mettre en valeur, montrer ses atouts et les contextes dans lesquels elle se prêtait bien pour donner envie aux gens de la télécharger.

Première impression

Ma première impression était très positive : on nous avait montré pour exemples des sites tels que Comicneue, Hvdfonts, Escafina ou encore Regina Black, et j’ai trouvé cela très impressionnant, ça donnait vie à la typographie !

Au travail

Sans plus tarder, je me lance sur Google Font pour trouver la perle rare. Je ne savais pas encore que je commettais une grosse erreur…

J’ai donc parcouru les typos pendant plusieurs heures, en notant toutes celles qui me plaisaient.

Mon choix s'est porté sur : Dancing Script.

Photo de la typographie Dancing Script

Maintenant, il fallait mettre au point le design! Les heures, jours, et même semaines passent, les lectures défilent, et je n’ai toujours rien… Mon professeur me fait remarquer que la remise approche et que je n’ai toujours rien à lui montrer. Ce n’était pas un manque de volonté, seulement je n’avais aucune idée de ce que je voulais présenter, de comment je pouvais mettre en valeur cette typographie.

C’est en discutant de mon problème avec lui qu'un camarade de classe me fait remarquer mon erreur… Je ne dois pas choisir une typo qui me plait, mais une typo qui m’inspire, qui me parle.

Et effectivement, celle-ci me plaisait, mais elle ne m’évoquait rien…

On recommence

Du coup, retour case départ. Je pars à la recherche d’une nouvelle police ! J’en sélectionne deux-trois, et puis une typographie me saute aux yeux, Josefin Sans. Elle me plait et en plus, elle m’évoque des choses, j’ai toute suite des idées qui me viennent en tête!

typographie Josefin Sans

Choix de design

J’ai commencé par choisir les couleurs dominantes de mon site. Pour ça, j'ai trouvé mon inspiration sur Color Hunt.

Une chose était sûre : je voulais deux couleurs qui se contrastaient bien.
 J’ai fini par opter pour ces deux-ci :

#E5B6A4
#0D131F

Ensuite, l’ambiance de la typo et des couleurs m’inspirait la nostalgie des vacances d’été…
Il s’avère que j’adore prendre des photos et que j’étais justement partie à Mendes à la Toussaint, ce qui m'a permis de beaucoup photographier.

J’ai trouvé que ça serait une chouette idée de les utiliser.

Photo qui montre l'atmosphère

Ensuite tout le reste s’est monté très rapidement : j’ai établi une liste du contenu des interactions que j’imaginais sur mon site.

Je voulais que la structure soit dynamique et qu’on puisse « jouer » avec la typo.

La remise

Il restait une semaine, et j’ai pu terminer mon design desktop et mobile, relativement satisfaite de ce que j’avais produit!

Partie du Design

Seconde partie

Nous sommes en février, on vient de passer nos examens de janvier, premier cours… 
Nous nous attendons donc à recevoir un nouveau projet!

Et là qu’est ce que nous voyons ? Had Two Fonts… Ah ! On doit intégrer le design réalisé en décembre !

La consigne n’est donc pas compliquée, à nous de donner vie à nos wireframes!

Intégrer

A vrai dire, me remettre au code me sembla ardu, j’ai dû recommencer à plusieurs reprises car ma façon de coder était embrouillée...

En codant, j’ai éliminé quelques détails dans le design : certains qui ne me paraissaient plus cohérents et d'autres que je n'arrivais tout simplement pas à coder.

Photo mac avec code

Les difficultés

Ce qui m’a causé le plus de difficultés, c’était de rendre mon site responsive. Je n’avais jamais fait ça avant, et ça m’a vraiment semblé compliqué au début ! Le problème, c’est que j’ai eu le déclic une fois arrivée à la fin. Par conséquent, j’ai perdu beaucoup de temps et mon travail n’était pas très efficace…

J'ai compris que, la prochaine fois, je commencerais à coder pour mobile, et que je rajouterais des media queries pour la version desktop, plutôt que l’inverse. 
Mais bon, on apprend de ses erreurs, donc l'expérience se révèle positive à terme.

Code CSS du projet, media queries

Le résultat

Ça y est ! J’ai terminé ! Mon site est complètement (car il serait osé de dire parfaitement) responsive !

Je l’ai testé sur plusieurs types d’écrans pour ne pas me baser que sur mon téléphone et mon ordinateur, mais aussi dans plusieurs navigateurs. J’ai constaté que selon le navigateur, le rendu pouvait être différent mais cela fonctionnait quand même.

Images du site dans des mokeup

Au final

Malgré quelques imperfections, je suis tout de même contente de voir mon travail intégré.

Se rendre compte du grand nombre de nouvelles notions apprises en une année représente une grande satisfaction.

Je m'aperçois que j'ai pris beaucoup de temps à intégrer ce projet. Ma méthode n'était pas des plus éfficaces. Je sais que si je devais le recommencer aujourd'hui, je travaillerais beaucoup plus rapidement et le résultat serait sans doute meilleur.

J'ai fait le choix de ne retoucher aucun de mes anciens travaux car je prends plaisir à retourner voir mes précédentes réalisations afin de pouvoir effectuer la comparaison avec ce que je sais faire maintenant

Voir en ligne