PixelShop

J’ai crée une landing page pour un site nommé PixelShop. Ce projet avait pour but de concevoir et développer une landing page fictive, pour une entreprise qui vendrait des jeux vidéos moins chers. Un travail dans le cadre de mes cours d’Intégration Web, durant ma première année, en Bachelor Cycle Web et Multimédia, à MyDigitalSchool de Vannes.

Compétences

Programmation d’une landing page

Recherche d’une identité visuelle claire qui pousse à l’action

Logiciels

Utilisation du langage HTML

Utilisation du langage CSS

Développement du projet

Visionnage de différentes landing pages sur internet, afin de trouver l’inspiration et comprendre qu’une landing page repose principalement sur deux zones essentielles. Le "Hero", le premier espace de mise en avant, où se trouve le bouton CTA (Call To Action). C’est ici que l’utilisateur est invité à agir, que ce soit pour s’abonner à une newsletter, acheter un produit ou effectuer toutes autres actions. Le "Hero" comprend également une phrase d’accroche pensée pour encourager cette prise de décision. La seconde zone, nommée "Features", rassemble les caractéristiques principales qui correspondent à la valeur ajoutée de notre marque ou service et qui peuvent être comparées à celles d’autres marques du même domaine.
Élaboration d'un zoning et d'une maquette schématique sur papier, afin d’obtenir un premier aperçu visuel de la landing page. Ce zoning se compose du "Header", du "Body" qui intègre le "Hero" et les "Features" ainsi que du "Footer".
Par la suite, j’ai rapidement créé un logo, grâce au site Logoipsum, donc ce dernier n'a pas été entièrement conçu par moi, car ce n’était pas l’objectif du projet.
Enfin, j’ai sélectionné les icônes que je trouvais intéressantes dans la banque d’icônes libres de droit Lucide.
Réalisation du code HTML du site web, en respectant les différentes parties définies lors du zoning. Le HTML permet de structurer la page, grâce aux différentes balises titre, paragraphe, bouton… afin de suivre l’organisation prévue.
Ensuite, mise en place du code CSS, en suivant la palette de couleurs définie préalablement. Le CSS permet de styliser les balises du code HTML, qu’il s’agisse des titres, des paragraphes, des images ou des boutons, pour leur attribuer une couleur, une position ou une forme.
Le site est construit de la manière suivante :
- Dans le "Header", nous retrouvons le logo et le nom du site à gauche, ainsi que le menu de navigation principale à droite avec le Call To Action « S’abonner ».
- Le "Body" est composé de deux parties : le "Hero", constitué d’un visuel attractif, ici une manette de jeux, accompagné d’un titre et d’une description destinée à donner envie de s’inscrire grâce au Call To Action, puis les "Features", qui représentent les valeurs ajoutées permettant de démarquer une marque de ses concurrents.
- Dans le "Footer", j’ai placé le copyright, un menu de navigation secondaire avec les pages légales, puis en dessous le logo à gauche et les réseaux sociaux à droite.
Ce projet m’a permis de consolider mes connaissances en développement web, avec des langages de programmation tels que HTML et CSS ainsi que de créer une landing page attractive.

Recherche

Visionnage de différentes landing pages sur internet, afin de trouver l’inspiration et comprendre qu’une landing page repose principalement sur deux zones essentielles. Le « Hero », le premier espace de mise en avant, où se trouve le bouton CTA (Call To Action). C’est ici que l’utilisateur est invité à agir, que ce soit pour s’abonner à une newsletter, acheter un produit ou effectuer toutes autres actions. Le « Hero » comprend également une phrase d’accroche pensée pour encourager cette prise de décision. La seconde zone, nommée « Features », rassemble les caractéristiques principales qui correspondent à la valeur ajoutée de notre marque ou service et qui peuvent être comparées à celles d’autres marques du même domaine.

Identité visuelle

Élaboration d’un zoning et d’une maquette schématique sur papier, afin d’obtenir un premier aperçu visuel de la landing page. Ce zoning se compose du « Header », du « Body » qui intègre le « Hero » et les « Features » ainsi que du « Footer ».
Par la suite, j’ai rapidement créé un logo, grâce au site Logoipsum, donc ce dernier n’a pas été entièrement conçu par moi, car ce n’était pas l’objectif du projet.
Enfin, j’ai sélectionné les icônes que je trouvais intéressantes dans la banque d’icônes libres de droit Lucide.

Développement

Réalisation du code HTML du site web, en respectant les différentes parties définies lors du zoning. Le HTML permet de structurer la page, grâce aux différentes balises titre, paragraphe, bouton… afin de suivre l’organisation prévue.
Ensuite, mise en place du code CSS, en suivant la palette de couleurs définie préalablement. Le CSS permet de styliser les balises du code HTML, qu’il s’agisse des titres, des paragraphes, des images ou des boutons, pour leur attribuer une couleur, une position ou une forme.
Le site est construit de la manière suivante :

– Dans le « Header », nous retrouvons le logo et le nom du site à gauche, ainsi que le menu de navigation principale à droite avec le Call To Action « S’abonner ».
– Le « Body » est composé de deux parties : le « Hero », constitué d’un visuel attractif, ici une manette de jeux, accompagné d’un titre et d’une description destinée à donner envie de s’inscrire grâce au Call To Action, puis les « Features », qui représentent les valeurs ajoutées permettant de démarquer une marque de ses concurrents.
– Dans le « Footer », j’ai placé le copyright, un menu de navigation secondaire avec les pages légales, puis en dessous le logo à gauche et les réseaux sociaux à droite.

Conclusion

Ce projet m’a permis de consolider mes connaissances en développement web, avec des langages de programmation tels que HTML et CSS ainsi que de créer une landing page attractive.

Quelques visuels

Liens

Visualiser le site :

Site PixelShop

Retrouver le code de cette landing page, sur mon compte GitHub :

Github PixelShop