Page 1

2K

* TH IS IS

CRÉATIF

BAPTISTE DUMAS CANDIDAT CRMA 2011

W W

M CO IZ. AD RE .C W

E YP OT

*

R RULES ! MASTE THE K EA BR

DOSSIER

ND THEN, RUN AS FAST NCE A AS Y ERE O U IFF CA ED N TH *

TH EA RT BO

OK

E AK M E,

S FOR GOBELINS SCHOOL UMA * F D ’ Z EEL ‘DI E T TH EM TIS P A ES FB SA O G 1 1

READIZ.COM * PRIN IZ@C TW EB * D M O TIO N3 D

LO G


3 10 14 DESIGN GRAPHIQUE

WEB

INTERACTIVE APPLICATION

MOTION DESIGN


The death of the head DESIGN GRAPHIQUE

Typographie / Projet scolaire

Pour ce projet, nous devions réaliser une typographie sans contrainte existante. Influencé par l’art gothique et l’identité visuelle reliée à la musique métal, j’ai crée une typographie angulaire, très stricte, en jouant sur les mots DEATH et HEAD qui sont presque un anagramme. J’ai travaillé sur une base de police Helvetica.

3


PRAISE Magazine DESIGN GRAPHIQUE

Magazine format A4 / Projet scolaire J’ai réalisé cette couverture lors d’un projet scolaire visant à la création fictive d’un magazine : de la direction artistique à l’éditorial. Ce travail de groupe a donné lieu à PRAISE Magazine au contenu axé sur les tendances culturelles du moment. Ce magazine a pour cible les gens issus du milieu artistique mais aussi les new «trend setters». J’ai souhaité illustrer la ligne éditoriale du magazine en plaçant certains signifiants que sont le patern défaut de transparence de Photoshop et l’utilisation de la célèbre police Helvetica.

4


Blast Magazine DESIGN GRAPHIQUE

Post-production photographique + Mise en page / Projet professionnel BLAST est un magazine ayant pour cible les PCS supérieurs. Son contenu est orienté sur les tendances fashion, design et culturelles du moment. Son principal concurrent est Vogue Magazine. BLAST se veut élitiste. Dans le cadre de mon stage, j’ai participé aux bouclages des numéros 33 et 34. Avec l’assitance de la Directrice Artistique Jenny Mannerheim (ex D.A Vogue Homme) et de la maquettiste freelance, nous avons établi ensemble la mise en page du numéro 33. J’ai aussi effectué la post-production du shooting photo de Tom Ford qui a été retenue comme couverture de ce numéro.

5


UTOPIA DESIGN GRAPHIQUE

Affiche format A4 / Concours / Projet personnel Cette affiche a été réalisée à l’occasion du concours national du multimédia inter-étudiants. Le concours était ouvert à la création graphique, interactive et audiovisuelle. Le thème de cette année était l’utopie. J’ai décidé de remettre en question l’existence de l’utopie à travers un visuel très sombre jouant sur le côté imaginaire de ce mot. Les formes géométriques rappellent le côté carthésien (opposé à l’utopie), le cadran en fond est là pour signifier l’arrêt du temps lors d’un instant utopique, la typographie destructurée symbolise elle, le parallèle entre la réalité et l’utopie. Ce visuel a remporté le 1er prix du concours, obtenant une note moyenne de 16 attribuée par un jury de professionnels.

6


OPAKE DESIGN GRAPHIQUE

Logotype / Projet personnel OPAKE est mon collectif de VJing avec Mattias «mattrunks» Peresini. Nous produisons des visuels en fonction du DJ avec lequel nous jouons. Ces visuels sont ensuite diffusés sur un écran géant derrière le DJ. Nous contrôlons nos visuels à l’aide de claviers MIDI connectés sur nos logiciels spécialisés . J’ai réalisé le logo du collectif en misant sur le côté fluide et rythmé qu’est le VJing.

7


CHIC&CHOC DESIGN GRAPHIQUE

Logotype / Projet professionnel Sur une demande du Bureau des Étudiants de l’École Supérieure de Commerce de Toulouse, j’ai crée ce logo pour une soirée mensuelle organisée rassemblant étudiants et anciens étudiants de l’école. Le thème de cette soirée est «Chic&Choc : haut chic, bas choc».

8


MENDEL DESIGN GRAPHIQUE

Logotype / Projet personnel Mendel est un DJ français qui s’est fait connaître en 2009 avec son EP «Beatburger» signé chez Place Blanche Records. Mendel a collaboré avec quelques grands noms de la scène électronique comme Greg Kozo de Make The Girl Dance, Mikix the Cat ou encore Stereoheroes. Influencé par la culture américaine, et notamment par la NBA, Mendel souhaitait un logo dans un esprit hip-hop avec en guise de signifiant : un poing humain.

