Lola Albrecht : Travaux

Vous trouverez ici mes travaux les plus récents. Plusieurs sont encore en cours de réalisation et seront ajoutés au site une fois terminés.

Développement Web et maquettes

Espace fidélité

Cette page a été réalisée dans le cadre de mon alternance auprès de Grand Est Automobiles. L'entreprise désire ouvrir un espace fidélité sur son site web, afin que les clients membres du programme de fidélité puissent consulter leur(s) carte(s), les offres disponibles et leur historique d'utilisation.
Avec un binôme, j'ai eu pour mission de conçevoir les maquettes (disponibles sur ce lien figma) et de développer la page, autant du côté front-office que back-office. Les données sont récupérées dynamiquement via des requêtes Eloquent et SQL, et traitées depuis la base de données de Grand Est Automobiles.

Outils et langages : HTML, SASS, PHP Laravel, MySQL, PhpMyAdmin, Figma
Il s'agit d'un espace uniquement accessible aux clients membres, vous trouverez donc ci-dessous un lien vers la maquette qui a servi de modèle pour cette page.

Espace fidélité - tableau de bord

Cet espace a également été conçu pour la campagne "fidélité" de Grand Est Automobiles. Il est cette fois-ci à destination des employés chargés de l'organisation et de la gestion de cette campagne. Il s'agit en effet d'un tableau de bord leur permettant de consulter plusieurs données liées aux cartes de fidélité sur l'ensemble des 28 concessions.
J'ai été en charge de la réalisation complète de ce projet : j'ai pu déterminer et proposer les données et graphiques pertinents qui allaient figurer sur cet espace, créer les maquettes et développer le tableau de bord. On y retrouve différentes données, dont une courbe du trafic sur la page web de l'espace fidélité, un flux mettant en avant les cartes récemment créées, une alerte pour les cartes bientôt expirées, ou encore le nombre de fois qu'une offre a été utilisée par mois.

Outils et langages : HTML, SASS, PHP Laravel, Chart.js, MySQL, PhpMyAdmin, Figma
Il s'agit d'un espace réservé aux employés de l'entreprise. Il n'est donc pas possible de le consulter en externe. En revanche, vous trouverez ci-dessous un lien vers les maquettes (avec données fictives).

Alsace Réseau Neutre - refonte

Pour mon projet de première année de master, j'ai été chargée, avec un groupe de quatre étudiants, de faire la refonte du site de l'association Alsace Réseau Neutre. Nous avons donc conçu les maquettes et développé le site en respectant la charte graphique (couleurs, logo, icônes, typographie, etc.), les besoins et les demandes du donneur d'ordres. La partie la plus difficile à repenser était sans conteste le header : dans la première version du site, certains menus étaient composés de plus de quinze sous-menus. Nous avons donc dû refaire entièrement l'arborescence du site pour rémédier à ce problème et parvenir à obtenir un menu regroupant de manière claire et intuitive les nombreuses pages. Le design, lui, a complètement été modifié pour une interface plus moderne et vivante.

Je vous invite à consulter ici l'ancien site d'ARN, ainsi que sa nouvelle version faite avec le CMS Grav. L'association a cependant continué à développer des pages supplémentaires de son côté, car celles-ci n'étaient pas prévues par le cahier des charges et dépassaient par conséquent le cadre de notre stage. Les pages que nous avons réalisées sont celles dont les maquettes existent sur ce lien Figma, n'hésitez pas à le consulter également.

Site one-page

Dans le cadre de ma recherche d'alternance, il m'a été demandé de créer un site one-page fictif (et donc désindexé) moderne et professionnel, pour un avocat spécialisé en divorce à Strasbourg. J'ai donc conçu ce site web avec WordPress (Divi Builder) et rédigé entièrement son contenu en plaçant le référencement naturel en priorité. L'image de fond provient d'une banque d'images libres de droit, et les dessins ont été faits par mes soins.

Ce travail a été réalisé en trois jours, sans aucune connaissance préalable du domaine du droit de la famille. Ce qui m'a donc permis de constater que je suis capable de m'adapter rapidement à des sujets pourtant nouveaux pour moi.

Ce site web

Pour s'améliorer dans le code, quoi de mieux que de créer son propre site sans aucun CMS ! Je me suis alors donné pour objectif de dessiner moi-même chaque illustration et de coder chaque page à la main (HTML5, CSS3, JS). Et deux mois plus tard, mon premier site était fin prêt à faire son apparition sur le Web.

