/Marie_Frignet

MonServiceSecurise

MonServiceSécurisé est une solution de cybersécurité conçue par le laboratoire d’innovation de l’ANSSI, en lien avec l’incubateur de services numériques « BetaGouv » de la direction interministérielle du numérique (DINUM). Pensé pour et par les entités publiques, MonServiceSécurisé a pour mission d’aider les entités publiques à sécuriser et homologuer les services publics numériques (sites web, applications mobiles et API).

J’ai travaillé sur différentes parties du parcours utilisateurs de cette interface métier. En tant qu’UX/UI designer, j’ai dû jongler entre le design système de l’Etat et le celui de MonServiceSecurisé qui en était dérivé, tout en prenant en compte les usages et besoins des professionnels de la cybersécurité dans le secteur public.

/Marie_Frignet

Excellence Sup

La plateforme ExcellenceSup, regroupe l’annuaire des classes préparatoires du réseau de l’Enseignement Catholique en accès libre afin de communiquer auprès du grand public ainsi qu’un accès à une plateforme professionnelle d’échange et de documentation sur des thématiques variées. J’ai travaillé sur le parcours utilisateur ainsi que le design de ce site web en 3 parties (grand public, accès pro et accès admin) afin de donner lisibilité, fluidité et modernité à cette vitrine des établissements supérieurs du réseau de l’Enseignement Catholique.

/Marie_Frignet

Excellence Pro

La plateforme Excellence Pro permet de trouver la formation qui nous correspond au sein du réseau de l’Enseignement Supérieur Catholique en fonction de la région et du secteur d’activité.
J’ai travaillé le parcours utilisateur sur la base des 2 prismes de recherche puis sur une conception graphique colorée, ludique et dynamique afin de rendre cette annuaire attrayant et lisible.

/Marie_Frignet

Atelier 2m

Pour la refonte No-Code (Elementor) du site de l’Atelier 2M, cabinet d’architecture lyonnais, je suis partie d’un CMS et d’un thème WordPress. L’idée étaient de mettre en valeur les images des travaux de l’atelier tout en respectant la sobriété de l’identité visuelle du cabinet d’architecture.

/Marie_Frignet

L’orientation dans l’Enseignement Privé

Ce site s’adresse au corps enseignant dans l’Enseignement Privé. Il a pour but de remettre au centre l’orientation future des élèves dans l’enseignement .

La vidéo et l’animation a une place primordiale pour ce site afin de transmettre de manière ludique une information parfois complexe et rébarbative. L’orientation ici est illustrée par différents moyens de transports appartenant au monde de l’imaginaire et de l’exploration, analogie particulièrement adaptée à l’orientation des jeunes. La mise en page emprunte à la littérature l’utilisation de gravures et de typographie avec empattements. Le site est structuré comme un livre, sous forme de chapitres et de pages pouvant se parcourir de manière linéaire.

This web site is intended for teaching staff in Private Education. Its purpose is to put the students’ future careers in education back in the center. Video and animation have a primordial place on this web site in order to transmit in a playful way a complex and daunting information. Professional orientation here is illustrated by different vehicles belonging to the world of imagination and exploration, an analogy particularly suited to the professional orientation of young people. The layout borrows from literature the use of engravings and serif typography. The website is structured like a book, following chapters and pages that can be linearly browsed.

/Marie_Frignet

Urfist Rennes 2

L’URFIST de Bretagne et des Pays de la Loire est chargée de développer la maîtrise de l’information scientifique et technique (IST) dans l’enseignement supérieur et la recherche.

Suite à la modernisation de leur charte graphique, il fallait refondre également leur site internet en suivant les nouvelles lignes de leur identité graphique. J’ai pris beaucoup de plaisir à utiliser cette charte colorée et ludique afin de présenter un nouveau site dynamique et moderne.

The URFIST of Brittany and Pays de la Loire is responsible for developing the mastery of scientific and technical information (IST) in higher education and research. Following the modernization of their graphic guide lines, it was necessary to redesign their website following the new lines of their graphic identity. I took great pleasure in using this colorful and fun graphic guide line to present a new dynamic and modern site.

/Marie_Frignet

Cabinet B

Le Cabinet B est un cabinet d’ostéopathie toulousain dont la pratique holistique n’est plus à défendre.

