Après une longue introduction théorique à l’HTML et au CSS, ainsi que de nombreux exercices, il a fallut mettre le tout en pratique.
Réaliser une maquette à coder en html/css et éventuellement Javascript sur le thème de notre choix. Ainsi que lui ajouter au minimum 3 interactions au survol ou transitions.
En bonus ? La rendre responsive.

Exploration de l’univers d’Overcooked · Reconstitution vectorielle des différents visuels  · Conception de maquette  · Codage en CSS et HTML · Animation en Javascript

Recherches

Une partie de plaisir puisque c’est une partie de jeu !
La recherche a eu pour but d’explorer chacun des recoins du jeu vidéo Overcooked 2 afin d’y extirper chaque visuel, chaque code graphique et même le ton employé. Tout ça en capture d’écran.

Création graphique

Pour garder la ligne directrice du jeu, j’ai choisi les éléments qui me serait nécessaire pour la réalisation de la maquette puis je les ai, un à un, reproduit sur illustrator.

Prototypage

Et enfin, le tout a été réuni dans une seule maquette. Au départ, la maquette était très simple sachant que le but était de la coder…
Ce qui me semblait effrayant pour une première one page.

La forme suit le fond et le fond suit le jeu. L’ensemble du textuel à été rédigé par ma personne afin qu’il corresponde au mieux à l’univers du jeu (et j’aime un peu trop faire des jeux de mots).

Premier projet de code.
Je voulais apprendre à m’adapter à un univers existant tout en gardant un peu de fun (oui, oui : fun et code). J’ai donc choisi un jeu : Overcooked.
Si vous ne connaissez pas, il est peut-être temps de sortir de votre vraie cuisine et d’y jouer, il va devenir votre nouvelle addiction !
Pour la maquette, j’ai exploré absolument tout : captures d’écran, reconstitution vectorielle, analyse des cadres, arrière-plans réinventés, crédits vus au moins trois fois… et inventer les pires (ou les meilleurs) jeux de mots dignes de Mister Oignon.

Et, petite fierté, pour ceux qui connaisse : j’ai obtenu 4 étoiles sur la plateforme du monde 5-3. Oui, 4 étoiles. Oui, 1129 points. J’ai 4 étoiles partout désormais (et je préfère pas vous parler du temps passé dessus – sachez juste que cette information a faillit apparaître sur mon CV).