Lézards Créationlz

Boutique en ligne pour Jk Design : graphiste automobile 🚗

Publié le 22 mars 2020

Julien Koenig (« Jk Design ») est un graphiste freelance spécialisé dans le dessin automobile et l’illustration vectorielle. Vu que les gros cylindres, ça me connaît, j’ai eu le plaisir de pouvoir réaliser son site Internet comprenant une boutique en ligne 👉🏻 https://jk-design.fr/

🏁
🛣️
Affiche de Megane RS de Jk Design
Illustration de la Megane 2 RS F1 Team
logo Jk design Julien Koenig
Logo de Jk Design

Julien reproduit numériquement des véhicules, anciens comme modernes sous forme d'affiches graphiques. Elles sont ensuite vendues sous forme de tirage d'art.

La plupart de ses affiches sont des commandes de passionnés d'automobile, c'est pourquoi chaque dessin est unique et demande plusieurs jours de travail.

Dans un style minimaliste, chaque véhicule est dessiné vectoriellement (la plume, ça le connaît !). Une mise en ambiance graphique est créée sur chaque affiche pour mettre en valeur le véhicule.

Cahier des charges

Son activité, son identité et sa présence sur les réseaux sociaux étant déjà existante, mon rôle est de créer un support cohérent qui permet à Jk Design de professionnaliser son image et ses méthodes d'interactions avec sa communauté. Deux secondes, j'reprends mon souffle.
Le site a plusieurs objectifs, à savoir :

Objectifs principaux

  1. Faire découvrir Julien et son travail : l'illustration automobile de qualité
  2. Vendre des tirages en série
  3. Mettre à disposition une interface simple qui permet d'envoyer une demande personnalisée

Objectifs secondaires

  1. Permettre à Julien de créer des demandes de paiement professionnelles et sécurisées à ses clients
  2. Inciter les utilisateurs du site à suivre Julien sur les réseaux sociaux
  3. Faire découvrir à ses followers l'ensemble de ses illustrations

Après avoir défini notre cible, positionnement et nos contenus, passons au ventre du sujet :

Design system

design-system-jk-design
Les différents éléments d'interface

Harmonie colorée

Les véhicules et les affiches étant déjà très colorées, un webdesign minimaliste est de bon ton. Des fonds clairs et une interface aérée permet aux images de s'affirmer.
L'interface compte sur le contenu du site pour s'enrichir.

La couleur tonique rouge met la lumière sur les éléments importants et n'est pas sans rappeler la teinte dominante sportive de l'industrie automobile.

Typographie

La typographie du logo existant : "Radikal" est reprise pour les titrages. Moderne et saillante, elle s'inscrit dans un style structuré et bien lisible.

Pour le corps de texte, j'utilise IBM Plex Sans. Créée également par un grand constructeur, elle apporte un degré de sophistication que l'on peut retrouver dans le design automobile : des épaules rondes affirmées mariées à des lignes strictes.

Boîtes

Des boutons et des champs de saisie aérés concordes avec l'espacement global des éléments. Une légère ombre portée permet de souligner leur position et leur vocation à interagir avec l'utilisateur (en contraste avec les textes et les images).

Webdesign

jk-design-page-daccueil
Page d'accueil
jk-design-page-produit
Page de produit
jk-design-page-etapes-de-creation
Page étapes de création
jk-design-page-boutique
Page boutique
Page à propos
jk-design-page-demande-personnalisee
Page demande personnalisée

Intégration web

integration-site-jk-design

J'intègre le site avec Wordpress ainsi que Woocommerce pour la partie boutique/compte client. La bibliothèque de médias est assez riche avec les différents mockups et les images de produits. J'utilise WP Media Folder pour que tout soit bien séparé et facilement accessible.
Le système de paiement fonctionne avec Stripe et leur passerelle Woocommerce, un duo bien connu qui peut rapporter gros (littéralement).

J'intègre la grille de produits avec masonry.js, ce qui permet une flexibilité sur l'affichage des différents formats d'affiche sous forme de mosaïque. En modifiant l'ordre des produits, on obtient une mise en page différente. Les différents sliders sont intégrés avec swiper.js : la librairie que je trouve la plus complète ; Attention à la gestion du responsive avec Swiper, il mord ! Certains éléments défilent en parallax (des simples translate CSS) et sont animés avec animate.css.

Que du beau monde pour un résultat qui envoi du pâté ! Ce site représente une belle pierre angulaire pour l'activité de Jk Design, support de présentation et de vente. Une expertise de dessin automobile qui ne fait que commencer !

Pour consulter le site dans vos petites mains, c'est par ici 👉🏻 https://jk-design.fr/

mockup-maison-jk-design

Tous mes projets