Création de site en agence
Les deux exemples présentés ci-dessous sont des cas clients réels, dont les sites ont étés produits dans le cadre de mon premier travail en temps que designer et intégratrice web au sein d’une agence de communication, en 2020-2021.
Depuis cette période, de nombreux site (pour ne par dire tous) ont dû être retouchés et/ou corrigés, suite au changement de CMS de l’agence.
Les deux projets que j’ai sélectionné sont donc à la fois ceux que j’estime avoir le mieux réussis, et aussi ceux qui ont le moins nécessités de repasses techniques (et donc de changements graphiques).
Disclaimer : les animations sont toutes initialement intégrées au CMS et ne reflètent pas un choix de ma part.
1. Créanature Paysagiste
Entreprise d'aménagement paysager à Saint-Pierre-du-Mont, dans les Landes (40)
Le brief créatif
Le client voulait une refonte totale de son précédent site, et ajouter du doré dans sa palette existante. Il a été recréé de zéro, depuis un nouveau CMS ; seul le nom de domaine a été conservé.
J’ai fait le choix d’une disposition épurée et minimaliste, très graphique, afin de laisser toute la place au contenu et ainsi mettre en valeur les photos de ses réalisations.
L'identité visuelle
1. La colorimétrie
Pour la palette, j’ai respecté la volonté du client et ai donc repris les couleurs de son ancien site, avec l’ajout du jaune (afin de faire un rappel visuel du doré, qui n’est pas une couleur à proprement parlé).
2. La typographie
J’ai choisi une seule police, la Raleway : simple et moderne, elle permettra au site de “bien vieillir”, et possède une famille suffisamment diversifiée pour répondre à tous les (futures) besoins du client.
Elle s’accorde avec l’univers du paysagisme et les formes organique.
La page d'accueil
L’alternance d’éléments dorés et de contenu vidéo permet d’ajouter du dynamisme et d’attirer l’attention, sans polluer la prise d’informations.
Les pages service
En tant que paysagiste, son site comportait beaucoup de photos, il a donc fallut que je propose des galeries à la fois digestes et esthétiques, toujours avec une touche de doré afin de présenter son activité avec clarté.
Responsive design
Grâces à mes études et une formation en interne dans l’agence, je possède des connaissances pratiques en intégration web (HTML5/CSS3) qui me permettent notamment de veiller à la bonne adaptation des éléments selon la taille de l’écran.
L’idéal étant bien évidemment la conception de sites en mobile first.
2. Château Champarel
Domaine vinicole du début du XXᵉ siècle, situé à Bergerac
Le brief créatif
Le client avait besoin de mettre en avant son domaine viticole et les deux vins (AOP et AOC) produits sur place via un site vitrine, avec pour objectif d’obtenir un maximum de prospects (réservation de dégustation, commandes, etc.). Le client voulait également avoir accès à son logo en haute définition (ce qui nécessitait de le refaire entièrement, sans le modifier). La seule couleur exigée était un rouge bordeaux (pour rappeler la couleur du vin).
J’ai fait le choix d’une disposition très classique, le contexte ne se prêtant pas à des designs trop audacieux. J’ai focalisé mon attention sur la structuration des informations et la prise de contact.
L'identité visuelle
1. La colorimétrie
Pour la charte, j’ai fait le choix d’une déclinaison de rouge, le tout rehaussé par des touches de jaune (petit clin d’œil au doré du logo) et adoucit par un gris clair. J’ai également fait le choix d’illustrations hachurées, à la fois pour créer une ambiance authentique (en hommage au patrimoine historique du domaine), et pour rester en lien avec les autres éléments graphiques du site (principalement constitué de lignes et délimitations horizontales). Cela permet d’allier modernité et autorité.
2. La typographie
J’ai choisi trois polices :
- La Rozha One : une police à empattement la plus proche de celle du logo, utilisée pour les titres principaux,
- La Pinyon Script : une police manuscrite pour sublimer les titres secondaires et apporter du caractère au site,
- Et enfin, la Montserrat : une police plus moderne et malléable qui se combine parfaitement avec les deux autres. Elle permet une bonne lisibilité.
La page d'accueil
L’immersion commence par l’histoire du vignoble, son unicité et la description du vin. Le but ici est de “mettre l’eau à la bouche”, et donner envie d’en savoir plus.
Et c’est justement ce qui suit : type d’exploitation, variété de vin, photos du domaine viticole, toutes les informations essentielles comblent la curiosité – sans oublier des CTA stratégiquement positionnés pour inciter à la prise de contact et/ou la visite du reste du site.
Certaines photos fournies par le client, de très bonne qualité, ont été intégrés au site, ajoutant un rappel discret de son identité.
Les points forts du vignobles ont étés mis en évidence grâce à deux grandes illustrations.
Enfin, l’illustration du formulaire de contact est également un rappel du premier visuel du site : une vue sur les tonneaux de vins en cave.
Cette cohérence entre les visuels et le contenu est le fil rouge directeur du site.
Les pages service
Le château Champarel a deux principales pages “services” : l’activité de producteur récoltant, et bien évidemment la présentation des vins.
La première consiste à donner des informations sur le château (complémentaires à celles déjà présentes sur la page d’accueil). La quantité d’information étant restreinte, j’ai fait le choix de l’illustrer grâce à une vidéo simple et immersive.
La seconde permet d’accéder à une carte des vins (également réalisée par mes soins à la demande du client) et à une petite galerie photo, dimensionné pour respecter le format portrait des photos des bouteilles.
La carte des vins a été produite en “bonus”, et prévue pour être disponible en ligne uniquement (format PDF). J’ai donc repris les polices, couleurs et style d’illustrations utilisées pour le site.
Responsive design
Grâces à mes études et une formation en interne dans l’agence, je possède des connaissances pratiques en intégration web (HTML5/CSS3) qui me permettent notamment de veiller à la bonne adaptation des éléments selon la taille de l’écran.
L’idéal étant bien évidemment la conception de sites en mobile first.
