#cours

Faustine Aschard

Faustine Aschard est un projet à l’initiative d’un examen de fin d’année dans le cadre de mes études en Bahelor spécialité en webmarketing et communication. Le but de ce portofolio était de mettre en avant nos projets et nos compétences dans ces domaine et ainsi nous en servir plus tard pour la recherche d’un emplois. Pour cette crétation, il y avait différentes façons de le réaliser, soit un compte professionnel instagram, soit un site web à partir d’un CMS ou codé.

Personnellement choisit de faire un site complet avec toutes mes compétences avec celles acquises durant mes années d’études précédentes. Pour la création, j’ai décidé de partir d’un CMS avec une DA qui me ressemble et alliant ma passion pour la mode et le digital.

Format

1920/1080 px + responsive

Date de création

2021

Temps

500h

Étapes de réalisations

Phase 1 : La réflexion et la préparation du projet

Un auparavant, dans un cours de Indesign, nous devions créer un portfolio print. À ce moment tout à été claire. Faire un style de magazine mode avec mes projets d’identité visuelle, communication et digital. Pour la créatoo de mon portfolio web, j’ai garder cette idée. Cependant, un an après avoir créer mon portflio papier, je n’aimais pas du tout la DA que j’avais réalisé. Pour cette première phase à été la plus longue et la plus intense psychologiquement, car j’ai tout recommencer à 0; du design à l’écriture. Je me suis posée énormément de questions sur la DA, comment mettre mon contenu et mes compétences en avant afin d’allier mes deux passions la mode et le digital. Tout cela avec les exigences demandés pour l’examen.

À partir de ce moment là, une idée met venue, la création d’un site web vitrine mode avec l’apparence d’un site e-commerce. Et à ce moment où j’effectue ma veille.

Pour la préparation du projet, j’ai commencé par acheter un nom de domaine et un hébergeur.

Phase 2 : La veille

Durant cette phase, ça été plus rapide que je ne le pensais. J’ai regardé les sites webs qui m’intéressaient, c’est-à-dire ceux du secteurs du luxe et de l’habillement, pour comprendre la structure du site, les différentes DA des maisons mais aussi comment le contenu à été mis en avant.

J’ai commencé par la page d’accueil et à piocher sur les divers sites ce que j’aimais et aussi ne pas oublié des informations importantes. Par la suite, j’ai été voir la mise en valeur des produits, les photos, les informations,… et continuer ainsi de suite sur les divers pages qui m’intéressait en réalisant des screens des pages ou éléments.

Phase 3 : La création design

La création du design à été un jeu d’enfant ! J’ai adoré réaliser cette partie pour plusieurs raisons. La première avec les éléments trouvé grâce à ma veille, avec des captures d’écrans ou quelques crayonnées, j’ai pu structuré mes différentes parties en créant un zoning. Ça été la création d’un puzzle au crayon à papier. C’est mixée ses différentes parties avec les photos et le texte (en grande ligne).

La deuxième à été d’imaginer mon zoning et de le développer en maquette via XD. Par la mise en forme des pages avec l’intégration des photos, de la typographie,… Une de mes parties préférés mettre en lumière mes idées.

Détails du projet

  • Site vitrine responsive
  • Photos

Logiciels utilisés

  • WordPress
  • Divi
  • Adobe XD
  • Photoshop

#cours

Faustine Aschard

Faustine Aschard est un projet à l’initiative d’un examen de fin d’année dans le cadre de mes études en Bahelor spécialité en webmarketing et communication. Le but de ce portofolio était de mettre en avant nos projets et nos compétences dans ces domaine et ainsi nous en servir plus tard pour la recherche d’un emplois. Pour cette crétation, il y avait différentes façons de le réaliser, soit un compte professionnel instagram, soit un site web à partir d’un CMS ou codé.

Personnellement choisit de faire un site complet avec toutes mes compétences avec celles acquises durant mes années d’études précédentes. Pour la création, j’ai décidé de partir d’un CMS avec une DA qui me ressemble et alliant ma passion pour la mode et le digital.

Format

1920/1080 px + responsive

Date de création

2021

Temps

500h

Étapes de réalisations

Phase 1 : La veille concurretielle

