Recommandé
Recommandé
Contenu connexe
Similaire à Portfolio . Lesueur Jean-Denis
Similaire à Portfolio . Lesueur Jean-Denis (20)
Portfolio . Lesueur Jean-Denis
- 3. page2. Apropos demoi Apropos demon book Chaque création que vous allez voir ont été réalisé dans des contextes différents. La majorité a vu le jour dans le cadre de mes études. Ainsi, vous retrouverezAinsi, vous retrouverez dans ce book les créations dont j’ai été le plus fière de présenter durant mon cursus. Mais pas que... Les créations les plus conséquentes et les plus abouties sont à l’inverseabouties sont à l’inverse des projets personnels, réalisés hors études tel que BXLRAP ou ÖCTAGON. Ce book fait dorénavant parti de mes projets personnels, un projet que je considère comme une pure création. Un book est très personnel. C’est pourquoi je pense qu’il est important d’exploiter auimportant d’exploiter au maximum ses compétences, son imagination et de créer quelque chose d’unique qui nous correspond. Mon approche du book est assez spirituelle je dirais. Je le perçois comme étant le reflet de l’âme et c’est à travers cette idée que j’ai imaginé sa structure. Vous avez peut-êtreVous avez peut-être remarqué avant même d’avoir ouvert le livre que la page de couverture et le dos étaient connectées par la simple présence d’une personne. Cela à pour but de me représenter.de me représenter. Sur la page de couverture, on m’aperçoit donc vue de face et sur le dos du livre, vue de dos. Symboliquement, vous êtesSymboliquement, vous êtes face à une invitation, par mon approche sur la couverture tandis que sur le dos du livre, ma posture permet d’accentué un effet de mouvement, de fuite, comprenez par-là que jecomprenez par-là que je pars au loin, laissant derrière moi tout ce que vous avez pu voir en parcourant mon book. La lecture est alors terminée. Le tout étant relié par ce qui se trouve à l’intèrieur du livre, le contenu. Ainsi, ce qui figure en couverture me représente moi, physiquement et ce qui se trouve à l’intérieur n’est autre que moi.n’est autre que moi. Pour reprendre cette idée de spiritualité, mon âme. Et c’est pourquoi en tout début, lors de l’initialisation, j’ai insisté sur le fait que si vous tourniez la page de couverture, vous vous engagiez, en acceptant mon invitation, à lire le bookinvitation, à lire le book dans son intégralité et que pour y mettre fin, il fallait obligatoirement arriver jusqu’au dos du livre en ayant tout regardé. Seulement là, tout comme moi, il vous seracomme moi, il vous sera possible de partir. Je suis Jean-Denis Lesueur, jeune web et graphic designer de 23 ans, récemment diplômé d’un DUT MMI, aujourd’hui à la recherche d’opportunités. J’aime être informé desJ’aime être informé des dernières tendances, du web comme du print. Il est important selon moi de se consacrer un minimum de tps par semaine pour de la simple recherche, s’inspirer, lire dess’inspirer, lire des articles, dans un but purement productif. Mais pour être réellement efficace et proposer des travaux originaux et différents les uns des autres, il est primordialautres, il est primordial selon moi, d’élargir sa curiosité à des milieux qui peuvent susciter l’intérêt (pour moi la mode et la musique sont de parfaits exemples). En plus de mon book, vous trouverez unbook, vous trouverez un lien behance page 47 vous permettant d’accéder autrement à mes créations. Ce que ce livre propose est une liste subjective de diverses idées exploitées pour renforcer la qualité de mon travail.
- 5. PARTIBXLRAP2019page4 ... ....../ BXLRAP est un concept....../ BXLRAP est un concept de site internet mettant en avant la scène francophone belge. C’est à la fois un site informatif, vous permettant d’explorer et découvrir de nombreux artistes tel que Damso, Shay ou encore Blu Samu.Damso, Shay ou encore Blu Samu. Mais c’est aussi une plateforme d’écoute en streaming accessible directement sur le site, via la radio BXLRAP intégrée sur chaque page de navigation, sur ordinateur comme sur mobile. Ce premier projet est laCe premier projet est la création et le design de ce concept, BXLRAP. Graphic design Webdesign
- 6. Après de nombreuses versions et déclinaisons de la page d’accueil, vous apercevez ici l’identitée visuelle finale retenue pour BXLRAP, On y retrouve tous les éléments propre à une homepage basique, un menu, un footer, un lien pour se connecter ainsi que plusieurs artistes mis en avant dans un slider (en haut,mis en avant dans un slider (en haut, JeanJass et sur la droite, Angele). À cela, j’y ai rajouté une radio BXLRAP accessible sur toutes les pages du site ainsi qu’une liste d’artistes belges aussi accessible sur toutes les pages en cliquant sur le pictograme situé en haut à droite.droite. HomeBxlRap Identitéevisuelle page5
- 7. Pour toucher un maximum de personnes il est nécessaire de proposer une version mobile du site. C’est une version complétement repensée par sa structure afin de satisfaire au mieux l’expérience utilisateur.l’expérience utilisateur. Ainsi la totalité du contenu figurant sur la version ordinateur a été adapté différemment pour la version mobile, et pour certaines parties, enlevées. Le but étant de faciliterétant de faciliter l’utilisation du site et d’alléger un maximum le contenu afin d’améliorer la navigation. page6 Responsive design Wireframe
- 8. Voici la première page de navigation du site qui vous est présentée, accessible via le menu sur la page d’accueil. CHARTS est une pageCHARTS est une page consacrée aux classements et aux récompenses des artistes. Ici, on y voit le classement « TOP STREAM » des artistes belges lesartistes belges les plus écoutés sur Spotify. En cliquant sur le nom d’un artiste figurant dans le classement, l’utilisateur prendl’utilisateur prend connaissance du nombre d’auditeurs mensuel ainsi que du nombre d’abonnés. page7
- 9. page8
- 10. page9
- 11. page10
- 12. PARTIIDATAVIZ2018page11 ... ....../....../ Classement des 10 meilleurs skateurs de tous les temps selon un article de TheRiderPost imaginé sous forme de Dataviz graphique ou inventaire. Graphic design Printdesign
- 13. page12
- 14. page13
- 15. page14
- 16. Cet inventaire, réalisé dans le cadre d’un TP, répertorie les 10 plus grands skateurs toutes générations confondues. La mise en page repose surLa mise en page repose sur une structure assez basique mais s’avère être plutôt efficace à la lecture. On y retrouve donc les 10On y retrouve donc les 10 skateurs en question, chacun présenté dans un bloc de couleur différent accompagné d’un texte descriptif (ref TheRiderPost). Mais la particularité deMais la particularité de cette structure repose sur la mise en avant des skateurs que j’ai choisi d’incruster dans chacune des lettres composant le mot SKATEBOARD. Par chance, ce mot estPar chance, ce mot est composé d’exactement 10 lettres, ce qui m’a permis de réaliser cette dataviz de la sorte. Dataviz/Planche Classementdes10 meilleursskateursde touslestemps page15
- 17. ... ....../....../ Création de bannières pour le site du club de foot de Strasbourg réalisés dans le cadre d’un exercice d’évaluation de mes compétences par un employeur.employeur. Graphic design PARTIIITESTBAN2019page16
- 19. PARTIVTROYES2018page18 ... ....../....../ Refonte graphique intégral du site de la ville de Troyes réalisée durant un stage de fin d’étude dans un cadre professionnel. Aucune contrainteAucune contrainte particulière imposée, le seul mot d’ordre était liberté. Graphic design Webdesign ui/ux
- 20. Ce projet est ma première expérience individuelle en tant que web designer maquettiste dans un cadre professionnel. Cela m’a permis de tester mes compétencestester mes compétences dans le domaine, de développer ma concentration à écouter, à comprendre les attentes d’un client. L’enjeu majeur qu’il y a eu autour de ce projet n’a pas été un frein pour moi, bien au contraire. Je vois chaque demande comme une opportunité d’alimenter etd’alimenter et d’exploiter ma créativité. Peu importe la demande, c’est un nouveau challenge. Homepagedusite delavilledeTroyes page19
- 21. La première et principale difficulté rencontrée, celle qui me suivra pendant toute la réalisation de cette refonte graphique, n’est autre que l’utilisateur. Les sites de collectivité locale doivent être aussi simples et intuitifs à visiter pour un étudiant comme pour une personne âgée. Ce pourquoi j’ai réfléchi pourâgée. Ce pourquoi j’ai réfléchi pour adapter certain contenu en fonction des âges mais aussi des supports. Ainsi les deux captures que vous apercevez ont été réalisé dans cette optique d’améliorer l’expérience utilisateur. Expérience utilisateur page20
- 22. Alaune! Toimemetu sors! Maquette de la page Actualité accessible à partir de la page d’accueil. page21
- 24. PARTVRAULDUKE2019page23 ... ....../....../ Portrait d’un personnage de fiction, Raul Duke interprété par Johnny Depp dans Las Vegas Parano, réalisé au crayon à papier. Draw
- 25. page24
- 26. ... ....../ Lancement d’une campagne digitale entre deux grandes marques américaines, Nike et Tesla. Sujet: En 2024, Nike etSujet: En 2024, Nike et Tesla lancent un partenariat un jeu concours pour remporter un voyage spatial et les célèbres Nike Mag de Retour vers le Futur. Ce sujet ayant été traitéCe sujet ayant été traité en cours, avait pour but d’apprendre à définir et mettre en oeuvre un dispositif marketing. GraphicDesign Marketing PARTVINIKEXTESLA2019page25
- 27. page26 Pour la présentation de cet exercice réalisé en cours, les textes originaux ont été repris puis ajusté dans ce book, dans le but de vous rendre plus agréable la lecture et d’apporter le maximumet d’apporter le maximum d’explication. L’objectif étant de justifier les choix qui ont été fait pour cette campagne fictive. Puisqu’il s’agit d’un exercice de marketing, l’argumentation est aussi importante que l’aspect graphique.
- 28. page27 Cette campagne consiste à mettre en avant à travers deux dispositions différentes, mais tout en utilisant une identité graphique identique, la célèbre paire de NIKE AIRMAG pour NIKE, et la mythiquepour NIKE, et la mythique DELOREAN de Retour vers le futur pour la marque TESLA. Bien que celle-ci n’ai été commercialisé par la firme américaine à l’époque, elle est aujourd’hui plus que jamais à l’ordre du jour chez le fabricant américain, notamment avec l’une des dernières nouveautés, ladernières nouveautés, la TESLA MODEL X, qui sans nul doute, rappellera chez certains, la DELOREAN. Les deux visuels sur la droite sont comme dit précédemment graphiquement identiques. Pour TESLA et NIKE, on retrouve en commun le même style, la même phrase d’accroche, seul le contenu diffère en fonctioncontenu diffère en fonction de la marque. Le logo en background est respectif à chaque marque, les fonds utilisés pour les deux marques correspondent soit à l’identité de la marque (TESLA) soit directement au produit (NIKE AIRMAG).AIRMAG). Les réseaux sociaux sur lesquels je me suis orienté, Instagram et Facebook, sont selon moi ceux qui cibleront le plus de personnes entre 20 et 40 ans, Hommes et Femmes confondus. D’où le choix de décliner les visuels commedécliner les visuels comme ci-dessus sur un format Facebook (1200x630 pixels), et ci-dessous sur une story Instagram (1080x1920 pixels). Le format Facebook correspond à une image partagée sur le mur. L’avantage de ce format estL’avantage de ce format est qu’il est suffisamment grand pour mettre en avant le visuel à la fois sur ordinateur mais aussi sur smartphone. Facebook étant le 2ème média le plus utilisé en France par les internautes. En 4ème position des médias sociaux les plus utilisés arrive Instagram. Principalement utilisé surPrincipalement utilisé sur smartphone, Instagram, contrairement à Facebook, a l’avantage de cibler une tranche d’âge spécifique: celle du jeune public (15-25 ans). C’est aussi un moyenC’est aussi un moyen efficace de publier du contenu de qualité mais surtout de le visionner n’importe où, n’importe quand, d’un simple geste, via son smartphone.
- 29. page28 J’ai évoqué sur la page précédente la phrase d’accroche, celle-ci est la même pour les deux déclinaisons. C’est évidemment un clinC’est évidemment un clin d’œil pour les films Retour vers le futur des années 80 dans lesquels on découvrait la DELOREAN en 85 et la NIKE AIRMAG, quelques années après, en 89.89. On peut constater aussi que la disposition du visuel central est inversée entre les deux marques. L’unique but de cette inversion est de faire le parallèle entre les deux marques pour lales deux marques pour la campagne et de donner cette impression de complémentarité, de collaboration.
- 30. page29 Version du visuel présentant l’évènement de manière plus subtile mais surtout plus graphique. Pourquoi pas y intégrer une animation pour dynamiser le visuel.dynamiser le visuel. Concrètement avec cette mise en page, pour le site comme pour la story Instagram, le but est de mettre en avant la collaboration NIKE x TESLA sur un seul etTESLA sur un seul et même visuel.
- 31. page30 Au final, on obtient un visuel assez minimaliste pour la campagne mais qui selon moi se rapproche assez bien des deux firmes, On a quelque chose d’épuré, de tendance, qui met en avant pour une première campagnepour une première campagne les informations les plus importantes (en supposant que d’autres campagnes soient prévus à l’avenir). L’utilisation des réseaux sociaux Facebook et Instagram sont selon moi les choix les plus pertinents car ils permettent de diffuser efficacement du contenu, et parfois de cibler plus facilementcibler plus facilement certains types de consommateurs. D’autres démarches commerciales peuvent être envisagées dans le cadre de cette collaboration NIKExTESLA. Eventuellement la créationEventuellement la création d’une collection «capsule» limitée de vêtements à l’effigie de leur collaboration ou l’implantation d’une boutique éphémère sur une durée limitée. Ou mêmedurée limitée. Ou même pourquoi pas, lancer pour chaque marque une série de produits inédits ou existants, qui lors de l’achat en boutique, sur une quantité limitée d’échantillons, peut vousd’échantillons, peut vous faire gagner un billet pour le voyage en question, une sorte de Golden Ticket. L’idée principale de cette campagne créé à l’occasion de la collaboration NIKExTESLA n’est pas de mettre l’accent directement sur le côté futuriste ou voyage dans l’espace mais plutôt de mettre en avantplutôt de mettre en avant d’une manière plus commerciale le partenariat entre les deux marques. D’abord visuellement, avec un choix graphique tendance, à la limite du style urbain actuel. Comme évoqué plusactuel. Comme évoqué plus haut, le choix des couleurs reflète soit l’identité de la marque, soit le produit lui-même. Ensuite, il y a cette approche différente selon la marque avec ce choix de disposition inverséchoix de disposition inversé du contenu qui se traduit en définitive comme une complémentarité.
- 32. PARTVIILANDOWSKI2018page31 ... ....../ Refonte du site du conservatoire Marcel Landowski. Maquettes réalisées durant mon stage de fin d’études. Cette refonte graphiqueCette refonte graphique m’a permis de travailler sur quelque chose d’inconnu mêlant plusieurs disciplines (dance classique, musique et théâtr). Ainsi j’ai pu appréhender de nouvellesappréhender de nouvelles contraintes. L’élégance fut le mot d’ordre pour cette refonte. GraphicDesign WebDesign ui/ux
- 33. Dernier projet réalisé au sein de la mairie de Troyes, cette fois-ci pour une demande externe. C’est certainement le projet sur lequelC’est certainement le projet sur lequel j’ai été le plus inspiré, non pas parce qu’il a été plus simple mais tout simplement parce que je me suis senti plus libre d’exprimer mes idées et surtout moins contraint à me plier à des codes spécifiques comme pour le site ville.ville. Il est aussi important de souligner qu’il y eut moins de directive sur cette refonte que sur les autres, ce qui a sûrement impactée sur mon travail. page32
- 34. page33 La principale demande pour la refonte du site est de mettre en avant dès lors qu’un utilisateur arrive sur la page les « thèmes » dit aussi enseignements pratiqués au conservatoire tel que la musique, la danse et le théâtre.théâtre.
- 35. Menu page34
- 37. ... ....../ Öctagon Hardware Corp....../ Öctagon Hardware Corp est une marque de skate et de vêtement, identifiable par son logo octogonal. C’est une marque peu connu par le grand publique mais dans le monde du skateboarding, elle à su se faire respecter. Des vêtementsfaire respecter. Des vêtements originaux, des collections futuristes et du contenu innovant ont fait d’Öctagon une marque à part entière. C’est la raison pour laquelle j’ai souhaité créer à ma manière une déclinaison graphique du site existant, en insistant sur le côté futuriste et innovant de la marque. Graphic design Webdesign PARTIEVIIIÖCTAGONHARWARECORP2018page36
- 39. Öctagon hardware corporation est le second projet personnel le plus aboutis et détaillé graphiquement que j’ai réalisé afin d’étoffer le contenu de monle contenu de mon book. Il s’agit d’une refonte graphique complète du site de la marque. Tout en gardant l’esprit futuriste et novateur de la marque, j’ai opté pour un visuel plus agressif à dominante rouge, couleur présente sur d’anciennesd’anciennes collections d’Öctagon. Nous avons ici la page d’accueil du site divisée en plusieurs parties. Au top, la présentation de la marque via le logo, suivi d’une vidéo, (domaine où la marque(domaine où la marque excelle), puis, d’une partie mettant en avant chaque membre de l’équipe Öctagon. Pour finir, il y a un accès rapide pour accéder à la boutique en lignela boutique en ligne via le lien SHOP ÖCTAGON, suivie d’un formulaire pour s’abonner à la newsletter. page38
- 40. page39
- 41. page40
- 43. page42
- 44. ... ....../....../ Composition de projets, en cours pour certains, visant dans un premier temps à me présenter mais le réel but est de trouver ma propre identitée graphique.graphique. Le book fait dorénavant parti de mon identité. GraphicDesign WebDesign Print PARTIEIXIDENTITY20192020page43
- 45. page44
- 46. page45
- 47. page46 Ébauches d’un projet en cours. Celui de créer mon book ou portfolio en ligne. Le principe est simple. C’est un onepageC’est un onepage verticale avec une partie principale composée de plusieurs blocs (qu’on pourra aussi définir comme slide): l’écran d’accueil (1d’accueil (1er capt), work (2e capt), about et contact. Le second bloc (2e capt), work, est intégré sur la page comme une liste sur laquelle défile chaque projet. Les seulesprojet. Les seules pages internes proviendront donc de cette liste. Suivi de cette liste, les blocs about et contact. Techniquement, l’intégration du site tel que je l’ai imaginé est un peu plus complexe. L’utilisateur doit avoir la possibilité d’accéder rapidement à ce qu’ilrapidement à ce qu’il veut, soit en cliquant sur un lien (via le menu ou via la navigation verticale situé à droite), soit en donnant un léger coup de molette vers lecoup de molette vers le bas pour ainsi amener le contenu situé hors de l’écran au centre de la page. L’idée est d’avoir une page toujours fixe, sans scrollbar sur la droite, mais pour autant, pas moins dynamique qu’une navigation «classique» avec un contenu quiavec un contenu qui apparait, de manière assistée, par un simple geste de l’utilisateur.
- 49. LESUEUR JEAN-DENIS BOOK2KV1 ©2020 DERNIÈRE MISE À JOUR EFFECTUÉE LE: 23.06.2020 02:28:54 UTC+01:00
- 50. Portfolio imaginé et designé par LESUEUR JEAN-DENIS