Au cours d’un vaste projet universitaire étalé sur une période de trois mois, j’ai dirigé la refonte intégrale du site du Dôme de Mutzig. Cette initiative a été une occasion de développer considérablement mes compétences en utilisant l’outil Figma, tout en consolidant celles déjà acquises. À travers les multiples facettes abordées dans ce projet, j’ai élargi mon champ de compétences et approfondi ma compréhension des principes fondamentaux de conception web. Phase 1 Phase 2 Phase 3 Tout d’abord, j’ai réalisé une analyse approfondie du site précédent de Mutzig, en me concentrant sur différents aspects tels que le graphisme, la sémantique et l’ergonomie. Ensuite, j’ai élaboré une planche tendance pour le nouveau site, où j’ai répertorié les typographies utilisées, les couleurs, les images et les sources d’inspiration. Au cours de cette deuxième étape, j’ai conçu des wireframes pour trois pages principales : l’Agenda, la page d’accueil et le panier. En plus de cela, j’ai également créé des wireframes pour des pages secondaires, telles que la page « À propos », bien que cela ne soit pas obligatoire. Dans cette phase finale de conception, le choix des typographies et des couleurs a joué un rôle crucial, comme vous pouvez le constater dans les photos ci-dessous. Je suis satisfait du résultat obtenu, car cela a contribué à créer des maquettes graphiques convaincantes. Lien vers le projet : https://www.figma.com/file/xGkUr6ZRT90VAb6Y0LxmHy/CREA3_TP5_HUGOT_Axel?type=design&node-id=1016%3A3358&mode=design&t=QI3YgQAsclzpFNmA-1
Création de Post & Vidéos pour L’Agence Pan
Voici quelques exemples de mon travail en tant que Community Manager à l’agence Pan. Tout d’abord, je vais vous présenter quelques-unes des vidéos que j’ai réalisées, suivies de quelques publications que j’ai créées. Je n’ai pas inclus tous les exemples, car cela aurait été trop long, mais ceux-ci donnent un bon aperçu de mon travail. Compétences Processus Mon stage en tant que Community Manager m’a permis d’acquérir de nouvelles compétences, notamment dans l’utilisation des applications de la suite Meta pour poster des contenus sur Instagram et Facebook. Travailler pour différents clients a constitué à la fois une réelle opportunité et un défi, car la moindre erreur peut avoir des conséquences importantes. Cela m’a permis de développer une rigueur et une attention particulière dans la gestion des contenus et des interactions avec la communauté en ligne. Pour chaque publication destinée aux différents clients, je devais soumettre mon contenu à ma tutrice pour validation. Dans la plupart des cas, mes propositions étaient approuvées, ce qui m’a permis de développer une bonne compréhension des attentes spécifiques de chaque client et de renforcer mes compétences en matière de création de contenu adapté à leur image de marque.
Création d’un site
Dans le cadre d’un projet universitaire, j’ai développé un site web en HTML, CSS, PHP et Twig sur un thème de mon choix. Ce projet s’est déroulé sur deux semaines. Le site comprend une page d’accueil ainsi qu’une page dédiée aux voitures. Cette dernière a été entièrement générée à l’aide de Twig et PHP, ce qui signifie que j’ai utilisé une base de données via PhpMyAdmin pour alimenter le contenu de cette page. Sur cette page, j’ai créé 40 articles, chacun contenant du contenu généré dynamiquement par Twig. Chaque article dispose également d’une option permettant de l’ajouter au panier. Cette action redirige directement vers le panier où l’utilisateur peut retirer des articles ou procéder au paiement.. En outre, le site comporte une autre page dédiée aux collaborations. Cette page est présentée sous forme de filtres, où chaque catégorie sélectionnée affiche les voitures correspondantes parmi les 40 disponibles. Création du site en HTML et CSS Conception du site en TWIG et PHP Pour débuter ce projet, nous avons consacré la première semaine à la création complète de notre site en HTML. C’était la première étape des deux semaines prévues pour ce projet. Durant la deuxième semaine, afin de nous familiariser avec de nouveaux langages, nous avons été chargés de reconstruire entièrement notre site en utilisant Twig et PHP. Sur la page voiture, j’ai créé environ une quarantaine d’articles. Pour simplifier ce processus, j’ai utilisé Twig, comme le montre la première photo. Il me suffisait d’insérer le code approprié, puis de mettre à jour ma base de données stockée sur PHPMyAdmin. Dans la deuxième photo, vous pouvez voir ce qui se passe lorsque vous cliquez sur un article. Encore une fois, j’ai utilisé Twig pour relier les variables, telles que {{voitures.couleur}}, à celles stockées dans ma base de données PHPMyAdmin. Grâce à un fichier PHP, j’ai pu établir la liaison entre mon code et la base de données, simplifiant ainsi le processus. Pour conclure, voici une vue d’ensemble du projet, comprenant deux fichiers CSS pour maintenir la gestion du style de manière organisée. Il inclut également un répertoire d’images contenant toutes les images utilisées dans le site. Un répertoire « include » a été créé pour connecter le site à la base de données. De plus, il y a un répertoire « sql » contenant le fichier de base de données. Un répertoire « templates » abrite tous les fichiers Twig, tandis que les fichiers PHP sont regroupés séparément. Chaque fichier Twig nécessitait en effet un fichier PHP correspondant pour assurer le bon fonctionnement du site.
Wireframe ZawgAuto
Dans le cadre de mes projets scolaires, j’ai été chargé de concevoir une maquette en noir et blanc sur un thème de mon choix. J’ai opté pour le thème de l’automobile. La tâche consistait à créer un parcours utilisateur, du début à la finalisation de l’achat, en passant par plusieurs étapes telles que la page d’accueil et le panier. Le site comprend ainsi plusieurs pages, et je suis plutôt satisfait du résultat obtenu. Page d'accueil Parcours utilisateur Finalité ? Ma priorité était de concevoir une page d’accueil efficace, intuitive et qui guide l’utilisateur sans le perdre. C’était mon objectif principal lors de la conception. Ce projet ne se limitait pas à la création d’une simple interface utilisateur, mais impliquait la conception d’un parcours utilisateur complet. Dans mon cas, il s’agissait d’un parcours où l’utilisateur choisissait entre l’achat d’une Tesla ou d’une Porsche, et le guidait jusqu’à la finalisation de l’achat. Ce projet m’a offert l’opportunité de concevoir des expériences utilisateur tout en me permettant d’apprendre et de consolider mes compétences en utilisation de Figma.
Création visuelle pour Reichshoffen-Nehwiller
Dans le cadre de mon parcours universitaire, j’ai été chargé de participer à un projet de refonte complète du site internet de Reichshoffen – Nehwiller. Cette expérience m’a permis de développer de nombreuses compétences, notamment dans l’utilisation de FIGMA, un outil que je découvrais pour la première fois. Cette opportunité a été une révélation pour moi, car elle m’a confirmé que c’était le domaine dans lequel je souhaitais évoluer professionnellement. Concernant le projet lui-même, notre objectif était de moderniser le site en le rendant à la fois sobre et attractif. Pour ce faire, nous avons dû concevoir deux versions du site : une en noir et blanc et une en couleurs, afin de répondre aux différents besoins et préférences des utilisateurs. De plus, nous avons travaillé sur son aspect responsive, assurant ainsi une expérience utilisateur optimale aussi bien sur téléphone que sur ordinateur. En plus de la refonte du site, nous avons également été amenés à créer plusieurs éléments graphiques, dont des logos, une planche tendance reflétant l’identité visuelle de la ville, ainsi que des bannières destinées à être utilisées sur les réseaux sociaux, notamment sur Facebook. Ce projet a donc été une véritable immersion dans le monde de la conception web et du design graphique, me permettant de mettre en pratique mes compétences et d’acquérir de nouvelles connaissances tout en contribuant à un projet concret et significatif. Les logos Chaque logo a été élaboré individuellement sur Illustrator, présentant ainsi une diversité remarquable tant au niveau des formes graphiques, des typographies que des choix de couleurs, les rendant uniques et variés les uns par rapport aux autres. La bannière En complément des logos, j’ai créé une bannière qui représente parfaitement les paysages de la ville. De plus, j’ai accordé une attention particulière à la typographie et à la couleur du texte pour renforcer son impact et sa lisibilité. Les maquettes graphiques En étant débutant sur Figma pour ma première utilisation, j’ai rencontré des défis, notamment dans la création des animations. Toutefois, malgré ces difficultés, le résultat final s’est révélé être satisfaisant et cohérent avec la planche tendance. Phase 1 Phase 2 Phase 3 Pour commencer, j’ai dû m’inspirer des concurrents pour obtenir des idées, réalisant ainsi un benchmark de différents sites de villes tels que Mulhouse ou Strasbourg. Ensuite, j’ai élaboré une planche tendance pour guider le processus de conception. Dans la phase suivante du projet, j’ai assumé la responsabilité de créer les différents logos requis ainsi que les bannières destinées à être utilisées sur les réseaux sociaux et intégrées au site web. Cette étape a demandé une attention particulière pour m’assurer que chaque élément graphique soit fidèle à l’identité visuelle de la ville et captivant pour les utilisateurs. Dans l’ultime étape du projet, ma mission consistait à élaborer des wireframes ainsi que des maquettes graphiques pour le site internet de la Ville de Reichshoffen – Nehwiller. Cette démarche impliquait une analyse minutieuse des besoins et des attentes des utilisateurs, afin de créer des prototypes fonctionnels et esthétiques en adéquation avec l’image de la ville.
Création d’une stratégie digitales complète pour Le Dauphin Strasbourg
Dans le cadre de ce projet réalisé en cours, axé sur le thème de la restauration, j’ai collaboré avec un véritable client, Le Dauphin Strasbourg. Mon rôle consistait à élaborer complètement la stratégie digitale de ce restaurant. Le projet se divise en trois grandes parties : La première partie concerne la création, où j’ai conçu tous les éléments visuels tels que les flyers, les planches tendances, la charte graphique et le logo du restaurant.La deuxième partie se concentre sur la conception des wireframes et du site web, où j’ai élaboré la structure et l’interface du site internet du restaurant.Enfin, la troisième partie englobe l’ensemble des activités de communication, où j’ai mis en place des stratégies pour promouvoir le restaurant et développer sa présence en ligne. Création Dans cette section, j’ai particulièrement mis l’accent sur une planche tendance et une charte graphique inspirées de l’Alsace, notamment en utilisant des éléments régionaux. Pour le logo présenté ci-dessous, j’ai développé deux versions, mais celle intégrant le dauphin s’est avérée plus efficace sur les flyers. Travailler sur un projet de cette envergure a été une véritable opportunité, et je suis extrêmement satisfait du résultat final. Développement Dans cette section, vous découvrirez tout d’abord les maquettes que j’ai créées à l’aide de Figma, suivies du site que j’ai développé sur WordPress. L’esthétique du site reflète les souhaits du client, qui désirait une combinaison harmonieuse entre l’authenticité de l’Alsace et une touche de modernité. J’ai veillé à ce que chaque élément visuel, depuis la palette de couleurs jusqu’aux illustrations et au design général, capture l’essence unique de la région. Communications Dans cette section finale, je vais vous présenter en détail les différents éléments de communication que j’ai mis en place. Cela comprend la création d’un compte utilisateur avec des contenus visuels attrayants, l’organisation de concours excitants, la conception de premières de couverture accrocheuses, et enfin, la mise en place de newsletters pour maintenir l’engagement avec notre audience. Partie 1 : Création – Flyers – Logo – Charte graphique & Planche tendance Partie 2 : Développement – Exemple de wireframe & Site Lien vers le site : https://sae202.hugot.etu.mmi-unistra.fr/?page_id=531 Partie 3 : Communications – Création d’un compte avce photos ,vidéos & Story – Jeux concours – 1ère de couverture – contenu sponsorisé – Newslatter Lien vers le compte: https://sae202.hugot.etu.mmi-unistra.fr/?page_id=531 https://hugot-axel.com/wp-content/uploads/2023/05/SAE_202_2.mp4 Vidéos 1ère de couverture – Newslatter – Contenu sponsorisé Jeux concours