TIM 2011 - keynote

WEB GRAPHIC DESIGN STARTERS

Cours de Techniques Infographiques Multimeacutediacopy 2011 infographie-supbe mdash Valeacuterie Geacuterard

Leccedilon 11 - TIM what the Fampraquo2 - Infographiste web amp multimeacutedia3 - Meacutethodologie de creacuteation de site web

source image Les leccedilons de Stromae

Alors on danse

Leccedilon 101 TIM what the Fampraquo

TIMpour les intimes

Leccedilon 101 - TIM what the ampraquo

TECHNIQUES INFOGRAPHIQUES MULTIMEDIA

creacuteation graphiquetraitement drsquoimages

images fixesimages animeacutees images interactives

Leccedilon 101 - TIM what the ampraquo

INTERFACES VISUELLES HOMME-MACHINE

images ipad six sense samsung

Desktop mobile phone mobile tablets (ipad slate galaxy tab) smartphones amovible (usb dvd cd ) bornes interactives TV interactive frigo intelligentstamagoshi 6egraveme sens hellip

Leccedilon 101 - TIM what the ampraquo

OBJECTIFS DU COURS INFOGRAPHIE

source pour des raisons eacutevidentes le creacuteateur preacutefegravere rester anonyme

Leccedilon 101 - TIM what the ampraquo

STOP IMAGEABUSE

Jeu des 10 erreursLe choix drsquoimage ne fonctionne pas avec le texte de plus lrsquoimage pourrie est trouveacutee sur le web agrave la premiegravere recherche google en basse reacutesolution deacutetoureacutee agrave la gomme et sauvegardeacutee en GIF pour ecirctre sur qursquoon voit bien lrsquoanti-aliasing eacutetireacutee non proportionnellement agrave lrsquohorizontal typo y compris un picto qui ne veut rien dire et qui perturbe la lecture avec une petite vibrance de rouge sur le vert le tout eacutetireacute en plus grand et reacuteexporter en jpeg 50 mdash Mais finalement le tout illustre bien le propos laquostop image abuseraquo non

source webpagesthatsuckcom

Leccedilon 101 - TIM what the ampraquo

OBJECTIFS DU COURS PREacuteSENTATION

GET TRUST

source innocent english

Leccedilon 101 - TIM what the ampraquo

OBJECTIFS DU COURS INTERACTION

GET THEREI MEAN THERE

Remarquez-vous quelque chose drsquoanormal

UN PROTOTYPE GRAPHIQUE ET INTERACTIFDE VOTRE SITE WEB PORTFOLIO

REALISATION FINALE

Leccedilon 101 - TIM what the ampraquo

CONCEPTION EN 5 ETAPES

PHASE 1 CROQUIS PAPIERPHASE 2 WIREFRAME NampBPHASE 3 LAYOUT GRAPHIQUEPHASE 4 MOCKUP INTERACTIFPHASE 5 SCREENCAST VIDEO

source Tim2010 Camille Besneville Teddy kishi Ceacutedric Van Haeke Tom Leclercq Mathier Strale

source Adobe mdash Using Fireworks CS3 to design effective interactive website presentations

DEMONSTRATION FIREWORKS

timinfographie-supbe

SUPPORT EN LIGNE

wwwinfographie-supbe

Leccedilon 102 Infographiste

Web amp Multimedia

INFOGRAPHISTE WEB amp MULTIMEacuteDIA

Lrsquoinfographiste web amp multimeacutedia prend en charge la creacuteation graphique dune oeuvre multimeacutedia de leacutebauche des maquettes illustrant un sceacutenario agrave leacutelaboration deacutetailleacute de tous ces dessins

ou concepteur graphique web art director interactive designer graphiste web designer graphique

LES MEacuteTIERS DU WEB amp MULTIMEDIAsource awtbe design is dead

Leccedilon 101 - Infographiste WampM

DESIGN IS DEAD REEL MOTIONsource httpshowreeldesignisdeadbe

1 - TIM what the ampraquo

Leccedilon 101 - Infographiste WampM

ligne du temps

PRODUCTION

CONCEPTION

REacuteALISATION

EXPLOITATION

DISTRIBUTION

UTILISATION

TRAVAIL LOISIRS amp TOUT LE RESTE

source apple boxee

Utilisations multiples commerciale (vitrine e-commerce) communautaire (social network) collaboratif (extranet) informatif (blogs ) manageacuterial administrative (CRM ERP) eacuteducative (LMS e-learning) divertissements (jeux films ) hybrides

Leccedilon 102 - Infographiste WampM

Leccedilon 102 - Infographiste WampM

Informatique

BureautiqueEdition

PressePubliciteacute