9


SERECOMTV

Web design + Motion design + Interactive design / Projet scolaire 1 2

WEB

Au cours de la formation, nous avons monté un projet de groupe établi sur deux ans. Mon équipe et moi avons choisi de créer la WebTV du département SRC de Castres. Afin de démontrer nos compétences en matière de dévelopement à notre jury, nous avons préféré de ne pas utiliser un CMS pré-conçu type WordPress, DotClear ou Joomla, mais de créer notre propre structure avec gestion de base de données. Nous avons donc crée un website complet contenant les dernières news, les archives vidéos, et bien sûr la dernier vidéo envoyée. Chaque utilisateur peut s’inscrire afin d’échanger, de discuter à propos des émissions, et surtout recevoir notre newsletter et écouter notre podcast. Nous avons eu carte blanche pour l’identité visuelle du projet. J’ai donc crée un site basé sur une structure type magazine. La charte graphique reprends la couleur bleue de la ville. L’ergonomie du site rappelle celle des magazines en ligne traitant d’actualité web, NTIC et autres. J’ai également conçu le teaser, le générique, et je me suis occupé de l’habillage de la vidéo et de son incrustation sur fond numérique. En bonus, nous avons pensé une application iPhone afin que l’utilisateur puisse visionner notre émission et consulter les news quand il veut, partout où il se trouve.

3

4

1

Navigation générale. Slide horizontal droite-gauche du contenu (bloc gris foncé). Réecriture de l’URL au clic, pas de chargement.

2

Navigation dans les news. Slide horizontal droite-gauche du contenu news (titre, texte et photo).

3

Lecteur vidéo embarqué (Vimeo). Dernière émission mise en avant.

4

Ouverture du bloc commentaires au clic. Effet accordion.

10


Q.G.

1

Web design + Développement / Projet professionnel

WEB

Quentin Gautier, alias Q.G., est un DJ français actif sur la scène électro-rock. Sous l’aile d’OBEY, Q.G. a notamment fait parlé de lui sur la toile grâce à ses remix de 2 Many DJ’s et Black Strobe. Il a en 2010, partagé sa scène avec des artistes tels que Toxic Avenger, DatA, Redial, Danger ou encore Kavinsky et SebastiAn du label Ed Banger Records. Quentin Gauthier ne souhaitait pas un site-vitrine comme beaucoup d’artistes, mais un site axé sur le contenu mis à jour fréquemment. Pour répondre à cette demande, je me suis tourné vers la solution du CMS WordPress, n’utilisant que la partie back-office et en intégrant mon webdesign au code. Cette solution lui permettra de gérer son contenu facilement et de manière autonome. 3

1

Bannière contenant un bandeau photos. Transition fade in/fade out. Le logo reste en position fixe.

2

Navigation suivant/précedent des dates de concerts. Slider vertical. Fond de bloc assombri au rollover.

3

Récupération du flux d’actualités de la page fan Facebook. Slider vertical automatique.

4

Bloc photos affichant les 4 dernières photos ajoutées. Transition couleur au rollover.

5

Récupération du flux Twitter. Affichage des 4 derniers tweets.

2

4

5

11


PORTFOLIO 2K11

Web design + Développement / Projet personnel 1

WEB

Pour mon portfolio, je souhaitais une mise en page sobre, misant sur le minimalisme, l’ergonomie et l’accessibilité. L’arborescence de mon site est donc simple : une page index, une page informations, une lightbox de contact. Après benchmark et analyse de mes visites, je me suis aperçu que la meilleure façon de faire rester le visiteur était de mettre en avant les travaux directement sur la page d’accueil. J’ai donc mis en place une mosaïque d’aperçus de mes travaux étalée sur 3 colonnes. J’ai également opté pour un système de filtre afin de permettre à l’utilisateur de consulter uniquement certains types de travaux (print, logo, web ou motion).

2

Concernant ma base de données, toutes mes données sont contenues dans un fichier XML. Tout est donc automatisé dès l’ajout d’une nouvelle balise dans mon fichier sans utiliser PHP et SQL. J’ai expérimenté cette méthode afin de la réutiliser pour d’autres projets.

Page d’accueil

1

Système de filtre. Les autres miniatures deviennent non-cliquables et possèdent une légère opacité.

2

Rollover sur une miniature. Récupération des informations dans le fichier XML (titre + description + URL + icône du type de visuel).

3

Like box Facebook intégrée.

4

Boutons de partage vers les réseaux sociaux Twitter et Facebook mais aussi par email. Outils primordiaux pour accroître ma visibilité.

5

