ProjetsPhares – David Roblot Portfolio

HAZE : https://haze-sto.com

Projet 01 – HAZE

Marque Streetwear

Eco-responsable

Flocage Phosphorescent

Dijon

Nouveau site, nouvelle identité visuelle

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

Des propositions filtrées par une question spécifique

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.

Choix de l’hébergeur et du thème

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.

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 restraignent 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

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.

Voir Dossier de Projet

Présentation d’une nouvelle collection

Après la réalisation du site, j’ai été chargé d’éditer et monter une vidéo promotionnelle pour la marque. Le tournage fut réalisé pendant que je finalisait le site, et le choix de la musique était à ma discrétion, donc libre de droits

Police « Alien Blood »

Pro »jet 01 – HAZE

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

Un procédé minutieux

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

Voir Police

Fermer

3 poids supplémentaires furent crées, en fonction des possibilités liées aux glyphes

Concevoir une version simplifiée de la précédente police, tout en restant cohérent avec l’approche initiale

Prototypage à la main

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

Un procédé minutieux

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

Voir Police

Fermer

5 poids supplémentaires furent créés, le SansSerif étant plus adaptable de par sa géométrie plus stricte

Guts Out

Projet 01 – HAZE

5 Développeurs

2 Designers

Délai : 2 jours

Un mini-jeux video

Ce projet était intense en rythme, 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.

Orientation du projet

Side-Scrolling automatique
Au moins 1 niveau fonctionnel
2 actions de personnage – Saut et Attaque
1 Système de scoring

Préparer pour l’animation

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

éléments graphiques du kit UI

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 »

Voir Tous Les Niveaux

Fermer

Une Police réadaptée à nos besoin spécifique

La police initialement choisie, AmazDoom, correspondait bien à l’aspect graphique du jeu.

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’ai apporté des modifications, notamment un effet liquéfié prononcé sur le bas des lettres

Voir plus en détails

Fermer

Accès au jeu : https://guts-out.netlify.app/

Je me suis aussi chargé de produire une petite bande-annonce

Fire Heart

Projet 01 – HAZE

Alien Dragon

Feu et volcans

Résurrection

Combativité

Complexe et inspirant

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.

Sources d’inspirations principales

Un embryon de dragon enroulé autour du coeur

L’anneau embryon 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.

Artères 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.

1er prototype, dernier élément

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.

Le fond utilisé pour finir l’artwork est une texture damassée, recolorée de sorte que les couleurs s’associent bien au cœur de feu.