Rôle
Intégratrice Web
Cours
Intégration Web en 1ère année de Bachelor Cycle Web et Multimédia
Outils
HTML, CSS
Contexte et Recherche
Ce projet consistait à créer une landing page fictive pour PixelShop, une entreprise imaginée proposant des jeux vidéo à prix réduits. Réalisé dans le cadre de mes cours d’Intégration Web, en première année de Bachelor Web & Multimédia à MyDigitalSchool Vannes, il m’a permis de concevoir et développer une landing page.
La recherche s’est appuyée sur l’analyse de nombreuses landing pages, pour comprendre leur structure, centrée sur le Hero (CTA et accroche) et les Features (valeurs ajoutées). Un zoning et une maquette papier ont ensuite été réalisés, suivis du choix d’un logo provisoire, via Logoipsum et d’icônes Lucide. La page a été développée en HTML, puis stylisée en CSS selon la palette de couleurs définie. Ce travail a permis de consolider les bases, en intégration web et de concevoir une landing page claire et attractive.
Difficultés
Conception d’une landing page claire et efficace, nécessitant un équilibre entre structure Hero/Features, attractivité visuelle et contraintes techniques du HTML/CSS.
Compétences transversales
Analyse de références, pour identifier les bonnes pratiques, organisation du travail, via zoning et maquette, et rigueur dans l’intégration pour garantir une page cohérente et fonctionnelle.
Identité visuelle
TYPOGRAPHIE
Orbitron
Esthétique et géométrique
Idéale pour les univers gaming et technologiques, sa structure nette et moderne garantit une excellente lisibilité pour les titres et interfaces numériques.
PALETTE DE COULEURS
La palette de couleurs utilise un dégradé allant de l’orange au violet, créant une ambiance dynamique et moderne. Elle renforce l’identité gaming du projet en apportant énergie, contraste et impact visuel.
LOGO
Développement
Le développement du site PixelShop repose sur une structure HTML propre, construite, à partir du zoning initial, pour organiser efficacement le Header, le Hero, les Features et le Footer. Le CSS vient renforcer l’identité visuelle, grâce à la palette de couleurs dégradée et à la police Orbitron, tout en stylisant les éléments, afin de créer une ambiance gaming moderne. L’ensemble offre une landing page dynamique, cohérente et optimisée, pour une navigation fluide et engageante.
button{
padding: 10px 20px;
background: linear-gradient(45deg, #DE5F43, #C9763E, #FFAE52);
border-radius: 40px;
transition: background-position 0.6s ease;
}
Structure HTML maîtrisée
Le site repose sur une base HTML propre et organisée, selon le zoning initial, garantissant une architecture claire entre le Header, le Hero, les Features et le Footer.
Identité visuelle intégrée au CSS
Le CSS applique la palette de couleurs dégradée, la police Orbitron et les styles des composants, pour créer une ambiance gaming moderne, cohérente et dynamique.
Composants interactifs optimisés
Boutons, icônes et visuels sont stylisés, pour offrir une navigation fluide et une expérience utilisateur engageante.
Conclusion et résultat final
Ce projet PixelShop m’a permis de concevoir une landing page complète, en maîtrisant à la fois la structure HTML et la mise en forme CSS, pour créer une identité visuelle forte et cohérente. L’intégration de la palette de couleurs dégradée, de la police Orbitron et des différents composants interactifs a renforcé l’univers gaming, tout en assurant une navigation fluide. Ce développement m’a offert une expérience concrète, alliant organisation, créativité et mise en pratique des fondamentaux du web.