jeuxr$amp(

Peacutedagogie

LoisirsCommunication

commerce CulturelTourisme

Santeacute

DOMAINES DrsquoACTIVITEacuteS

Leccedilon 102 - Infographiste WampM

Compeacutetences

LE POLYVALENT

- Concepteur graphique - Architecte web ergonome- Designer drsquointerface- Illustrateur multimeacutedia- motion designer- Flash designer developer- Developer PHPmySQL- Inteacutegrateur (htmlcss) - CMS architecte-

source pixelpharmacycom2002

Leccedilon 102 - Infographiste WampM

LE SPEacuteCIALISTE

Benjamin de Cock UI Designer Interfaces logicielle Mac amp Web apps (Daexoncom) - 2011

Leccedilon 102 - Infographiste WampM

SALAIRES

euro

Leccedilon 102 - Infographiste WampM

LOGICIELS

source Adobe Microsoft IE Mozilla firefox Google Chrome Apple safari Opera firebug dropbox

wminfographie-supbe

Leccedilon 103 Creacuteation de sites web

MEacuteTHODOLOGIE

source goto basecamphq

Leccedilon 103 - Creacuteation de sites web

Deacutefinition du projetDeacuteveloppement de la structure du siteConception graphique et validationProduction et controcircle de qualiteacuteLancement et maintenance

PLANNING

Leccedilon 103 - Creacuteation de sites web

source basecamphq outpost for iphone google agenda google synch for iphone Things

AUDIT

source basecamphq google analytics google webmaster tools crazyegg

Leccedilon 103 - Creacuteation de sites web

ARBORESCENCE

source post-it lovelycharts

Leccedilon 103 - Creacuteation de sites web

DESIGN

source Ferrandes Joffrey TIM2010

Leccedilon 103 - Creacuteation de sites web

Le design est une discipline visant agrave repreacutesenter concregravetement une penseacutee un concept ou une intention en tenant compte eacuteventuellement dune ou des contraintes fonctionnelles structurelles estheacutetiques didactiques symboliques techniques et productives

WIREFRAME = ERGOLAYOUTS

source Ceacutedric Van Haecke TIM2010 I love wireframe

Leccedilon 103 - Creacuteation de sites web

INSPIRATION

source imgspark (moove)

Leccedilon 103 - Creacuteation de sites web

INSPIRATION amp LIGNE GRAPHIQUE

source imgspark (moove) kuler fontsquirrel

Leccedilon 103 - Creacuteation de sites web

FIREWORKS WEB LAYOUTsource infographie-supbe V Geacuterard

CREacuteATION GRAPHIQUE POUR LE WEBLeccedilon 103 - Creacuteation de sites web

LES PIXELSDEacuteFINITION amp REacuteSOLUTION DrsquoEacuteCRAN

source DAEXON

Leccedilon 103 - Creacuteation de sites web

LES TAILLES DrsquoAFFICHAGE

source studiobreakfast tamagoshi

Leccedilon 103 - Creacuteation de sites web

SOLUTION MEDIA QUERIES

source lessframework

Leccedilon 103 - Creacuteation de sites web

GRILLES

source infographie-supbe 960gs

Leccedilon 103 - Creacuteation de sites web

source infographie-supbe

CONSTRUCTION DE PAGES WEBDEacuteCOUPAGE DES IMAGES

Leccedilon 103 - Creacuteation de sites web

CONSTRUCTION DE PAGES WEBOPTIMISATION DES IMAGES

Leccedilon 103 - Creacuteation de sites web

source infographie-supbe optimiser dans Fireworks (png jpg ou gif)

LES COULEURS WEBLeccedilon 103 - Creacuteation de sites web

000000

FFFFFF

CCCCCC

CC3333

HEXADECIMAL Red Green Blue Alpha

rgba(255 0 0 04)

POIDS

source

Leccedilon 103 - Creacuteation de sites web

IMAGES BITMAP amp VECTORIELLES

source Jean-Baptiste Felix drupalitybe

Leccedilon 103 - Creacuteation de sites web

AI PNG

VECTORIEL + BITMAP(SOURCE FW = PNG AVEC CALQUES)

(BITMAP)(VECTORIEL)

HTML CSS

source firebug

Leccedilon 103 - Creacuteation de sites web

PAGES WEB ET FEUILLES DE STYLE

Leccedilon 103 - Creacuteation de sites web

htm css

Principe de lheacutereacutediteacute dans les langages HTML et CSS

PAGES WEB ET FEUILLES DE STYLE

Leccedilon 103 - Creacuteation de sites web

Source Tests HTML et CSS sur W3schools

LES NAVIGATEURS WEB

source smashing

Leccedilon 103 - Creacuteation de sites web

SYSTEgraveME DrsquoEXPLOITATION

source wikipedia - October 2010

Leccedilon 103 - Creacuteation de sites web

MarketsOS Linux Windows Mac OS amp iOS Symbian Blackberry

Desktops amp laptops (based on web usage)

108 8821 682 --- ---

Netbooks amp tablets25 68 7 --- ---

Smartphones 27 3 17 37 15

TYPOGRAPHIE WEB FONT-FACE KITS

source fontsquirrel (vive les fontface kits et familles nombreuses)

Leccedilon 103 - Creacuteation de sites web

ANIMATIONS INTERACTIVES

source jquery jqtouch shadowbox

Leccedilon 103 - Creacuteation de sites web

JQUERYjs

ANIMATIONS INTERACTIVES

source thefwacom

Leccedilon 103 - Creacuteation de sites web

swf

svg

xapMICROSOFTSILVERLIGHT

OPENSOURCE

ADOBE FLASH

CE COURS EN LIGNEtiminfographie-supbe

Professor twittercomproftiwinfographie-supbe

Web graphic designertwitterbemoovemoovebe

VALEacuteRIE GEacuteRARD

belinkedincominvaleriegerard

THANK YOUENJOY)Les baguettes et la tapette agrave mouche font reacutefeacuterence aux films Karate kid (old school) amp Karate kid (2010) symbolisant la patience et la technique le transfert de savoir et le deacutepassement de soi de la relation maicirctre-eacutelegraveve

Cover image courtesy of my own Miyagi Luke Scott at madisonmottcom

V Geacuterard copy 2011 infographie-supbe