Portfolio 2023

CONTEXTE : SAE BUT 1 MMI DATE : JUIN 2023 TYPE : Développement web, Design graphique, UX-UI design portfolio but 1 Résumé Développement de mon premier site web portfolio from scratch. PRÉSENCE EN LIGNE PRÉSENCE EN LIGNE PRÉSENCE EN LIGNE PRÉSENCE EN LIGNE Le projet À la fin de ma première année de BUT MMI, j’ai entrepris, dans le cadre d’une SAE, la création de mon site web portfolio. Mon objectif était de concevoir une plateforme qui non seulement présenterait mes réalisations, mais qui serait également une expérience en soi.   Au cœur de ce projet se trouvait la création d’une base de données intégrée, permettant à l’administrateur de gérer facilement les réalisations et les utilisateurs directement depuis le site. J’ai conçu un système d’authentification pour garantir que seuls les utilisateurs validés puissent accéder à l’espace commentaire, favorisant ainsi des interactions constructives et de qualité. Le développement du site s’est fait à partir de zéro, en utilisant HTML, CSS, JavaScript, PHP et SQL. Ces outils m’ont permis de créer des fonctionnalités interactives et dynamiques, telles que des animations en parallaxe et d’autres effets visuels, pour enrichir l’expérience utilisateur. Ce projet m’a permis d’explorer mes compétences en développement web tout en exprimant ma créativité artistique. En y intégrant mon identité visuelle, j’ai pu créer un site web qui reflète non seulement mes réalisations, mais aussi ma personnalité et mes passions.Ce portfolio est bien plus qu’une simple vitrine de mes travaux ; c’est une invitation à découvrir mon univers créatif. file_type_php2 Apprentissages critiques DÉVELOPPER AC 14.01-Exploiter de manière autonome un environnement de développement efficace et productifAC 14.02-Produire des pages web fluides incluant un balisage sémantique efficace et des interactions simplesAC 14.03-Générer des pages web à partir de données structuréesAC 14.04-Mettre en ligne une application web en utilisant une solution d’hébergement standard,AC 14.05-Modéliser les données d’une application web EXPRIMER AC 13.05-Designer une interface web (wireframes) ENTREPRENDRE AC15.05 – Construire une présence en ligne professionnelle (personal branding) (S2) DÉVELOPPER AC 14.01-Exploiter de manière autonome un environnement de développement efficace et productifAC 14.02-Produire des pages web fluides incluant un balisage sémantique efficace et des interactions simplesAC 14.03-Générer des pages web à partir de données structuréesAC 14.04-Mettre en ligne une application web en utilisant une solution d’hébergement standard,AC 14.05-Modéliser les données d’une application web EXPRIMER AC 13.05-Designer une interface web (wireframes) ENTREPRENDRE AC15.05 – Construire une présence en ligne professionnelle (personal branding) (S2) Les étapes du projet 1- Conception initiale Définition des fonctionnalités clefs, création de l’arborescence et élaboration des premières idées de design. 2- Développement de la structure du site Création de l’architecture en HTML, CSS et JavaScript, en intégrant des animations et effets interactifs pour enrichir l’expérience utilisateur. 3- Création de la base de donnée Conception et intégration d’une base de données SQL permettant la gestion des réalisations et des utilisateurs. 4- Développement des fonctionnalités dynamiques Implémentation du système d’authentification, de l’espace commentaire et des interactions dynamiques avec PHP et JavaScript. 5- Intégration de l’identité visuelle Création d’un design personnalisé en accord avec mon univers graphique et avec une mise en page soignée. 6- Mise en ligne et ajustements Déploiement du site, suivi des retours utilisateurs et ajustements finaux pour garantir une expérience optimale. Le résultat Projet suivant cosmic

Cosmic

