Fred-Eric Auger

nike phantom luna

Le but de ce projet :

Le but de ce projet était de créer un “one pager” pour promouvoir un produit que nous apprécions. Ce projet scolaire était d’abord un projet de design réalisé en automne 2023. Finalement, j’ai décidé d’intégrer la maquette que j’ai réalisée sur le web dans mon portfolio, pour un but personnel, en automne 2024.

Crédits

Type de projet

  • Intégration front-end
  • Design / Prototypage
  • Projet scolaire

Langages / logiciels

  • HTML / CSS / JS
  • Figma

Idéation et conceptualisation

La création de moodboards, ainsi que la recherche approfondie de projets comparables, a joué un rôle fondamental dans l’établissement de bases solides pour le projet, permettant de structurer la réflexion créative et d’assurer un démarrage efficace et pertinent.

Comparables

Comparables

Moodboard

Moodboard

Structuration et design

À présent que les fondations du projet sont solidement établies, je vais entamer la création des wireframes. Par la suite, je me concentrerai sur l'élaboration des maquettes.

Wireframes

Wireframes

Maquette final

Maquette final

Intégration

Pour la création de ce héros, j'ai combiné un carrousel de la bibliothèque 'Swiper JS' avec un positionnement CSS spécifique pour le titre, afin de créer un effet de juxtaposition harmonieux et esthétiquement agréable.

HTML/CSS hero

HTML du hero

Hero

Hero

Interactivité

Pour concevoir ce carrousel interactif, j'ai à nouveau utilisé la bibliothèque 'Swiper JS' en configurant différentes options afin de le rendre plus dynamique. Cela permet de naviguer entre les diapositives en utilisant les autres slides visibles, offrant ainsi une expérience utilisateur fluide.

Javascript du carousel

Javascript du carousel

Carousel

Carousel

onzehebdo

Projet suivant

onzehebdo