Airpods Pro 2

Design web - Intégration web HTML/CSS/JS

Démonstration du site web grâce à un mockup responsive

Résumé

Crédits:

Design et intégration web par Vincent Lachapelle.
Les images appartiennent à leurs propriétaires.

Année de réalisation:

Automne 2023

Ce site est un landing page présentant un objet technologique sous un thème sombre. J’ai réalisé le design dans le cadre du cours de design interractifs, et j’ai ensuite décidé de coder la maquette en HTML / CSS / JavaScript pour le plaisir.

HTML

CSS

JavaScript

Design web

Figma


Réalisation du projet

La planification du design

Je me suis inspiré des sites web ayant un thème sombre pour bâtir un moodboard regroupant des comparables, des textures, des couleurs et des icônes. J’ai ensuite fait le wireframe et ma recherche d’images du produit.

Moodboard du projet airpods pro 2

Moodboard d’inspiration

Wireframe de la page airpods

Wireframes de la page principale

Le design

J’ai pu ensuite ajouter mes contenus et les couleurs dans le wireframe. J’ai également mis un filtre sur les textures pour mieux les faire ressortir.

L’intégration HTML/CSS

Plus tard, je me suis dit que je pourrais intégrer cette maquette en HTML / CSS et c’est ce que j’ai fait.

Extrait de code html pour la section du caroussel de la page des airpods pro

Extrait de code HTML pour le caroussel

Extrait de code scss

Extrait de code SCSS pour le caroussel

Le JavaScript

J’ai aussi ajouté un caroussel comme le voulait la maquette, ainsi que des animations de défilement (Scrolly).

Design de la nous joindre du projet

Javascript du caroussel réutilisable

Design de la nous joindre du projet

Résultat du caroussel

Le responsive

Finalement, je me suis assuré que le site soit responsive pour qu’il soit accessible à plus de personnes.

Airpods pro 2 sur desktop
Airpods pro 2 sur desktop
Airpods pro 2 sur desktop
Airpods pro 2 sur desktop