Edouard Sastre PORT FOLIO

Transcription

1 Edouard Sastre PORT FOLIO

2 2

3 EDOUARD SASTRE Portefolio edouardsastre.com

4 4

5 SOMMAIRE Intripid Design Concept Projet professionnel 6 Hermès Redesign Concept Projet personnel 10 Association Les Femmes Sauvages Projet scolaire 16 Prix Émile Hermès Projet professionnel 18 Mash-up Series Projet scolaire 22 Autoportrait Projet personnel 24 Souveraines Projet personnel 26 5

6 6

7 Projet professionnel Intripid Design Concept «Intripid» est une application proposant des défis et activités amusantes dans des bars, restaurants et autres lieux parisiens insolites. Les joueurs sont ammenés à gagner des points et remporter des cadeaux de différentes valeurs. J ai eu pour mission de réaliser l ergonomie et le design de cette application UX & Webdesign 7

8 Approche Ma première étape fut de réaliser des croquis avec le client. Le principe étant de géolocaliser les défis et activités les plus proches, nous sommes partis sur l idée d une carte. Finalement, pour des raisons techniques, nous avons opté pour un système de liste. Design Pour le design, je me suis orienté vers une esthétique épurée avec des formes géométriques droites, angulaires façon «flat design» et des couleurs douces. Comme l application offre de nombreuses fonctionnalités, la navigation devait être intuitive et facile d accès. Par exemple, pour les écrans affichant les Défis, ceux-ci sont découpés en deux colonnes. 8

9 MAIN MENU Le menu principal affiche le profil de l utilisateur et les liens principaux. Certains écrans comme les Filtres ou les Règles sont basés sur le même model. 9

10 10

11 Projet personnel Hermès Redesign Concept Suite à mon stage au sein du département digital d Hermès International, je me suis donné comme objectif de proposer un design et une ergonomie modernisés pour le site web de la maison Hermès tout en préservant l esprit de la marque Webdesign Hermès Redesign Concept 11

12 Approche Après différentes analyses j ai choisi une approche «mobile first» pour concevoir un design fonctionnel, épuré et accessible sur différents supports. L utilisateur entre dans l univers Hermès de façon ludique et intuitive tout en ayant la possibilité d acheter en ligne. 12 Hermès Redesign Concept

13 Choix artistiques Le orange Hermès associé au blanc et gris viennent souligner les visuels. La typographie script d Hermès n est utilisée que ponctuellement et laisse place à des typographies sans-sérif plus lisibles et discrètes. Home page L en-tête évoque la boutique historique du 24, Faubourg Saint-Honoré à Paris. Une grille modulable de trois colonnes permet d accéder aux différents contenus du site. Hermès Redesign Concept 13

14 Boutique en ligne La partie e-commerce du site présente les derniers produits Hermès mis en vente. Version desktop Version mobile Croquis de la version mobile Maquettes d après croquis 14 Hermès Redesign Concept La recherche par filtres ouvre un menu latéral.

15 Page Produit Fiche détaillée d un produit. Les informations essentielles du produit avec des visuels forts sont visibles en premier. Un scroll vers le bas dévoile plus d informations sur l objet. La Flânerie Sur mobile, les boutons d achat et de favoris sont fixés en bas de l écran. Cela permet à l utilisateur d avoir toujours les actions essentielles à portée de doigt. Chez Hermès, la flânerie est le thème de l année Pour retrouver cet esprit sur le site, je me suis inspiré du Xcross Media Bar developpé par Sony. Dans une navigation très épurée, l internaute swipe verticalement pour changer d objet et latéralement pour changer de catégorie. Il peut alors flâner dans le site avec comme seule action celle d ajouter à son panier les objets qui le séduisent. Hermès Redesign Concept 15

16 Projet scolaire Association Les Femmes Sauvages 2015 Webdesign & Développement Web Mon rôle - Chef de projet - Directeur technique J ai réalisé les croquis, zonings et wireframes du site tout guidant l élaboration de la solution technique, comme la création du back-office, et en participant à la direction artistique de l association. Page d acceuil du site. Dernières actualités de l association ainsi qu une courte vidéo réalisée par nos soins, expliquant ses valeurs. 16 Les Femmes Sauvages Wireframe Maquette

17 Réalisé dans le cadre scolaire, ce projet avait pour but de conçevoir l identité et le site web de l association culturelle Les Femmes Sauvages pour la promotion de leurs installations multimédia. Choix artistiques - Ergonomie intuitive - Dualité rouge et bleue Sur n importe quelle page du site, le bloc «Faire un don» est présent dans le pied de page pour participer au financement de l association. Ergonomie et esthétique modernes répondent au besoin de visibilité du client. La bichromie rouge et bleue guide la lecture et transmet les valeurs de l association : la lutte face à l opression et la réflexion. Les Femmes Sauvages 17

