PORTFOLIO Graphiste - UX / UI Designer & Développeur Front End - Doriane Chrétien
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Je suis Doriane, Aujourd’hui Graphiste, Designer web et développeur Front End, je suis issue d’une première carrière d’ingénieur aéronautique. Je suis une passionnée de dessin et de peinture, que ce soit au crayon, pinceau ou à la tablette graphique, je laisse libre cours à ma créativité. Toujours à la recherche de nouvelles idées, de nouvelles conceptions, je me nourris des diverses tendances du moment. C’est cette créativité qui m’anime qui m’a amenée à la conception web grâce à une formation diplômante. Passionnée également par la photographie, j’effectue des clichés qui me permettent d’agrémenter mes maquettes web et supports de communication de manière plus pertinente et personnalisée. A l’écoute et force de proposition, à chaque nouveau projet j’aime prendre connaissance du nouveau contexte, de ses contraintes, ses problématiques. J’analyse le domaine, les acteurs, l’identité... J’aime mener des recherches et réflexions pour déceler les problèmes et évaluer la solution la plus adaptée. A travers ce portfolio, je vous invite à découvrir mon parcours, mes créations, mes projets. X/UIDesign-Dée v o l pemente W b-Graphisme 2 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Sommaire Tablette graphique����������������������������������������������������������������������������������������������������26 Mon Parcours Animation���������������������������������������������������������������������� 27 Formation�������������������������������������������������������������������������5 Photographie��������������������������������������������������������������28 Expériences Web�������������������������������������������������������� 6 Shooting & retouches����������������������������������������������������������������������������������������������28 Compétences����������������������������������������������������������������8 Art�����������������������������������������������������������������������������������������29 Projets Design Projets Dev Les Incompressibles����������������������������������������������10 Site web Personnel������������������������������������������������� 31 Logotype - Identité visuelle���������������������������������������������������������������������������������10 VoyagePic.fr���������������������������������������������������������������������������������������������������������������������31 Flyers - Print����������������������������������������������������������������������������������������������������������������������11 PressBook���������������������������������������������������������������������������������������������������������������������������12 Les Chlorophy-liens����������������������������������������������� 33 Site web�������������������������������������������������������������������������������������������������������������������������������33 Cartes de visite���������������������������������������������������������������������������������������������������������������13 ESSP������������������������������������������������������������������������������������� 14 C.Do Photographies���������������������������������������������� 35 Site web�������������������������������������������������������������������������������������������������������������������������������35 UX/UI Design�������������������������������������������������������������������������������������������������������������������14 Les Chlorophy-liens������������������������������������������������ 15 Logotype - Identité visuelle���������������������������������������������������������������������������������15 Web Design�����������������������������������������������������������������������������������������������������������������������16 Projets personnels�������������������������������������������������� 17 Logotypes��������������������������������������������������������������������������������������������������������������������������17 Prototype����������������������������������������������������������������������������������������������������������������������������19 Magazine - Print���������������������������������������������������������������������������������������������������������� 20 Photomontage���������������������������������������������������������������������������������������������������������������21 Illustrations digitales���������������������������������������������24 DAO ���������������������������������������������������������������������������������������������������������������������������������������24 Illustrations�������������������������������������������������������������������26 3 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Formation 2007-2010 2010-2013 2018-2019 Webdesigner & Classes Prépa Ingénieur Développeur CPGE Nantes Institut des Sciences de Formation 31 Sup/Spé - PCSI l’Ingénieur de Toulon et du Var UX/UI Design Informatique Graphisme Mathématiques Sciences des matériaux Développement Web Physique - Chimie Modélisation Animation 2D Webmarketing 5 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
UX/UI Designer & Développeur FE - 2019 à aujourd’hui Alten pour Airbus - Sept.. 2021 à aujourd’hui UX/UI design - Amélioration d’une interface de création et d’exploration de données. Alten pour Airbus - Juillet. 2021 à Juillet. 2021 Expériences Web UI design - Revue de l’ergonomie d’une interface pour les écrans 14 pouces et Maquettage sur logiciel Sketch. Alten pour Airbus - Déc. 2020 à aujourd’hui Développement d’une application de gestion de planning pour les essias en vol (React.js). Alten pour Airbus - Déc. 2019 à Juin 2020 Conception de vidéos promotionnelles et techniques sur les fonctionnalités de l’outil End to End 3D Experience d’Airbus pour le NIS. Alten pour ESSP (European Satellite Services Provider) - Mars à Nov. 2019 Refonte du site web métier. Repenser le design adapté aux utilisateurs et aux tendances actuelles et le développer sur les technologies actuelles (Symfony 4). Graphiste - Août 2020 à Nov. 2020 Compagnie Les Incompressibles Conception du logotype, de la charte graphique associée, des flyers promotionnels, des cartes de visite et du PressBook du duo de magiciens. 6 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Webdesigner - 2018 Association Les Chlorophy-liens - Bénévolat Conception du logotype, de la charte graphique et du site web de l’association et développement de thème avec WordPress. Expériences Web 7 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Compétences Designer Développeur Graphiste Photographe Conception UX/UI de sites et Développement Front End de Conception de Logotypes, Shootings photo & retouches en applications web. sites web. supports de communications, post-production Bootstap - WordPress - Symfony animations - React.js Ps Xd Html Css Ai Id Lr Js Php Ae 8 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Ai Les Incompressibles Logotype - Identité visuelle Les Incompressibles est un duo de magiciens artificiers sur Toulouse puisant leurs sources dans un univers scientifique et burlesque. J’ai d’abord procédé à une interview des magiciens pour cerner leur identité, leurs valeurs, leur univers. Puis j’ai réalisé quelques croquis que je leur ai soumis et qu’on a discutés ensemble afin d’affiner le logo souhaité. J’ai ensuite réalisé ce logo au format numérique sur Adobe Illustrator et itéré avec le client afin d’obtenir le logo final que j’ai ensuite décliné en différentes versions. J’ai également réalisé la charte graphique du duo qui présente le logo, ses usages, la palette de couleurs et typographies utilisées. Afin de correspondre aux codes populaires de la magie, les couleurs simples rouge et noir ont été choisies. La conception du logo est basée sur la force du duo dont les visages le composent de manière énigmatique. Le duo évoluant dans un univers particulier que sont les sciences et les artifices, ces aspects ont été mixés aux cartes largement représentatives de la magie. 10 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Id Les Incompressibles Flyers - Print Les Incompressibles souhaitaient des flyers pour promouvoir leurs activités auprès du grand public. Il m’ont fourni les textes et leurs photos portraits. J’ai réalisé des photos supplémentaires pour valoriser le contenu et mis le tout en forme dans le format demandé tout en respectant la charte graphique que j’avais mise en place lors de la réalisation de leur logo. J’ai conçu ces planches au format A4 en triptyque recto-verso en respectant les règles de l’impression. 11 Portfolio - Doriane Chrétien - 2020 Retour Sommaire
Id Les Incompressibles PressBook Les Incompressibles avaient besoin d’un PressBook pour présenter leur activité et leurs prestations à leurs potentiels futurs clients Il m’ont fourni les textes et quelques photos. J’ai mis le tout en forme dans le format demandé tout en respectant la charte graphique que j’avais mise en place lors de la réalisation de leur logo. J’ai conçu les planches au format A5 en livret en respectant les règles de l’impression. J’ai egalement fourni une version pdf avec des éléments interactifs tels que le sommaire, les liens vers le site du client, et le retour sommaire. 12 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Id Les Incompressibles Cartes de visite Suite à la création de leur logo et de leur nouvelle charte graphique, Les Incompressibles avaient besoin de nouvelles catres de visite. J’ai donc conçu celles-ci pour le duo ainsi que pour chacun des magicien en respectant les règles de l’impression. 13 Portfolio - Doriane Chrétien - 2020 Retour Sommaire
Prg ESSP UX/UI Design Lors d’une mission avec Alten, j’ai pu travailler pour l’entreprise ESSP qui est une société opérant des satellites. La sociéte collecte et post-traite des données qu’elle publie sur un outil interne exploité par leurs experts. L’outi existant depuis plus de 15 ans, il était nécessaire de le refondre entièrement à la fois d’un point de vu technologique mais aussi design. Je suis alors intervenue en tant qu’UX/UI Designer et développeur front end. Le site hébergeant des données sensibles, étant à usage strictement interne et couvert sous le secret professionnel, je ne suis donc pas en mesure de fournir un visuel de mon travail. Je ne peux que décrire mon process de travail. Ma première étape a été de prendre connaissance du contexte, de l’environnement technique et du site existant à travers une immersion complète au sein de l’entreprise. J’ai ensuite procédé à l’interview de certains utilisateurs pour recueillir leurs besoins et déceler les points de frictions et les attentes, et définir les différents profils utilisateurs. Chaque utilisateur, selon son département de compétences, n’utilise pas tout à fait le site de la même façon, ne recherche pas les mêmes informations et n’a donc pas nécessairement la même approche ni les mêmes attentes. Après avoir parcouru le site et procédé à des analyses auprès du client, j’ai pu établir l’architecture des données et leur articulation, ainsi que la façon la plus adéquate d’y accéder pour les utilisateurs. J’ai ainsi établi des schémas de navigation et des fonctionnalités devant supprimer les points de friction et améliorer l’expérience utilisateur. Après quelques schémas de wireframes intégrant l’ergonomie, la navigation et les fonctionnalités, j’ai procédé à la conception des maquettes en adéquation avec la charte graphique de la société. J’ai confronté ces maquettes aux utilisateurs à mesure que j’avançais de manière à valider ou invalider les éléments établis et itérer sur leur conception. Une fois les maquettes validées, j’ai procédé au développement de l’application en collaboration avec un développeur back end sur le framework Symfony 4. De la même manière que pour la réalisation des maquettes, j’ai procédé à des tests utilisateurs à mesure que le développement de l’application avançait pour s’assurer de son utillisabilité et de son adéquation avec les besoins utilisateurs et de réajuster certains éléments en cas de besoin. 14 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Ai Les Chlorophy-liens Logotype - Identité visuelle L’association Les Chlorophy-liens a développé une ferme polyvalente et écologique autour d’activités agricoles, artisanales et culturelles. Afin de pouvoir réaliser la conception de l’identité visuelle de l’association, j’ai d’abord procédé à une interview des acteurs majeurs de l’association pour cerner l’dentité de celle-ci, ses valeurs, ses activités. Puis j’ai réalisé quelques croquis que je leur ai soumis et qu’on a discutés ensemble afin d’affiner le logo souhaité. J’ai ensuite réalisé ce logo au format numérique sur Adobe Illustrator et itéré avec le client afin d’obtenir le logo final que j’ai ensuite décliné en différentes versions. J’ai également réalisé la charte graphique de l’association qui explique les usages du logo et détermine les couleurs et typographies utilisées. Afin de correspondre aux codes populaires de l’écologie et de l’agriculture, j’ai choisi les couleurs vert et ocre. La conception du logo est basée sur le contour de la ferme du client, qui est au centre de ses activités, liée à une représentation végétale pour l’aspect culture, qui s’entrelace pour représenter le lien qui définit la valeur majeure de l’association. 15 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Ps Les Chlorophy-liens Web Design L’association Les Chlorophy-liens souhaitait un site web leur permettant de présenter leurs activités et tenir les visiteurs au courant de leurs dernières actualités. On part alors sur un site vitrine intégrant un blog. J’ai continué à interroger l’association pour définir le contenu du site et les cibles. Après avoir défini l’architecture de l’information, j’ai établi le parcours utilisateur. J’ai réalisé un zoning puis des wireframes pour construire l’architecture du site ainsi que la navigation. Puis j’ai réalisé les maquettes du site en accord avec la charte graphique sur Photoshop sur des formats standards de PC et smartphone afin de proposer un site responsive. Après avoir présenté ces maquettes et les avoir faites valider par les clients, j’ai ensuite résliser un prototype sur Adobe Xd afin de présenter une maquette interactive et plus parlante aux client xet leur faire tester. 16 Portfolio - Doriane Chrétien - 2020 Retour Sommaire
Ai Projets personnels Logotypes Afin de continuer à développer ma créativité et mes compétences de graphiste, je conçois réguièrement des logos fictifs sur des thèmes différents. Pour cela, j’imagine des sujets ou participe à des logo challenges. Je conçois alors les logos sur croquis puis sur Adobe Illustrator. Et enfin je les mets en situation en rapport avec le thème pour les mettre en valeur. 17 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Ai Projets personnels Logotypes 18 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Xd Projets personnels Prototype Dans le cadre d’un projet personnel, j’ai souhaité réaliser un prototype d’une application de recherche de randonnées en montagne selon un panel de criètes à sélectionner. L’idée est d’avoir une interface simple, agréable et intuitive. Je « design » l’interface directement sur Xd dans un plan de travail de la taille d’un smartphone que je duplique ensuite afin d’apporter à chacun les modifications qui vont amener du dynamisme lors des intéractions avec le prototype. Je crée ainsi d’autres plans de travail qui vont être les autres pages de l’application puis je fais le lien entre chacun et les éléments destinés à être cliquables. en ajoutant des transitions. 19 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Id Projets personnels Magazine - Print Le magazine fictif présenté ici est une revue de randonnée en montagne, établie sur le thème principal des Pyrénées et agrémentée de photos personnelles des lieux. J’ai établi des marges et une zone de fond perdu pour répondre aux normes du print.J’utilise les gabarits pour reproduire le même format d’une page à l’autre et leur numérotation, les styles de paragraphe et de caractère pour homogénéiser l’ensemble et l’habillage pour intégrer au mieux les images dans le texte. Pour le style, j’ai ajouté des dégradés, des calques d’opacité, des ombrages et j’ai vectorisé le texte EDITO pour y incruster une image de fond. 20 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Ps Projets personnels Photomontage Cette photomanipulation est un montage à partir du portrait d’une femme dont j’ai retravaillé la peau pour la lisser. Pour cela j’ai créé deux calques: un basse et un haute fréquence. Au premier, j’y applique un léger flou gaussien, et au deuxième je lui applique l’image basse fréquence en mode Addition, puis je le fusionne en lumière linéaire. Ensuite, je viens retravailler la peau sur les zones d’irrégularités pour les lisser avec de légers flous gaussiens avec l’outil sélection ou l’outil correcteur. Une fois terminé, je détoure le modèle avec l’outil sélection rapide, puis j’améliore les contours notamment au niveau des cheveux où le travail est plus délicat. 21 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Avec l’outil plume, je découpe le bas de son buste, puis je le reconstruis de manière à en visualiser l’intérieur. Pour cela, j’ajoute un dégradé de la couleur de sa peau pour simuler la partie interne du buste et j’ajoute un contour pour donner de l’épaisseur à la peau. Pour agrémenter la composition, je sélectionne et détoure des fleurs de la même manière que précédement et les fais comme ressortir du buste par un jeu de sélection de calques. Enfin, j’ajoute au modèle des ailes empruntées à un oiseau, j’en floute légèrement l’implantation pour qu’elles paraissent plus naturelles et je fais disparaître un défaut de l’aile avec l’outil tampon. Avec l’outil pinceau noir faible opacité sur un autre calque, j’ajoute l’ombrage des ailes sur le dos du modèle ainsi que sur les fleurs. Et pour finir, j’ajoute une image de fond sur laquelle j’ajuste la position de mon modèle ainsi retravaillé. 22 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
23 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Ai Illustrations digitales DAO Parce que la création graphique est une passion, j’aime aussi réaliser des illustrations sur Illustrator. Celon le type et le style d’illustration et sa complexité, je peux aussi bien les réaliser en utilisant l’outil plume qu’en partant de formes géométriques que je modifie. Je joue avec les calques et leurs modes de fusion. 24 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Ici quelques exemples de créations digitales personelles . Pour chacune des illustrations digitales, je crée d’abord les illustrations sur papier que j’importe dans Illustrator. Je reproduis alors l’image à la plume et/ ou à base de forme géométriques, puis je travaille la disposition, les couleurs, les dégradés, les ombres. Je crée selon différents styles en fonction des besoins. 25 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Ps Illustrations Tablette graphique Toujours sur le thème de l’illustration, je crée parfois celles-ci sur papier puis les scanne pour les mettre en couleur sur Photoshop. Je les peins alors en utilisant une tablette graphique. Illustration d’un voyage à moto en Asie Illustration humoristique pour un militaire 26 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Ae Animation Animation 3D d'un smartphone dont chaque face a été préalablement dessinée sur Illustrator et importée dans After Effect. Les calques sont alors convertis puis passés en 3D. Certains calques sont associés en tant que parents afin d’être animés de la même manière (la face arrière et ses détails tels que l'appareil photo par exemple). J'opère des rotations sur les calques de la face arrière et des bords du smartphone afin de confectionner mon modèle 3D. J'ajoute ensuite une caméra que je vais faire évoluer autour de mon objet à des temps différents afin de réaliser un mouvement 3D de mon smartphone. J'ajoute également de la lumière projetée sur le smartphone avec une ombre projetée sur un fond coloré que j'ajoute derrière mon objet. Enfin j'ajoute un effet de raccord des tracés à chaque calque pour donner une impression de reconstitution du smartphone en temps réel. 27 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Lr Photographie Shooting & retouches Comme vu sur les créations présentées dans ce portfolio, je fais aussi de la photographie et je possède un catalogue diversifié de photographies personnelles : paysages, portraits, reportages, macrophotographie, astrophotographie, etc. Pour chacune de mes photos je règle mon appareil en fonction de la luminosité, l’exposition, le sujet. Je les post-traite alors sous Lightroom en réalisant un premier tri : puis sur chaque photo sélectionnée je corrige les paramètres de lumière, de contraste, de netteté, certaines imperfections, parfois de couleur selon l’ambiance que je souhaite donner à l’image, si elle s’y prête. 28 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Art Peinture Le dessin et la peinture, et plus particulièrement l’aquarelle, sont mes premières passions. C’est à travers leur pratique que j’ai commencé à exprimer ma créativité et à développer mon sens des proportions et du détail, l’équilibre de l’image et des couleurs. Soucieuse du détail, j’exerce l’aquarelle avec une certaine précision. 29 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
02 Projets Dev
React Site web Personnel VoyagePic.fr Afin de me former au framework React.js, j’ai conçu et développé un site web nommé VoyagePic.fr. Il s’agit d’un site web personnel de photos de voyage. J’ai étudié l’architecture du site, le parcours utilisateur, la navigation, l’ergonomie et conçu les wireframes. Puis j’ai Imaginé le design. Pour le développement du site, j’ai créé un projet React et ses modules avec npm de Node.js. Puis j’ai développé le site en HTML, SCSS / SASS, Javascript / JSX sous React.js. J’ai ensuité procédé à la vérification du bon fonctionnement et bon affichage du site. Et enfin, je l’ai mis en ligne 31 Portfolio Portfolio -- Doriane Doriane Chrétien Chrétien -- 2020 2021 Retour Sommaire
- Développement de composants pour la conception des pages et leurs fonctionnalités - Développement de classes, de fonctions et d’objets pour l’articulation des pages - Développement de routes et de transitions pour la navigation - Développement de status pour l’évolution du design des pages en fonction des interactions utilisateurs - Développement pour le Responsive design 32 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
W Les Chlorophy-liens Site web Après avoir établi les maquettes du site de l’association Les Chlorophy-liens (voir Mes projets Design), je l’ai développé. Etant un site destiné à évoluer car le projet de l’association lui-même est destiné à évoluer, j’ai décidé d’utiliser WordPress afin que l’association puisse elle-même modifier le contenu sans difficulté. J’ai créé entièrement un nouveau thème tel qu’établi dans la maquette en m’aidant de Bootstrap. Je conçois d’abord l’architecture de la page d’accueil (Html), puis j’ajoute le style (Css). Je passe ensuite à l’adaptation de ma page sur différents formats d’écran et j’ajoute mon style « responsive ». Je passe alors sur WordPress et j’y ajoute mon thème. Je modifie mon code avec le code Php spécifique à WordPress pour que celui-ci reconnaisse bien mes différentes fonctions comme la reconnaissance du menu, la publication d’articles, etc. A partir de ma page d’accueil, je crée une « page. php » qui sera la base de chaque page du site créée à partir du tableau de bord de WordPress, et je fais de même pour les articles. J’ajoute des extensions WordPress qui me facilitent la mise en place de certaines fonctions comme l’abonnement, le formulaire de contact, les galeries de photos. Je personnalise ensuite ces extensions pour mettre leur style en accord avec la charte graphique. Une fois toute la partie code mise en place, le contenu peut être inséré. Dans une première phase de test, j’insère quelques textes et photos afin de m’assurer que tout fonctionne correctement. Je débogue le site avec la fonction dédiée de mon navigateur. Puis je navigue sur le site tel que le ferait un nouveau visiteur sur tous types d’écran et navigateurs. 33 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
34 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
W C.Do Photographies Site web C.Do Photographies est mon site de photographies personnel. J’y présente mon travail de photographe amateur. J’ai d’abord conçu les maquettes du site puis je l’ai développé. Etant un site destiné à évoluer car il est prévu que j’y poste régulièrement de nouvelles photos sous forme d’articles, j’ai décidé d’utiliser WordPress. J’ai créé entièrement un nouveau thème tel qu’établi dans la maquette en m’aidant de Bootstrap. Je conçois d’abord l’architecture de la page (Html) puis j’ajoute le style (Css). Je passe ensuite à l’adaptation de ma page sur différents formats d’écran et j’ajoute mon style « responsive ». Je passe alors sur WordPress et j’y ajoute mon thème. Je modifie mon code avec le code Php spécifique à WordPress pour que celui-ci reconnaisse bien mes différentes fonctions comme la reconnaissance du menu, la publication d’articles, etc. A partir de ma page d’accueil, je crée une « page.php » qui sera la base de chaque page du site créée à partir du tableau de bord de WordPress et je fais de même pour les articles et catégories. J’ajoute des extensions WordPress qui me facilitent la mise en place de certaines fonctions comme l’abonnement, le formulaire de contact, les galeries de photos. Je personnalise ensuite ces extensions pour mettre leur style en accord avec ma charte graphique. Une fois toute la partie code mise en place, je peux insérer le contenu. Dans une première phase de test j’insère quelques textes et photos afin de m’assurer que tout fonctionne correctement. Je débogue mon site avec la fonction dédiée de mon navigateur, ensuite je navigue sur mon site tel que le ferait un nouveau visiteur sur tous types d’écran et navigateurs. 35 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
36 Portfolio - Doriane Chrétien - 2021 Retour Sommaire
Merci ! Doriane Chrétien 2021
Vous pouvez aussi lire