Cette page est plus propre que des pages testées (le ).
Ses 1,73Mo sont chargées en 32 requêtes, soit de eCO2 émit par chargement

Noctaupus – Refonte graphique 2021

Date
Février 2021
Client

À chaque chargement de cette page
Testé le
CO2 émit
Chargé
1,73Mo
Qualité

Noctaupus – Refonte graphique 2021

Tour d’horizon

Contexte et objectifs du projet

Noctaupus.com a été pendant plusieurs années à la fois la vitrine de mon activité, le portfolio de mes réalisations et le terrain de mes expérimentations. Ce site a au fil du temps perdu en cohérence et le besoin d’avoir un véritable fil rouge s’est fait de plus en plus ressentir.

En 2020, la vision de mon activité a beaucoup évoluée et a gagné en clarté. J’ai préparé cette refonte en fin d’année pour la déployer début janvier 2021. Cette refonte traduit le nouvel élan que je veux donner à mon activité en brandissant haut et fort mon positionnement et ma nouvelle identité graphique.

Challenges

  • Créer une identité graphique sobre et charismatiqueSe limiter au strict nécessaire en matière de typographies, de couleurs, de formes, d’effets et de photographies. Bref, ne pas succomber au décoratif et au superflu.
  • Incarner le positionnementTant dans le fond que dans la forme (sobriété et efficacité) : textes, images, styles, fonctionnalités. Cette différence, je voulais l’exprimer dans mon intitulé de job. Pour moi, un « designer graphique éco-concerné » s’engage à proposer des alternatives durables, moins énergivores et donc moins polluantes.
  • Gagner en clartéTrier, supprimer, rassembler, catégoriser, pour ne conserver ce qui apporte le plus de valeurs (supprimer les redites et les fonctionnalités inutiles).
  • Guider l’utilisateurHiérarchiser, structurer, aérer le contenu, orienter le regard avec sobriété et stratégie par le biais de couleurs, de formes, d’icones pour mettre en valeur les contenus et faciliter la lecture.
  • Passer du descriptif au conatifL’époque où les sites pouvaient se contenter de décrire une activité est révolue. Il faut intéresser et engager l’utilisateur grâce au texte, aux liens ou aux boutons pour faciliter son passage à l’action.
  • Présenter mes séances d’audits Ils aident les gérant d’activités (indépendants / PME) à prendre du recul, à faire le point sur leur site web pour agir avec stratégie. Découvrir l’audit de site vitrine

Exploration

Recherche & Analyse

Grâce à un rapide benchmark, j’ai remarqué qu’il y avait très peu de designer graphique / graphiste éco-responsable à Lille et ses environs. Mon positionnement va m’aider à me démarquer de mes pairs.

Les professionnels positionnés sur l’éco-responsabilité, la communication durable ou la transition écologique utilisent beaucoup de photographies et d’icônes en lien avec la nature. Ceux-ci n’ont pas forcément conscience que les images sont en grande partie responsables du poids élevé des pages web (±50% du poids total). L’idéal serait donc de les utiliser principalement pour illustrer un propos et non à des fins purement décoratives, ce qui crée de la pollution en apportant peu de valeurs.

Ma posture éco-concernée me pousse à avoir une vision globale du projet et à questionner chacune de ses étapes. Cette réflexion m’aide à atteindre l’objectif fixé avec le client de la manière la plus vertueuse possible en adoptant une démarche graphique sobre et minimaliste.

Stratégie

Pour cette refonte, j’ai choisi de me concentrer sur l’essentiel : la page d’accueil. Elle est idéale pour affirmer mon positionnement et donc me démarquer des autres graphistes freelances de Lille. L’identité graphique est elle aussi différenciante grâce à un style minimalisme avec très peu d’images et un contenu plus concis. Cette économie de moyen et la sobriété qui en découle apporte efficacité à l’ensemble et renforce la cohérence avec mon positionnement.

Création

La refonte graphique