Tetris

Jeu conçu avec HTML, CSS et JavaScript, pour tous les nostalgiques de Tetris ! Mon objectif était de pousser mon utilisation de JavaScript plus loin que les quelques fonctions nécessaires pour animer un site internet.

Apprendre à coder des jeux vidéos n'est pas forcément un de mes futurs objectifs, mais cet exercice m'a permis de découvrir de nombreuses méthodes propres à ES6.

Les pages de cette section ne sont consultables que depuis un ordinateur ; elles ne sont malheureusement pas responsives.

Symbiosis

Curieuse de voir ce qu'il est possible d'obtenir en mélangeant lignes de code et logiciels de design graphique, je suis actuellement en train de concevoir plusieurs scènes avec HTML, CSS, JavaScript, Illustrator et Fresco. D'autres sont encore à venir.

Les pages de cette section ne sont consultables que depuis un ordinateur ; elles ne sont malheureusement pas responsives.

Under the Universe's sky

Maquettes

Bake O' Clock

Maquette de page d'accueil pour une boutique fictive - Réalisée sur Adobe XD. Bake O' Clock est une boutique vendant des cupcakes originaux, qui cherche à élargir sa clientèle grâce à son site web. Elle y vend ses gâteaux et tient un blog sur lequel elle partage des recettes de cuisine et des articles sur le thème de la pâtisserie.

Pour l'internaute, il est possible de créer un compte (icône dans le header), faire ses achats en ligne, consulter le catalogue ("Our Cupcakes"), ou encore de s'inscrire à la newsletter (footer). Les informations sur la boutique sont mises en avant sur la page d'accueil (bouton "learn more" dirigeant vers la page "About us"). Mais l'objectif principal étant d'avoir un taux de conversion élevé, les CTA incitant à passer commande sont majoritairement présents. Visuellement, le site conserve cette dimension « mignonne » propre à l'univers des boutiques de cupcakes, tout en gardant un certain sérieux. La typographie, la palette de couleur tirant vers les tons rosés et les dessins ont été pensés à cet effet.
Les grands principes et règles d'ergonomie, tels que la règle des trois clics, les lois de la Gestalt, ou encore la loi de Fitts, ont bien entendu été appliqués.

John Doe's Bubble

Maquette de page d'accueil pour une série de podcasts - Réalisée sur Adobe XD. John Doe est un animateur qui produit des podcasts avec sa petite équipe. John Doe's Bubble anime une émission radio et désire désormais rendre ses enregistrements disponibles sur internet.

Grâce à ce site, l'équipe peut répertorier ses épisodes mais aussi obtenir du soutien des internautes (sur la page Patreon, rappelée dans le footer sous forme de CTA). Pour étendre sa présence en ligne, l'équipe a aussi rejoint les réseaux sociaux, mis en avant dans le corps de la page et le footer. Quant à l'aspect graphique, le site est majoritairement bleu foncé, avec quelques touches de violet pour nuancer le tout. Le bleu, surtout foncé, inspire la confiance, la fiabilité, le calme et est ainsi une couleur phare en communication. Ensuite, la bannière met en avant les différents thèmes abordés par les podcasts, de sorte à attirer le regard et la curiosité sur ceux-ci. La page d'accueil présente aussi le dernier épisode disponible avec un raccourci pour l'écouter en un seul clic.

Graphisme

Affiche - SUAPS

Affiche faite sur InDesign et Illustrator pour la « Nuit de la danse », un événement organisé chaque année par le service des sports de l'Université de Strasbourg. Lors de cette soirée, chaque club de danse a présenté une chorégraphie. Les styles de danse sont donc variés, mais tous liés dans un seul et même spectacle. C'est ce que j'ai tenu à représenter en mettant en scène différents danseurs reliés par une seule ligne conductrice, qui représente également le mouvement. Les autres lignes en-dessous de celle-ci rappellent une partition.
Enfin, la charte graphique de l'unistra a été soigneusement respectée quant à la mise en page et la typographie.

Affiche - Convention

Affiche pour un événement fictif, faite avec Photoshop. Il s'agit d'une convention sur le futur de l'astronomie ayant lieu à Kyoto. J'ai tenu à travailler essentiellement l'aspect visuel, soit le placement des informations, les couleurs, la lumière et la typographie. L'effet de lumière et la lune attirent le regard au centre du poster, où se situe le nom de l'événement. Un slogan est placé en bas, avec un effet (bitmap) sur la typographie pour le faire se démarquer des autres blocs de texte. Enfin, les informations pratiques, soit l'adresse et la date, sont placées en haut à droite et écrites verticalement, comme le permet la langue japonaise. Cette différence sert à montrer que tous les blocs n'ont pas la même fonction dans l'affiche.