Le projet de refonte graphique de la marque et du site a été géré par Pauline Augé. La nouvelle charte graphique réalisée par Sofia Achoui empruntant les formes organiques et les couleurs du corps humain  a permis de concevoir un site sophistiqué et élégant pour présenter les différentes prestations et membre de l’équipe du cabinet.

Cabinet B is a Toulouse osteopathic office whose holistic practice is well established. The brand and website graphic overhaul project was managed by Pauline Augé. The new graphic guide lines created by Sofia Achoui based on organic shapes and colors of  human body allow a sophisticated and elegant design website to present the various services and member of the firm’s team.

/Marie_Frignet

Plateforme des initatives

Le Secrétariat Général de l’Education Privé est à l’origine de nombreuses initiatives pédagogiques et éducatives (création d’un club d’échec, d’un atelier de réalisation d’attrapes-rêves), grâce à ses nombreux acteurs.

La plateforme permet de rassembler ces nombreuses initiatives. Il a fallu ici trier le vaste contenu de ses actions, trouver un CMS adéquat et mutualiser le travail d’un expert en SEO, un développeur ainsi que celui de l’UX/UI designer (moi-même) pour réaliser ce projet.

Concernant l’UX/UI Design, l’idée était de rendre lisible et surtout ludique ces contenus.

The General Secretariat of Private Education, thanks to its many actors, is at the origin of many pedagogical and educational initiatives (a chess club opening, a dream catchers workshop) and wanted to bring together these many initiatives. Here we had to sort out the vast content of its actions, find an adequate CMS and pool the work of an SEO expert, a developer and UX / UI designer (myself) to carry out this project. UX / UI Design, the idea was to make this content readable and above all fun.

 

/Marie_Frignet

Wihp

Wihp est une agence web dédiée à la conception de site web pour des hôtels de luxe. L’idée ici est de présenter l’ensemble de prestations des différents établissements tout en affichant la qualité de leur prestations par un langage graphique léché et travaillé appartenant au domaine du luxe. (exemple: Maison FL et OFF Paris Seine)

Wihp is a web agency dedicated to website design for luxury hotels. The idea here is to present all the services of the different establishments while displaying the quality of their services through a minimalistic and premium graphic language belonging to the luxury sector. (example: Maison FL and OFF Paris Seine)

/Marie_Frignet

Office Français de la Biodiversité

L’Office Français de la Biodiversité contribue à la protection et à la préservation de la biodiversité en France.

Pour le secteur de l’Estuaire de la Gironde et de la mer des Pertuis, l’OFB avait besoin d’un site de publication en interne de leurs documents de recherche. L’interface a été conçue pour pouvoir à la fois naviguer au niveau de la cartographie comme dans l’éventail de documents publiés par l’office, tout en respectant la charte graphique de l’institution.

The French Biodiversity Office contributes to the protection and preservation of biodiversity in France. For the Gironde estuary and the Pertuis sea sector, the OFB needed an internal publication site of their research. The interface has been designed to be able to navigate both at the level of cartography and in a range of documents published by the office, while respecting the graphic charter of the institution.

/Marie_Frignet

Licht

Licht est une entreprise de conseil et d’accompagnement en stratégie et management des entreprises. Pour accompagner l’ouverture de nouveaux pôles au sein de l’entreprise, Licht a souhaité revoir le design de son site.

Pour la refonte de site, à la demande du client, j’ai conservé le logo et les couleurs chaudes et vives de la charte de la marque.

L’utilisation d’éléments graphiques et photographiques donne à l’ensemble un certain dynamisme, valeur importante de la société. Tout en suivant les tendances, le design se démarque par l’usage des couleurs vives, d’une trame graphique originale et d’éléments graphiques impactants.

Licht is a consulting and support company in business strategy and management. To support the opening of new poles within the company, Licht wanted to review the design of its site. For the website redesign, I kept the logo and the warm and bright colors of the brand charter. Using of graphic and photographic elements gives dynamism, an important value of the company. While following trends, the design is distinguished by using bright colors, an original graphic frame and impactful graphic elements.

/Marie_Frignet

OpenWork

OpenWork est une société de portage salarial, qui met en relation des consultants et des entreprises en besoin de missions ponctuelles. Sur ce projet j’ai travaillé en collaboration avec Jungle Program.