Afin d’être aligné avec mon positionnement, j’ai choisi de tendre vers plus de sobriété dans mes choix graphiques. C’est pourquoi, j’ai utilisé peu de couleurs, de typographies et j’ai évité au maximum les éléments graphiques purement décoratifs. En résulte plus de cohérence et de clarté.

Les principes ci-dessous sont les fondamentaux qui servent de base à la création ou l’adaptation des différents composants du site.

Typographies

Une combinaison de deux typographies seront utilisées pour l’ensemble de mes supports de communication imprimés et digitaux :

La P22 Mackinac Pro (avec serif) : Ses irrégularités et ses courbes apportent douceur, caractère et raffinement.

La Quicksand (sans serif) : Ses lettres rondes et minimalistes facilitent la lecture du texte (notamment pour le « a ») et renforce la douceur de l’identité graphique.

Palette de couleurs

Les couleurs reflètent les piliers de mon positionnement.

Psychologie des couleurs

  • Le vert évoque le naturel, l’espérance, l’éthique
  • Le jaune évoque l’énergie, la puissance, l’optimisme
  • Le rose/saumon évoque la jeunesse, la peau, le contact
  • Le blanc cassé évoque le changement, la transition
  • Le blanc évoque la pureté, la neutralité, la simplicité

Le contraste avec des couleurs est suffisamment élevé pour assurer la lisibilité du texte quelque soit sa taille. Les couleurs sont déclinées en nuances pour gagner en flexibilité et assurer leur bon contraste.

Médias

PhotographiesJ’axe mes recherches vers des photographies qui traduisent des sensations ou qui mettent en avant des personnes dans leur quotidien. Celles en entête sont traitées en bichromie/duotone (= deux couleurs). Elles s’intègrent parfaitement à la page et assurent la cohérence et la volonté minimaliste de l’ensemble. Ainsi, le titre de la page est d’avantage mis en avant.

IconesJ’ai utilisé des icônes de la famille Tweeny icons. Elles sont minimalistes et agréables à l’œil. Ces icônes servent à attirer et à guider le regard de l’utilisateur à des emplacements stratégiques. Ainsi, il est plus facile pour l’utilisateur de marquer des temps d’arrêts pour survoler la page vers des parties susceptibles de l’intéresser ou sur laquelle il peut interagir.

Zoning & Wireframe

Puisque les pages du site restent les mêmes, il est inutile de perdre du temps à réfléchir au sitemap visuel du site. Le zoning est un schéma qui sert à réfléchir à l’organisation logique des parties au sein de la page.

Le wireframe quant à lui sert à structurer et organiser les contenus au sein des différentes parties qui constituent ces pages. Il offre donc une vision plus précise de ce que va devenir la page.

1 – En-tête : Poursuivre ou fuir

La première ligne indique la quantité de CO2 que génère le chargement de la page. L’entête sert à capter l’attention de l’utilisateur et l’aider à savoir si cette page correspond à sa recherche et donc à son besoin. Pour ce faire, il est vital de mettre en avant le bénéfice apporté au futur client.

2 – Mon positionnement

Je définis les caractéristiques des prospects avec qui je veux travailler et présente ce qui me différencie des autres designers graphique en freelance : mon approche éco-responsable et éthique. Puis, brièvement, je parle de ma solution pour réduire la douleur ressentie par mes clients.

3 – Mes services (x3)

Mes services, leurs bénéfices et les prestations en identité, imprimé, interface & web sont brièvement décrit. J’ai fusionné la partie services et réalisations, ainsi, les visuels des projets arrivent plus tôt et sont utilisés pour présenter les rubriques des services.

4 – Clients

Mes clients sont en grande partie des PMEs ou des indépendants, ils ne sont peut-être pas connus de tous. J’ai donc décidé de les regrouper par domaines d’activité afin de rendre cette partie plus intéressante et digeste pour qui visite le site.

5 – Témoignages

