UI

OAK
identité visuelle et UI de l'interface d'un site d'agence

Il y a quelque temps, un challenge avait été proposé pour trouver un nouveau nom de marque. Bien que ma proposition n'ait pas été retenue, j'ai voulu pousser le concept plus loin. L'objectif : développer l'idée en concevant l'identité visuelle, ainsi que les interfaces du site internet (UI), mais également me faire plaisir en explorant et testant d'autres manières de présenter le contenu sur un site pour amener une expérience aux utilisateurs.

spinner

Le nom : OAK

Pour cette consultation, j'avais proposé le nom : OAK. Cette proposition n'était pas sortie d'un chapeau, elle avait été exprimée pour plusieurs raisons :

  • il est court, prononcer "O-A-K" ou "ÖK"
  • les 3 lettres ont une signification :
  • O : pour OKR (Objectives and Key Results/Objectifs et Résultats Clés), optimisation
  • A : pour authenticité, analyse, accessibilité, accélérateur et accompagnement
  • K : pour KPI, keyword (mots-clés en SEA/SEO), knowledge (connaissance)
  • OAK signifie "chêne" en anglais, un arbre qui passe de l'état de graine à un arbre solide/robuste qui ne cesse de se développer et d'évoluer au fil des saisons, une symbolique nature et une valeur forte

Après plusieurs recherches et croquis pour concevoir l'identité visuelle, j'ai choisi de créer une typographie en lettres capitales avec de la graisse, ceci pour appuyer l'aspect solide.

Le "O" a quant à lui été traité différemment. Il renvoie ainsi au tronc des arbres et plus particulièrement aux cernes que l'on peut apercevoir lors d'une coupe transversale, cernes qui évoquent l'évolution. Du côté des couleurs : des nuances de gris, du foncé au plus clair, avec une seule touche de couleur, un vert pour renvoyer à l'axe "nature", mais également à la croissance et l'adaptabilité.

OAK process recherche
OAK logo schéma
OAK logo sur fond vert
OAK logo sur fond image

Process de réflexion

Je trouve qu'il est toujours intéressant de concevoir des interfaces lorsqu'il y a un cadre, un challenge, à l'image des objectifs d'une marque. Par exemple, comment faire transparaître les valeurs de la marque à travers un écran ? Ou encore, comment créer un lien avec des utilisateurs ? Il existe un grand nombre de sites, le défi est de faire en sorte qu'il reflète la culture de l'agence, son expertise.

C'est pourquoi, en parallèle et en complément des interfaces, il est important de se concentrer sur les contenus, textes et visuels, de créer une charte éditoriale cohérente à l'ensemble de l'écosystème. Ce sont ces éléments qui, conçus ensemble, permettent de créer de la cohérence bien entendu, mais également une expérience chez les utilisateurs.

J'ai ainsi imaginé ce que pourrait raconter OAK, ce qu'elle fait, comment elle le fait, pour qui elle le fait et ce qui la motive. Grâce à cela, je voulais créer une image de marque unique avec la mise en avant des images, mais également des contenus rédigés dans le but d'informer les utilisateurs, de les rassurer et de transformer les prospects en clients.

Conception de l'interface utilisateur du site

Le premier point qui a inspiré l'approche a été le fait de conserver la grille de 12 colonnes, mais de jouer avec le positionnement des éléments et d'imaginer les transitions (transform, opacity) pour fluidifier la navigation au sein de l'interface. Ceci pour permettre d'avoir une interface équilibrée visuellement, tout en offrant la possibilité de mettre en avant les images.

Le second point a été d'imaginer le tout comme un ensemble flexible, modulaire, pour permettre une adaptation au fil de l'évolution du site, des objectifs business et marketing d'OAK. J'ai ainsi fait plusieurs recherches en commençant par l'une des phases que je préfère lors de la conception d'interfaces : les croquis.
Ils permettent de rapidement mettre en forme des idées, de les partager et de poser les bases de la structure, mais également des interactions imaginées, telles que les transitions par exemple.

OAK interface utilisateur croquis

Précisions sur les UI

La palette de couleurs et le choix de la typographie unique (Helvetica Now) permettent de conserver une lisibilité des informations présentées, tout en reflétant l'identité de la marque.

Je précise que les photos appartiennent à une photographe dont j'apprécie particulièrement le travail : Gemmy Woud Binnendij.

Découvrir les interfaces en ligne 👇

Interfaces desktop

OAK choix de l'orientation graphique (UI)

Homepage

Test de micro-animations au passage de la souris sur certains éléments : visuel en premier niveau de lecture, aperçus des cas clients et présentation de témoignages.

Contact

Test d'un formulaire en entonnoir.

OAK interface utilisateur page d'accueil

Page suivante

kibo