Graphisme / Développement web

DOZO
SHOP

CONTEXTE

Projet Universitaire

ANNÉE

2025

RÔLE

Graphiste & Développeur front/back end

LE CONCEPT

DozoShop est un inventaire de sneakers à la mode.

L'objectif de ce projet, était de créer un site webinventory avec une base de données afin de faire un inventaire de "cartes". Il fallait que l'utilisateur puisse avoir accès à un système de trie et de filtre ainsi qu'un formulaire sécurisé pour ajouter ses propres "cartes".

01.

TROUVER MON THÈME

J'ai commencé par chercher un thème dans lequel je me reconnais et avec lequel j'ai envie de travailler. Comme le développement web n'est pas vraiment ma passion, j'ai eu l'idée d'apporter un peu de créativité avec des éléments graphiques personnalisés. J'ai donc décidé de faire un inventaire de sneakers à la mode et de personnaliser chacunes de mes cartes.

02.

ATTIRER L'ATTENTION

Une fois mon thème trouvé, j'ai commencé à réfléchir comment j'allais m'y prendre pour donner envie de visiter mon site, j'ai donc eu l'idée d'utiliser encore ma créativité en m'appuyant sur les pages d'accueil de géant de la sneakers comme Nike. J'ai pris une des paires les plus rares pour en faire une vidéo de promotion sur la page d'accueil. J'ai voule la représenter sur un nuage flottant pour donner un côté "doux", "chill" au site. J'ai ensuite fais en sorte de montrer plusieurs angles de la paire pour vraiment la mettre en valeur.

03.

CRÉATION DES CARTES

Durant ce projet nous étions obligé d'utiliser une base de données pour stocker toutes les cartes. Pour ne pas avoir trop de fichiers j'ai décider de répertorier 20 paires de sneakers. J'ai donc commencé à créer mes cartes avec un style différent pour chaque paires. J'ai tout fais sur photoshop. Chaque paire à plusieurs angles de vues donc chaques paire à minimum 3 cartes différentes.

04.

CRÉATION DU LOGO

Il me fallait forcément un logo pour mon site, j'ai donc commencé à réfléchir ce que je pourrais faire. POur rêster dans le thème "chill" que je voulais donner à mon site, j'ai décider de le faire dnas un style "bubblegum". J'ai repris la couleru rose pour correspondre à la paire PHARE du site. J'ai fais l'effet bubble sur Illustrator et j'ai ajouter un nuage pour continuer à fond dans le style sur Photoshop. Il me fallait une déclinaison du logo pour le mettre en "favicon" je l'ai donc également designé.

05.

DÉVELOPPEMENT

Une fois tous mes éléments graphiques finis, j'ai commencé à coder pour donner vie à mon idée. J'ai vraiment voulu représenter une boutique de chaussures. Dans la barre de nav on peut retrouver 4 onglets ainsi qu'une barre de recherche. L'onglet accueil montre donc la vidéo de promotion avec la possibiliter "d'acheter" l'article. On peut également y retrouver une partie "Nouveautées" qui affiche les dernières paires ajoutées. Dans l'onglet boutique on peut filtrer la sélection par couleur, et trier par marques. Chaque carte à un bouton "Voir plus" pour afficher une description de la paire. Dans l'onglet "Formulaire" on peut ajouter sa porpre paire au site qui se retoruvera donc dans la partie "Nouveautées" de l'accueil. J'ai décider de designer un fond pour cette page. On termine le site avec l'onglet "A propos" dans lequel je remercie les personnes qui m'ont aidé dans la création du site avec également le fond designer.