mockup-sega-hero

Console Sega DBS

Projet personnel | Design et intrégration web

Tester le site

Un résumé

La maquette a été créée dans le cadre du cours de Design Interactif. Mon objectif était de concevoir un one-pager qui mettrait en valeur les qualités et les différentes caractéristiques d'un produit fictif dans le but de le vendre.

Informations

Créateur du projet

Rito José Blandon Pinzon

Logiciels utilisés

Vs code, Figma

Compétences utilisés

Design et intégration web

Démo du projet

Création de la maquette

Pour la maquette, j'ai commencé par m'inspirer des différents sites de consoles de jeux afin de me faire une idée du type de site que je devais réaliser. J'ai également utilisé les différentes couleurs et images en lien avec la console, comme le bleu et l'orange. Je me suis aussi basé sur des sites tels que Nintendo, Xbox et la PS5 pour trouver mes fonds et m'inspirer du style des sections de contenu.

De maquette à intégration

Pour l'intégration, j'ai commencé par intégrer mon stack Tim Tools afin de pouvoir réutiliser mes différentes composantes. Ensuite, j'ai construit le squelette du site en HTML, pour finalement l'intégrer en CSS. Par la suite, j'ai procédé section par section pour l'intégration, en m'assurant que chaque section était complétée avant de passer à la suivante.

image-integration
image-integration
image-integration
Image en grand

Exemple de code

image-code

Script Caroussel

image-code

Script Scrolly

image-code

Script Header

image-code

Script Header(suite)

Image en grand

Compétences acquises

Structure de projet et de fichiers
C'est un projet personnel que j'ai décidé d'intégrer en site pour me remettre dans le bain du web et ne pas être perdu lors du prochain cours de développement web. J'ai donc réalisé ce projet durant l'été afin de rester à niveau et de consolider mes bases en HTML, CSS et JavaScript.
Intégration d'une de mes maquettes
Grâce à ce projet, j'ai compris l'importance d'utiliser des composantes JavaScript, des variables CSS globales et d'avoir une bonne structure de projet. L'intégration des couleurs, des espacements et des composantes JavaScript était beaucoup plus facile grâce aux différentes connaissances acquises durant mon cours de développement web précédent.
Débrouillardise
C'est l'un de mes premiers projets personnels réalisés durant l'été, et je n'avais donc pas accès à l'aide des professeurs. J'ai dû faire mes recherches moi-même et trouver des solutions à mes bugs en CSS et JavaScript.