Documentation

Webdesign

Recherches couleurs, typographies et design

Le design du site marie délicatement les textes et les animations. La mise en page coupée en deux rappelle un livre ou un journal intime. L’animation est fixée sur la page telle une image de titre pour chaque femme. Les témoignages sont très importants, car c’est eux qui transmettent les histoires. L’animation reste une interprétation qui accompagne le texte.

La recherche des couleurs passe d’une palette teintée de rouge à des nuances pastelle. Les couleurs claires sont désaturées comme mélangées à des larmes. Même subtiles, elles différencient les femmes les unes des autres en rappelant la diversité de leurs histoires. Les teintes pastel coupent le noir en l’adoucissant avec une pointe de mélancolie.

La typographie GT Super Text mélange lisibilité et élégance avec un caractère contemporain. Afin d’améliorer la lisibilité sur l’écran, l’écriture est moyennement grande. Les phrases italiques et les paragraphes rythment les textes.

La page d’accueil et la page « à propos », fonctionnent comme une page de titre et un quatrième de couverture. En entrant sur le site, il n’y a pas de tabous. Le thème est directement annoncé. L’animation est présente partout, sur ces deux pages, elle est plus décorative. Sous à-propos, les informations du projet sont consultables ainsi que d’éventuels liens vers des informations ou des associations d’aide.

Une fois le design posé, j’ai codé le site dans une version « desktop ». Il sera adapté pour le « responsive » dans un deuxième temps. Le code mélange du HTML, du CCS ainsi que du JQuery. La transition entre les pages joue sur l’opacité pour un aspect plus délicat.

Page d'acceuil

Variantes de mise en page

Variantes de mise en page des quotes

Palettes de couleurs

Palette pastel

Palette pastel accentuée

Palette pastel foncée

Choix typographique

Palette foncée

Palette foncée saturée

Palette rouge brun

Premier essai

© Mona Baiutti, Bachelor Communication visuelle,
Haute école des arts de Berne, 2019.