Design system

Introduction

Un design system est un langage visuel qui synthétise les principes classiques d'un bon design avec les innovations technologiques et scientifiques.

L'objectif est de créer des solutions variées et une expérience utilisateur équilibrée et globale du site de notre Sneakers.

Typographie

Font-Family

Aa
Open Sans

  • Light
  • Regular
  • Semi-Bold
  • Bold
  • Extra-Bold
  • Light italic
  • Regular italic
  • Semi-Bold italic
  • Bold italic
  • Extra-Bold italic

Open Sans est une police sans empattement qui a été a été optimisé pour les interfaces d'impression, Web et mobiles, et présente d'excellentes caractéristiques de lisibilité dans ses lettres. C'est pour ces raisons que nous avons décidé de l'intégrer dans notre site.

Styles

  • Heading One

    Open Sans semi bold

    44px

  • Heading Two

    Open Sans semi bold

    36px

  • Heading Three

    Open Sans semi bold

    28px

  • Body Bold

    Helvetica bold

    18px

  • Body

    Helvetica regular

    18px

  • Button

    Helvetica Regular Uppercase

    18px

Couleurs

Ce système de couleurs est utilisé pour reflèter le style de la chaussure.

Couleurs primaires

Ce sont les 3 couleurs principales du site. Elles sont utilisées à 70%.

  • Orange (40%)
    #EC8504

  • Black (15%)
    #1C1717

  • White (15%)
    #FFF

Couleurs secondaires

Ces couleurs ont été choisies pour compléter les couleurs primaires. Elles sont utilisées à 30%.

  • Beige (10%)
    #C5AB9C

  • Gris (10%)
    #E8E8E8

  • Vert fluo (10%)
    #B5F74E

Grilles

Tailles des grilles

Le système des grilles est composé de 4 grilles avec une goutière de 30px pour séparer les collonnes.

  • Size 1/1

    grille size 1/1
  • Size 1/2

    grille size 1/2
  • Size 1/3

    grille size 1/3
  • Size 1/4

    grille size 1/4

Bouttons

Boutton principal

Il n’y qu’une seule sorte de bouton sur ce site web qui a pour but d’amener à l’action principale qui est d’acheter.

Slider

Slider Banner

Ce slider est utlisé pour faire défiler une série d’images de taille moyenne. Il prend peu de place (1/2 du viewport) et se situe au niveau du banner.

slider mobile slider desktop

Slider Body

Ce slider est utilisé pour faire défiler des images de grandes tailles. Il prend 100% de la taille du viewport.

slider body mobile silder body desktop