La veille concurrentielle était une étape importante avant la construction du site web. L’atelier Pierre-Marie Bernard avait un site web qui était géré par une agence de communication. Le site n’était plus au goût du jour, il manquait beaucoup d’informations et beaucoup n’étaient plus d’actualités. Étant un atelier de joaillerie haut de gamme/luxe, il était primordial de faire un était des lieux de ce que faisait la concurrence et ainsi d’encrer un maximum les codes du luxe dans le site web.

Phase 2 : Tri des informations existantes

Le premier site web de l’atelier date des années 2000, l’un des pionniers dans l’univers artisan. Cependant, le site a été géré par deux agences marketings différentes et a été très peu suivi et valoriser. J’ai dû faire un premier tri des informations et visuels à garder ou modifier avant d’établir la phase 3 : la recherche d’ambiance/du design du site web. Nous avons (l’équipe de l’atelier Pierre-Marie Bernard) listé les choses importantes à garder et à ajouter sur le site.

Phase 3 : La recherche d’ambiance et de design

La recherche d’ambiance du site, c’est fait sur les valeurs que véhicule l’atelier, des inspirations des sites de luxe et aussi sur Pinterest. Nous avons recherché des couleurs secondaires et des typographies pour harmoniser le site web. Celles-ci, se sont penchés sur les codes du luxe avec les valeurs noir et blanc, le bleu foncé/violine apporte une touche de peps et de gaieté ainsi que le beige, pour adoucir ses couleurs brutes. Pour cette recherche, j’ai réalisé deux ébauches de page d’accueil (photo a & b) avec un style différent afin de s’orienter vers une direction artistique homogène. Je les ai réalisées sur le logiciel XD de la suite Adobe. Après le style artistique choisit, j’ai développé la page d’accueil en profondeur avec les éléments essentiels que nous voulions apercevoir. Après avoir eu une deuxième validation par l’équipe, j’ai décliné toutes pages du site web, pour retranscrire mon imagination sur la création du site global et leur montrer visuellement afin de comprendre son fonctionnement avec la hiérarchie et la structure du site.

Phase 4 : La rédaction

La rédaction SEO du site web est primordiale pour la visibilité de l’atelier. Comme énoncé en phase 2, nous avons réalisé un tri des informations, puis en phase 3, j’ai pu hiérarchisé mes informations et m’a permis de rédiger mon contenu. Pour cela, je me suis aidée de Google ADS, qui m’a permis de faire un audit SEO des concurrents. Puis j’ai réalisé ma stratégie de mots-clés afin de pouvoir l’agrémenter dans mes différentes pages. En fonction des pages, les mots sont différents, mais beaucoup sont similaire. J’ai ainsi réalisé toute la rédaction du site puis je l’ai fait relire et corriger à mon équipe.

Phase 5 : La création visuel

À travers ce site, nous voulions faire transparaître l’artisanat de qualité. Avant de créer des visuels, l’ambiance recherchée était prédéfinit à la phase 3. C’est-à-dire, privilegier des photos en noir et blanc quand ce sont des photos d’ambiance de l’atelier. Mettre des photos en noir et blanc fait ressorti des émotions. Le temps est comme figé, il est intemporel. Il nous fait ressentir des émotions brutes. À travers ses photos, le message que l’on veut faire passer, c’est de revenir à l’essentiel avec un métier qui a très peu bouger depuis son existence. Sinon les photos des bijoux restent en couleur afin de valorisé le travail de la joaillière Astrid Le Bail et de l’éclat du bijou.

Phase 6 : La création du site

Arriver à l’étape finale, la réalisation du site web sur WordPress. Avant de commencer, nous avons pris une licence Divi afin de faire une mise en page rapide et efficace. Il faut savoir qu’après mon alternance à l’atelier Pierre-Marie Bernard, il faut que quelqu’un reprenne la gestion du site. Donc, c’est pour cela que je les ai aiguillés vers le thème builder Divi. C’est un outil simple, rapide et intuitif. Préalablement, j’avais retouché et sélectionné tous mes visuels et ils étaient prêts à l’emploi. En premier lieu, j’ai réalisé la page la plus importante, la page d’accueil. J’ai directement effectué le responsive de celle-ci. Puis, petit à petit, j’ai réalisé les autres pages, de plus important au moins important. Aujourd’hui, le site est régulièrement actualisé, par la création d’article, la mise à jour des produits vendus et la mise en ligne des nouvelles créations.

Détails du projet

  • Site vitrine responsive
  • Photos

Logiciels utilisés

  • WordPress
  • Divi
  • Adobe XD
  • Photoshop