All posts by Marion Greillet

Etre créatif : les astuces de Yannick

VG_galerie

Comment trouver l'inspiration ?

Nous avons posé la question à Yannick, stagiaire de la promotion Webdesign 2014 : "Pour rester créatif, mieux vaut avoir l'esprit ouvert en permanence aux choses qui nous entourent ! Les sources d'inspiration peuvent être multiples : une affiche publicitaire, un packaging, un film, etc, on peut trouver partout autour de soi une idée creative et se l'approprier." Voici ses derniers coups de coeur :

1. Expositions sur des illustrateurs.

"J'ai beaucoup apprécié celle de Carl Larsson au Petit Palais, ainsi que celle sur Les mondes de Gotlib." carl_larssongotlib

2. Sites de veille répertoriant le travail de différents webdesigners et graphistes

"Je consulte régulièrement aa13 et La veilleuse graphique pour rester informé sur les dernières tendances." la_veilleuse_graphique  aa13

3. Ouvrages de référence

"Les livres, comme celui de Dave McKean sont également d'excellents supports." logo_design wes_anderson [author] [author_image timthumb='on']/wp-content/uploads/2015/10/Yannick_VUAGNOUX-150x150.jpg[/author_image] [author_info]Yannick VUAGNOUX, Webdesigner [/author_info] [/author]

Et vous quelles sont vos sources d'inspiration ?

Atropos

Dans le cadre de la réalisation d'un court métrage pour Médecins sans frontières par la promotion CINE 4 d'Objectif 3D, il a été demandé aux étudiants de la formation Webdesign de proposer une identité visuelle pour illustrer le projet. Nous avons demandé à Damien, l'auteur du logo choisi, de nous expliquer en quoi a consisté son travail :

Peux-tu nous résumer le brief ?

Tim, le réalisateur, est venu nous expliquer le scénario du film en instant sur le personnage principal : la mort personnifiée qui joue avec les vies humaines. Il souhaitait un logo figuratif qui traduise l'action de la main de la mort.

Quelles ont été tes étapes de travail ?

J'ai commencé par rechercher les origines du mot "Atropos" (le titre du film) et j'ai découvert que c'était le nom d'une Moire, divinité grecque du destin implacable chargée de couper le fil de la vie. J'ai donc orienté mes première recherches dans cette direction.
Atropos recherches graphiques

Atropos recherches graphiques

Je me suis également inspiré des lieux du tournage, de l'ambiance du film, et au fur et à mesure que les premières images tournées nous parvenaient, j'ai pu affiner mon dessin.
Atropos recherches graphiques

Atropos recherches graphiques

Puis après discussions, il a été décidé que le logo devait être moins figuratif et davantage ressembler à un titre stylisé. J'ai donc retravaillé en enlevant la main et en suggérant l'action.
Atropos recherches graphiques

Atropos recherches graphiques

Et enfin, voici le logo qui a été retenu :

Atropos

Qu'as-tu voulu signifier ?

J'ai gardé le jeu de la Mort avec le fil qui coupe le titre mais on a ici quelque chose de beaucoup plus léger, pour traduire la sensation d'éphémère (à l'image des vies dans le film). La typographie, quant à elle, rappelle les origines grecques d'Atropos.

Que t'a apporté cette expérience ?

C'était mon premier projet en conditions réelles donc cela m'a permis de voir toutes les étapes du processus de création. J'ai également travaillé en binôme avec Aurélie et c'était très intéressant de confronter nos idées. Le fait d'avoir plusieurs interlocuteurs nous également permis de soulever la difficulté de répondre à une double demande et de savoir reformuler pour être sûr de cerner parfaitement les objectifs des commanditaires. [author] [author_image timthumb='on']/wp-content/uploads/2015/10/Damien.jpg[/author_image] [author_info]Damien GUIGNABAUDET, Graphiste webdesigner. [/author_info] [/author]

Bienvenue à Damien, notre nouveau formateur en Webdevelopment !

Depuis le mois de juin, Damien a rejoint l'équipe des formateurs à Objectif 3W. C'est lui désormais qui s'occupera de former les futurs Webdeveloper. Il s'est prêté à une petite interview.

DamienPeux-tu te présenter en quelques mots ?

Curieux, fou, obstiné, maladroit, second (voire troisième ou quatrième) degré, pas vraiment du matin, perfectionniste, ouvert (d'esprit), optimiste dans l'âme.

Comment es-tu devenu formateur à Objectif 3W ?

En fait ... par un gros coup de chance (ou pas ... à voir ^^) et une bonne dose de culot ! Je cherchais à changer un peu de perspective professionnelle après 15 ans à faire du développement, dont 6 en indépendant, et je regardais pour peut-être faire des interventions dans des écoles. Connaissant un peu l'école par le biais d'anciens élèves parmi mes fréquentations, j'ai envoyé un CV complètement spontanément et on me rappelait le lendemain pour m'annoncer que je tombais juste parfaitement bien car Valentin, le formateur en poste, avait annoncé son départ pour d'autres aventures. J'ai donc été convoqué. On m'a touché, mesuré comme on fait d'un cheval. J'ai couru sur un tapis, pissé dans un bocal, soufflé dans un masque de toutes mes forces, accéléré plein d'électrodes ... ah non pardon ça se sont des paroles de chansons ... Bref ! Quoiqu'il en soit, il semblerait que j'ai été retenu et me voilà !

Raconte-nous ton premier job !

Alors là, dans le genre "entrée en matière fracassante" ce premier job s'est imposé ! En fait, j'étais en licence en alternance dans une société dont l'informatique était gérée par une seule personne et moi ... et ce ne fût rapidement que moi !!! Mon tuteur en entreprise s'est cassé jambe et bras et il lui a fallu presque l'année pour se remettre. Du coup c'est ma pomme qui s'est frappé tout le boulot de dév, de maintenance informatique, de SAV, ... on dit : bienvenue dans le monde du travail !!!

Quels seraient tes conseils pour tes futurs élèves, qui se lanceront sur le marché l'été prochain ?

Ça se résume en quelques règles pour tenir le coup :
  • s'avoir s'aérer
  • toujours réfléchir à un projet avant de le commencer
  • s'accorder du temps pour effectuer des veilles technologiques et s'améliorer
Mais avant tout il faut trouver un boulot et pour ça : armez-vous de culot, foncez, n'hésitez pas ... au pire, vous n'aurez qu'une bonne surprise ! [author] [author_image timthumb='on']/wp-content/uploads/2015/11/wind.jpg[/author_image] [author_info]Damien TIVELET, Webdeveloper et formateur. [/author_info] [/author]

The Firefly : avatar

The Firefly est un sportif qui sévit dans le monde de l'Enduro VTT. Pour qu'on puisse l'identifier facilement sur les différents supports qui le concernent, il souhaitait disposer d'un avatar.

Le but est de créer un personnage style bd qui soit à mon effigie, en situation sur le VTT ou pas, ou les deux. Pour moi, l'esprit de l'avatar est de caricaturer un peu les traits et la situation.

The Firefly - commanditaire

Quelques élèves de la session Webdesign 2015 se sont penchés sur la demande.

La caricature... pas si simple !

La première étape passe par le dessin : il faut essayer, à partir de photos, de retranscrire le personnage en dynamisant le trait tout en restant fidèle à l'original. firefly_dessin

Production

Ensuite, on utilise un logiciel pour vectoriser l'illustration et ajouter le texte. C'est également dans cette étape que l'on va ajouter les couleurs. firefly_vecto Enfin, il ne reste plus qu'à décliner les différentes versions de l'avatar pour broder sur le maillot, de créer des autocollants de différentes tailles pour apposer sur le véhicule ou sur le casque, illustrer la page Facebook… firefly_couleurs

Bravo à Arnaud et Renaud pour leur travail !

Un cloud pour les webdevelopers

Sébastien, élève de la promo 2015, a profité de son stage pour développer une application qui permet aux élèves et aux formateurs de la section Webdeveloper de partager ressources, conseils et informations pratiques.

Petit tour d'horizon des fonctionnalités de ce cloud

L'idée générale est de pouvoir retrouver les avantages du travail au centre de formation lorsque l'on code chez soi seul face son ordinateur. [tabs slidertype="simple"] [tab]
La page d'accueil permet d'accéder au cloud de sa session.

cloud3W_accueil

[/tab] [tab]
On a la possibilité de
télécharger les exercices et cours
dans cet espace qui est un miroir du serveur du centre de formation. A chaque fois que le formateur ajoute une ressource, le cloud se met à jour en temps réel.

cloud3W_accueil_open

[/tab] [tab]
On peut
partager ses codes pour comparer, s'entraider, voir ce que les autres ont fait. Des commentaires précieux pour gagner du temps de débug et profiter des expériences individuelles des autres élèves de la session.

cloud3W_liveCode

[/tab] [tab]
Tous les contenus peuvent être gérés par le formateur via une interface d'administration.

cloud3W_admin

[/tab] [/tabs] Le planning des cours à venir est également disponible, un atout indispensable pour s'organiser dans ses projets personnels. Et enfin, un espace pour partager infos et mutualiser la veille sur les derniers événements et technologies.

L'envers du décor

Sébastien répond à nos questions.

Comment est né ce projet ?

J'ai commencé à lister les besoins que mes camarades et moi-même avions lorsque nous nous retrouvions à travailler sur nos projets et l'idée d'avoir un outil "rien qu'à nous" est partie de là. En effet, l'accès au cloud est réservé au étudiant de la promo Webdev. J'ai ensuite confronté mes idées avec mon formateur, qui a suggéré quelques fonctionnalités supplémentaires (comme l'agenda) pour que l'utilisation du cloud soit dans le prolongement pédagogique de la formation.

Combien de temps as-tu passé en production ?

J'avais estimé le délai de fabrication à 2 mois mais j'ai eu à apprendre des technologies que je ne connaissais pas, comme la récursivité, ce qui m'a pris plus de temps de prévu. Au final, j'aurai passé 3 mois sur ce projet et ce n'est pas fini : actuellement, il est en bêta test et j'aurai sûrement quelques correctifs à apporter.

Et pour la suite ?

J'espère pouvoir proposer ce principe de cloud à d'autres structures, en adaptant et personnalisant les fonctionnalités en fonction des besoins. J'ai d'ores et déjà quelques pistes et du travail en perspective ! [author] [author_image timthumb='on']/wp-content/uploads/2015/10/sebastien_frere.jpg[/author_image] [author_info]Sébastien FRERE, Webdeveloper autodidacte et passionné. [/author_info] [/author]

Movember à Objectif 3W !

Chaque mois de novembre, les hommes du monde entier sont invités à se laisser pousser la moustache pour sensibiliser l'opinion publique et de lever des fonds pour la recherche dans les maladies masculines telles que le cancer de la prostate : c'est le MOVEMBER !!! L'occasion pour les garçons d'arborer fièrement leur poils !!

A vous de jouer !

[tabs slidertype="simple"] [tab]

A qui sont ces moustaches ?

whostitre

[/tab] [tab]

Indice :

Futur Webdesigner, j'ai un homonyme qui a eu peur de la concurrence pour ce concours.

whostitre [/tab] [tab]

Réponse :

Hé oui, Jordan !

whostitre [/tab] [tab]

Indice :

Je suis fan du jeu de plateau Hordes...

whostitre [/tab] [tab]

Réponse :

Et avec la moustache, Yannick fait encore plus peur !

whostitre [/tab] [tab]

Indice :

Un des formateurs s'appelle comme moi mais ma moustache est bien plus belle.

whostitre [/tab] [tab]

Réponse :

Damien, of course !

whostitre [/tab] [tab]

Indice :

Ma moustache est à l'image de ma crinière... chatoyante !

whostitre [/tab] [tab]

Réponse :

C'est... Jérémy !

whostitre [/tab] [tab]

Indice :

J'aime prendre des risques - vestimentaires ou capillaires - rien ne me fait peur !

whostitre [/tab] [tab]

Réponse :

On l'appelle "Petit Tonerre" (et c'est votre formateur).

whostitre [/tab] [tab]

Indice :

Dali n'a qu'à bien se tenir...

whostitre [/tab] [tab]

Réponse :

Car les moustaches de Romain sont surréalistes !

whostitre [/tab] [tab]

Indice :

Je suis... mon père...

whostitre [/tab] [tab]

Réponse :

Da-mien-pa-pa !

whostitre [/tab] [tab]

Indice :

Je suis potentiellement monté sur un ring de catch...

[/tab] [tab]

Réponse :

C'est... Arnaud et on ne critique pas sinon il casse des bras !

[/tab] [/tabs]

Vous aussi, envoyez-nous vos plus belles moustaches !

Nous publierons les meilleures photos sur le Facebook d'Objectif 3W.

And the winner is...

La base… c’est la base !

Quand un site vieux de 8 ans a besoin de faire peau neuve, il y a du travail pour plusieurs personnes !

Spécificités du projet

La refonte du site va se dérouler en 2 temps :
  • structure dynamique
  • habillage graphique

PART I : le chantier

Cette lourde tâche a été confiée à Guillaume, dans le cadre de son stage pratique de 2 mois à l'issue de la formation.

En quoi consiste ta partie ?

En tant que développeur, je me suis concentré sur les aspects suivants :
  • un espace d'upload pour que les clients puissent déposer leurs fichiers
  • un système de gestion des comptes clients (suivi de commandes, factures, etc)
  • le catalogue des références dynamiques
  • la map de localisation
J'ai également fait en sorte que l'ensemble des textes du site soit dynamique pour que le commanditaire puisse être parfaitement autonome dans la gestion de ses contenus.

Qu'est-ce qui a été le plus difficile ?

Je pensais pouvoir réutiliser la database existante mais elle avait été faite avec un logiciel obsolète et après extraction / conversion des données, je me suis aperçu qu'il n'y avait pas de liaisons exploitables entre les différentes tables. J'ai donc dû refaire toute la conception de la base, tout en maintenant les délais de production prévus au départ. J'ai également passé beaucoup de temps à appréhender la documentation du Javascript pour développer la partie des maps car nous avions eu quelques bases pendant la formation mais j'avais peu utilisé ce langage jusque là.

Que retiendras-tu de ce projet ?

Un bon cas concret pour appliquer les connaissances acquises, une bonne opportunité pour découvrir et apprendre des choses nouvelles (comme Twig, moteur de rendu de vues que j'ai utilisé pour faire les templates de mes pages) et une bonne dose d'expérience pour les prochains projets : l'importance de structurer le cahier des charges et l'acceptation de tout casser / tout refaire [author] [author_info]Guillaume, Webdeveloper.<br> étudiant de la session WEBDEV 2015 [/author_info] [/author]

TO BE CONTINUED | PART II : la charte graphique

Un oiseau animé pour CAZA 1/2

aff-fifh-16x9 A l'occasion du Festival International du Film sur le Handicap, Objectif 3W apporte sa contribution au film de Katia Martin-Maresco ! Ce projet, destiné à valoriser le travail des autistes, se constitue de 3 films de 6 minutes dont les transitions intègrent de petits oiseaux animés avec le logiciel Flash. A partir du croquis de l'oiseau imaginé par le célèbre dessinateur Philippe Caza, quelques étudiants de la section Webdesign ont travaillé sur les différentes transitions. oiseau_caza

"Voila un croquis rapide. Après, c'est à la créativité du studio d'opérer…, ce qui compte, c'est surtout du mouvement… trajectoires et battement d'ailes…" Philippe Caza

 

Première étape : appréhender les contraintes techniques liées à la diffusion

  • 25 ips
  • 1920 x 1080 px
  • Visibilité de l'oiseau sur fond blanc
  • Intégration d'un élément 2D dans un univers 3D et tracking

Prise en main de l'oiseau

Jordan et Fabien ont commencé par réaliser un oiseau en papier qu'ils ont photographié sous toutes les coutures afin de pouvoir le dessiner plus facilement. oiseau-turnaround

Storyboard

Pendant ce temps, Arnaud, Renaud et Véronique ont étudié les rushes du film pour voir comment intégrer les oiseaux dans les transitions. Les différentes trajectoires ont été redessinées sous-forme de storyboards pour faciliter les validations. storyboard Arnaud

Cycles d'animation

En utilisant le principe de la rotoscopie, Jordan a pu créer un premier cycle d'animation qui retranscrit les mouvements d'un oiseau réel en train de voler et dont on pourra gérer les trajectoires de vol grâce aux guides dans Flash. jordanailedessous

Rendez-vous fin janvier pour découvrir les séquences d'animation finales !