Stanley Lambot

@

Apprenti infographiste de 20 ans, j’étudie le design web & multimédia à l’École Supérieure d’Infographie Albert Jacquard.

Je me pense polyvalent et passionné, j’ai cependant plus d’affinités avec le développement web que le design, sans délaisser cette branche pour autant.

J’ai aussi quelques bases en infographie 3D, dont vous pouvez retrouver quelques exemples dans mes travaux.

Ah, dernière chose ! Je suis actuellement à la recherche d’un stage dans le domaine du web. Si ce que je fais vous intéresse et que vous avez quelque chose à me proposer, je serais vraiment ravi que vous preniez contact avec moi.

Télécharger mon CV Photo de Stanley Lambot
Introduction Devizaj : Un groupe de 4 étudiants Étape 1 : Trouver une question Étape 2 : Conception de l’interface, croquis et affiche Étape 3 : Calcul des données Étape 4 : Design Étape 5 : Développement Étape 6 : Mise en ligne

Datavisualization

Voir

Lors du workshop “dataviz”, il était demandé de réaliser un site web et une affiche permettant de voir des données répondant à une question posée. La question à laquelle nous avons choisi de répondre concernait les différents pays d’où venaient les étudiants de l’école, et le lien avec la réussite de ceux-ci.

Devizaj : Un groupe de 4 étudiants

Dessin de Denis Kohlman Denis Kohlman http://www.dekoh.eu

Il a participé à toutes les étapes de la conception et de la réalisation. D’abord dans les recherches graphiques de l’interface et de l’affiche à réaliser, ensuite dans l’intégration du site web.

Dessin de Jerome Renders Jerome Renders http://jeromerenders.be/

Il s'est principalement occupé du design du site et de l'affiche. C'est d'ailleurs lui qui a réalisé cette dernière.

Dessin de Vincent deSalle Vincent deSalle http://vincentdesalle.be/

Il a d'abord participé aux recherches graphiques de l'interface de l'affiche et du site pour ensuite réaliser les illustrations nécessaires à l'intégration de ce dernier.

Dessin de Stanley Lambot Stanley Lambot http://www.stanleylambot.be

Je me suis occupé du regroupement et du calcul des données dont nous avions besoin et j'ai ensuite réalisé la partie programmée du site web.

Étape 1 : Trouver une question

Recherches et documentation

Réaliser une visualisation de données, c’est bien, oui, mais sur quoi ?

Avant toute chose, il nous fallait bien évidemment nous pencher sur la question. Après quelques recherches nous sommes tombés d’accord pour utiliser les données d’inscription de l’école pour représenter le taux de réussite en fonction du lieu d’habitation des étudiants.

Étape 2 : Conception de l’interface, croquis et affiche

Dessins sur papier

Notre idée est là mais avant de la réaliser, il est primordial de réaliser croquis et schémas afin de ne pas brûler des étapes et ne pas nous lancer dans une mauvaise direction.

Il était demandé de réaliser une affiche reprenant les données que nous voulions représenter, parallèlement au site web. C’est cette affiche qui fût dessinée en premier lieu et qui a, par la suite, servi de modèle pour le site.

Ce sont mes trois camarades qui ont conjointement contribué à cette étape du processus.

Étape 3 : Calcul des données

Graphiques et tables de calculs

Pendant ce temps, je m’occupe de la gestion des données qu’il nous faut traiter. Il y en a vraiment beaucoup et, pendant la conception, notre question s’élargit aux différents choix d’étude au sein de l’école, à la réussite par genre, par année... Recueillir toutes ces données et les recouper prend du temps.

Étape 4 : Design

Écran d'ordinateur avec recherche de design

Les recherches et croquis terminés, il est temps de transformer l’interface qui se trouve sur le papier en pixel. Les recherches de design commencent alors et l’affiche finale est créée.

Voir l’affiche finalisée.

Étape 5 : Développement

Un clavier

L’interface du site est terminée. Il est temps de s’attaquer au code source ! Pendant que Denis prend en charge la partie HTML et CSS du site, je m’occupe du JavaScript. Je crée les différentes interactions du site et l’affichage de nos données.

Pendant ce temps, Jérôme apporte des modifications à notre affiche et Vincent réalise les illustrations dont nous avons besoin.

Étape 6 : Mise en ligne

Les délais sont respectés, le site et l’affiche sont terminés. Avant de prendre un repos bien mérité de ces deux semaines de workshop, il ne reste plus qu’une chose à faire : mettre le site en ligne !

Le site de la datavisualization http://www.stanleylambot.be/dataviz04/
Introduction Le groupe et ses membres L'histoire : Workshop StoryTelling Le site: Workshop Interaction Design

Interaction Design : L'histoire de Cookie

Voir

Après avoir écrit et illustré l’histoire de Cookie (un jeune orphelin africain perdu dans le désert) lors de notre premier workshop, nous avons réalisé un site web racontant cette histoire à l’aide d’éléments interactifs.

Webdocumentaire : La radio

Site

Un autre travail de groupe. Cette fois-ci, nous devions réaliser un documentaire sous forme de site web sur un sujet choisi. Un des membres du groupe travaillant dans plusieurs radios locales, nous avons décidé de nous lancer sur cette piste.

Introduction Proposition 1 : Groupes de discussion Proposition 2 : Horaire sans connexion

Projet eCampus

Voir

Pour ce projet, il fallait proposer deux améliorations pour le futur eCampus de l’école et en faire le design. J’ai choisi d’aborder les problèmes de connexion obligatoire et de manque de communication en proposant un horaire accessible sans connexion et un système de messagerie instantanée.

Proposition 1 : Groupes de discussion

Proposition 1 : Croquis de la version smartphone Proposition 1 : Wireframe de la version smartphone Proposition 1 : Layout de la version smartphone Proposition 1 : Croquis de la version iPad Proposition 1 : Wireframe de la version iPad Proposition 1 : Layout de la version iPad Proposition 1 : Croquis de la version desktop Proposition 1 : Wireframe de la version desktop Proposition 1 : Layout de la version desktop

Voici le croquis de la version smartphone

Proposition 2 : Horaire sans connexion

Proposition 2 : Croquis de la version smartphone Proposition 2 : Wireframe de la version smartphone Proposition 2 : Layout de la version smartphone Proposition 2 : Croquis de la version iPad Proposition 2 : Wireframe de la version iPad Proposition 2 : Layout de la version iPad Proposition 2 : Croquis de la version desktop Proposition 2 : Wireframe de la version desktop Proposition 2 : Layout de la version desktop

Voici le croquis de la version smartphone

Introduction Étape 1 : Wireframe Étape 2 : Design Étape 3 : Intégration

Projet Bruxelles-Propreté

Voir

Ce projet consistait en la refonte du site de Bruxelles-Propreté. Ce site posant actuellement des problèmes évidents de navigation et d’arborescence du contenu, il nous était demandé de trouver des solutions. Un projet en 3 étapes, du wireframe à l’intégration.

Étape 1 : Wireframe

Wireframe de la nouvelle version du site de Bruxelles-Propreté

Avant toute chose, nous devions réaliser une arborescence et un wireframe navigable du site. Ce wireframe a servi à différents tests de User Experience qui ont contribué par la suite à l'amélioration du site et sa navigation.

Voir le wieframe navigable du site en ligne

Étape 2 : Design

Proposition de design numéro 1
Proposition de design numéro 2
Proposition de design numéro 3

Une fois la phase de wireframe validée, je peux passer au design du site. Je propose trois interfaces à mon professeur, la troisième sera celle qui fera l’objet de l’intégration du site.

Étape 3 : Intégration

Le site une fois intégré

Finalement, je peux passer à l’intégration du site. Il ne nous était demandé que d’intégrer trois des pages, j’ai choisi les pages d’accueil, de tri des déchets et de déchets papier, trois pages se suivant dans l’arborescence.

Voir le site en ligne

Kabuki, restaurant japonais

Site

Pour ce projet, il nous fallait choisir un restaurant dans une liste et en refaire le site.
J’ai choisi le site du restaurant «Kabuki» à Bruxelles, ayant une affinité pour la cuisine japonaise.
Après les différentes étapes de la conception du site web, je l’ai intégré.

Introduction Exercice 1 : Formulaire de contact postal Exercice 2 : Mastermind Exercice 3 : Aniamtion d'un oiseau

JavaScript : Exercices

Voir

Une courte liste d’exercices réalisés dans le cadre des cours de JavaScript ou à titre personnel.

Exercice 1 : Formulaire de contact postal

Formulaire de contact postal

Exercice final du cours de JavaScript, il consistait en un formulaire de contact via l’adresse postale. Il devait être soumis à une validation client side ainsi qu’aux variantes de langues ou de pays.

Voir l'exercice en ligne

Exercice 2 : Mastermind

Jeu de mastermind

Réalisé dans le cadre d'un exercice libre du site codecademy.com au début de mes études de web, ce mastermind est assez basique mais fonctionnel.

Voir l'exercice en ligne

Exercice 3 : Aniamtion d'un oiseau

Oiseau qui vole

L’un des exercices réalisés pendant l’année. Il consistait en l’animation aléatoire et continue d’un oiseau sur une page web. Réalisé grâce à jQuery et aux techniques de sprite et animation CSS.

Voir l'exercice en ligne
Introduction Étape 1 : Documentation Étape 2 : Premier rendu Étape 3 : Les passes de rendu Étape 4 : Rendu Final

Architecture 3D : Couloir

Voir

La réalisation d’un couloir en 3D en partant d’une image de référence. L’importance du travail était surtout concentrée sur la gestion du rendu et de son traitement en post-production.

Réalisé dans 3D Studio Max.

Étape 1 : Documentation

Couloir 3D : image de référence

Tout d’abord, il faut choisir son image de référence. Après quelques recherches, je propose plusieurs couloirs au professeur. Il a une préférence pour celui-ci.

Il s’agirait d’un couloir de liaison entre le service hospitalisation et le service consultation d’un hôpital.

Étape 2 : Premier rendu

Couloir 3D : premier rendu 3D

Les phases de modélisation, d’éclairage et de texturing étant terminées, je fais plusieurs rendus rapides.

À chaque nouveau rendu, des ajustements sont faits pour me rapprocher de ce que je désire. J’arrive donc à ceci.

Étape 3 : Les passes de rendu

Couloir 3D : Passe d'ambiant occlusion
Couloir 3D : Passe de diffuse
Couloir 3D : Passe de réflexion
Couloir 3D : Passe de réfraction
Couloir 3D : Passe de spéculaire
Couloir 3D : Passe de z-deph

Pour le traitement dans Photoshop, des passes de rendu sont calculées. Elles seront utilisées sous forme de calques fusionnés à l’image de base.

Étape 4 : Rendu Final

Couloir 3D : rendu final

Après le traitement dans Photoshop grâce aux passes de rendu, le résultat me convient enfin.

Introduction Étape 1 : Conception Étape 2 : Modélisation Étape 3 : Texturing Étape 4 : Set-up Étape 5 : Animation

Projet 3D : Le robot

Voir

Pour ce travail, j’ai dû créer un robot à partir d’un objet usuel. Je devais ensuite le modéliser, texturer et lui créer un set-up. Pour finir, faire un rendu du dépliage du robot, de l’objet de base au robot.

Étape 1 : Conception

Croquis du robot

Je fais des croquis, je reçois des feedbacks, je recommence. Le robot doit être sympathique, mais surtout crédible.

Croquis du dépliage du robot

Le robot est créé, il faut savoir exactement de quelle façon il va se déplier. Je fais quelques dessins, ils m’aideront lors de la modélisation.

Modèl Sheet du robot

Une fois le robot et son dépliage complètement dessinés, je réalise une Model Sheet qui servira de base pour la modélisation de l’objet en 3D.

Étape 2 : Modélisation

Turn Around de la modélisation de mon objet usuel choisi : un mini ventilateur de poche. Je me suis inspiré d’un objet que je possédais et ai dû l’observer sous toutes les coutures pour finir par le modéliser correctement.

Turn Around du robot créé à partir du ventilateur. Chacune des parties du robot est issue du ventilateur lui-même. Le robot devait être un dépliage de l’objet de départ et aucune pièce ne devait être ajoutée.

Étape 3 : Texturing

Robot texturé, essai 1
Robot texturé, essai 2
Robot texturé, essai 3
Robot texturé, essai 4

La modélisation finie, je place quelques lumières ainsi qu’un fond gris. Ces accessoires permettront de paramétrer les textures et les matériaux du robot.

Je fais plusieurs essais en tentant de me rapprocher le plus possible de l’objet de base. Malheureusement, plus le résultat est convaincant, plus les temps de rendu sont longs. Je dois donc faire des compromis.

Étape 4 : Set-up

Afin de faciliter l'animation du dépliage du robot, différents curseurs et boutons sont créés. Grâce à ceux-ci, je peux animer plus facilement les différentes parties du robot que doivent être dépliées.

Étape 5 : Animation

Finalement, il ne reste plus qu’à animer le dépliage du robot grâce au set-up et à calculer le rendu de l’animation. Le robot est maintenant prêt pour de palpitantes aventures !

Introduction Animation 1 : Le restaurant Animation 2 : Take Animation 3 : Saut

Animation 3D : Body Mechanic

Voir

Une série d’animation de personnages 3D, utilisant les principes du body mechanic. Le but étant de reproduire les réactions du corps humain le plus fidèlement possible.

Animation 1 : Le restaurant

Animation 2 : Take

Animation 3 : Saut

Storyboard

PDF

Réalisation d’un storyboard de 8 pages à partir d’un scénario donné.

Il était question de l’histoire de Karl, un robot fuyant de terribles poursuivants.

Introduction Étape 1 : Croquis Étape 2 : Painting noir et blanc Étape 3 : Painting Couleur

Matte Painting

Voir

Réalisation d’un matte painting (décor peint) sous photoshop à partir d’images de référence.

Ce décor devait servir lors de l’animation finale du projet robot.

Étape 1 : Croquis

Croquis du futur matte painting

Avant toute chose, il faut savoir quoi dessiner. Je recherche des images qui me serviront de base pour mon painting. Une fois mon décor trouvé, j'en fais un croquis.

Étape 2 : Painting noir et blanc

Matte painting en noir et blanc

Je commence alors le matte painting dans Photoshop. Il nous avait été donné comme consigne de commencer en noir et blanc et d'ajouter la couleur par la suite.

Étape 3 : Painting Couleur

Matte painting en couleur

Une fois le painting en noir et blanc fait, je rajoute des calques par-dessus pour ajouter de la couleur. Dans mon cas, ce procédé fût assez rapide étant donné le peu de couleurs se trouvant dans l’image.

Introduction Affiche 1 : The Walking Dead Affiche 2 : Supernatural Affiche 3 : The Big Bang Theory Affiche 4 : Weeds Affiche 5 : How I Met Your Mother Affiche 6 : Two and a half Men Affiche 7 : Lost Affiche 8 : Méta-Affiche

Affiches minimalistes : Les séries télés

Voir

Conception et réalisation d’une série de 8 affiches minimalistes sur un thème choisi : les séries télévisées.

Ces affiches devaient avant tout être minimalistes, mais surtout cohérentes. C’est pourquoi une affiche méta devait être réalisée, base pour toutes les autres affiches.

Affiche 1 : The Walking Dead

Affiche minimaliste : The Walking Dead

Inspirée de l'étoile du shérif Rick Grimes, un des personnages principaux de la série.

Affiche 2 : Supernatural

Affiche minimaliste : Supernatural

Inspirée d'un pentagramme, plutôt adapté pour une série sur les êtres fantastiques.

Affiche 3 : The Big Bang Theory

Affiche minimaliste : The Big Bang Theory

Inspirée d'un atome, symbole de la série.

Affiche 4 : Weeds

Affiche minimaliste : Weeds

Inspirée d'une feuille de cannabis. C'est le symbole de la série, celle-ci racontant l'histoire d'une mère de famille vendant de la drogue.

Affiche 5 : How I Met Your Mother

Affiche minimaliste : How I Met Your Mother

Inspirée du parapluie jaune de la mère des enfants de Ted, personnage emblématique de la série.

Affiche 6 : Two and a half Men

Affiche minimaliste : Two and a half Men

Inspirée du rideau rouge et du micro se trouvant au générique depuis 10 saisons.

Affiche 7 : Lost

Affiche minimaliste : Lost

Inspirée du logo du projet Dharma, épicentre de la série.

Affiche 8 : Méta-Affiche

Affiche minimaliste : Méta-Affiche

L'affiche des affiches. C'est elle qui définit les limites de la réalisation des autres affiches et c'est elle qui permet de créer d'autres affiches en gardant la cohérence de la série.

Nom et prénom Sujet du message Addresse e-mail Message Confirmation

Hey, salut ! J’espère que vous appréciez la visite. Comment vous appelez-vous ?

Bonjour, je m’appelle
.

À quel sujet vouliez-vous me parler ?

Je vous contacte à propos de .

Mais avant, pourrais-je connaitre un moyen de vous contacter ?

Bien sûr, je suis joignable à l’adresse e-mail .

Je vous écoute maintenant.

Alors voilà,

Très bien. Mais il faudrait m'envoyer ce message par e-mail, car je n'ai rien lu du tout ! Si vous êtes certain(e) des choses que vous m'avez dites, je peux le faire pour vous.

Comment je le fais : Mon design process

1 demande
2 analyse
3 design
4 développement
5 finalisation

Un site, c'est une demande, un besoin, une envie. Avant toute chose, il me faut savoir ce que vous désirez et dans quel but. C'est une phase importante de partage entre web designer et client qui permettra de créer un site qui répond à vos envies et à vos besoins.

Un site web ayant toujours un but, un message à transmettre, une histoire à raconter, il est important d'analyser ces différents objectifs pour pouvoir les atteindre au mieux. Je me documente, je m'inspire, j'imagine. Je pense le site pour qu'il atteigne son but.

C’est la phase durant laquelle je réfléchis à la présentation du contenu du site. Elle se décline en trois grandes phases : les croquis, les wireframes (maquettes du site en noir et blanc) et les layouts (visuels finaux). Il est important de ne pas brûler les étapes afin de ne pas partir dans de mauvaises directions.

Les différentes pages du site étant dessinées, il est temps de passer du crayon au clavier, des calques au code source. D'abord le contenu en HTML, ensuite sa mise en forme en CSS. Pour finir, si besoin est, du JavaScript ou du PHP. Toujours dans un but précis, celui du site.

Le site répond à vos attentes, les corrections éventuelles ont été effectuées. Il ne reste plus qu'une chose à faire avec pour qu'il puisse accomplir sa destinée : le faire rejoindre les autres sites sur Internet. Le site est mis en ligne, le processus est terminé.

Travailler en groupe : Les workshops

Travailler en groupe : Les workshops

Qu'est ce qu'un workshop ?

Un workshop, c’est deux semaines à travailler par groupes de 2 à 4 personnes sur un projet. À chaque workshop son sujet et à chaque sujet son travail. Vous pouvez retrouver ici les résultats des workshops Inteaction Design et Datavisualization.

Quel est le but d'un workshop ?

Avant tout à nous confronter à un projet de plus grosse envergure que ceux abordés pendant l’année. Ils nous permettent aussi de nous habituer à travailler au sein d’une équipe. C’est grâce à eux que nous pouvons réellement faire ressortir nos capacités personnelles utiles au groupe.

Déroulement du workshop Interaction Design

Comment je le fais : Mon design process

Politique de confidentialité

Nous recueillons certaines informations par le biais de fichiers journaux (log file) et de fichiers témoins (cookies).

Il s'agit principalement des informations suivantes :

Le recours à de tels fichiers nous permet :

Nous nous engageons à ne recueillir aucune information personnelle de quelque nature que ce soit.

Je remercie :

http://www.awwwards.com/
Pour les sources d’inspiration et de documentation
http://www.codecademy.com/
Pour les cours de programmation forts utiles
http://jquery.com/
Pour leur framework des plus pratiques
http://johnpolacek.github.io/scrollorama/
Pour les animations de mes landing pages
https://www.pixelapse.com/
Pour leur plateforme de partage de contenu graphique
http://www.airtightinteractive.com/...
Pour le glitch art de la page 404
http://teachingyou.net/php/simple-php-co...
Pour la validation serverSide grâce à ajax

Les professeurs de web de l’École Supérieur d’Infographie Albert Jacquard :

pour le partage de leurs connaissances et leurs conseils avisés.

Ainsi que :

Denis Kohlman
Pour les photos des travaux datavisualization et interaction design.
Jerome Renders
Pour la vidéo de la page workshops.
Vincent deSalle
Pour les illustrations de la page Devizaj : Un groupe de 4 étudiants.

404

Heu.. je... tout va bien, je vous assure ! C'est parfaitement n;;oorma.L....

Mais vous devriez peut-être retourner à un endroit qui existe...

Vous voulez un peu d'aide ?