Charte de l’agence MDN

Charte graphique et déclinaisons

Contexte

Professionnel
2019

Équipe

Marie Reyboz
L'équipe MDN

La suite par ici

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à !

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.

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 😉 )