Charte de l’agence MDN

Charte graphique et déclinaisons

Un ordinateur portable est posé sur un bureau. Dans l'écran on voit la page d'accueil du site MDN, avec écrit

Contexte

  • Professionnel
  • 2019

Équipe

Identité d’une agence technique et créative

Le design au service de la démo technique

Maison du Net (ou MDN de son petit nom), est une agence web basée à Annecy, dans laquelle j’ai travaillé en alternance pendant 1 an.

Durant cette année, je me suis vue confiée la refonte de la charte graphique de l’agence, afin de mieux mettre en avant leur côté professionnel, créatif et aussi leurs compétences techniques. Création du logo, du site internet, des cartes de visite, etc.
On opte pour une couleur pop qui attire l’œil, alliée à un design sobre, mais qui laisse la place à la créativité technique ! (Ou comment rendre des développeurs heureux ;))

Pour voir le résultat, c’est par là !

Sigle du logo MDN sur fond bleu marine. Le sigle est un mélange des 3 lettres du nom de l'agence. Il est vert fluo et blanc.
Logo MDN sur fond bleu marine, avec la mention MDN soous le sigle. Le sigle est un mélange des 3 lettres du nom de l'agence. Il est vert fluo et blanc.
Logo MDN sur fond bleu marine, avec la mention Maison du Net sous le sigle. Le sigle est un mélange des 3 lettres du nom de l'agence. Il est vert fluo et blanc.

Tout d’abord, le logo. Sa forme géométrique appuie le côté technique de l’agence, tout en laissant deviner les lettres de son acronyme.

Photographie d'un ordinateur. Dans l'écran, on voit un fond bleu marine texturisé, en bas à droite de l'écran, il y a un carré qui fait comme une fenêtre vers l'intérieur du site, au niveau du curseur. Dans une petite bulle, il est écrit

Toc toc ! Pour entrer sur le site, il faut d’abord frapper à la porte de la maison.

Photographie d'un ordinateur. Dans l'écran, on voit la page d'accueil du site MDN avec écrit
Photographie d'un ordinateur. Dans l'écran, on voit un bloc de la page Expertise, sur la partie Création de site internet sur mesure. Il y a une image avec des outils type ciseaux, crayons, etc dans les teintes orangées. Sur le côté, il y a un paragraphe explicatif et une liste des technologies utilisées par l'agence. Un bouton permet d'en savoir plus.

Le site présente deux parties très importantes. Les projets bien sûr, mais aussi les différentes expertises que propose l’agence. On n’oublie pas de montrer qu’une équipe de professionnels travaille ici, avec leurs nombreuses compétences.

Photographie d'un ordinateur. Dans l'écran, on voit un projet extrait du portfolio de l'agence. Il s'agit du projet Pilot Frixion. On voit un écran avec l'accueil du site de Pilot, un titre et un bouton redirigeant vers le détail du projet.
Photographie d'un ordinateur. Dans l'écran, on voit le début d'une page de détail de projet. Il s'agit de la page pour le site Pilot Frixion, avec une image du site, un paragraphe de contexte et un liste des objectifs du projet.

Pour appuyer les expertises vues juste au-dessus, il faut montrer des exemples. C’est là que les Cases studies entrent en jeu ! Et pas à moitié, mais en détaillant toutes les étapes du projet, de l’ergonomie jusqu’au marketing, avec de grandes images et des explications claires et concises.

Photographie d'un ordinateur. Dans l'écran, on voit l'extrait d'une page détaillant un projet de l'agence. On voit la partie Ergonomie, avec un paragraphe explicatif et un écran avec un capture d'un site.
Photographie d'un ordinateur. Dans l'écran, on voit un extrait de la page expertise du site MDN. On voit un paragraphe sur l'accompagnement webmarketing et une image de smartphone avec un fil Instragram.
Carte de visite de l'agence MDN. La carte est carrée. Sur le recto, on retrouve le sigle du logo sur fond bleu marine, avec le sigle en vert fluo et blanc. Sur le verso, il y a les informations. Il y a 2 versions du verso. La première est générale, on trouve les infos de l'agence comme le téléphone, le mail et l'adresse. Sur la deuxième version, on retrouve le nom et le métier d'un membre de l'équipe en plus des informations précédentes.

Sortons du site, et allons du côté des cartes de visite. Le format carré appuie la forme du logo tout en apportant un brin d’originalité.
(N’essayez pas d’appeler John Doe, il ne travaille plus là-bas 😉 )