Processus de création

01

Compréhension du projet

Le projet démarre le 21 octobre 2024 avec la réception du briefing. J’avais alors 2 mois et 27 jours (et environ 80 cafés) pour concevoir un site web complet.

mockup d'un écran d'ordinateur contenant le briefing du projet

Objectifs

Créer ce site de 3 pages autour d’un influenceur de notre choix, que l’on aime ou que l’on scroll avec prudence.

Les pages à concevoir:

  1. Page promotionnelle;
  2. Page critique, incluant des solutions aux problèmes soulevés;
  3. Page factuelle pour présenter l’influenceur.

Contraintes

  1. Navigation fluide;
  2. Respect de l’univers visuel de l’influenceur pour la première page;
  3. Créativité libre pour les 2 autres pages.

02

Recherches

Une fois le projet lancé, je commence par m’immerger dans l’univers d’Amixem : analyse de ses réseaux (Instagram, Youtube, sites web), repérage de son identité graphique, de son ton, de ses codes visuels. J’étudie également son audience pour définir un public cible et adapter mon contenu.

mockup d'un écran d'ordinateur contenant la maquette de recherche du projet

Côté contenu critique, je rassemble bad buzz, rumeurs et polémiques en vérifiant systématiquement mes sources pour garantir leurs fiabilités.

J’ajoute aussi des données factuelles (statistiques, abonnés, vues) pour enrichir le site d’informations concrètes.

03

Mise en forme des idées

Place à la structure : l’objectif est de poser une base claire et harmonieuse, sans s’attarder sur les visuels. J’utilise des croquis, des inspirations et plusieurs essais de wireframes pour tester la disposition des éléments.

mockup d'un écran d'ordinateur contenant la maquette de wireframe du projet

Cette phase me permet de valider :

  1. l'organisation générale;
  2. la hiérarchie visuelle;
  3. la lisibilité;
  4. les tailles de textes, espacements et rythmes.

Explorer plusieurs versions m’aide à trouver le meilleur équilibre pour une navigation fluide et intuitive.

04

Conception visuelle

Une fois toutes ces étapes faites, place à la conception visuelle du site. C’est le moment où je vais mettre les photos, où je vais choisir les différentes couleurs de mon site, mettre les différentes animations, etc.

mockup d'un écran d'ordinateur contenant la maquette du site

Cette partie là est la plus sympa car c'est à ce moment là que je vois enfin le résultat que rendra le site fini.

Cela me permet aussi de voir si le code couleur respecte les mesures de contrastes et si mes couleurs se marient bien.

05

Développement

Après des semaines de réflexion, place au code. Cette étape, à mes yeux la plus exigeante, marque la transformation des idées en un site concret et accessible.

mockup d'un écran d'ordinateur contenant le code du site

Seule aux commandes, j’ai développé le projet en HTML, CSS et Javascript. Cela m’a demandé de faire des choix parfois simplifiés, parfois abandonnés par manque de temps ou de connaissance. C’est aussi ça, le processus d’apprentissage.

Malgré la charge mentale, chaque petit succès, une page qui fonctionne, un détail qui s’aligne, m’a boostée. Voir le site évoluer reste, pour moi, l’une de plus grandes satisfactions.

06

Résultats et apprentissages

Voilà, le projet est terminé et mis en ligne. Un vrai moment de satisfaction !

mockup de la deuxième page du site

Ce premier site m’a énormément appris. J’y ai découvert mes forces, identifié mes limites, et surtout, j’ai affiné mes goûts en design et en identité visuelle. C’est aussi un projet qui m’a aidé à mieux me connaître en tant que designer.

Bien sûr, tout n’est pas parfait : certains choix ont été faits par contrainte de temps. Mais c’est justement en faisant qu’on apprend. Et j’en ressors plus motivée, et plus confiante pour les projets à venir.

Design

Typographies et couleurs

mockup de la premiere page du site

Principales

#08071C

#FFFFFF

#D9D9D9

#000000

Secondaires

#46A9EE

#8FC1E3

Inconsolata

Regular

Medium

Exemple

Texte

Il est entouré de ses 3 collègues, Yven Casta, Thomas Deseur et Etienne Jouneau, aussi appelé "le crex"

Hind Siliguri:

Regular

Medium

Exemple

Titre H2

Plongez dans l'univers captivant d'un créateur unique.

mockup de la deuxième page du site

Principales

#C8D9E6

#FFFFFF

#000000

Secondaires

#567791

Merriweather sans

Regular

Italic

Exemple

Texte

Amixem est passé maître dans l'art de glisser des pubs dans ses vidéos.

Texte italic

Vous avez déjà remarqué comment Amixem enchaîne les pubs dans ses vidéos ?

mockup de la troisième page du site

Principales

#506F87

#FFFFFF

#000000

Secondaires

#915756

Merriweather sans

Regular

Exemple

Texte

Participation au Gp Explorer.

Hiérarchie et grilles

mockup téléphone avec la grille du projet

Système de grilles

Téléphone

Colonnes: 5

Margin: 20px

Gutter: 20px

Tablette

Colonnes: 7

Margin: 50px

Gutter: 20px

PC

Colonnes: 9

Margin: 100px

Gutter: 20px

Icones

logo de facebook logo d'Instagram logo de Tiktok logo de linkedin logo de youtube

Espacements

20px

40px

60px

80px

100px

Ce projet m’a permis de comprendre l’entièreté du travail qu’il y avait derrière un site. Il m’a également permis de voir ce dont j’étais capable et où était mes forces.

Si je devais le reprendre aujourd’hui j’améliorerai le responsive ainsi que l’UX. Je suis fière de ce résultat pour un premier projet, et surtout des réalisations en Javascript.