Pour la refonte de site, à la demande du client, j’ai conservé le logo et les couleurs de la charte en utilisant un tonalité plus froide et plus sombre pour contraster avec l’orangée de l’identité visuelle. L’utilisation des illustrations permet de mettre en avant les valeurs d’humanité qui correspondent à la société OpenWork.

Pour ce site, il a fallu concevoir différentes fonctionnalités qui correspondent aux besoins des utilisateurs tels qu’un simulateur de chiffre d’affaire, un profil « consultant » ou « employeur », une page « événement », un blog, etc…

OpenWork is a salary portage company, which connects consultants and companies in need of one-off missions. On this project I worked in collaboration with Jungle Program. For the site redesign, at the request of the client, I kept the logo and the colors of the graphic guide lines using a cooler and darker tone to contrast with the orange of the visual identity. The use of illustrations highlights the values ​​of humanity which correspond to the company OpenWork. For this site, it was necessary to design various functionalities which correspond to the needs of the users such as a turnover simulator, a « consultant » or « employer » profiles, an « event » page, a blog, etc …

/Marie_Frignet

Convention Citoyenne pour le Climat

Le conseil économique, social et environnemental (CESE) a eu pour mission l’organisation de la Convention citoyenne pour le climat, 150 citoyennes et citoyens, tirés au sort, devront proposer des recommandations pour lutter contre le réchauffement climatique.

J’ai travaillé sur le logotype de cette nouvelle convention citoyenne en collaboration avec l’agence NDBD.
L’utilisation graphique du cercle représente ici l’Hémicycle mais aussi la Terre, tout en reprenant les 3 “c” des trois termes principaux du titre. La circonférence du cercle évoque le mouvement et le changement. La forme ronde évoque également les échanges, le dialogue, le cercle de discussion. Le rond, le cercle est une forme associée également à l’organique, à la nature. Très simplifié, le graphisme s’ouvre comme une bulle de dialogue.

The Economic, Social and Environmental Council (CESE) was tasked with organizing the Citizen’s Convention for the Climate, 150 citizens, randomly chosen, will have to propose recommendations to fight against global warming. I’ve worked in the logo of this new citizen convention in collaboration with the NDBD agency. The graphic use of the circle here represents the Hemicycle and the Earth, while using the 3 “c” of the three main terms of the title. The circumference of the circle evokes movement and change. The round shape also evokes exchanges, dialogue, the discussion circle. The round, the circle is a form also associated with the organic, with nature. Very simplified, the shape opens like a speech bubble.

/Marie_Frignet

Sunzil

Afin de promouvoir les avantages économiques et écologiques des panneaux solaires, l’entreprise Sunzil diffuse régulièrement, via les réseaux sociaux, des visuels promotionnels destinés aux habitants et professionnels implantés en DOM-TOM. Par le biais d’illustrations et tout en respectant la charte graphique de l’entreprise, je cherche à montrer de manière simple et lisible les avantages de l’énergie solaire.

In order to promote the economic and ecological advantages of solar panels, the Sunzil company regularly distributes, via social networks, promotional visuals intended for residents and professionals established in the French overseas departments and territories. By means of illustrations and while respecting the graphic charter of the company, I try to show in a simple and readable way the advantages of solar energy.

/Marie_Frignet

24S – Le Bon Marché

La boutique du Bon Marché (www.24s.com), nécessite une animation commerciale constante et percutante afin de rester à la pointe des tendances et de la mode.

J’ai donc participé, ici, à la mise à jour des visuels sur le moyen terme de la boutique en ligne en utilisant des codes graphiques novateurs et colorés.

The Bon Marché boutique (www.24s.com) requires constant and impactful commercial animation in order to stay at the forefront of trends and fashion. I have therefore participated here in updating the visual assets of the online store using innovative and colorful graphic codes.

/Marie_Frignet

Nescafé Dolce Gusto

Pour la sortie de sa dernière machine à café, Nescafé axe, en partie, l’innovation sur la présence d’une petite interface graphique sur la machine. Un UI et UX particulier doit être conçu pour ce type d’usage tout en intégrant le large choix de capsules et de type de boisson proposées par la machine (en collaboration avec l’agence Ogilvy).

For the release of its latest coffee machine, Nescafé focuses on innovation on the presence of a small digital interface on the machine. A particular UI and UX must be designed for this type of use while integrating the wide choice of capsules and type of drink offered by the machine (in collaboration with the Ogilvy agency).

