Google+
Linkedin

Nouvelle identité visuelle pour Stefan-H

On dit souvent que le cordonnier est le plus mal chaussé. Pour les graphistes ou les webdesigners c’est aussi la même chose, mais pas en terme de chaussures bien entendu...
Bref, il était temps pour moi de faire un nouveau site et de refondre un peu mon identité visuelle.

La précédente version de mon site web était en place depuis 2013. Il était donc temps pour moi de donner une nouvelle fraicheur à mon site internet et par la même occasion refondre mon identité visuelle.

Nouvelles couleurs

Première des choses pour renouveller l’identité visuelle : les couleurs. Je n’avais nullement l’intention de créer une nouvelle identité mais plutôt de m’appuyer sur l’existant.
Mes couleurs sont le bleu, le gris et le blanc. Les deux premières étaient les couleurs prédominantes, je décidais donc de renverser la tendance, le blanc devenant la couleur prédominante. Quant au bleu et au gris devenues les couleurs secondaires, elles serviraient à réhausser l’ensemble.

Refonte du site web stefan-h.com

Choisir le blanc comme couleur prédominante de mon identité visuelle, est également un avantage pour ce qui est de l’impression, on use moins d’encre ;)
Pour mes couleurs secondaires je décidai de leur donner un peu plus de contraste. Le bleu étant la secondaire principale (et non la troisième secondaire, poil au...) j’optai pour le Pantone 299C, comprenez 79 % de Cyan, 16% de Magenta et 0% de Jaune et de Noir (en language CMJN) ou encore #00A1E0 (en language hexadécimal).
En ce qui concerne le gris j’optais pour un foncé mais pas trop sombre quand même, le Pantone 424C. Tout en me réservant la possibilité de le décliner en deux versions plus claires.

Logo

Après les couleurs, venait bien entendu le tour du logo qui est quand même à la base d’une identité visuelle. De même que pour les couleurs, je ne comptais pas réalisé un nouveau logo.

Refonte du logo Stefan-H graphiste freelance

Le précédent logo était toujours placé sur un fond bleu clair. Je décidais de faire la même chose avec mon Pantone 299C, à la différence que le fond devenait partie intégrante de mon logo. Pour créer cet effet d’ensemble les bords de mon logo devait “être cassés". Même si je les aimais bien telles quelles, les dégoulinures devaient essuyer (ah ah) un léger décalage pour que l’on puisse discerner correctement les 4 bords rectilignes du logo.
Terminé également l’effet d’ombre et direction vers un aspect un peu flat design.

Vous souhaitez une refonte de votre logo ?
ou

Typographie

J’utilisais principalement la police Tahoma, accompagnée de la police Franchise que j’appréciais pour son rapport entre sa hauteur et sa graisse, mais qui était une véritable catastrophe pour tout ce qui est accents et caractères spéciaux. S’ajoutait une troisième police Crimson Italic qui venait un peu “casser” les autres et donner un petit côté imprimerie que j’aimais bien.

Les polices de caractères pour la nouvelle identité: Lato et Indie Flower

Voulant un contenu clair et simplifier le visuel, j’ai opté cette fois pour deux polices seulement. La principale est Lato de Łukasz Dziedzic. Une police sans empattements, bien adaptée à la lecture sur écran. Lato est utilisée sur des milliers de sites internet, et classée à la 17ème place mondiale (une star quoi !) selon le site Fontreach.com. Je ne dirai pas qu’elle n’a pas de défaut, mais en tout cas c’est l’une des polices de caractères que j’affectionne le plus, et son succès mondial n’est certainement pas le fruit du hasard.
Et pour donner un côté plus humain à tout cela j’ai pris en deuxième police Indie Flower de Kimberly Geswein, une police de caractères manuscrite. Je ne l’emploie qu’avec parcimonie et n’y voyez là aucun rapport avec le fait qu’elle ne se classe qu’au 103ème rang mondial (en tout cas au moment où j’écris ces lignes).

Refonte du site internet

Mon site web qui est, il faut bien le dire, le coeur de mon identité visuelle, ma vitrine sur le web, se devait d’être plus moderne. Responsive comme il l’était déjà et toujours en one-page excepté la partie blog.

Refonte du site web stefan-h.com

Navigation

Pour ce qui est de la navigation, je voulais un menu plutôt discret mais tout de même présent, en tout cas plus qu’un “simple” bouton comme j’ai pu le faire pour Tripshirt notamment. Les sites se suivent mais ne se ressemblent pas...
Le site étant un one-page je n’ai pas vraiment à faire face à des problèmes d’ergonomie de navigation. C’est donc un menu vertical et non horizontal qui a vu le jour. Pour laisser un maximum de place au contenu, ce menu ne montre que des icônes et l’intitulé apparait lors du survol.
S’il s’adapte à la résolution de l’écran, le survol n’est cependant pas possible sur les terminaux tactiles, c’est pourquoi les icônes doivent être le plus explicite possible. Il n’est pas impossible d’ailleurs que je les change à l’avenir. Pour un client, je n’aurai pas opté pour cela, mais mon site web est un peu une “zone test” pour moi, donc je peux prendre des risques ;)

Webdesign et contenu

En premier lieu je mettais un terme à l’existence des bandeaux rayés à la mode web 2.0.
Le contenu du site est resté à peu de choses près le même, par contre il fallait qu’il soit plus aéré et plus lisible. J’ai donc opté pour une taille de police et d’interligne plus élevée que ce qui se fait habituellement. Afin (en tout cas à mon sens) de favoriser le confort de lecture.

L’affichage des fils twitter prenaient pas mal de place, surtout quand les tweets affichaient des images, j’ai donc pris le parti de n’en afficher qu’un, le dernier, et c’est très bien !
J’ai placé au contraire du site précédent plusieurs CTA (Call to Action) certains avec une image de fond et effet parallax, d’autres sous forme de blocs plus classiques.
Les blocs de contenu ont également des marges plus grandes toujours pour contribuer à un aspect plus aéré. Enfin certains éléments avaient des angles arrondis, comme les vignettes de ma section portfolio ou encore les cadres de la section news. Pour coller à l’esprit de mon nouveau logo et ses angles droits, tous les éléments graphiques ont été ré-adaptés à la mode rectiligne.

Voilà rapidement en quoi à consister la refonte de mon identité visuelle. Si vous avez besoin de la même chose n’hésitez pas à me contacter !

Besoin d'un devis pour une refonte de votre site web ?
ou
comments powered by Disqus