Dans le cadre de mon Bachelor Webdesign, j’ai eu l’occasion de travailler en équipe sur un projet réel : accompagner Brieuc,professionnel du secteur funéraire, dans la création de sa propre entreprise de pompes funèbres à Crac’h, dans le Morbihan.
Le projet partait d’une page blanche : identité visuelle, site web, stratégie de communication et marketing, supports pour les réseaux sociaux…
De mon côté, j’ai principalement pris en charge la création de l’identité visuelle et la conception de la maquette du site web.
Les nombreux échanges avec le client nous ont permis de découvrir un secteur particulier, parfois délicat, mais qui s’est révélé particulièrement intéressant à traiter.
", "imgRight": ["projet-brieuc-logos", ["Quelques déclinaisons du logo"]] }, "part02": { "reverseMob":"", "imgLeft": [], "txtLeft": "Le projet s’est déroulé sur plusieurs semaines, avec un premier travail d’échange permettant de comprendre l’activité, le positionnement et les attentes du client.
L’objectif était de moderniser les codes traditionnels du secteur funéraire, tout en conservant le sérieux et la sobriété indispensables à ce domaine. J’ai donc commencé par définir une identité visuelle* qui servirait de fil conducteur à l’ensemble du projet.
", "txtRight":"", "imgRight": [] }, "part03": { "reverseMob":"true", "imgLeft": ["projet-brieuc-page-mockup-et-oodboard", ["Moodboard"]], "txtLeft": "Une fois l’univers graphique défini, j’ai commencé la conception du site par le zoning* afin d’organiser les contenus et leur hiérarchie, avant de réaliser les maquettes UI* complètes.
L’identité visuelle a ensuite été déclinée à travers les couleurs, typographies, formes et composants de l’interface.
L’objectif était de proposer une navigation simple, claire et rassurante, avec un accès rapide aux informations essentielles.
Le client ne disposant pas encore de photographies ni de contenus définitifs, j’ai recherché et créé des contenus fictifs* afin de construire une maquette réaliste et de pouvoir tester les différentes mises en page.
", "txtRight":"Pour le logotype*, j’ai recherché un équilibre entre modernité et tradition. Le nom « Brieuc » est directement associé à la baseline « Pompes Funèbres », afin d’identifier immédiatement l’activité.
Le logo a d’abord été travaillé en niveaux de gris avant de définir les couleurs. Plusieurs déclinaisons* ont ensuite été créées pour assurer son utilisation sur fonds clairs, foncés ou photographiques, en web comme en print, ainsi que dans de petits formats comme le favicon.
La palette s’inspire notamment de l’implantation de l’entreprise dans le Morbihan.
Les différentes nuances de bleu évoquent la mer et le ciel tout en apportant sobriété et confiance.
Le jaune orangé, associé au sable et au soleil, apporte quant à lui de la chaleur et permet de s’éloigner de l’image pastel traditionnellement associée au secteur funéraire.
", "imgRight": ["projet-brieuc-mockup"] }, "part04": { "reverseMob":"true", "imgLeft": ["projet-brieuc-designsystem4", ["Header du site web (Entête)"]], "txtLeft": "Le projet a abouti à une identité visuelle complète et déclinable, composée du logotype, de ses variantes, d’une palette colorimétrique et de différents éléments graphiques ensuite transposés au site web.
La maquette finale reprend cet univers à travers une interface sobre et claire, ponctuée de formes arrondies et de touches de couleur apportant davantage de chaleur.
Ce projet m’a permis de travailler sur une problématique particulièrement intéressante : trouver l’équilibre entre les codes d’un secteur sensible, les attentes d’un client réel et la volonté de proposer une identité plus moderne et différenciante.
Identité visuelle* : ensemble des éléments graphiques qui permettent de reconnaître une marque.
Logotype* : représentation graphique du nom ou du symbole d’une entreprise.
Déclinaison* : adaptation d’un élément graphique à différents formats et usages.
Zoning* : schéma permettant d’organiser les grandes zones d’une page avant sa conception graphique.
UI (User Interface)*: conception graphique d’une interface.
Responsive* : conception permettant à un site de s’adapter aux différentes tailles d’écran.
", "txtRight": "", "imgRight": ["projet-brieuc-designsystem", ["Quelques composants du site"]] } } }, "miseEnSituation": { "urlVideo": "", "pictures": [["projet-brieuc-page-home", ["Homepage (page d'acceuil)"]], ["projet-brieuc-page-a-propos",["Page à propos"]], ["projet-brieuc-page-contact", ["Page contact"]]] } }, { "id":"2", "projectSpecial": false, "title":"Ville de Paimpont", "smallDescription": "Refonte de l’identité visuelle et conception de la maquette web du site de la commune de Paimpont.", "type": ["Identité visuelle", "Webdesign"], "technoOutils": ["Figma", "Adobe Illustrator", "photoshop"], "date": "2022", "cadre": "Projet étudiant", "longDescription": "Paimpont est une commune bretonne située au cœur de la forêt de Brocéliande, connue pour son patrimoine naturel et les légendes arthuriennes qui l’entourent. Son histoire et sa localisation en font une destination touristique où se mêlent nature, patrimoine et imaginaire.", "allDetailProject": { "detailProject01": { "title": "Déroulé du projet", "part01": { "reverseMob":"", "imgLeft": ["projet-paimpont-mockup2"], "txtLeft": "", "txtRight": "Dans le cadre de mon Bachelor Webdesign, l’objectif était de moderniser l’identité visuelle* de Paimpont et de repenser entièrement son site internet, afin de proposer une interface plus actuelle, claire et adaptée aux différents contenus de la commune.
J’ai ensuite construit le design system* sur Figma en m’appuyant sur la méthode de l’Atomic Design*. Le principe est de partir d’éléments simples — couleurs, typographies, boutons ou icônes — puis de les assembler progressivement pour créer des composants* plus complexes.
Pour la refonte, j’ai repris les informations essentielles présentes sur l’ancien site de la commune, en les restructurant et en proposant de nouveaux contenus lorsque cela me semblait pertinent.
Identité visuelle* : ensemble des éléments graphiques qui permettent de reconnaître une marque.
Atomic Design* : Méthode de conception qui consiste à construire une interface à partir de petits éléments réutilisables, assemblés progressivement pour former des composants puis des pages complètes.
Design system* : Ensemble des règles graphiques et des composants réutilisables d’une interface : couleurs, typographies, boutons, icônes, champs, états, etc.
Composant* : sÉlément d’interface conçu pour être réutilisé à plusieurs endroits du site, comme un bouton, une carte ou un champ.
État*: Variation d’un composant selon l’interaction de l’utilisateur : par défaut, au survol, au focus, désactivé…
Zoning* : schéma permettant d’organiser les grandes zones d’une page avant sa conception graphique.
UI (User Interface)*: conception graphique d’une interface.
", "txtRight": "", "imgRight": ["projet-paimpont-designsystem1", ["Déclinaisons des boutons du site"]] } } }, "miseEnSituation": { "urlVideo": "xZs8lq3z2kw", "pictures": [["projet-paimpont-page-home", ["Homepage (page d'acceuil)"]], ["projet-paimpont-page-actualités", ["Page actualités"]], ["projet-paimpont-page-immobilier", ["Page immobilier"]], ["projet-paimpont-page-contact", ["Page de contact"]]] } }, { "id":"3", "projectSpecial": false, "title":"Stallion", "smallDescription": "Création de l’identité visuelle et du brandbook d’une entreprise technologique dédiée au bien-être et à la sécurité des chevaux.", "type": ["Identité visuelle", "Infographie", "Photomontage"], "technoOutils": ["Adobe Illustrator", "photoshop", "Canva"], "date": "2022-2023", "cadre": "Projet étudiant réel", "longDescription": "Stallion est une entreprise technologique imaginée pour les cavaliers propriétaires. Son objectif est de développer des solutions connectées permettant de garder un œil sur son cheval à distance, afin d’améliorer sa sécurité, son bien-être et la tranquillité d’esprit de son propriétaire.", "allDetailProject": { "detailProject01": { "title": "Déroulé du projet", "part01": { "reverseMob":"", "imgLeft": ["projet-stallion-mockup2"], "txtLeft": "", "txtRight": "Réalisé dans le cadre de mon Master Direction Artistique Digitale, Stallion est un projet collectif développé sur deux années avec une équipe aux compétences complémentaires. J’y occupais le rôle de directrice artistique, avec pour mission principale de construire et développer l’identité visuelle du projet.
Après plusieurs croquis et recherches graphiques, une première piste graphique a été développée autour d’un univers plus luxueux, notamment avec l’utilisation succinte de doré. Cette direction a finalement été écartée afin de mieux représenter la dimension technologique de Stallion.
J’ai poursuivi les recherches autour d’un « S », une piste appréciée par l’ensemble de l’équipe, jusqu’à arriver à la base du logo actuel. Celui-ci a ensuite été retravaillé afin de rendre la silhouette du cheval plus identifiable et d’apporter davantage de finesse et de mouvement à l’ensemble.L’ensemble de ces choix a ensuite été formalisé dans un brandbook permettant d’encadrer l’utilisation de l’identité de Stallion.
Il rassemble les différentes versions du logo, ses déclinaisons sur fonds clairs et foncés, les règles d’utilisation, les interdictions, la palette colorimétrique et les typographies. L’objectif était de créer une identité suffisamment structurée pour rester cohérente sur l’ensemble des futurs supports de la marque.", "txtRight": "Une fois le logo validé, j’ai développé l’ensemble de l’identité visuelle autour de celui-ci, en travaillant notamment les couleurs et les typographies.La palette associe principalement des verts, des tons beige et argile, ainsi que du blanc.
Le vert permet d’évoquer à la fois la nature, le bien-être, la confiance et la qualité, tandis que les teintes plus naturelles rappellent l’univers équestre et apportent davantage de chaleur à l’identité. L’objectif était de créer un équilibre entre tradition et innovation, tout en conservant une image moderne et qualitative.Branding* : Ensemble des éléments qui construisent l’image et l’identité d’une marque : positionnement, univers graphique, ton, valeurs et manière de communiquer.
Brandbook* : Document regroupant les règles permettant d’utiliser correctement une identité visuelle : logo, couleurs, typographies, déclinaisons et interdictions.
Veille concurrentielle* : Analyse des acteurs présents sur un même marché afin de comprendre leurs positionnements, leurs codes et d’identifier des possibilités de différenciation.
Veille graphique* : Recherche et analyse de références visuelles permettant d’explorer un univers graphique et d’orienter la direction artistique d’un projet.
Moodboard*: Planche regroupant différentes inspirations visuelles — couleurs, typographies, photographies, textures ou références — permettant de définir une direction artistique.
Direction artistique* : Travail consistant à définir et maintenir l’univers visuel d’un projet afin d’assurer sa cohérence sur l’ensemble de ses supports.
Logotype*: Représentation graphique permettant d’identifier une marque. Il peut être composé d’un symbole, du nom de la marque ou d’une combinaison des deux.
", "txtRight": "En parallèle du développement de l’identité, j’ai travaillé avec les autres membres de l’équipe afin que la direction artistique puisse être correctement déclinée sur les différents éléments du projet.
J’ai notamment collaboré avec le responsable UX/UI, ce qui a permis de faire le lien entre l’identité de marque et la conception des interfaces numériques, et d’assurer une cohérence visuelle entre le branding et les différents supports du projet.
", "imgRight": ["projet-stallion-mockup3"] } } }, "miseEnSituation": { "urlVideo": "", "pictures": [["projet-stallion-publication-linkedin", ["Proposition de publication likedin"]], ["projet-stallion-mockup4"]] } }, { "id":"4", "projectSpecial": false, "title":"Nextgen EdTech", "smallDescription": "Conception du site web, création des supports graphiques et réalisation d’une vidéo de présentation en motion design pour NextGen EdTech.", "type": ["Webdesign", "Infographie", "Animation", "Montage vidéo" ], "technoOutils": ["Figma", "Adobe Illustrator", "After effect", "Première Pro", "Lottiefiles"], "date": "2022", "cadre": "Projet réel", "longDescription": "NextGen EdTech est une entreprise spécialisée dans la formation aux outils numériques, qui propose notamment des formations, masterclass et workshops à destination des établissements d’enseignement et centres de formation, autour du NoCode et de la création d’applications.", "allDetailProject": { "detailProject01": { "title": "Déroulé du projet", "part01": { "reverseMob":"", "imgLeft": ["projet-nextgen-mockup1"], "txtLeft": "", "txtRight": "Réalisé en autonomie durant mon alternance chez Akatek, ce projet répondait à une demande réelle de la cliente : créer un site permettant de présenter son activité, ses formations et ses différents services. L’entreprise disposait déjà de son logo.
J’ai donc commencé par développer l’univers visuel qui allait l’accompagner, notamment à travers la création de différentes illustrations et infographies adaptées aux contenus du futur site. Après plusieurs échanges avec la cliente pour définir les informations à intégrer et leur organisation, j’ai réalisé un zoning du site.
Une fois celui-ci validé, je suis passée à la création de la maquette*, que j’ai présentée à la cliente avant d’y apporter les derniers ajustements.
", "imgRight": ["projet-nextgen-illustration-masterclass"] }, "part02": { "reverseMob":"", "imgLeft": ["projet-nextgen-bannière-instagram", ["Bannière Instagram"]], "txtLeft": "Après validation de la maquette, j’ai pris en charge la création du site sous WordPress, en intégrant les différents contenus textuels fournis par la cliente ainsi que les visuels réalisés pour le projet.
L’objectif était de construire un site clair et cohérent permettant de présenter les différentes facettes de NextGen EdTech, tout en utilisant les illustrations pour structurer les pages et mettre en valeur les contenus.
Le site a ainsi été décliné sur plusieurs pages consacrées notamment à la présentation de l’entreprise, aux contenus pédagogiques et au recrutement des étudiants.
En parallèle du site, j’ai adapté et créé plusieurs illustrations et infographies en reprenant les couleurs et l’univers graphique de NextGen EdTech.
Ces visuels ont été pensés pour illustrer les différentes thématiques abordées par l’entreprise et créer une continuité visuelle entre ses supports.
J’ai également réalisé différentes bannières pour les réseaux sociaux, notamment pour LinkedIn et Facebook, afin de décliner cette identité sur les différents canaux de communication de l’entreprise.
", "imgRight": ["projet-nextgen-illustration-appmobile"] }, "part03": { "reverseMob":"", "imgLeft": ["moovie-oxf2aJ-deqE", ["Vidéo de présentation demandée par Nextgen Edtech"]], "txtLeft": "", "txtRight": "La cliente souhaitait également disposer d’une vidéo de présentation destinée principalement aux centres de formation auxquels elle souhaitait proposer ses workshops. À partir des textes qui m’ont été fournis, j’ai imaginé l’univers visuel de la vidéo. J'ai ensuite préparé les différentes visuels pour l’animation avant de construire les différentes séquences sur Adobe After Effects.
Le travail de motion design avait pour objectif de rythmer une vidéo de présentation assez longue et de mettre en valeur les informations grâce aux illustrations et aux animations, tout en conservant une cohérence graphique avec le site et les autres supports de NextGen EdTech.
Zoning*: Schéma simplifié permettant d’organiser les grandes zones et les contenus d’une page avant de travailler son design.
Maquette* : Représentation graphique détaillée d’un futur site permettant de définir son apparence avant son développement.
WordPress* :Système de gestion de contenu permettant de créer, administrer et mettre à jour un site internet.
Infographie* : Représentation visuelle permettant d’illustrer ou de rendre une information plus claire et plus facilement compréhensible.
Motion design*: Mise en mouvement d’éléments graphiques, de textes ou d’illustrations afin de créer un contenu vidéo animé.
NoCode* : Approche permettant de créer des applications, sites ou outils numériques sans avoir à programmer directement leur code.
", "imgRight": [] } } }, "miseEnSituation": { "urlVideo": "qt4HwXgEBDE", "pictures": [["projet-nextgen-page-home", ["Homepage (page d'acceuil)"]], ["projet-nextgen-page-apropos", ["Page à propos"]], ["projet-nextgen-page-methodes", ["Page de présentation de la méthodologie"]], ["projet-nextgen-page-recrutement", ["Page de présentation de la masterclass"]]] } }, { "id":"5", "projectSpecial": false, "title":"The Light Side Band", "smallDescription": "Création de l’identité visuelle et conception du site internet d’un groupe de folk rock progressif breton.Description du projet", "type": ["Webdesign", "Infographie", "Photomontage"], "technoOutils": ["Adobe Illustrator", "Photoshop", "Wordpress", "HTML", "CSS"], "date": "2020", "cadre": "Projet étudiant réel", "longDescription": "The Light Side, anciennement The Light Side Band, est un groupe breton de folk rock progressif. Son univers mêle différentes influences musicales et s’est construit autour d’une identité inspirée notamment par le thème de l’éclipse. Le groupe est toujours actif aujourd’hui et continue de faire évoluer son univers, sa communication et son site internet.", "allDetailProject": { "detailProject01": { "title": "Déroulé du projet", "part01": { "reverseMob":"", "imgLeft": ["projet-tlsb-logos", ["Déclinaisons du logo"]], "txtLeft": "À cette période, le groupe souhaitait construire son univers autour du thème de l’éclipse, une image qu’il utilisait déjà et qu’il souhaitait conserver comme élément central de son identité.
J’ai réalisé plusieurs recherches visuelles autour de ce thème, en explorant différentes représentations de l’éclipse. Le groupe disposait également déjà d’un code couleur composé principalement de noir et de parme, que j’ai conservé pour développer la nouvelle identité.Dans le cadre de mon Titre professionnel Webdesigner, j’ai eu l’occasion de travailler directement avec le groupe sur la création de sa première identité visuelle et de son site internet.
Il s’agissait de ma toute première identité visuelle et de mon premier site web complet. Le projet m’a donc permis de travailler sur l’ensemble du processus, de la recherche graphique jusqu’à l’intégration et la mise en ligne du site.", "imgRight": ["projet-tlsb-mockup1"] }, "part02": { "reverseMob":"", "imgLeft": ["projet-tlsb-mockup2", ["Quelques propositions d'utilisation du logo"]], "txtLeft": "", "txtRight": "Une fois l’identité définie, j’ai conçu le site internet du groupe en reprenant son nouvel univers graphique.
L’objectif était de créer un espace permettant de présenter le groupe, mais également de rassembler ses actualités, photos, vidéos et informations de contact.L’univers de l’éclipse a également servi de fil conducteur au webdesign, avec une interface sombre et de grands visuels immersifs.Depuis sa création, le projet a beaucoup évolué. The Light Side Band est notamment devenu The Light Side et le groupe possède désormais un nouveau logo, mieux adapté à son identité actuelle.
Le site a lui aussi été modernisé au fil du temps, tout en conservant l’architecture générale de la première version. J’en assure toujours aujourd’hui la gestion et les mises à jour. Une partie du contenu évolue en fonction des nouveautés du groupe, tandis que des flux Instagram et YouTube automatisés permettent de relayer directement leur activité, particulièrement régulière sur ces plateformes.Thème WordPress*: Ensemble des fichiers définissant la structure et l’apparence d’un site WordPress.
Zoning*: Schéma simplifié permettant d’organiser les grandes zones et les contenus d’une page avant de travailler son design.
Déclinaison*: Adaptation d’une identité visuelle sur différents supports tout en conservant une cohérence graphique.
PHP*: Langage de programmation notamment utilisé pour développer et personnaliser des thèmes WordPress.
Flux automatisé*: Système permettant d’afficher automatiquement sur un site du contenu provenant d’une autre plateforme, comme Instagram ou YouTube.
", "imgRight": "" } } }, "miseEnSituation": { "urlVideo": "D6RBXGFHV0A", "pictures": [["projet-tlsb-homepage", ["Haut de la homepage (page d'acceuil)"]], ["projet-tlsb-flux-instagram", ["Bloc de flux Instagram"]]] } }, { "id":"6", "projectSpecial": false, "title":"Chez Lolotte", "smallDescription": "Création de l’identité visuelle et conception d’un site WordPress pour un diner américain fictif inspiré de l’univers rétro des années 50.", "type": ["Identité visuelle", "Webdesign", "Infographie"], "technoOutils": ["Adobe Illustrator", "Photoshop", "Wordpress"], "date": "2022", "cadre": "Projet étudiant fictif", "longDescription": "Chez Lolotte est un concept fictif de diner américain imaginé autour de l’esthétique des années 50. L’univers associe les codes emblématiques des diners américains à une identité colorée et féminine, principalement construite autour du bleu turquoise, du rose et des motifs à carreaux.", "allDetailProject": { "detailProject01": { "title": "Déroulé du projet", "part01": { "reverseMob":"", "imgLeft": ["projet-lolotte-mockup1"], "txtLeft": "J’ai ensuite décliné cette identité sur un site réalisé avec WordPress, en conservant les mêmes codes graphiques afin de créer un univers cohérent entre le logo et l’interface.
Le site a été pensé comme celui d’un véritable restaurant, avec notamment une page d’accueil, la carte complète et une page de contact.
La carte regroupe les différentes catégories du restaurant — burgers, plats à partager, boissons, milkshakes, desserts ou petits-déjeuners.
", "txtRight": "Réalisé dans le cadre de mon Bachelor Webedesigner, ce projet avait pour objectif d’imaginer de toutes pièces l’identité et le site internet d’un restaurant fictif, le tout dans un temps très court.
Je suis partie sur l’univers des diners américains des années 50, avec une direction artistique très identifiable : couleurs pastel, carreaux, illustrations rétro et références à la culture américaine.
Le logo a été réalisé rapidement afin de poser les bases de cet univers et de pouvoir me concentrer sur la conception du site. Avec davantage de temps, il aurait mérité d’être plus travaillé et approfondi, notamment dans ses détails et sa construction.J’ai repris la forme ronde des enseignes et badges vintage, avec au centre une pin-up illustrée. Le turquoise et le rose viennent renforcer cet univers rétro et se retrouvent ensuite sur l’ensemble des supports.
", "imgRight": ["projet-lolotte-mockup2"] }, "part02": { "reverseMob":"", "imgLeft": ["projet-lolotte-carreaux2"], "txtLeft": "Pour donner davantage de personnalité au site, j’ai également réalisé différents photomontages et éléments graphiques en reprenant les codes de l’identité.
J’ai notamment imaginé une offre anniversaire autour d’un milkshake offert, traitée dans un style inspiré du pop art et de la bande dessinée, avec une illustration, des trames, une bulle de dialogue et les couleurs de Chez Lolotte.
Ces éléments viennent enrichir l’univers du restaurant tout en permettant d’imaginer comment son identité pourrait être utilisée pour des offres promotionnelles et différents supports de communication.
", "imgRight": "" }, "part04": { "reverseMob":"", "imgLeft": "", "txtLeft": "L’identité a également été mise en situation sur différents supports afin de montrer son fonctionnement au-delà du site internet, notamment sur des gobelets et emballages à emporter.
L’objectif était de conserver un univers immédiatement reconnaissable quel que soit le support, grâce au logo, aux couleurs et aux différents codes graphiques développés pour le projet.
Identité visuelle*: Ensemble des éléments graphiques qui permettent d’identifier une marque : logo, couleurs, typographies, illustrations et autres codes visuels.
Photomontage*: Assemblage et retouche de plusieurs éléments visuels afin de créer une nouvelle composition.
Pop art*: Mouvement artistique utilisant les codes de la culture populaire, de la publicité et de la bande dessinée, souvent avec des couleurs franches et des compositions très graphiques.
", "txtRight": "", "imgRight": ["projet-lolotte-burger"] } } }, "miseEnSituation": { "urlVideo": "yTyaHVS8lmQ", "pictures": [["projet-lolotte-page-home", ["Homepage (page d'acceuil)"]], ["projet-lolotte-page-carte", ["Page de présentation de la carte"]], ["projet-lolotte-page-contact", ["Page de contact"]]] } }, { "id":"7", "projectSpecial": false, "title":"Travelture", "smallDescription": "Conception et intégration d’un site de réservation de séjours, de la création des maquettes jusqu’au développement en HTML, CSS et JavaScript.", "type": ["Identité visuelle", "Webdesign"], "technoOutils": ["Adobe Illustrator", "HTML", "CSS", "JavaScript"], "date": "2021", "cadre": "Projet étudiant fictif", "longDescription": "Travelture est un site fictif de réservation de voyages permettant de rechercher et découvrir des séjours selon différentes destinations et envies. Le projet comprend la création d’une identité visuelle simple, la conception des différentes pages et leur intégration responsive.", "allDetailProject": { "detailProject01": { "title": "Déroulé du projet", "part01": { "reverseMob":"true", "imgLeft": ["projet-travelture-logo"], "txtLeft": "Même si la création d’une identité visuelle n’était pas demandée, j’ai souhaité donner une véritable cohérence au projet en créant le nom Travelture, contraction de travel et adventure, ainsi qu’un logo associant un avion et un repère de localisation.
J’ai ensuite réalisé le zoning* puis les maquettes des différentes pages avant de passer au développement.L’interface repose largement sur les photographies de destinations, accompagnées d’une palette de verts et de bleus. J’ai cherché à garder une mise en page simple pour laisser une place importante aux visuels et faciliter (pour la suite) la recherche des différents séjours.
Une fois les maquettes définies, j’ai développé le site en HTML, CSS et JavaScript.
Le projet comprend plusieurs pages et fonctionnalités : une page d’accueil présentant les séjours et destinations, un système de recherche et de filtres (non fonctionnel), une page regroupant les différents séjours, une présentation de l’entreprise et de son équipe ainsi qu’une page de contact.
J’ai également travaillé les effets au survol, différents composants de l’interface et l’adaptation du site aux différentes tailles d’écran.
", "txtRight": "Travelture a été réalisé dans le cadre de mon Bachelor Webdesigner, pour un cours consacré à l’intégration web. Le thème était libre, mais le projet devait obligatoirement intégrer plusieurs éléments imposés, comme des menus déroulants, des média queries et d’autres composants travaillés en cours.
J’ai choisi de créer un site de réservation de séjours afin de construire un projet suffisamment complet pour mettre en pratique ces différentes notions .", "imgRight": ["projet-travelture-homepage1", ["Partie supérieur de la homepage"]] }, "part02": { "reverseMob":"", "imgLeft": ["projet-travelture-apropos", ["Page à propos"]], "txtLeft": "", "txtRight": "
Le responsive faisait partie intégrante du projet. J’ai donc utilisé des media queries* afin d’adapter la disposition des contenus et la navigation aux écrans plus petits.Ayant anticipé cette étape dès la conception des maquettes, j’ai pu consacrer davantage de temps aux ajustements et aux détails lors de l’intégration.
Le résultat est un site multipage responsive, pensé comme une plateforme de réservation de voyages avec une identité et une interface cohérentes sur l’ensemble des pages.
Ce projet m’a surtout permis de mettre en pratique différentes notions d’intégration front-end, de travailler le passage d’une maquette à un site fonctionnel et de mieux anticiper le responsive dès la phase de conception.
", "imgRight": ["projet-travelture-partie-basse", ["Partie centrale de la homepage"]] }, "part03": { "reverseMob":"true", "imgLeft": ["projet-travelture-zoom-sejours", ["Cartes de présentation de voyages, avec effet au survol"]], "txtLeft": "", "txtRight": "Zoning*: Découpage simplifié d’une page permettant de définir l’emplacement et la hiérarchie des différents contenus avant la création de la maquette.
Intégration Web*: Étape qui consiste à transformer une maquette graphique en pages web à l’aide de langages comme HTML, CSS et JavaScript par exemple.
Responsive design*:Conception permettant à un site de s’adapter aux différentes tailles d’écran : ordinateur, tablette ou smartphone.
Media query*: Règle CSS permettant de modifier l'affichage d'un site en fonction notamment de la taille de l'écran.
HTML / CSS / JavaScript*: Langages utilisés pour structurer les contenus d’une page, gérer leur apparence et ajouter des comportements interactifs.
Je sélectionne et associe les différents éléments de décoration, puis travaille leur implantation, leurs proportions, la perspective et leur intégration dans l'environnement. Ces mises en situation permettent aux clients de se projeter dans le résultat final et de valider leur projet avant sa mise en place par les équipes.
", "txtRight": "Dike Déco accompagne des centres commerciaux, grandes surfaces et entreprises dans la décoration de leurs espaces à l'occasion de Noël et de nombreux temps forts de l'année.
Mon rôle est principalement de concevoir les propositions visuelles présentées aux clients. À partir de photographies de leurs espaces et de leurs besoins, je réalise des photomontages permettant de visualiser les futurs décors avant leur installation.
", "imgRight": ["projet-dikedeco-chateau-décoration", ["Mise en situation de décors LED devant un chateau pour Noël"]] }, "part02": { "reverseMob":"", "imgLeft": ["projet-dikedeco-noel3", ["Mise en situation de scènes dans des centres commerciaux"]], "txtLeft": "Une fois les décors installés, les équipes de pose réalisent des photos et vidéos des installations finales. J'utilise ensuite ces contenus pour créer des montages vidéo mettant en valeur les projets réalisés, destinés notamment au site et à la communication de l'entreprise. L'une de ces vidéos est présentée plus bas sur cette page.
En parallèle, j'ai entièrement conçu le site internet de Dike Déco sous WordPress, que j'administre et enrichis régulièrement avec de nouveaux contenus, réalisations et univers saisonniers.
", "txtRight": "", "imgRight": ["projet-dikedeco-noel1", ["Mise en situation de décors sol et plafonds"]] }, "part03": { "reverseMob":"", "imgLeft": ["projet-dikedeco-vitrine-ete"], "txtLeft": "", "txtRight": "L'activité de Dike Déco ne se limite pas à Noël. Je réalise également des photomontages pour accompagner les différents temps forts commerciaux et événements de l'année : Foire aux vins, été, Pâques, Saint-Valentin, rentrée scolaire, événements sportifs ou opérations plus ponctuelles.
Les demandes sont très variées : décoration de vitrines, mises en scène de produits, espaces saisonniers, décors suspendus ou aménagements plus importants dans des magasins et centres commerciaux.
Chaque thématique demande de construire un univers visuel différent, en sélectionnant et en associant les éléments les plus adaptés au lieu et à l'événement. Une ambiance estivale colorée, une mise en scène autour du vin ou une décoration de Saint-Valentin ne répondent pas aux mêmes codes ni aux mêmes contraintes.
Cette diversité m'amène à adapter constamment mes compositions et ma manière de travailler, tout en conservant le même objectif : proposer au client une représentation claire et attractive de ce que son espace pourra devenir une fois le décor installé.
", "imgRight": ["projet-dikedeco-visuel-site", ["Exemple de visuel publié sur le site"]] }, "part04": { "reverseMob":"", "imgLeft": ["projet-dikedeco-octobre-rose-ete", ["Mises en situation en grande surface et vitrine pour divers evenements"]], "txtLeft": "", "txtRight": "", "imgRight": "" }, "part05": { "reverseMob":"", "imgLeft": ["projet-dikedeco-publication-linkedin", ["Exemple de visuel pour publication Linkedin"]], "txtLeft": "", "txtRight": "J'ai réalisé le site internet de Dike Déco de A à Z, de sa conception graphique jusqu'à son intégration.
Il a été pensé comme une vitrine permettant de présenter l'entreprise, ses différents univers, ses produits et les nombreuses réalisations installées partout en France.
J'ai conçu la structure des pages, leur mise en forme et les différents contenus graphiques qui composent le site.
Depuis sa création, j'assure également l'administration et l'évolution du site.
Je crée régulièrement de nouveaux articles et de nouveaux contenus en fonction des temps forts de l'année : Noël, Foire aux vins, été, rentrée scolaire ou encore événements ponctuels.
Les visuels utilisés sont soit créés par mes soins, soit issus des photographies des installations réalisées par l'équipe de pose.", "imgRight": ["projet-dikedeco-stvalentin"] }, "part06": { "reverseMob":"", "imgLeft": "", "txtLeft": "
Mise en situation*: Représentation d’un produit ou d’un décor dans son futur environnement afin de permettre au client de visualiser le résultat final.
WordPress*: Système de gestion de contenu permettant de concevoir, administrer et faire évoluer un site internet sans avoir à intervenir directement dans le code pour chaque modification.
Administration web*:Gestion régulière d’un site après sa mise en ligne : ajout et modification de contenus, création de nouvelles pages, actualisation des visuels et maintenance des informations.
Montage vidéo*: Assemblage de vidéos, photographies, textes et autres éléments graphiques permettant de créer un contenu dynamique pour présenter et valoriser les réalisations de l’entreprise.
", "txtRight": "", "imgRight": ["projet-dikedeco-noel-printemps"] } } }, "miseEnSituation": { "urlVideo": "4STOAgLRWW4", "pictures": [["projet-dikedeco-homepage", ["Homepage (page d'acceuil)"]], ["projet-dikedeco-page-pieces-led", ["Présentation d'un article"]], ["projet-dikedeco-page-réalisations", ["Page de réalisations"]], ["projet-dikedeco-page-catalogue", ["Page de présentation d'un catalogue"]]] } }, { "id":"9", "projectSpecial": false, "title":"Eurekare", "smallDescription": "Conception et réalisation du site WordPress d’eureKARE, entreprise spécialisée dans l’investissement et le développement de projets en biotechnologie.", "type": ["Webdesign"], "technoOutils": ["Figma", "Wordpress"], "date": "2023", "cadre": "Projet réel", "longDescription": "EureKARE est une entreprise spécialisée dans les biotechnologies, pour laquelle j’ai conçu et réalisé un site WordPress sobre et professionnel, en accord avec son univers scientifique et institutionnel.", "allDetailProject": { "detailProject01": { "title": "Déroulé du projet", "part01": { "reverseMob":"", "imgLeft": ["projet-eurekare-mockup"], "txtLeft": "", "txtRight": "eureKARE est une entreprise spécialisée dans l’investissement et le développement de projets innovants en biotechnologie, notamment dans les domaines de la biologie synthétique et du microbiome. Dans le cadre de mon apprentissage chez Akatek, j’ai conçu et réalisé le site internet d’eureKARE sous WordPress.
L’identité visuelle étant déjà définie, l’objectif était de la décliner dans un univers web sobre, professionnel et institutionnel, en accord avec le positionnement scientifique et corporate de l’entreprise.
.", "imgRight": ["projet-eurekare-team", ["cards d'equipe avec effet au survol"]] }, "part02": { "reverseMob":"", "imgLeft": "", "txtLeft": "Le design repose ainsi sur des mises en page épurées, une palette principalement blanche et bleue et une organisation claire des contenus. L’enjeu était notamment de rendre accessibles des informations parfois denses et techniques, tout en conservant une image sérieuse et structurée.
L’identité visuelle d’eureKARE était déjà définie avant le début du projet. Mon travail a donc consisté à la décliner sur le web et à construire les différentes pages du site sous WordPress.
J’ai conçu et intégré les différents contenus en veillant à conserver une interface cohérente et homogène sur l’ensemble du site : présentation de l’entreprise et de sa stratégie, équipes, studios, entreprises accompagnées ainsi que plusieurs pages dédiées à leurs événements. Le site repose donc sur une mise en page adaptée à l’univers scientifique et professionnel d’eureKARE.
", "txtRight": "", "imgRight": ["projet-eurekare-health"] }, "part03": { "reverseMob":"", "imgLeft": ["projet-eurekare-ligne"], "txtLeft": "", "txtRight": "", "imgRight": "" } } }, "miseEnSituation": { "urlVideo": "", "pictures": [["projet-eurekare-page-home", ["Homepage (page d'acceuil)"]], ["projet-eurekare-page-people", ["Page de présentation de l'équipe"]], ["projet-eurekare-page-strategy", ["Page strategie"]], ["projet-eurekare-page-studios", ["Page studios"]]] } }, { "id":"10", "projectSpecial": true, "title":"Mes autres créations", "smallDescription": "Mon portfolio présente une sélection de projets réalisés au cours de mes expériences professionnelles et de ma formation, mais ce n’est qu’une partie de ce que j’ai pu créer au fil des années.", "type": ["Autres créations"], "longDescription": "Pour des clients, pour mes proches, pour des associations ou simplement pour moi, j’ai toujours aimé imaginer, fabriquer et expérimenter. Créations graphiques, dessins, bijoux, bricolages et objets en tout genre : je passe facilement du numérique au manuel, de la 2D à la 3D, selon les idées et les envies.", "longDescription02": "Certaines créations répondent à un besoin précis, d’autres sont simplement nées de l’envie de tester quelque chose de nouveau. Et c’est une habitude que je continue à entretenir aujourd’hui, parce que créer, et donner vie à une idée, c’est tout simplement quelque chose que j’adore.", "allDetailProject": { "detailProject01": { "title": "Création graphique", "picto": "creation-graphique", "part01": { "reverseMob":"", "imgLeft": ["creation-graphique-haut"], "txtLeft": "", "txtRight": "J’aime créer et expérimenter, que ce soit pour moi, pour des amis ou dans le cadre de projets étudiants. Affiches, photomontages, illustrations, visuels pour vêtements… c’est souvent l’occasion de tester de nouvelles choses, de jouer avec différents styles et surtout de mélanger des univers qui n’ont parfois pas grand-chose à voir entre eux.
J’ai toujours aimé dessiner, surtout ce qui m’entoure et ce qui attire mon regard. Une fleur, un animal, un objet du quotidien… parfois même une simple banane peut devenir un bon sujet !
J’utilise beaucoup les crayons aquarellables, que j’aime pour leur côté à mi-chemin entre le dessin et la peinture, et je commence aussi à expérimenter davantage avec l’aquarelle. Je m’exerce notamment avec des natures mortes, qui me permettent de travailler les formes, les couleurs, les ombres et les petits détails.
Je dessine avant tout pour le plaisir, pour essayer, observer, progresser et découvrir petit à petit de nouvelles façons de faire.
.", "imgRight": ["dessin-long"] } }, "detailProject03": { "title": "Bricolage", "picto": "bricolage", "part01": { "reverseMob":"", "imgLeft": ["bricolage-vitrine"], "txtLeft": "J’aime beaucoup chercher comment détourner un objet ou un matériau pour lui donner une seconde vie, quitte à tester, découper, coller et recommencer jusqu’à ce que ça fonctionne. Bon… ce sont aussi des projets qui prennent vite beaucoup de place, alors ce n’est clairement pas le genre de chantier que je commence tous les quatre matins !
", "txtRight": "J’aime bricoler, bidouiller et surtout essayer de fabriquer quelque chose à partir de presque rien. Pour mon mariage, par exemple, j’ai réalisé environ 75 % de la décoration moi-même, en utilisant beaucoup de matériaux de récupération et quelques objets parfois assez improbables : bouteilles de bière, carton, capsules, pots, bâtonnets de glace, cure-dents, cotons-tiges (non utilisés, bien sûr 😄), et même de vieilles bottes d’enfants.
C’est comme ça qu’une botte s’est transformée en maison de korrigan, que des brindilles, de la mousse du jardin et des morceaux d'ecorces sont devenus une petite boîte aux lettres, que des cotons tiges sont devenus des roseaux, ou encore que des bouteilles ont servi de pieds à des champignons géants. Même les toutes petites choses y passent : une capsule de bière peut très bien devenir le moule d’une tarte aux myrtilles miniature !
Côté création, j’ai eu l’occasion de faire un peu de tout : des bouquets, des compositions, mais aussi de plus grosses pièces comme des gerbes ou des coussins de fleurs. J’ai heureusement gardé quelques photos de cette période… et surtout quelques bons réflexes !
Même si je ne travaille plus dans ce domaine aujourd’hui, je n’ai pas complètement laissé les fleurs de côté. Dès qu’il faut décorer une table pour un événement, préparer une composition ou simplement offrir des fleurs à mes proches, c’est toujours avec plaisir que je m’y remets.
J’ai travaillé quelques années dans la fleuristerie, et c’est un métier dans lequel je me suis vraiment éclatée. J’adorais le mélange entre création et contact avec les clients, mais aussi le fait de jouer avec les fleurs, les couleurs, les formes et les textures pour créer quelque chose de différent à chaque fois.
À cette époque, je travaillais presque tout le temps en extérieur, entre le marché aux fleurs, notre point de vente installé dans une sorte de petit préfabriqué métallique ouvert, et le marché de Talensac (au coeur de Nantes).
.", "imgRight": ["fleurs-bouquets-rond"] }, "part02": { "reverseMob":"", "imgLeft": ["fleurs-coussins"], "txtLeft": "", "txtRight": "", "imgRight": "" } }, "detailProject05": { "title": "Bijoux", "picto": "boucles-oreilles", "part01": { "reverseMob":"", "imgLeft": ["bijoux-haut"], "txtLeft": "", "txtRight": "endant un temps, je me suis beaucoup amusée à créer des bijoux fantaisie, et principalement des boucles d’oreilles. J’en ai réalisé un sacré paquet, en jouant avec les perles, les couleurs, les formes et les petits éléments décoratifs pour essayer de créer à chaque fois de nouvelles associations.
C’était aussi une activité qui demandait pas mal de patience et de minutie : assembler de toutes petites pièces, manier les pinces, tester différentes combinaisons… et parfois démonter pour tout recommencer parce que le résultat ne me plaisait finalement plus !
J’en ai gardé une jolie collection de photos, et encore quelques boîtes de perles qui traînent dans un placard...
.", "imgRight": ["bijjoux-long"] } } } } ]