Design system

Site storytelling - Better Life

Ce design system à été créer dans le cadre du cours d’HCD, donnée à l’heaj infographie afin de pouvoir créer un site storytelling que j’ai nommée Better Life.

illustrations livre

L'histoire

Dans cette histoire vous incarnerez une héroïne ayant pour but de réussir dans le monde de la mode. Au travers des différents systèmes mis en place sur le site vous aurez la possibilité d'influencer l'histoire afin de faire le bon choix pour aider votre héroïne à atteindre son but.

Layout

Afin de commencer le design de votre storytelling , Voici le type de layout que vous pourrez utiliser en fonction de la partie du récit que vous mettrez en place.

Partie narrative - Passé

Notre histoire débutant avec une partie narrative du passé de notre personnage principal. Vous utiliserez le système de slider exemple ci-dessous. Avec le texte qui apparaitra en animation au fur et à mesure sous les illustrations.

img exemple slide

Partie narrative - Présent

Une fois la partie du passé terminé nous passons au présent où nous retrouvons notre personnage dans le présent faisant face à ses difficultés du présent et en quête de son but ultime. Pour ce faire j'ai choisis de mettre en place nous choisissons le système mis en place de bloc narratif sous trois directions pour le même contexte. (L’utilisateur choisi une voie qui modifiera son histoire en fonction de ses choix.)

img exemple present

Partie narrative - Péripéties

En ce qui concerne les péripéties de l’histoire, j’ai mis en place un système immersif afin que l’utilisateur s’immerge totalement dans l’histoire. L’écran se transformera en livre afin de plonger totalement l’utilisateur dans l’histoire.

img exemple

Typographie

img typographie

Couleurs

img couleurs

Illustrations

Voici le type d’illustration convenant pour le site

illustrations

Lorsque j'ai eu l'idée de ce projet j'ai tous de suite penser à ce type d'illustration. Un personnage sûr de lui, extravertie et déterminé à conquérir Paris (donc en parallèle le monde de la mode). Sans réel visage, mais plutôt une silhouette que tout le monde pourrait incarner et / ou s'identifier afin de lui créer sa propre histoire.

Composants

img boutons composants

Vous disposez à présent de tous les éléments nécessaires à la réalisation de ce projet.