MB

Marine

Beltus

HadTwoFonts

#Typography #Design #Writting

En quoi ça consiste ?

Ce projet consiste à choisir une font soit sur typekit ou google fonts, et à partir de cette police, faire un design pour la mettre en valeur et montrer à quoi sert cette police. J’ai choisi d’utiliser le service google fonts et de prendre la police « Inknut Antiqua »

Image qui montre une capture de recherche sur google fonts

Pourquoi ?

Parce que j’aime ce genre de typographie, il y a des nuances d’épaisseur dans la lettre, et je trouve que c’est ça aussi qui donne du caractère à une police, ça la rend plus particulière. Après avoir choisi cette police, j’ai lu ce qui a été dit par son créateur à propos de cette police, notamment le but dans laquelle cette police a été créée, celle-ci est pour la littérature.

Design

Image qui montre une les les décorations du design

Pour le design, je me suis d’abord demandé ce que cette font m’inspirait, je me suis dit que le mieux était de partir sur le pourquoi elle a été créée, donc la littérature. D’où les livres, les couvertures de livres et le stylo mis comme éléments de décorations sur la page. Les couvertures de livres servant uniquement à montrer différents font-pairing possible avec la Inknut Antiqua.

Pour séparer les différentes parties de mon site, je me suis dit que ce ne serait pas plus mal, pour changer de ce que je faisais habituellement, de changer de couleur de fond à chaque fois que l’on change de partie.

Fonctionnalités

Une fonctionnalité à laquelle j’ai pensé pour les utilisateurs est de pouvoir voir dans quelles langues on pouvaient, notamment, utiliser cette typographie, ce qu’elle gérait comme caractère comme par exemple les accents dans la langue française. Donc j’ai choisi plusieurs langue et ai mis un mot avec un caractère spécial. Il y a une exception, c’est pour l’anglais où il n’y a pas de caractères spéciaux.

The different languages used

Ça va ?

Fonctionnalités

Je me suis aussi demandé comment montrer les différentes graisses de cette typographie et je suis partie pour faire un système de range slider.

Pour le réaliser, j’ai d’abord essayé de suivre des tutoriels sur internet, celui que j’avais d’abord trouvé ne fonctionnait que sur l’ordinateur, donc sur tablet et smartphone, le système n’aurait pas fonctionné, après cela j’ai pensé à un de mes cours à la HEAJ où on a vu le plugin Hammer.

Seven styles

fond

music

drag

j’ai essayé, un bug persistait, la pastille ne restait pas au bon endroit lorsque l’ont cliquait une deuxième fois dessus pour la changer de place. Après en avoir parlé avec un prof de javascript, il m’a aidé à régler ce bug, je n’avais, au final, pas géré l’arrêt de la pastille.

Après avoir parlé avec le prof du cours de design, j’ai aussi fait en sorte que l’on puisse changer le fond de cette partie et ainsi de pouvoir montrer que la typo fonctionne sur plusieurs couleurs sans que ça n’entrave à sa lisibilité.

Video

un gif animé où l'on voit le site défilé et où l'on voit les difalférentes fonctionnalités présentes