Site vitrine d’une biscuiterie artisanale située à Oloron Sainte-Marie, au concept des jeux de mots espiègles.

Charlotte, maman cachée derrière cette nouvelle boutique au concept amusant et rafraîchissant, est venue pour la réalisation d’un site vitrine à son image. L’objectif de ce site est de présenter la marque et ses produits, tout en visant les clients locaux afin d’attirer vers sa boutique en physique.

Analyser les tendances et tout miser sur le référencement.

Il était essentiel de mettre en avant le lien avec la commune d’Oloron Sainte-Marie, afin d’ancrer sa boutique dans les résultats de recherches liés. Pour cela, il aura fallu y consacrer une page spéciale, en expliquant les raisons d’installation de Charlotte dans cette région.
De plus, il était impératif de penser à mettre en avant dès que possible les coordonnées, horaires et adresse du commerce. Cela dans le but de toujours rediriger au mieux l’utilisateur vers ce qu’il doit chercher à trouver : se rendre chez l'Espiègle.

Une boutique locale, artisanale, gourmande, amusante... les bons mots-clés.

La recherche et le choix de tous ces mots-clés, autant pour le référencement, m’ont permis de construire un univers graphique cohérent, au service de ces différentes idées visuelles. Il fallait un site internet qui ait du piquant et de la gourmandise, tout en étant le plus accessible possible.

Premiers éléments : le logotype et l’univers graphique.

Lorsque Charlotte m’a contactée, elle venait de faire réaliser son logo par un graphiste. N’ayant pas d’autres éléments graphiques, il fallait continuer à développer cette idée de logo pour pouvoir construire le site vitrine avec une identité visuelle encore plus poussée, plus professionnelle.

designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-1

Élément graphique I Logotype final pour l’Espiègle I Non réalisé par Odin Studio

biscuiterie-artisanale-oloron-sainte-marie-nos-biscuits-section-espiegle

Utiliser les détails du logotype existant pour une première base d’images visuelle.

En créant une ellipse de la taille approximative à la taille de la tête du personnage, j’ai pu zoomer et découper des bouts du personnage en question. Cela dans le but de créer l’idée de ne pas le voir en entier du premier coup, comme s’il se cachait... en référence au nom de l’Espiègle ! En les disposant toujours dans le contenu graphique, quel qu’il soit, a pour but de donner l’impression d’être toujours accompagné par ce petit personnage espiègle, qui se cache un peu partout.

biscuiterie-artisanale-oloron-sainte-marie-entreprises-section-espiegle
biscuiterie-artisanale-nous-contacter-espiegle

Développer encore plus l’univers graphique pour atteindre le bon équilibre visuel.

L’idée des premières icônes fonctionnait très bien, mais restait limitée par le personnage lui-même. Il fallait donc trouver un moyen de renforcer l’univers graphique afin de ne pas tomber dans un projet trop stricte et rigoureux, ce qui nuirait à la marque. L’Espiègle, c’est une biscuiterie artisanale où les gens se retrouvent, où maître-mot rime avec jeu de mots. C’est un endroit chaleureux, accueillant où le professionnalisme fait que l'on s'y sent bien.

biscuiterie-artisanale-oloron-sainte-marie-section-espiegle
designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-6
designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-7

À la recherche d’une typographie aussi espiègle que lisible.

Dernier élément graphique à mettre en place : la bonne typographie, celle-ci étant un point primordial dans l’élaboration de l’identité visuelle. Accompagnée des éléments visuels, la typographie véhicule toutes les idées et les messages. Bien construite, avec de bons équilibres d’espacement et de hiérarchisation, c’est grâce à elle que la marque peut pleinement communiquer ses valeurs et son concept.

Une typographie sans serif aux allures amusantes dans ses courbes.

Les typographies du logotype n’étant pas utilisables, il aura fallu essayer de nombreuses typographies avant de trouver le choix idéal pour cette biscuiterie artisanale. Conçue dans le cadre spécifique d’un rebranding, cette police a volontairement un design ouvert, convivial et légèrement décalé, en gardant un côté frais et personnel. Elle s’est présentée comme le choix parfait pour véhiculer cette image d’espièglerie, propre à Charlotte.

Accompagnée par la neutralité très volontaire de la Mada, la Livvic se révèle particulièrement amusante.

designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-23
designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-8

Visuel de la carte de visite de l’Espiègle

designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-10

Recherche d’une banque d’images LDD et création des visuels graphiques.

Afin de créer un contenu vivant, j’ai dû chercher des pistes d’images de biscuits tout en gardant en tête la capacité de ma cliente à adapter ce contenu avec le sien, qui viendrait dans un second temps. J’ai donc créer un bloc à la couleur de la marque, agrémenté d’une vague texture noise aux côtés vintage souhaités par Charlotte et réhausser par un léger blur de fond pour créer de la rêverie. Ce dernier servant de bandeau principal pour chaque page du site.

designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-24
designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie
designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-11

Banque d’image : Unsplash I Design in Figma

Pour finir, j’ai créé des blocs visuels à utiliser pour mettre en avant des images. L’objectif ici, en utilisant deux cadres à l’avant et à l’arrière-plan de l’image utilisée, était de créer la sensation d’avoir plusieurs petites cartes, comme on pourrait en avoir dans un jeu. Cela renforce ainsi l’idée visuelle constante d’être dans un univers rempli d’espiègleries.

designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-15
designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-14
designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-13

Banque d’image : Unsplash I Design in Figma

L’univers graphique au service du site internet.

Après avoir construit le squelette du site vitrine, j’ai réalisé le design de toute l’interface afin de la rendre attrayante, à l’image de la marque, tout en assurant à l’utilisateur un parcours sans accroc.

Afin d’aider ma cliente à créer son contenu, je lui ai créé des blocs avec du faux contenu ressemblant aux idées qu’elle allait devoir développer pour communiquer au mieux sur sa biscuiterie et attirer sa clientèle. Cela permet de comprendre l’importance de la rigueur dans la construction, en agençant les bons mots-clés aux bons endroits (H1, H2, H3, etc...) et permet donc à ma cliente de réfléchir aux informations qu’elle va devoir rédiger tout en ayant un guide déjà en place.

designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-17
designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-2
designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-18
designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-19

Utilisation de lotties pour une touche d’espièglerie en plus !

C’est en voyant les petites bottes du personnage que je les ai tout de suite imaginé en train de marcher... Pour la page de présentation de Charlotte, j’ai poussé cette idée d’animation pour créer un jeu de cache-cache avec l’utilisateur. Qui se cache derrière l’Espiègle ? Mystère... Jusqu’à ce que votre curseur lui passe dessus.

designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-20
designer-graphique-webdesigner-portfolio-project-figma-semplice-biscuiterie-artisanale-oloron-sainte-marie-3

05 décembre 2023, états des lieux.

Ce projet, voué à se développer encore d'ici la mise à jour avec le contenu de ma cliente, m'a permis de travailler l'univers graphique au travers des nombreuses problématiques de référencement.

En effet, grâce à l'élaboration d'une liste de mots-clés servant à mettre en avant la biscuiterie, j'ai pu développer une identité visuelle sur-mesure et cohérente : espièglerie, jeux, gourmandise, piquant... Le défi de constituer cette identité visuelle forte et reconnaissable aux-travers de très peu d'éléments m'a forcée à envisager des solutions aussi simples qu'efficaces.

Grâce à tous les éléments mis en place, j'ai également pu constituer une véritable charte graphique pour l'Espiègle, laissant encore de l'espace pour de futurs designs de packaging, de print (carte de visite, flyers, etc...). Ces besoins à venir m'ont poussée à m'appropirer pleinement ce projet afin de démontrer ma capacité à créer toute une communication visuelle professionnelle et viable dans le temps, qui répond bien sûr aux besoins de l'image de la marque.

Vous aussi vous souhaitez créer votre site vitrine ?

Si vous êtes un particuler qui se lance dans la création d'une entreprise avec le besoin d'un site vitrine pour présenter votre activité et vous permettre de vous référencer dans votre commune, département, région, n'hésitez pas à me contacter.

Pourquoi choisir de travailler avec moi ?

Mon expertise me permet de créer des identités de marque fortes et reconnaissables tout en prenant en compte toutes les problématiques techniques qui l'entourent. Que ce soit pour réfléchir aux déclinaisons print potentielles, ou encore à la construction rigoureuse d'un site pour un meilleur référencement, je vous accompagne de mon mieux en vous donnant les meilleurs conseils possibles afin de gérer toute votre communication visuelle.

Je délivre des sites vitrines clé en main, accompagné de leur charte graphique au besoin, en moins d'une semaine, comprenant dans tout cela votre accompagnement dans l'achat de votre nom de domaine et la création de votre serveur.

Présenter votre projet pour recevoir un devis.

Vous pouvez me laisser un mail précisant votre nom & prénom, ainsi que votre projet avec le plus de détails possible afin que je puisse établir un devis sur-mesure à vos besoins.

Tous les projets

Cherry AgencyLogotype, Identité visuelle

Athéna AcadémieLogotype, Identité visuelle

La Tête dans le GuidonLogotype, Identité visuelle, Webdesign

TechMovensLogotype, Identité visuelle

EcoLivingLogotype, Identité visuelle, Webdesign

raphaelleodinstudio[at]gmail.com

All content and images Copyright © 2023 Raphaëlle Odin