FLORENT CHATELET Design graphique - Portfolio-florent-chatelet
←
→
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
FLORENT CHATELET
Design graphique
BOOK 2021
Bienvenue
Je m’appelle Florent Chatelet et ceci est mon
portfolio.
Vous pouvez me contacter à ces adresses :
Mail : florent.chatelet@gmail.com
Téléphone : 0750404807
Linkedin : /in/florent-chatelet
Mon portfolio en ligne est en cour de refonte et ne
sera peut être pas en ligne au moment de la réception
de ce dossier : florentchatelet.fr
2 3
S
P.6 Huawei - WATCH GT2 / GT2 PRO
Travail de Web design et d’illustrations
dans la création d’un site e-commerce sur
O
Wordpress en développant notre thème.
Novembre 2020 / Mars 2021
P.8 Principes de GESTALT
Chèr(e) lecteur/lectrice
M
Création d’un livret graphique regroupant
expliquant et illustrant les 6 lois de la
Ce book est destiné à présenter différents projets perception visuelle.
scolaires, professionnels et personnels que j’ai pu réaliser
M
Novembre 2020
au cours de ma dernière année en Licence Profesionnelle
de WebDesign ainsi que mes deux années de DUT Métiers
de l’Internet et du Multimédia. P.10 Musée d’Orsay
Refonte visuelle et travail d’ergonomie
A
Je dessine depuis mon plus jeune âge et mon attrait pour
du site du musée d’Orsay ainsi que son
l’art et le design s’est grandement développé en entrant
identité graphique.
en MMI. J’ai profité de mes trois années d’études pour
Décembre 2020 - Juin 2021
apprendre le web design, le graphisme, l’illustration, le
branding, le développement web et le motion design.
I
P.12 L’importance des abeilles
C’est dans tous ces domaines que j’effectue régulièrement
ma veille et dans lesquels j’aspire à me perfectionner tant Création d’interface de borne de musée,
pour mon développement professionnel que personnel. d’illustrations et simulation de l’utilisation
R
en motion design.
Je vous souhaite une agréable lecture. J’espère que cet Décembre 2019
ouvrage vous permettra de cerner qui je suis au travers de
mes projets personnels et universitaires.
P.14 Travaux personnels
E
Réalisation de dessins, d’illustrations et
d’affiches personnelles / professionnelle(s)
et de design génératif sur mon temps libre.
Depuis 2 ans
4 5
Huawei
Watch GT2
ainsi que pour leur nature
rassurante et associée à la
technologie. Les dominantes
sont le blanc pour la page de
Projet universitaire la GT2 et fond sombre pour
la GT2 PRO pour l’aspect pre-
Webdesign, identité visuelle,
mium. Nous avons créé un
audit, illustrations, e-commerce, Styleguide pour faciliter la
dev. thème Wordpress création de la maquette.
Groupe de 4 : 2 designers 2
Lors de la phase de déve-
développeurs
Date: Nov 2020 - Mars 2021
loppement, j’ai apporté les
Outils : Figma - Illustrator -
correctifs sur la maquette
HTML/CSS/PHP - Wordpress et créé des illustrations
pour la page de remercie- Styleguide du site
mentt, le panier de com-
Contexte mande (vide) et la page
404. J’ai joué sur la montre
Huawei Watch est un site dans chacunes de ces illus-
e-commerce de la Huawei concurrentielle afin d’affiner chaque modèle. Ces pages trations.
Watch GT2 et de la GT2 PRO. nos recherches. doivent provoquer un “Wow
j’ai assuré le rôle de webdesi- Enfin, Nous avons créé 3 per- effect” en restant simples
gner ainsi que de graphiste. sonas pour déterminer les at- pour correspondre à toutes
tentes des utilisateurs. nos cibles.
BILAN
Processus de Ce projet m’a permis de soli-
Nous avons ensuite créé les J’ai rendu la page de person- difier mes compétences en :
création wireframes des pages desktop nalisation de la montre plus - Réflexion UX et UI design
La première étape fut de ras- et mobile du site en prenant dynamique avec un fond de
- Conception d’interface
sembler nos idées dans un compte de l’importance des couleur qui s’adaptera à celle
brainstorming éléments de Call To Action du bracelet sélectionné. - Illustrations pour le web
pour l’achat de la montre. - Développement Wordpress
Le fait que chacun fasse sa Pour la partie design, j’ai créé
proposition nous a permis de En vendant 2 gammes de une harmonie colorée basée
conserver les meilleures idées. montres, j’ai fait deux versions sur les couleurs bleu et violet
Je me suis occupé de l’analyse de la page d’accueil pour pour leur bonne combinaison Aperçus du site final
Le site est disponible à l’adresse :
https://huawei-watch.florentchatelet.fr/
Aperçu des wireframes du site Croquis et illustration finale de la page de de remerciements
6 7
Principes de
GESTALT
en plus d’être des couleurs Je compte appliquer ces prin-
propices au thème de l’eau.
BILAN cipes dans mes futurs travaux
J’ai joué sur les formes et dis- J’ai découvert à quel point et créer des interfaces plus
positions des éléments pour l’utilisation des espaces et des intuitives. J’ai aussi acquis de
Projet universitaire respecter chaque lois de formes et leur dispositions l’expérience en communica-
GESTALT. sont impactantes dans le tra- tion visuelle grâce à ces
Charte graphique, graphisme vail de Webdesign. illustrations.
Groupe de 3 : 1 Graphiste, 1
rédaction, 1 mise en page
Date: Nov 2020
Outils : Tablette graphique,
Illustrator
Nous devions prendre 6 de
Contexte ces lois pour en faire un court
Processus de
Les principes de la Gestalt livret explicatif. Il fallait éga- création
(« forme » en allemand) sont lement montrer comment
des lois décrivant la manière ces lois sont appliquées J’ai donnée un univers au li-
dont nous interprétons ce que dans le web design avec des vret pour que toutes les illus-
nous voyons : notre cerveau exemples. Étant le graphiste trations suivent une même
reconnaît, regroupe et simpli- du groupe, j’avais pour objec- charte graphique. J’ai donc
fie les formes complexes qu’il tif d’illustrer chacune de ces choisi l’univers marin. : C’est Principe de Similarité Principe de Proximité Principe de Destin
perçoit pour se repérer dans lois visuelles pour accompa- un thème sain et universel qui Commun
son milieu. gner leur définition. offre une grande liberté créa-
tive, ce que j’ai jugé primordial
si je voulais illustrer les 6 lois
visuelles.
C’est aussi un moyen de
Pour représenter la loi de rendre la lecture ludique pour
Similarité, j’ai regroupé et le lecteur : il observe à chaque
aligné des écailles, schéma page comment le thème sera
naturellement répétitif sur le exploité pour représenter les
poisson. principes de Gestalt.
Leur forme, orientation, taille
identiques et leur proximité Pour l’harmonie colorée, j’ai
nous permet de les assimiler choisi les couleurs bleu cyan
ensemble visuellement. avec un violet sur fond proche
du noir. Comme dans le pro-
jet précédent, ces couleurs
inspirent calme et rassurance
Principe de Closure Principe de Symétrie Principe de Continuité
8 9
Musée Après avoir étudié les règles
de l’UX propres aux musées
d’Orsay
via un benchmark sur Invision,
j’ai créé les maquettes ordina-
teur et mobile.
La page d’accueil met en
Projet universitaire avant les dernières exposi-
tions et actualités du site, in-
Webdesign, identité visuelle,
formations qui étaient trop Styleguide de la maquette du site
audit, dev. thème Wordpress
peu visibles sur le site de base.
Projet individuel Le bouton d’achat de billets
Date: Dec 2020 - Juin 2021 est visible en permanence
Outils : Figma - Illustrator dans la barre de navigation
pour faciliter l’accès à la page
de réservation.
Pour les pages d’oeuvres
Contexte individuelles, j’ai fait appa-
Le principe est de choisir un Processus de Pour la charte graphique, j’ai raître les termes techniques
avec des icônes pour l’accès
site existant et d’en faire la créé une harmonie colorée
refonte graphique et de le dé- création basée sur le blanc et le rouge à l’information. Une liste des
velopper sous Wordpress en J’ai listé tous les problèmes du site de base afin d’avoir une oeuvres du même artiste est
codant notre propre thème. esthétiques et ergonomiques interface épurée. J’ai égale- affichée en bas de page pour
du site existant : les textes et ment choisi des typographies faciliter la navigation.
J’ai choisi le site du musée les images sont de trop petite plus grandes et plus grasses
d’Orsay. Il est très complet taille et le contenu ne tient dans l’optique de faciliter la De manière générale, le
avec beaucoup de contenu, que sur la moitié de l’écran, lecture des textes. contenu occupe une plus
c’est pourquoi il me sem- rendant la lecture trop com- grande partie de l’écran à l’in-
blait être un bon sujet d’UX/ pliquée. J’ai refait le logo du musée verse du site de base.
UI design. Il me permettra de avec une typographie plus
me frotter à la technologie L’objectif est de rendre l’uti- grasse pour être en accord
Wordpress lors du dévelop- lisation du site la plus simple avec les nouvelles typogra-
Page d’accueil et d’une oeuvre
pement. possible. phies et pour l’intégrer plus
facilement dans la maquette.
BILAN
Créer l’interface du site d’un
musée est complexe mais
cela m’a permis de renforcer
mes compétence en UX et de
J’ai conservé les lettres, barre
sortir de ma zone de confort.
et apostrophe du logo en les
Aperçu du site existant, ici une page d’une oeuvre arrangeant sur l’horizontale. Page de liste des exposition et d’un artiste
10 11
BILAN
L’importance Concernant l’aspect gra-
phique, j’ai dessiné les sketchs
J’ai fait l’animation en simulant
un parcours utilisateur clas-
J’ai beaucoup aimé ce projet
car j’ai pu créer une expé-
des abeilles de mes illustrations avec ma
tablette graphique. Je les ai
refait sur Illustrator en gérant
sique. Pour certains mouve-
ments comme les battements
d’ailes, j’ai utilisé des calques
rience interactive librement.
C’est le projet qui m’a fait
monter en compténces sur
Projet universitaire les calques afin de pouvoir les 3D pour un meilleur rendu.. Illustrator et After Effects.
animer sur After Effects.
UI/UX Design, Design interactif,
illustrations, motion design
Projet individuel
Date: Dec 2019
Outils : Tablette graphique,
Illustrator, After Effects
Contexte
Chaque plan est dessiné au brouillon sur tablette graphique.
Pour l’examen final de mo- L’utilisateur défile la barre
tion design de mon semeste
Processus de verticale correspondant à
d’études au Canada, je devais création une époque passée, pré-
créer une interface de borne sente ou future. Les ques-
muséale et en faire une ani- J’ai d’abord dessiné les cro- tions correspondent aux
mation d’environ 2 minutes quis de ce que sera l’interface enjeux de l’époque choisie.
simulant son utilisation. et son fonctionnement. L’ob- Ainsi les questions dans le
jectif de la borne est de ré- futur portent sur les consé-
Le thème étant libre, j’ai pondre à des questions sur les quences d’un monde sans
fait une borne interactive abeilles avec des animations abeilles. La navigation doit
mettant en avant l’impor- et textes explicatifs. être simple et ludique. Je repasse sur chaque dessin en ajoutant les couleurs/textures en préparant les calques pour l’animation.
tance des abeilles.
Chaque plan est scénarisé, ici l’animation d’un parasite infectant une abeille dans son alvéole.
Le menu principal est simple avec des boutons
visibles et une instruction en une phrase. L’utilisa-
teur choisit la question qui l’intéresse ou fait glis-
Ecran du menu principal avec Animation répondant à la Les textes s’ouvrent automa- ser la barre latérale.
les questions cliquables et la question choisie. Le bouton + tiquement à la fin de l’ani-
barre latéralle pour changer fait afficher les explications en mation. Une autre question
La vidéo est disponible sur Youtube en tapant
l’époque et les questions réponse à la question. apparaît pour voir une autre
dans la recherche ou en cliquant :
affichées animation.
Florent chatelet L’importance des
abeilles
12 13
Travaux
personnels
En dehors de mes travaux universitaires, j’aime m’exer-
cer dans les domaines créatifs personnels ou décou-
verts durant ma dormation qui m’intéressent.
Je réalise beaucoup d’illustrations et de dessins. Je des-
sine principalement sur tablette graphique ou sur Illus-
trator. Parmis ces travaux, j’ai réalisé une affiche de fes-
tival de musique local pour une association étudiante
venue me commanditer. J’essaie également des styles
comme celui du constructivisme russe, un mouvement
que j’apprécie beaucoup.
Je créée aussi des animations en motion design, des
logos et j’expérimente le design génératif. Ci-dessus
j’ai généré alératoirement en Javascript avec la librairie
THREE.js des parallélépipèdes rectangle 3D.
Le design est un domaine très vaste que j’ai plaisir à dé-
couvrir, où je peux exprimer ma créativité sans limites
et de toutes les manières possibles.
14 15
Vous pouvez aussi lire