CONTEXTE : PROJET PERSONNEL DATE : MAI 2023 TYPE : Communication, Illustration Cosmic Résumé Création d’une série d’affiches mettant en scène des personnages cosmiques. COSMIC COSMIC COSMIC COSMIC COSMIC COSMIC COSMIC COSMIC Le projet En première année de mon BUT MMI, j’ai entrepris un projet personnel qui a fusionné mon amour pour l’illustration et mon intérêt pour la communication visuelle. J’ai créé « Cosmic », une série d’affiches mettant en scène des objets célestes humanisés pour promouvoir divers produits et secteurs d’activités. L’idée derrière ce projet était de montrer comment des éléments communs (des corps célestes) peuvent être utilisés pour transmettre des messages variés.Pour donner vie à ce projet, j’ai utilisé Photoshop. J’ai dessiné chaque élément sur ma tablette graphique, partant de zéro pour concevoir des personnages célestes expressifs. J’ai pu appliquer mes connaissances acquises en cours de culture artistique, comme par exemple le concept des couleurs complémentaires, pour créer des compositions visuellement harmonieuses et dynamiques. En somme, ce projet m’a permis de mettre en pratique les compétences acquises au cours de ma première année de BUT MMI tout en explorant ma créativité personnelle. En travaillant sur « Cosmic », j’ai non seulement affiné mes compétences techniques en illustration et en composition graphique, mais j’ai également appris à transmettre des messages à travers des visuels. Apprentissages critiques EXPRIMER  AC13.02 – Produire des pistes graphiques et des planches d’inspiration AC13.03 – Créer, composer et retoucher des visuels EXPRIMER  AC13.02 – Produire des pistes graphiques et des planches d’inspiration AC13.03 – Créer, composer et retoucher des visuels Le résultat Projet suivant audit e-surfshop

Punkode

