let`s become f*/!†g web makers

FANTASSIN
RENEGADE WEB MAKERS
LET’S BECOME F*/!†G
WEB MAKERS
!
École Bellecour - 2016
1T’ES QUI TOI ?
JOFFREY JOCHUM*
*nom imprononçable venu d’ailleurs
FONDATEUR & DA @ FANTASSIN (LYON)
INTERVENANT @ BELLECOUR ÉCOLE (LYON)
UI & UI DESIGNER @ NUMBERFOUR AG (BERLIN)
FREELANCE (LYON + CANADA)
WEB DESIGNER @ DIPLOMATIC-COVER (LYON)
FANTASSIN
Notre métier : accompagne les organisation dans leur démarche de digitalisation
et de prise en main de leur image de marque.
Accompagnement & évangélisation
Conception, ergonomie et UX design
Direction artistique et développement
2«THE» COURS
2.
«THE» COURS
Fantassin : Renegade web makers — Lyon
École Bellecour
Introduction au digital
www.fantassin.fr
LES OBJECTIFS DU COURS
5
—
20
•
•
•
•
•
•
Vous ouvrir et vous former à la discipline
Acquérir des réflexes de création digitale
Développer vos outils (softs, méthode, style)
Développer votre côté pro (attitude, ambitions…)
Étoffer votre book
Prendre du plaisir (ouè ouè, le web c’est cool)
2.
«THE» COURS
Fantassin : Renegade web makers — Lyon
École Bellecour
Introduction au digital
www.fantassin.fr
CE QUE NOUS ALLONS FAIRE
6
—
20
•
•
•
•
•
Des sites web, du mobile, des applications
Concevoir des projets intelligents et à forte valeur ajoutée
Sortir de sa zone de confort
Développer une méthode de travail
Vous préparer aux réalités du terrain
CE QUE J’ATTENDS DE VOUS :
ENGAGEMENT & IMPLICATION
+ VEILLE + NO BULLSHIT
READY ?
3DIGITAL ENVIRONMENT
3.
DIGITAL ENVIRONMENT
Fantassin : Renegade web makers — Lyon
École Bellecour
Introduction au digital
www.fantassin.fr
LE DIGITAL, C’EST UN ENSEMBLE DE MÉTIERS
9
—
20
Web designer, directeur artistique, UX designer, UI designer, designer d’interaction,
creative technologist, chef de projet, stagiaire, planneur stratégique (…)
ET UN ENSEMBLE D’ACTEURS
•
•
•
•
•
Les agences : les gros poissons
Les studios : les challengers
Les freelances
Les start-ups : les porteurs de projets / les rebelles
Les services internes (annonceurs)
QUI VIVENT DANS UN MONDE
(PAS TOUJOURS) TOUT ROSE…
Fantassin : Renegade web makers — Lyon
École Bellecour
Introduction au digital
www.fantassin.fr
3.
10
—
20
DIGITAL ENVIRONMENT
TRAVAILLER AU SEIN D’UNE ENTREPRISE,
C’EST S’INTÉGRER DANS UN SYSTÈME
•
•
•
Comprenant une hiérarchie
Travaillant avec des process
Ayant des charges
Un bon candidat est conscient de ce qu’est une entreprise,
et donc de la manière dont il peut y trouver sa place.
ON Y VA ?
4OUTILS
4.
OUTILS
Fantassin : Renegade web makers — Lyon
École Bellecour
Introduction au digital
www.fantassin.fr
NOURRIR L’ESPRIT
13
—
20
DESIGN
http://www.behance.net/
http://www.thisiscollate.com/
http://www.aa13.fr/
http://www.aisleone.net/
http://www.underconsideration.com/brandnew/
http://www.fubiz.net/
http://visuelle.co.uk/
http://www.visualcache.com/
http://www.bpando.org/
http://www.thedieline.com/
http://www.identitydesigned.com/
http://bpando.org/
4.
OUTILS
Fantassin : Renegade web makers — Lyon
École Bellecour
Introduction au digital
www.fantassin.fr
WEB
14
—
20
http://www.cssdsgn.com/
http://www.siteinspire.com/
http://www.cssdesignawards.com/
http://www.frenchdesignindex.com/
http://www.awwwards.com/
http://www.thefwa.com/
http://www.onepagelove.com/
http://www.mediaqueri.es/
https://uimovement.com/
http://codepen.io/
http://tympanus.net/codrops/
http://sixux.com/
APPS
http://www.thefwa.com/mobile/
http://www.pttrns.com/
http://www.mobile-patterns.com/
4.
OUTILS
Introduction au digital
www.fantassin.fr
ORGANISER SA VEILLE
•
•
•
Images : Pinterest
Liens : Hypershoot
Flux : Feedly / Digger
Fantassin : Renegade web makers — Lyon
École Bellecour
IMAGINER, COLLABORER
•
•
•
LES INCONTROUNABLES
•
•
15
—
20
Stocker / partager : Dropbox
Collaborer : Google Drive
Organiser : Xmind
A Book Apart : http://www.editions-eyrolles.com/Collection/10768/a-book-apart
Mises en Page(s), etc… Manuel (Damine Gauthier)
4.
OUTILS
Fantassin : Renegade web makers — Lyon
École Bellecour
Introduction au digital
www.fantassin.fr
COULEURS
16
—
20
https://www.randoma11y.com/
http://colorandcolor.tumblr.com/
http://www.colourlovers.com/palettes
http://uigradients.com/
http://vis4.net/labs/colorvis/embed.html?m=hcl&gradients=4
https://vis4.net/labs/multihue/
http://paletton.com/
https://color.adobe.com/fr/create/color-wheel/
Pantone Color Manager
GÉNÉRER UNE PALETTE AVEC UNE PHOTO
http://www.letschipit.com/
4.
OUTILS
Fantassin : Renegade web makers — Lyon
École Bellecour
Introduction au digital
www.fantassin.fr
ICÔNES
17
—
20
https://www.iconfinder.com/
http://thenounproject.com/
http://iconmonstr.com/
Font Awesome / Google Material Icons
http://weloveiconfonts.com/
IMAGES LIBRES DE DROIT
** https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b
http://pixabay.com/
http://picjumbo.com/
http://www.imcreator.com/free
http://albumarium.com/
http://www.gratisography.com/
Zoomy
4.
OUTILS
Fantassin : Renegade web makers — Lyon
École Bellecour
Introduction au digital
www.fantassin.fr
POLICES GRATUITES (NO DAFONT !)
18
—
20
http://www.google.com/fonts/
http://www.myfonts.com/search/tag%3Afree/fonts/
http://www.fontspring.com/free
http://www.fontshop.com/freefonts/
http://www.hypefortype.com/browse-fonts/free.html
http://www.youworkforthem.com/fonts/free
http://www.fontfabric.com/
WORKING WITH TYPE
Quelle typo sur un site : What Font ou Fontface Ninja (plugin Chrome)
Type scale : http://www.type-scale.com/
LET’S MAKE
SOME EPIC SHIT
DES QUESTIONS ?
VOTRE
JOFFREY JOCHUM CONTACT
Guide suprême des cours de «web-making»
[email protected]
www.fantassin.fr