Au dessus du témoignage, le titre résume pourquoi le client a fait appel à mes services. Les témoignages sont très importants, ils rassurent et aident les prospects à se projeter. ce qui peut aider à choisir leur prestataire. N’avez-vous jamais regardé les commentaires avant un achat ?

6 – Blog + CTA + Footer

Les derniers articles sont repris, puis, un bandeau facilite la prise de contact. Le footer a été réduit au strict minimum. Les textes et le formulaire de newsletter ont été supprimés puisque je ne m’en sers plus. Seuls les liens vers les pages légales et mes réseaux sociaux sont encore présents.

Présentation

L’entête et la proposition de valeur

L’entête s’est simplifiée, aurevoir la photographie et les problèmes de lisibilité. La communication est plus directe : je m’adresse au visiteur par une question. Son attention est capté, ce qui l’incite à poursuivre sa lecture pour découvrir les solutions éco-concernés que je peux lui apporter.

Les services graphiques

Cette partie est devenue beaucoup plus attractive et a gagné en clarté. Les accroches visuelles (espaces vides, pictos, images) mettent en avant et illustrent le contenus pour en faciliter la lecture.

Les clients

Les informations sont bien mieux structurées et organisées. En résulte lecture est apaisée qui met en avant l’expérience accumulée au cours de ces 7 dernières années d’expériences.

Bénéfices

Une identité graphique unifiée

Cette refonte graphique a été l’occasion de mettre un plat un travail de positionnement entamé il y a plus d’un an. Les prises de consciences qui en ont découlé, m’ont aidé à clarifier ma vision, et aussi, à identifier les valeurs au fondement de mon activité de designer graphique en freelance. Entamer cette refonte a été l’occasion de rendre visible cette évolution, mais surtout d’incarner mon positionnement éco-concerné dans la nouvelle identité graphique de Noctaupüs. En effet, tout changement d’identité graphique est le reflet de l’évolution du positionnement, de la vision et de la stratégie d’une marque.

La cohérence graphique qui découle de cette refonte renvoie une image très professionnelle de mon activité. Mes compétences de designer graphique sont plus visibles et mieux valorisées. Par effet de ricochet, la qualité et la valeur de mon expertise augmente. Ce qui renforce la confiance des prospects quant à l’idée me confier leur projet. De plus, cette nouvelle identité résolument minimaliste va m’aider à me démarquer et me différencier de mes pairs freelance à Lille.

Un contenu plus clair et concis

La page d’accueil a totalement été retravaillée : les parties, leur ordre et leur organisation interne. Avec en tête les besoins des clients pour fournir des informations utiles, utilisées et utilisables tout en facilitant la lecture et en donnant envie d’en savoir plus. La partie réalisations a été supprimé pour réduire le poids et la longueur de la page. À la place deux projets ont été ajouté à la partie identité, imprimé et site & interface. Le formulaire d’abonnement à la newsletter a été supprimé car il était très peu utilisé. Les photographies et les pictogrammes sont utilisées avec parcimonie et optimisées en format, en tailles pour limiter leur poids et réduire le temps de chargement de la page pour être chargé rapidement. Les images représentent en moyenne 50 à 60% du poids total d’une page web. Certaines partie des pages services ont également été supprimé car elles apportaient peut de valeurs (redite), les pages sont ainsi plus courtes et gagnent en efficacité.

Suite du projet

Cette refonte graphique n’est que la première étape des changements à opérer sur le site. C’était l’occasion de rendre mon positionnement éco-concerné plus visible tant par les mots que par mon identité graphique. Depuis février dernier, noctaupus.com est consultable depuis des serveurs éco-responsables.

La refonte va continuer au fil des mois à venir et va toucher différents aspects du site : ses contenus pour gagner en clarté, l’accessibilité et la rapidité pour pouvoir être consulté par le plus grand nombre et le référencement pour remonter dans les résultats de recherches et être trouvé plus facilement…