Catégories
portfolio

DESIGN[MOTEUR] site auto moto sport media

Site & blog sur l’automobile, la moto et les sports mécaniques, que j’ai décidé de créer en septembre 2012, pour partager ma passion.

DESIGN MOTEUR ?

Le projet de site DESIGNMOTEUR, en tant que site « perso » me sert d’abord « garage » pour tester et expérimenter de nouvelles technologies web afin d’avoir un véritable résultat sur un réel projet, en production.

  • Responsive Web Design,
  • natural SEO (Search Engine Optimization),
  • Web Performance

Un projet perso qui devient tel, qu’il accueille près de 500 visiteurs et a une audience de 1200 pages vues par jour… dès 2013.

« L’objectif de DESIGNMOTEUR est réunir l’information, l’actualité et certains éléments de l’histoire et du patrimoine des constructeurs automobiles et moto.

La valeur ajoutée de DESIGNMOTEUR est de publier des articles sur fond de l’actualité auto moto avec un angle spécifique sur le design automobile et la partie mécanique et moteur.

L’axe design est au sens de la conception auto et au sens de la communication visuelle des constructeurs.

L’axe moteur est au sens châssis, mécanique, motorisation et technologie »

Ewen, Team Principal DESIGNMOTEUR

projet web blog auto moto

Mis en ligne quelque jours après le Mondial de l’Automobile Paris 2012. C’est en février 2013, que le blog a véritablement démarré.

Via le retour des fréquentations des visiteurs, j’ai observé une forte part de visiteur sur mobile. J’ai donc modifié quelques éléments. Le site étant de base toujours responsive (adaptatif à tous les tailles d’écrans).

DESIGNMOTEUR - 2013 - web project - auto moto sport media - guidelines - wireframe by ELJ
DESIGNMOTEUR – 2013 – web project – auto moto sport media – guidelines – wireframe by ELJ

En juillet 2013, c’est alors, que pour simple motivation de changer de template, j’ai réalisé une refonte du site/blog en tenant compte des premiers retours.

Cela m’a permis de mettre en valeur d’une manière inédite les vidéos et les images en haute définition, encore plus que ça ne l’étais.

Le cap des 100 visiteurs jours a été franchi en septembre 2014. Depuis janvier 2014, DESIGNMOTEUR est dans le top 30 France des blog auto, d’après Ebuzzing/Teads. Concernant le référencement, le site se positionnement vite sur les mots clés lié au contenu des articles publiés.

DESIGNMOTEUR - 2013 - web project - auto moto sport media - Responsive Web Design - site - by ELJ
DESIGNMOTEUR – 2013 – web project – auto moto sport media – Responsive Web Design – site – by ELJ

Identité visuelle

Lors de la création d’un site unique et moderne, j’ai créé la charte graphique du projet avec un message clair et efficace.

En reprenant les codes du design automobile, le choix du rouge et du noir m’a semblé naturel.

Logotype

Le logo de DESIGNMOTEUR représente le profil d’une automobile de course (La C4 WRC pour être précis) qui se déplace vite, pour représenter la vitesse lié aux sports mécaniques.

DESIGNMOTEUR - web project - auto moto sport media - logotype - by ELJ
DESIGNMOTEUR – web project – auto moto sport media – logotype – by ELJ

Le terme DESIGN écrit en rouge représente les feux arrière du véhicule (technique en photographie pose longue pour obtenir des traînées lumineuses des phares arrières).

Le terme MOTEUR est placé précisément à l’endroit où est positionné le moteur (ici à l’avant), écrit en noir pour l’aspect mécanique, également c’est la couleur de référence dans l’univers high-tech.

Team project

Fin 2014, et avec près de 220 articles, j’ai décidé de faire une refonte du site orienté hiérarchie de contenu, et toujours dans l’objectif de mettre en valeurs les constructeurs automobile et moto, et les designers, les motoristes, et au final, tous ceux qui œuvre pour la passion de l’automobile et de la moto et des sports mécaniques.

7 ans après…

Le média D[M] devenant référence rapidement, a une audience mondiale de 30k pages vues par mois, et acquis une reconnaissance européenne pour ses publications proposant un contenu unique de haute qualité, multimédia, produit par DESIGN[MOTEUR] Team.

Depuis 2012, en tant que blog perso, le site DESIGNMOTEUR a évolué de version en version, de ‘dm1’, ‘dm2’, ‘dm3’ … à ‘dm7’ jusqu’à juin 2016 dédié auto, moto, sport, media.

site blog team webzine

Quelques mois après, en tant que site blog team webzine, nous sommes reparti sur de nouvelles base en pensant équipe d’abord.

Début 2017, nous avons alors lancé le projet ‘gtdm1′ permettant une organisation multi secteurs : auto, moto, sport, media, business, tech, gaming, racing, driving, custom.

DESIGNMOTEUR - 2017 - web project - auto moto sport media business - Responsive Web Design - site - by ELJ
DESIGNMOTEUR – 2017 – web project – auto moto sport media business – Responsive Web Design – site – by ELJ