/Marie_Frignet

Grand Optical

La partie opérationnelle de Grand Optical nécessite une grande production de visuels. Ces nombreux supports doivent garantir  la cohérence de la charte graphique ainsi que de l’univers de la marque, tendance et sobre avec une touche premium.

The operational part of Grand Optical requires a large production of visual assets. These numerous supports must guarantee the coherence of the graphic guide lines as well as the universe of the brand, trendy and sober with a premium touch.

/Marie_Frignet

AYUDYANA

Pour ce petit producteur drômois de produit ayurvédique, le logo représente à la fois la nature et la vie au centre de son mode de vie, de culture et de production. Les couleurs et les formes sont simples, vibrantes adaptables à toutes formes de packaging et de branding pour ces différents produits disponibles ici.

For this small Drôme producer of Ayurvedic products, the logo represents both nature and life at the center of its way of life, culture and production. The colors and shapes are simple, vibrant and adaptable to all forms of packaging and branding for these different products available here.

/Marie_Frignet

Générale d’Optique

Pour la refonte du site web de la marque d’opticien Générale d’optique, l’ensemble de l’UI desktop et mobile a été revu. J’ai donc modernisé le design tout en respectant l’aspect à la fois séduisant, grand public et médical de la marque. La complexité de l’architecture (configurateur de lunettes, ordonnance, 2e paire) implique une simplicité et une grande cohérence dans la navigation.

For the redesign of the website of the Générale d’optique brand, the entire desktop and mobile UI has been reviewed. So I modernized the design while respecting the attractive, main-stream and medical aspect of the brand. The complexity of the architecture (glasses configurator, prescription, 2nd pair) implies simplicity and great consistency in navigation.

/Marie_Frignet

MonAlbumPhoto

  • Création de différentes pages web (opérationnelles ou inspirationnelles) tout en respectant la charte et l’identité de la marque MonAlbumPhoto
  • Pour les photos estivales, MonAlbumPhoto propose une boite aux motifs qui ne vont pas sans rappeler vos photos de vacances. Eaux pastelles, baigneurs et baigneuses aux couleurs chamarrées accompagneront vos jolis souvenirs de l’été.
  • Afin de répondre à la forte production de newsletters, tout en gardant cohérence graphique et esthétisme, l’ensemble des newsletters se base sur des éléments graphiques récurrents (typographies, CTA, largeur des blocs…) toutes en déclinant des images inspirantes, des couleurs tendances et des titres accrocheurs.
  • Creation of different web pages (operational or inspirational) while respecting the charter and identity of the brand MonAlbumPhoto
  • For summer photos, MonAlbumPhoto offers a box with patterns that are a reminiscence of your vacations photos. Pastel waters, bathers in bright colors will accompany your pretty memories of summer.
  • In order to respond to the high production of newsletters, while keeping graphic coherence and aesthetics, all the newsletters are based on recurring graphic elements (typography, CTA, width of the blocks …) all by declining inspiring images, trendy colors and eye-catching titles.
/Marie_Frignet

Sketches II

Sketches II, est une nouvelle version de l’application desktop et mobile de dessin. A l’instar des nouvelles fonctionnalités et du nouveau design de l’interface, la rubrique d’aide d’usage de l’interface a été également refaite en suivant le design propre et élégant de l’interface. Le grand nombre de fonctions et les multiples supports devaient être simplifiées, cohérentes et bien illustrées afin d’être lisibles et compréhensibles de ses utilisateurs.

Sketches II, is a new version of the desktop and mobile drawing application. Like the new features and the new interface design, the user interface help section has also been redesigned following the clean and elegant design of the interface. The large number of functions and the multiple supports had to be simplified, coherent and well illustrated in order to be readable and understandable by its users.

/Marie_Frignet

La Machinerie Studio

La machinerie Studio regroupe trois techniciens du son qui travaillent pour différents types de prestations, de l’album d’un groupe de musique à la bande-son d’un spectacle son et lumière. Inspiré de la mécanique des boîtes à musique, le logo est constitué de filets agencés de manière aléatoire.

La machinerie Studio brings together three sound technicians who work for different types of performances, album of a musical group or soundtrack of a sound and light show. Inspired by the mechanics of music boxes, the logo is made up of randomly arranged threads.