CONTEXTE : PROJET BUT 1 MMI DATE : JANVIER→JUIN 2023 TYPE : Direction artistique, Design graphique, Gestion de projet, Développement web, Audiovisuel PUNKODE Résumé Punkode est une agence de développement web, créée lors d’un projet durant ma première année en BUT MMI. Son concept ? Bousculer les normes et concevoir des sites web qui se démarquent véritablement. CASSER LES CODES CASSER LES CODES CASSER LES CODES CASSER LES CODES CASSER LES CODES Le projet Ce projet consiste en la création et le déploiement d’une agence fictive de développement web. 👨‍💻 La problématique était de se démarquer dans un environnement concurrentiel en développant une identité hors du commun et en déployant des stratégies de communication novatrices. Notre angle d’attaque était d’utiliser une esthétique punk pour inspirer des méthodes de communication créatives et mémorables. 🤘 Nous avons créé cette agence de A à Z : nom, logo, identité visuelle, réseaux sociaux, site web, etc, et avons dû faire de la communication autour de cette agence. Notre objectif : se démarquer. Nous avons donc déployé une campagne de communication 360 sur les réseaux sociaux (Instagram, Facebook, YouTube), notre site web et à travers des événements.  En choisissant l’identité punk pour nous démarquer, notre positionnement était clairement orienté vers la rupture des codes établis. Notre objectif était de promouvoir la création de sites web originaux, permettant à nos clients de se différencier véritablement sur le marché. Nous avons choisi une orientation punk pour notre agence dans le but de créer quelque chose d’extraordinaire et non conventionnel, apportant ainsi une touche unique au projet. La culture punk, avec son esprit de non-conformité, de créativité et une certaine folie, nous a inspirés. En adoptant cette identité, notre agence a réussi à se démarquer, à attirer l’attention et à incarner l’originalité que nous souhaitions mettre en avant dans le monde du développement web. 🎸👊🏼💥 Punkode était le fruit d’un travail d’équipe au sein duquel j’ai occupé le rôle de chef de projet. Le groupe était constitué de six membres et j’ai eu la responsabilité de diriger et coordonner les différentes phases du projet. En plus de mon rôle de chef de projet, j’ai contribué en tant que graphiste en élaborant l’identité visuelle et le logo de l’agence. De plus, j’ai pris en charge la production vidéo, en créant l’intégralité du contenu pour la chaîne YouTube et en montant le teaser de présentation de l’agence. J’ai également contribué au développement du site web et à la création de posts pour les réseaux sociaux. Apprentissages critiques COMPRENDRE AC11.05 – Identifier les cibles (critères socio-économiques, démographiques, géographiques, culturels …) AC11.06 – Réaliser des entretiens utilisateurs pour construire des personae et des récits utilisateurs (user stories) CONCEVOIR AC 12.01-Concevoir un produit ou un service en terme d’usage et de fonctionnalité,AC 12.02-Construire la proposition d’une valeur d’un produit ou d’un service,AC 12.03-Proposer une recommandation marketing (cibles, objectifs, points de contact)AC 12.04-Proposer une stratégie de communication, EXPRIMERAC 13.01-Écrire pour des médias numériques,AC 13.02-Produire des pistes graphiques et des planches d’inspiration,AC 13.03-Créer, composer, retoucher des visuels,AC 13.04-Tourner et monter une vidéo,AC 13.05-Designer une interface web (wireframes, UI),AC 13.06-Optimiser les médias en fonction de leurs usages et supports de diffusion DÉVELOPPERAC 14.06-Déployer et personnaliser une application Web en utilisant un CMS ou un framework MVC ENTREPRENDREAC 14.06-Déployer et personnaliser une application Web en utilisant un CMS ou un framework MVCAC15.01 – Gérer un projet avec une méthode classiqueAC15.02 – Budgéter un projet et suivre sa rentabilitéAC15.07 – Produire un message écrit ou oral professionnel COMPRENDRE AC11.05 – Identifier les cibles (critères socio-économiques, démographiques, géographiques, culturels …) AC11.06 – Réaliser des entretiens utilisateurs pour construire des personae et des récits utilisateurs (user stories) CONCEVOIR AC 12.01-Concevoir un produit ou un service en terme d’usage et de fonctionnalité,AC 12.02-Construire la proposition d’une valeur d’un produit ou d’un service,AC 12.03-Proposer une recommandation marketing (cibles, objectifs, points de contact)AC 12.04-Proposer une stratégie de communication, EXPRIMERAC 13.01-Écrire pour des médias numériques,AC 13.02-Produire des pistes graphiques et des planches d’inspiration,AC 13.03-Créer, composer, retoucher des visuels,AC 13.04-Tourner et monter une vidéo,AC 13.05-Designer une interface web (wireframes, UI),AC 13.06-Optimiser les médias en fonction de leurs usages et supports de diffusion DÉVELOPPERAC 14.06-Déployer et personnaliser une application Web en utilisant un CMS ou un framework MVC ENTREPRENDREAC 14.06-Déployer et personnaliser une application Web en utilisant un CMS ou un framework MVCAC15.01 – Gérer un projet avec une méthode classiqueAC15.02 – Budgéter un projet et suivre sa rentabilitéAC15.07 – Produire un message écrit ou oral professionnel Les étapes du projet 1- Déterminer le concept J’ai proposé à mon équipe un concept punk pour notre agence, accompagné du slogan « Casser les codes, » afin de créer une identité résolument non conventionnelle et originale. 2- Réaliser la charte graphique J’ai conçu une identité visuelle complète sur Illustrator, où j’ai créé le logo et les éléments graphiques. Ensuite, j’ai utilisé Photoshop pour élaborer des mockups et illustrations qui mettent en valeur l’agence. 3- La création de contenu Nous avons produit divers contenus pour promouvoir l’agence sur plusieurs réseaux sociaux : Instagram, Facebook, YouTube, et LinkedIn. 4- Le développement du site Nous avons développé un site web original sous WordPress, mettant en avant les valeurs fortes de notre agence. 5- L’organisation d’un événement Pour renforcer l’image de l’agence, nous avons organisé un blind test punk/rock/métal qui a réuni une quarantaine de participants, contribuant à promouvoir notre agence. 6- Gagner 3 prix nationaux Nous avons présenté Punkode au festival MMI 2023, où notre projet a été récompensé par trois prix : 1er prix du public, 2ème prix catégorie campagne de communication, et 2ème prix catégorie site web CMS. Les résultats VOIR LA CHARTE GRAPHIQUE Projet suivant Personal Branding