Lézards Créationlz

Refonte de l'identité et du site de Handbrake 🍍

Publié le 5 janvier 2020

Handbrake c’est un logiciel qui permet de compresser des fichiers vidĂ©os. Il est connu dans le milieu amateur parce-qu’on obtient facilement un bon rĂ©sultat assez rapidement (simple Ă  comprendre).

J’ai rĂ©alisĂ© une refonte de leur site (https://handbrake.fr) comme examen final de licence professionnelle webdesign. Mon travail inclus la refonte graphique de l’identitĂ©, le webdesign du nouveau site et son dĂ©veloppement avec WordPress.

📽️
🗜️
Interface du logiciel Handbrake

Refonte de l'identité

Le logo de Handbrake

Rien à voir avec un "frein à main", Handbrake s'est démarqué par son ananas et son cocktail emblématique en guise d'icône pour le logiciel ! Une marque reconnaissable et encore aujourd'hui toujours bien reconnue, c'est pourquoi j'ai conservé l'ananas dans la refonte. J'ai viré le cocktail car je pense que la représentation de celui-ci dans un design moderne serait trop compliqué et mal déclinable.

Bénéficiant de la reconnaissance établie de l'ananas, ce logo relie l'ancien design au nouveau. Une transformation brutale d'un fruit réaliste à une simplification extrême qui s'inscrit dans une tendance flat. Il est plus facilement représentable ; il peut être utilisé sur fond clair ou sombre, en grand ou en très petit (et puis avouez qu'il est super sexy mon ananas)

À cause de cette simplification, l'ananas est de fait moins reconnaissable (moins de détails) pour les utilisateurs qui connaissaient l'ancien logo. C'est pourquoi j'inclus le nom de la marque dans le logo. Cela permet à tous de comprendre la marque, pour celles et ceux qui ne reconnaissent pas l'héritage de l'ancien logo (pfff... qui n'a pas utilisé Handbrake au moins une fois dans sa vie ?!).

Harmonie colorée

Les couleurs découlent directement du vert et de l'orange juteux des ananas. Une forte saturation permet d'obtenir des teintes modernes et dynamiques. Le vert, dans sa déclinaison "acide" donne une touche sophistiquée et technologique à l'ensemble.

Typographie

Montserrat est utilisée dans ses graisses les plus fortes pour les titrages, ce qui leurs donnent de l'importance. Elle est aussi utilisée dans le logotype pour arriver à un résultat précis et solide. Cela dégage un sentiment de confiance envers la marque. La forte graisse permet une déclinaison facile du logo (version petit, grand, clair, blanc).

Pour le corps de texte, j'ai choisi Inter UI pour sa lisibilité, rien de spécial à ce niveau (et je ne pense pas qu'il devrait y en avoir).

Pour illustrer le site, j'ai constitué un set d'icône en suivant l'univers graphique moderne en double teinte. Cela permet de rendre le contenu textuel plus dynamique et plus fun à comprendre. C'est aussi un bon moyen de communiquer sans avoir besoin de lire le texte (oui, dans une certaine mesure).

Webdesign

Page d'accueil
Page des focntionnalités
Page de téléchargement
Page de contenu (avec différents blocs)
Page de blog
Page d'article de blog
Forum
Topic de forum

Ça y est, vous avez votre quota de scroll pour la journée !

DĂ©veloppement web

Le site inclus un forum, est disponible en plusieurs langues, gères les versions du logiciels et intègre un système de publicité. Contre toute attente, j'me suis pas posé 5 000 questions, j'ai sorti un bon petit Wordpress !

Le forum est intégré avec bbpress, le multi-langue est géré par Polylang et la publicité par Adsense (le script js de Google).

J'ai généré des boutons de téléchargement dynamiques en fonction de la plateforme de consultation du site. Par exemple, un bouton pour télécharger l'application MacOS sera affiché si l'utilisateur visite le site avec un Mac. Ceci a été géré en détectant les user-agents des navigateurs (C'est chiant mais ça marche bien).

Pour tout le reste, l'intégration suit basiquement les méthodes de Wordpress : Types de contenu, taxonomies, champs personnalisés et tuti-cuanti.

Le versioning des fichiers de téléchargement n'a pas été si simple que j'aurais voulu. Je l'ai tout de même intégré avec un type de contenu et des taxonomies pour représenter les différents plateformes. Ça reste basique et fonctionnel mais pas très flexible.

OĂą est le site ?

Le site web a été présenté (finalisé et plus abouti que sur la maquette) devant un jury d'enseignants en 2018. Ce projet m'a permis de finaliser mon année de LPWD. Malheureusement, par manque de contact avec les gérants de Handbrake, je n'ai pas pu proposer ma version du projet.

(si vous avez des contacts, faites tourner !)

Tous mes projets