Mentions légales et bouton de remontée de page (remontée fluide).

6

Navigation rapide entre mes travaux (suivant/précédent).

7

Images-clés du projet.

3 4

5

6

Page de projet

Extrait du XML

7

12


BLAST

Dévelopement AS3 + Interactive design / Projet professionnel

WEB

Parmis mes travaux de stage de deuxième année, j’ai participé à la direction artistique du site du magazine BLAST, développé par l’agence Colorz. Le site ayant eu quelques problèmes dans sa finalisation, j’ai du revoir post-livraison le code ActionScript 3 de la map monde interactive. J’ai procédé à l’ajout de villes disponibles et de ses coordonnées, modifié les interpolations de spots, et j’ai également ajouté une animation de la base-line du magazine «When Where Why». Le site tournant sur WordPress MU, la map monde récupère les dates, lieux et informations des posts écrits par la rédaction. De plus, j’ai mis en place la newsletter du site (design + développement) et réalisé les encarts pub Flash d’auto-promotion (concours, application iPhone, ...).

Map monde

Filtre de la map

Encart publicitaire en Flash

Newsletter

13


SERÉCOMÉDIAS “write it, LEARN it, share it” (1/2) INTERACTIVE APPLICATION 3 2 4

1

Design + Développement AS3 / Projet scolaire

SERÉCOMÉDIAS est une application Flash proposant une plateforme collaborative pour les étudiants du département SRC de Castres. L’application permet de partager ses propres cours, de télécharger ceux des autes, mais aussi de consulter et modifier le planning des partiels. En cas de panne sur un exercice, l’étudiant peut également envoyer un message sur le Chat à l’attention de ses camarades. Côté technique, l’application est entièrement développée en ActionScript 3. Elle utilise le protocole XML afin de gérer les données (cours + chat). Tout est donc archivé sur un serveur distant. Pour la partie Agenda, l’application utilise l’API Google Calendar afin d’aller récupérer les dates sur lesquelles des partiels sont inscrits. Je réfléchis actuellement à une refonte du design et de l’ergonomie. De plus, je suis en train de convertir l’application en AIR afin d’étendre le projet sur le bureau de l’utilisateur, telle une vraie application.

5

6

1

Slide vertical du contenu entre chaque menu. Effet de flou de mouvement.

2

Liste des enseignants. Scrolling vertical par rapport à la position de la souris. Le textfield de l’enseignant devient vert au rollover.

3

Boutons de rafraîchissement et d’upload de cours.

4

Liste des cours disponibles pour l’enseignant cliqué.

5

Panel d’upload de cours.

6

Datepicker

14


SERÉCOMÉDIAS “write it, LEARN it, share it” (2/2) INTERACTIVE APPLICATION

Design + Développement AS3 / Projet scolaire

2 1 1

Récupération des informations (pseudo, avatar, message, date) depuis le fichier XML.

2

Boutons de rafraîchissement et d’upload de message.

3

Scrollbar verticale fluide. Effet flou de mouvement sur Y au scrolling.

4

Panel d’upload de message. Affichage par tween sur la valeur alpha.

5

Élaboration de l’application iPhone.

3

5

4

15


OPAKE EXPLOSION MOTION DESIGN

Design graphique + Motion design / Collaboration / Projet personnel En collaboration avec Mattias «mattrunks» Peresini, cette vidéo est un extrait du set de notre collectif de VJing : OPAKE. Le mot OPAKE apparaît de manière manuscrite et les pustules arrivent en rythme avec le morceau diffusé.

16


OPAKE REBIRTH MOTION DESIGN

3D + Motion design / Projet personnel Autre extrait de 10 secondes de mon set de VJing. Cette fois-ci, le mot OPAKE s’extrait d’une sphère cuivrée réalisée en 3D avant de se faire réenfermer. Des sphères rondes à la texture lisse et des triangles viennent agrémenter la scène.

17


SONACOM by Night MOTION DESIGN

Stop motion + Motion design / Projet personnel Cette vidéo a été tournée à l’agence SONACOM dans le but d’être présentée lors de ma soutenance de fin de stage. La vidéo est un montage de plus de 500 photos prises avec un reflex numérique Canon 5D. J’ai enlevé 1 image sur 3 afin de donner un côté saccadé. Le tout est rythmé sur une bande son originale du groupe The Ting Tings. On peut me voir me faire découvrir toutes les pièces, studios et bureaux de l’agence. Au départ, cette vidéo n’était qu’à titre personnel, mais depuis, elle fait office de vidéo «officielle» de présentation des locaux de l’agence.

18

DIZ /AGREE - Book 2K11  

Dossier créatif 2011 de Baptiste Dumas

Advertisement