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é 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’icônes 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

Le benchmark de la concurrence me remarqué qu’il y avait très peu de designer graphique / graphiste écoresponsable à Lille et ses environs. Mon positionnement va m’aider à me démarquer de mes pairs.

Les professionnels positionnés sur l’écoresponsabilité, 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 employé apporte sobriété, efficacité 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. Résultat, 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

Deux typographies seront utilisées sur l’ensemble de mes supports imprimées et digitaux :

• P22 Mackinac Pro (avec sérif) Ses irrégularités et ses courbes apportent douceur, caractère et raffinement.
• Quicksand (sans sérif) 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.

Présentation

L’en-tête et la proposition de valeur

L’entête s’est simplifié, au revoir 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ée, ce qui l’incite à poursuivre sa lecture pour découvrir les solutions écoconcerné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 contenu pour en faciliter la lecture.

Les clients

Les informations sont bien mieux structurées et organisées. La lecture est simplifiée, l’expérience accumulée au cours de ces 7 dernières années d’expérience est visible immédiatement.

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 conscience 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 augmentent. 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ée pour réduire le poids et la longueur de la page. À la place deux projets ont été ajoutée à 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és 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 parties des pages services ont également été supprimés 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 écoresponsables.

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…