Logo

Introduction

Dans le cadre du cours de Modular Design, nous devons créer un design système pour la réalisation d’un site fictif. Je vais présenter les différents éléments qui constituent le site.

chaussure choisie

Le projet

Le projet consiste à prendre notre paire de chaussure préférée et de créer un site. Pour ma part, j’ai choisi de réaliser un site de vente de chaussures.

Couleurs

Les couleurs sont l'identité visuelle. Je veux faire ressortir un côté chic, sobre et excentrique comme le sont mes sneakers.

Je verrai donc mon site épuré mais avec des petites touches de couleur comme celle-ci:

images du nuancier

Typographies

Mon choix typographique se porte sur la Raleway, utilisée en corps de texte et la Old Standard tt qui elle est utilisée pour les titres principaux.

Hiérachies

le rapport hiérarchique que j’utilise est 1.414 — Augmented Fourth avec un interlignage de 160 %. La taille par défaut des corps de caractères est de 18 px.

Tailles

H1 Sneakers

H2 Sneakers

H3 Sneakers

H4 Sneakers

Icones

Les différentes icônes que je propose sont soit noir sur fond clair ou blanc sur fond foncé.

icones du site

Boutons

Boutons principaux

Les boutons permettent une action, ils doivent être facilement identifiables auprès des utilisateurs.

boutons du site

Grilles

La grille utilisée est répartie en 12 colonnes avec des colonnes de 61 px et des gouttières de 28 px.

images de la grille

Formulaires

Liste déroulante

Les listes déroulantes permettent aux utilisateurs de choisir parmi la liste proposée, l'option qu'il désire.

Liste déroulante

Champ de recherches

Le champ de recherches permet de trouver l'article ou les informations que souhaite trouver l'utilisateur. Il se trouve dans la navigation principale.

Barre de recherche

Formulaire de connexion

Voici l'écran de connexion où l'utilisateur pourra se connecter et trouver ses informations, ses articles enregistrés,…

Écran de connexion