design system

À propos

Projet

Site de présentation de la chaussure en la comparant à une personne, mais aussi décrivant sa réalité, ce qu’elle vit, au moyen de visuels et de fonctionnalités.

Histoire

“Ma chaussure est un mannequin qui a passé l’âge de faire du mannequinat mais que les grandes marques continuent de s’arracher juste parce que c’est elle, elle a un nom et c’est une valeur sûre. Elle est en fin de carrière. Elle fait donc fantasmer tout le monde, c’est comme si elle était immortelle car elle est indémodable. Malheureusement, une fois qu’un couturier collabore avec elle, il ne sait plus s’en séparer, il ne l’échangerai pour rien au monde. Il l’adore tellement qu’il en devient possessif. Elle passe alors de couturier en couturier espérant trouver l’herbe plus verte ailleurs, ce qui n’arrive jamais. Tout l’amour que ses admirateurs lui portent l’use.”

Contenu

Voice & Tone

Le ton d’article de presse et des magasines féminins est utilisé. Des phrases de type “ Une de magasine”, par exemple. Grâce à cela, l’utilisateur percoit qui est la chassure, sa personnalité et ce qu’elle “dégage”.

Ambiance & design

Le site dégage une ambiance qui paraît légère mais il y a toujours un petit rappel pour signifier qu’en fait ce n’est pas du tout léger. Il est simple et épuré (référence à la mode et aux grandes marques) et les utilisateurs peuvent “interagir” (inspiration des réseaux sociaux). Graphiquement, même si la simplicité est importante, des choses plus “trash” (typo, aplat, espace,…) rappellent subtilement les aspects plus “dramatiques et tragiques” de l’histoire de la chaussure.

Bloc et fonctionalités

Pour représenter l’idée à faire passer, il penser aux ensembles qui composent le site et comment les disposer. Les fonctionnalités sont également importantes.

Couleur

Palette de base

#1f0605

#ed968d

#f2d6d2

#faefed

Les couleurs de base sont employées pour les éléments essentiels du design. La couleur principale est le brun foncé, elle est utilisée pour le texte courant mais aussi pour certains icônes par exemple. Les autres servent plutôt à démarquer un titre ou un bouton.

Couleurs d'alternative

#e9e0de

#f2eeee

#f9f5f5

Les couleurs secondaires sont employées pour les éléments qui ont moins d’importance dans le design. Par exemple, les fonds ou les états désactivés.

Couleurs d'alerte

#e9e0de

#2f4b3e

#14291f

Les couleurs d’alerte sont employées pour attirer l’attention sur des éléments afin qu’ils ressortent de l’ensemble du design. Par exemple, elles seront utiles pour les message d’alerte.

Typographie

Polices de caractères

Abel, sans-serif

Playfair Display, serif

Échelle

  • 16px

  • 20px

  • 24px

  • 28px

  • 32px

  • 36px

  • 40px

  • 44px

  • 20px

  • 24px

  • 28px

  • 32px

  • 36px

  • 40px

  • 44px

  • 48px

  • 52px

  • 56px

  • 60px

Couleurs

#fcfafa

#ed968d

#fcfafa

Iconographie

Icônes

icone du like
icône de fermeture
icône d'alerte

Images

Blocs de texte

Mon titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc sapien, aliquet fringilla malesuada id, blandit vitae eros. Vestibulum ut nisl posuere, suscipit mauris id, molestie justo. Fusce a lacinia mauris, eu venenatis nisl. Cras at varius felis, a gravida diam. Ut feugiat orci mauris, in sollicitudin ante tempor vitae. Morbi eu commodo sem, sed pretium libero. Praesent quis euismod sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec porttitor a nisi at mattis. Quisque pellentesque tempus est, sed mollis est eleifend sit amet. Vestibulum sagittis justo sit amet sem tincidunt euismod. Praesent non vulputate dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a lacinia mauris, eu venenatis nisl. Cras at varius felis, a gravida diam. Ut feugiat orci mauris, in sollicitudin ante tempor vitae. Morbi eu commodo sem, sed pretium libero. Praesent quis euismod sapien.

Boutons

État normal

État hover

État actif

Slider