web app

En 2018, le moteur WordPress qui fait tourner le site DESIGNMOTEUR depuis ces débuts, propose un nouvel éditeur dénommé Gutenberg avec une conception orienté block.

J’en ai profiter pour préparer une toute nouvelle version du site DESIGNMOTEUR dénommé… ‘dm8’.

Eh bien, après 6 ans de blog en solo ou à plusieurs, le projet DESIGNMOTEUR se veut être à la pointe de la technologie web.

De fait, on expérimente et on propose du contenu texte illustré avec des images en haute qualité et en publié en ultra HD, adapté autant pour mobile et que pour grand écran.

En 2018, l’évolution majeure du moteur WordPress, incite à préparer un nouveau châssis adapté et une carrosserie encore davantage perfectionnée répondant au principe de Reponsive Web Performance.

« Faire de la Web Perf’ ?

C’est au même titre qu’ajouter une entrée d’air en admission du moteur automobile et surtout préparer ou optimiser la cartographie moteur afin de le rendre davantage plus performant et gagner en nombre de chevaux de puissance.

Sur le Web, le but est de faire que le site appelé affiche vite le contenu demandé. On optimise les échanges client serveur. On gagne en vitesse d’affichage.

Objectif : charger le premier élément du site en moins de 300 ms et le site doit être entièrement affiché sur le navigateur en près de… 1 seconde !

Résultat gain de temps, économie ressource serveur, bonus pour le référencement et confort de navigation. »

Ewen LJ, web designer, blogger auto moto,Team Principal DESIGNMOTEUR
pixeljaguar web performance artwork by ELJ
pixeljaguar web performance artwork by ELJ

Ainsi, on en profite pour « repartir » sur une nouvelle base bénéficiant de 6 ans d’expérience et proposer de nouvelles fonctionnalités utiles tels que :

un menu évolué de navigation via emoji,

un mode jour/nuit adapté mobile (idéal sur écran AMOLED bénéficiant de noir 100%)

…et grand écran adapté ultra HD pour apprécier images et vidéos ou encore une mise en page restylé avec gros titre et images grand format

…essence même du projet de site DESIGNMOTEUR depuis ces débuts en 2012.

showreel - D[M] - 2019 - by ELJ
showreel – D[M] – 2019 – by ELJ

Et en bonus, le site devient Progressive Web App (PWA) !

Tel une app mobile, comme une app mobile, permettant la lecture hors connexion du site (!), mais ce n’est pas une app c’est du web
…avec la fluidité du web !

Pour tester en mode PWA, c’est possible avec Windows 10 [EdgeHTML17] et sur mobile [Android8/W10M/iOS12]
…il y a juste à « ajouter à l’écran d’accueil » suggéré par le navigateur.

photo preview - 3x Progressive Web App : Select-Starter+ - DESIGN[MOTEUR] - D[M]-UNDERGROUND- by ELJ
photo preview – 3x Progressive Web App : Select-Starter+ – DESIGN[MOTEUR] – D[M]-UNDERGROUND- by ELJ

Depuis été 2018, le site D[M] propose plusieurs fonctionnalités :

  • disponibilité du site, après une première visite, hors ligne avec accès immédiat du Texte et Photos en ultra haute définition
  • switch entre thème light (sur fond blanc) ou thème dark absolute pure black (sur fond noir)
  • possibilité d’ajouter à l’écran accueil du smartphone ou du navigateur de bureau, via un navigateur web, et l’ouvrir comme une Application…
    disposant des fonctionnalités d’un site web performant et administrable rapidement
pixeljaguar studio projet DESIGN[MOTEUR] artwork by ELJ
pixeljaguar studio projet DESIGN[MOTEUR] artwork by ELJ

new logo

En septembre 2019, afin de célébrer 7 années du projet de site DESIGNMOTEUR, dénommé DM pour les intimes dès 2014 et en 2015 au sein du Team DM… j’ai fait évoluer la charte graphique et proposer un nouveau logo.

Le terme DM depuis 2017 est surtout connu pour écrire ‘Direct Message’ sur Twitter et Instagram. Le terme devenant de plus en plus populaire, on s’est adapté.

L’utilisation régulière des crochets au lieu des parenthèses pour exprimer des éléments moteur tel que [V8 4.0L turbo] par exemple dans le titre d’un post publié sur le site pour répondre à l’expression « sous le capot moteur » …m’a fait trouver l’évolution naturelle du logotype.

Ainsi, le logotypographique D[M] dans une conversation ou sur les réseaux sociaux exprime d’abord une identité graphique spécifique.

En septembre 2019, il fut temps de proposer le logo sans évoquer l’automobile, ou la moto, … mais l’essence même du projet.

anime logo DESIGN[MOTEUR] - web project - auto moto sport media - artwork by ELJ
anime logo DESIGN[MOTEUR] – web project – auto moto sport media – artwork by ELJ

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *