HAZE : https://haze-sto.com
Projet 01 – HAZE
Choix de l’hébergeur et du thème
Police « Alien Blood »
Pro »jet 01 – HAZE
Guts Out
Projet 01 – HAZE
Une Police réadaptée à nos besoin spécifique
Fire Heart
Projet 01 – HAZE
Le Brief Client
En raison du coût élevé de maintien d’un site Shopify (30€/mois), le client, auto-entrepreneur propriétaire de la marque, souhaitait refaire son site, sous WordPress, afin de réduire les coûts liés au maintien du site, apporter des nouvelles fonctionnalités, et intégrer les nouveaux visuels
-
CMS/Thème utilisés : WordPress/Greenshift
-
Espace Client pour suivre les commandes
-
Filtrage par collection et types de vêtements
-
Sélection de point relais par carte
Nouvelle Identité Visuelle
Pour l’élaboration du Logo, le client disposait déjà d’une grande quantité de nouveau logos potentiels. Le client a exprimé des souhaits difficiles à concilier pour le logo, notamment un mélange d’image de nuage/brume, avec un mix de modernité et d’aspect street.
Afin de cerner plus précisément le logotype que le client souhait, et de filtrer les diverses propositions fournies, j’ai demandé les 5-8 adjectifs qui correspondaient au logo voulu -> 6 adjectifs sont ressortis.
Un affinement fut effectué en créant des paires puis en faisant ressortir parmi elles, les 3 adjectifs qui revenait le plus souvent -> Street, Luxe et Innovant.
Hébergement du site
3 hébergeur fûrent considérés : OVH, LWS, et Hostinger. L’hébergeur choisi fût Hostinger, car il propose le meilleur rapport qualité/prix, et d’une optimisation pour WooCommerce même dans son offre la plus basse. De plus l’interface d’administration de l’hébergeur est simple à prendre en main, et propose l’installation Wordpres en 1 clic. L’offre choisie est la « Premium » sur une durée d’engagement de 4 ans.
Intégration Web/Mobile
Le thème utilisé pour l’intégration fut Greenshift, basé sur Gutenberg, qui dans sa version gratuite, offre beaucoup d’adaptabilité dans le design du site, alors que d’autres thème populaires restreignent cette adaptabilité sur leur version payante.
De plus, il optimise les scores de performances, et de bonnes pratiques le mieux possible. Cela permet d’avoir de bonnes performances lors du passage en mode mobile. Le client vérifiant le site sur son smartphone, le mode mobile fut traité avec autant de soin que le mode Desktop
SEO
Malgré une grande quantité de plugins, ainsi que la présence d’une vidéo de 3 minutes sur la page d’accueil, la combinaison d’un hébergeur très performant (serveurs avec disques durs NVMe 2.0), ainsi que d’un thème fortement optimisé (Greenshift) permet de conserver de très bonnes performances, même en mode mobile.
Police Alien Blood
Concevoir une police combinant les esthétiques tribale, et alien
Prototypage à la main
Dessiner chaque glyphe à la main permet d’obtenir un rendu plus organique.
Les dessins d’origines intègrent les Majuscules, minuscules, chiffres, caractères spéciaux du clavier, ainsi que la gestion des accents.
Un travail étalé sur plusieurs mois, car mélangeant esthétique et lisibilité, mais aussi, basé sur un côté unique, que je n’avais jamais vu.
Numérisation des glyphes
1 image par glyphe -> Traçage vectoriel de chaque Glyphe -> 1 SVG par Glyphe.
Importation des SVG dans un logiciel spécialisé (Fontforge) puis ajustement de la baseline, du kerning, et correction d’erreurs d’importation.
3 poids supplémentaires furent crées, en fonction des possibilités liées aux glyphes
Version SansSerif
Le but de cette version était de concevoir une version simplifiée de la précédente police, encore plus lisible et adaptable, tout en restant cohérent avec l’approche initiale.
La difficulté ici réside dans le choix niveau de simplification désiré, et de rester convaincu du rendu.
Les dessins d’origines intègrent les Majuscules, minuscules, chiffres, caractères spéciaux du clavier, ainsi que la gestion des accents.
Un travail étalé sur plusieurs jours, une fois l’approche trouvée, la majorité des glyphes furent évident, d’autres nécessitaient davantage de prototypage pour bien les cerner
Numérisation des glyphes SansSerif
1 image par glyphe -> Traçage vectoriel de chaque Glyphe -> 1 SVG par Glyphe
Importation des SVG dans un logiciel spécialisé (Fontforge) puis ajustement de la baseline, du kerning, et correction d’erreurs d’importation.
5 poids supplémentaires furent créés, le SansSerif étant plus adaptable de par ses formes plus simples.
Guts Out
Accès au jeu : https://guts-out.netlify.app/
Un mini-jeux video, 2 équipes : Développeurs et Designers
Ce projet était intense en rythme, avec seulement 2 jours de délai, mais notre équipe s’étant mis d’accord sur une vision commune assez rapidement, chacun a pu exprimer ses atouts au moment où il le fallait.
-
Side-Scrolling automatique
-
Au moins 1 niveau fonctionnel
-
2 actions de personnage – Saut et Attaque
-
1 Système de scoring
Création du Kit UI
Afin de satisfaire les délais, les assets graphiques du jeu ont été générés grâce à Universal LPC Sprite Sheet Character Generator, qui permet d’obtenir rapidement un ensemble d’image complet pour animer l’asset.
Je me suis chargé du cadrage des images du joueur et des ennemis après génération, des sorte que les développeurs aient des assets uniformes pour gérer les animations, tandis que mon collègue à produit les éléments graphiques ainsi qu’un logo.
Environnements Apocalyptiques
Si initialement 1 seul niveau était exigé, la bonne coordination des 2 équipes à permis d’aboutir à l’implémentation de 8 niveaux, avec difficulté progressive, davantage d’ennemis.
Ces niveaux sont issus de sets d’images libres de droits, à la thématique commune de « fin du monde »
Police réadaptée à nos besoins
La police initialement choisie, AmazDoom, correspondait bien à l’aspect graphique du jeu. Cependant, son apparence initiale plutôt géométrique pouvait être modifié, pour renforcer la cohérence avec notre univers.
J’y ai apporté quelques modifications, notamment un effet liquéfié prononcé sur le bas des lettres
Fire Heart
Un travail d’illustration complexe et inspirant
Un coeur volcanique
L’expérience acquise grâce à des artworks précédents m’ont permis de retranscrire l’idée du Cœur de Feu dans un style propre à moi, mélange de tribal, et de culture alien, à base d’un mix organique et minéral.
Ce cœur de feu m’inspire la détermination, la combativité, l’envie, la passion, la conviction mais aussi la résurrection.
L’anneau embryon
Cet élément consiste en un embryon de dragon enroulé autour d’une cœur, et représenta l’une des parties les plus difficile de la réalisation. Le bon placement de l’anneau et la justesse de l’effet de perspective étaient cruciaux.
Pour le rendre plus vivant, un effet de regard astucieux fut intégré. La forme, le placement et l’espacement de chaque œil ont été minutieusement testés pour rendu des plus convaincants.
Pour rendre l’anneau plus singulier, je décidais de lui ajouter une sorte de crête solide. Le nombre, la forme, le placement, la perspective et taille de ces crêtes furent décidées selon le niveau d’espacement avec les éléments adjacents, et le cohérence avec la perspective générale.
Effets Volcaniques
Pour accentuer le côté « cœur de feu », j’avais depuis le début l’idée d’avoir certaines artère de la partie haute du cœur agissant comme des volcans, émettant de la lave et une fumée enveloppant l’ensemble des éléments.
Afin de bien distinguer la lave parmi l’ensemble de l’artwork, je leur donna un effet rocailleux plutôt que liquide, et s’avéra être le plus cohérent esthétiquement. Une flamme émanant des yeux de l’embryon complète l’ensemble de l’effet
Aile Magmatique
En me basant à nouveau sur l’arme de référence, pour inclure les ailes magma, j’utilisai la partie des lames ardentes.
3 lames furent le plus judicieux d’un point de vue de charge visuelle, un léger étirement et affinage convenait le mieux pour la sensation d’échelle, et le placement à droite était le plus judicieux du fait de la complémentarité avec les « branchies » de l’embryon.
Phénix Solaire
La forme du phénix constituait mon premier prototype de l’artwork. A la base je voulais faire un logo du cœur de feu, mais l’idée a mûri en une réalisation bien plus complexe en cours de route.
Pour compléter le design du phénix et le raccorder à la notion de cœur de feu, je lui ai ajouté des larves solaires, à l’emplacement qui était encore libre. Ces larves donnent l’impression que le phénix a aussi un cœur, mais différent de celui représenté dans l’artwork, unique, en cours de formation.