Blog article

Cette illustration a été réalisée sur Illustrator, dans le cadre de la campagne de communication des masters de ma faculté. Elle accompagne un article du blog du master TCLoc portant sur les points communs entre la traduction et la communication technique (Voir l'article). La charte graphique du master impose des personnages simples et des visuels dépourvus de trop de détails. J'ai donc mis l'accent sur les deux thèmes principaux abordés dans l'article, en les représentant sous forme de bulles pouvant communiquer entre elles et être utilisées ensemble par une même personne durant son projet. J'ai eu l'occasion de concevoir plusieurs illustrations dans le même style pour ce blog au cours de mon année.

Triptyque partie 1 : Spectator

Pour ce triptyque, mon but était de créer une harmonie entre des formes géométriques en noir et blanc et des formes plus abstraites et vivantes. Les couleurs chaudes et les expressions calmes des personnages viennent apaiser l'oeil d'abord attiré par les formes plus structurées et dures qui les entourent. Pourtant, dans ces couleurs se noient les expression de la déstabilisation.

Cette image représente le sentiment d'être dépassé par les événements qu'on ne peut contrôler, et la frustration d'en demeurer simple spectateur.
Logiciels : Illustrator et Adobe Fresco

Triptyque partie 2 : Feelings

Pour ce triptyque, mon but était de créer une harmonie entre des formes géométriques en noir et blanc et des formes plus abstraites et vivantes. Les couleurs chaudes et les expressions calmes des personnages viennent apaiser l'oeil d'abord attiré par les formes plus structurées et dures qui les entourent. Pourtant, dans ces couleurs se noient les expression de la déstabilisation.

Cette image représente le fait de s'ouvrir aux autres. Les différents poissons qui gravitent autour du personnage sont des sentiments qu'il ne faut pas avoir peur de partager, surtout ceux responsables d'un mal être.
Logiciels : Illustrator et Adobe Fresco

Triptyque partie 3 : Aura

Pour ce triptyque, mon but était de créer une harmonie entre des formes géométriques en noir et blanc et des formes plus abstraites et vivantes. Les couleurs chaudes et les expressions calmes des personnages viennent apaiser l'oeil d'abord attiré par les formes plus structurées et dures qui les entourent. Pourtant, dans ces couleurs se noient les expression de la déstabilisation.

Cette image représente le sentiment d'apaisement ressenti après être passé par toutes les étapes précédent l'accepation d'un événement tragique.
Logiciels : Illustrator et Adobe Fresco

Unusual Places : Forest

Cette série de trois images, réalisée sur Illustrator, a un concept très simple : des animaux perdus dans le mauvais milieu de vie.

Unusual Places : Fake Bears

Cette série de trois images, réalisée sur Illustrator, a un concept très simple : des animaux perdus dans le mauvais milieu de vie.

Unusual Places : Seahorse

Cette série de trois images, réalisée sur Illustrator, a un concept très simple : des animaux perdus dans le mauvais milieu de vie.

Graphisme (vidéos)

Season Isles

Ce mini-univers a été dessiné à l'aide de l'application Mental Canvas, qui permet de créer des scènes sur plusieurs plans et de s'y déplacer comme on le souhaite (en utilisant la navigation 3D ou encore l'animation en free-form).

Self-ideals

Pour mes cours d'anglais, il était demandé à chaque étudiant de réaliser un podcast ou une vidéo sur un sujet de son choix. J'y ai vu l'occasion de m'entraîner à utiliser le logiciel Premiere Pro. Je ne suis pas encore en mesure de concevoir des vidéos entièrement animées (en 2D) et avec des animations fluides, mais il s'agit d'une compétence que j'essaie de développer à travers ce type de petit projet. Mes dessins, eux, ont été fait sur Adobe Fresco.

The future of translation technology

Ma toute première vidéo animée ! Faite sur Photoshop et Premiere Pro à l'occasion du concours international Rising Star de l'association GALA. Comme il s'agit avant tout d'une présentation, je m'en suis tenue à un support visuel simple. Ainsi, la vidéo illustre mes différents points sans détourner l'attention du public sur ce qui est dit.