18 18 Prix Émile Hermès

19 Projet professionnel Prix Émile Hermès Au cours de mon stage chez Hermès j ai eu l occasion de participer à la refonte du site web du Prix Émile Hermès. Programme de la Fondation d entreprise Hermès en faveur du design, il était nécessaire de proposer une version du site moderne et durable pour permettre aux designers de participer efficacement au prix UX & Webdesign 19

20 Contraintes - Respecter la charte graphique précédemment établie. - Tenir compte des contraintes techniques et des délais - Respecter l importante quantité des contenus textuels Concept - Site web en navigation et défilement horizontal - Le site représente la «table du designer» avec des outils typiques posés dessus que l internaute découvre au scroll Le site se déroule de manière horizontale sur grand écran et tablette et chaque écran contient des informations relatives au concours. Mon concept a séduit les responsables de la Fondation et j ai ainsi pu travailler avec l agence sur la réalisation des maquettes. Extrait du site web actuel du Prix Émile Hermès. Wreframes de chaque écrans du site web avec quelques éléments graphiques, réalisés à l aide du logiciel collaboratif UXPin. 20 Prix Émile Hermès

21 Nouvelle page d accueil du site Prix émile Hermès. Le site se découvre horizontalement. À gauche les wireframes. À droite, les maquettes finalisées corespondantes. Prix Émile Hermès 21

22 Projet scolaire Mash-up Series 2014 Illustration & Motion design Projet scolaire réalisé en équipe : nous avions trois jours pour montrer que des personnages issus de séries télévisées différentes pouvaient s intégrer aux univers de chacun des autres. Nous avons choisi de réaliser une courte vidéo en motion design avec After Effects. Mon rôle - Réalisation du storyboard - Participation à la création des personnages et des décors - Sound design Extrait du storyboard Choix artistiques - Style minimaliste - Flat design et couleurs vives Pour mettre en avant les attributs caractéristiques de chaque personnage, nous avons choisi un style minimaliste en flat design donnant ainsi une cohérence à l ensemble du scénario. 22 Les Femmes Sauvages

23 23

24 Artwork du jeu vidéo Okami (Capcom). Héros de l aventure, le loup blanc portant le disque enflammé sur son dos est la réincarnation d Amaterasu, déesse du soleil dans la mythologie shintoïste. Projet personnel Autoportrait 2013 Illustration Autoportrait réalisé dans le style graphique du jeu vidéo Okami (2006), inspiré des estampes japonaises du XIXème siècle. Réalisé avec Illustrator et Photoshop CS6. Choix artistiques - Inspiration des artistes Hokusai et Hiroshige - Les couleurs chaudes et douces entre l orange et le marron contrastent avec les mouvements en arrière-plan Après avoir découvert Okami en 2008 je me suis particulièrement intéressé aux courants artistiques japonais, notament celui de l ukiyo-e traditionel. Inspiré par les oeuvres d Hokusai et d Hiroshige, j ai travaillé cet autoportrait à travers l univers onirique d Okami, dont la direction artistique tout droit sortie de la culture nippone m avait beaucoup marqué à l époque. Le coté humoristique donné aux proportions des personnages humains et le lyrisme qui se dégage des paysages du jeu m ont amené à traiter ce projet dans le même style. 24 Autoportrait

25 25

26 Dans le cadre d un projet personnel visant à montrer la présence de courants artistiques reconnus dans l univers du jeu vidéo, j ai choisi ici de représenter deux personnages de la série vidéoludique The Legend of Zelda (Nintendo), parue en Choix artistiques : Art nouveau & Art déco À gauche, la princesse Zelda, personnage central de la série. Pour souligner la douceur et la sensualité du personnage, j ai choisi de la représenter dans le style Art nouveau après avoir observé les oeuvres d Alfons Mucha. À droite, se trouve la princesse Midona, souveraine du royaume du Crépuscule. Pour ses formes longilines, son comportement peu conventionel et moderne, j ai choisi de la représenter dans un style Art déco d après les oeuvres de Tamara de Lempicka. 26 Souveraines

27 De la même manière que l Art déco est né en réaction à l Art nouveau, Zelda et Midona s opposent mais restent étroitement liées. Projet personnel Souveraines 2013 & 2015 Illustration Souveraines 27

28 28

29 29

30 30