WEB GRAPHIC DESIGN STARTERS
Cours de Techniques Infographiques Multimédia © 2011 infographie-sup.be — Valérie Gérard
Alors on danse?
Leçon 1 1 - TIM, what the F&»#? 2 - Infographiste web & multimédia 3 - Méthodologie de création de site web source image : Les leçons de Stromae.
Leçon 1.01 TIM, what the F&»#?
Leçon 1.01 - TIM, what the &»#?
TIM
pour les intimes
Leçon 1.01 - TIM, what the &»#?
TECHNIQUES INFOGRAPHIQUES MULTIMEDIA création graphique traitement d’images images fixes images animées images interactives
Leçon 1.01 - TIM, what the &»#?
INTERFACES VISUELLES HOMME-MACHINE
Desktop, mobile phone, mobile tablets (ipad, slate, galaxy tab...), smartphones, amovible (usb, dvd, cd, ...), bornes interactives, TV interactive, frigo intelligents,tamagoshi, 6ème sens, ... … images : ipad, six sense, samsung
Leçon 1.01 - TIM, what the &»#?
OBJECTIFS DU COURS : INFOGRAPHIE
STOP IMAGE ABUSE
Jeu des 10 erreurs Le choix d’image ne fonctionne pas avec le texte, de plus l’image pourrie est trouvée sur le web à la première recherche google en basse résolution, détourée à la gomme et sauvegardée en GIF pour être sur qu’on voit bien l’anti-aliasing, étirée non proportionnellement à l’horizontal, 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 étiré en plus grand et réexporter en jpeg 50%. — Mais finalement le tout illustre bien le propos «stop image abuse», non? source : pour des raisons évidentes, le créateur préfère rester anonyme
Leçon 1.01 - TIM, what the &»#?
OBJECTIFS DU COURS : PRÉSENTATION
GET TRUST
source : webpagesthatsuck.com
Leçon 1.01 - TIM, what the &»#?
OBJECTIFS DU COURS : INTERACTION
GET THERE* *I MEAN THERE
Remarquez-vous quelque chose d’anormal?
source : innocent english
Leçon 1.01 - TIM, what the &»#?
REALISATION FINALE UN PROTOTYPE GRAPHIQUE ET INTERACTIF DE VOTRE SITE WEB PORTFOLIO
CONCEPTION EN 5 ETAPES
PHASE 1 PHASE 2 PHASE 3 PHASE 4 PHASE 5
CROQUIS PAPIER WIREFRAME N&B LAYOUT GRAPHIQUE MOCKUP INTERACTIF SCREENCAST VIDEO
source : Tim2010 : Camille Besneville, Teddy kishi, Cédric Van Haeke, Tom Leclercq, Mathier Strale
DEMONSTRATION FIREWORKS
source : Adobe — Using Fireworks CS3 to design effective, interactive website presentations
SUPPORT EN LIGNE
tim.infographie-sup.be
www.infographie-sup.be
Leรงon 1.02 Infographiste Web & Multimedia
Leçon 1.01 - Infographiste W&M
INFOGRAPHISTE WEB & MULTIMÉDIA
ou concepteur graphique, web art director, interactive designer, graphiste web, designer graphique, ...
L’infographiste web & multimédia prend en charge la création graphique d'une oeuvre multimédia, de l'ébauche des maquettes illustrant un scénario à l'élaboration détaillé de tous ces dessins.
LES MÉTIERS DU WEB & MULTIMEDIA
source : awt.be, design is dead
1 - TIM, what the &»#?
DESIGN IS DEAD REEL MOTION
source : http://showreel.designisdead.be/
Leรงon 1.01 - Infographiste W&M
PRODUCTION CONCEPTION Rร ALISATION EXPLOITATION DISTRIBUTION UTILISATION ligne du temps
Leçon 1.02 - Infographiste W&M
TRAVAIL, LOISIRS & ... TOUT LE RESTE
Utilisations multiples : commerciale (vitrine, e-commerce), communautaire (social network), collaboratif (extranet...), informatif (blogs, ...) , managérial / administrative (CRM, ERP), éducative (LMS, e-learning), divertissements (jeux, films, ...), hybrides. source : apple, boxee
Leçon 1.02 - Infographiste W&M
DOMAINES D’ACTIVITÉS Presse
Communication Publicité
Santé!
Bureautique
Edition jeux
marketing commerce Informatique
Loisirs
Tourisme Culturel Pédagogie
Leçon 1.02 - Infographiste W&M
LE POLYVALENT Compétences -
Concepteur graphique Architecte web / ergonome Designer d’interface Illustrateur multimédia motion designer Flash designer / developer Developer PHP/mySQL Intégrateur (html/css) CMS architecte ...
source : pixelpharmacy.com/2002
Leรงon 1.02 - Infographiste W&M
LE SPร CIALISTE
Benjamin de Cock UI Designer : Interfaces logicielle Mac & Web apps (Daexon.com) - 2011
Leçon 1.02 - Infographiste W&M
SALAIRES
€
Leรงon 1.02 - Infographiste W&M
LOGICIELS
source : Adobe, Microsoft IE, Mozilla firefox, Google Chrome, Apple safari, Opera, firebug, dropbox.
wm.infographie-sup.be
Leçon 1.03 Création de sites web
Leçon 1.03 - Création de sites web
MÉTHODOLOGIE Définition du projet Développement de la structure du site Conception graphique et validation Production et contrôle de qualité Lancement et maintenance
source : goto, basecamphq
Leçon 1.03 - Création de sites web
PLANNING
source : basecamphq, outpost for iphone, google agenda, google synch for iphone, Things.
Leçon 1.03 - Création de sites web
AUDIT
source : basecamphq, google analytics, google webmaster tools, crazyegg
Leçon 1.03 - Création de sites web
ARBORESCENCE
source : post-it, lovelycharts
Leçon 1.03 - Création de sites web
DESIGN Le design est une discipline visant à représenter concrètement, une pensée, un concept ou une intention en tenant compte éventuellement d'une ou des contraintes fonctionnelles, structurelles, esthétiques, didactiques, symboliques, techniques et productives
source : Ferrandes Joffrey, TIM2010
Leçon 1.03 - Création de sites web
WIREFRAME = ERGOLAYOUTS
source : Cédric Van Haecke, TIM2010, I love wireframe
Leçon 1.03 - Création de sites web
INSPIRATION
source : imgspark (moove),
Leçon 1.03 - Création de sites web
INSPIRATION & LIGNE GRAPHIQUE
source : imgspark (moove), kuler, fontsquirrel
Leçon 1.03 - Création de sites web
CRÉATION GRAPHIQUE POUR LE WEB
FIREWORKS WEB LAYOUT,
source : infographie-sup.be, V. Gérard
Leçon 1.03 - Création de sites web
LES PIXELS DÉFINITION & RÉSOLUTION D’ÉCRAN
source : DAEXON
Leçon 1.03 - Création de sites web
LES TAILLES D’AFFICHAGE
source : studiobreakfast, tamagoshi
Leçon 1.03 - Création de sites web
SOLUTION : MEDIA QUERIES
source : lessframework
Leçon 1.03 - Création de sites web
GRILLES
source : infographie-sup.be, 960gs
Leçon 1.03 - Création de sites web
CONSTRUCTION DE PAGES WEB DÉCOUPAGE DES IMAGES
source : infographie-sup.be
Leçon 1.03 - Création de sites web
CONSTRUCTION DE PAGES WEB OPTIMISATION DES IMAGES
source : infographie-sup.be, optimiser dans Fireworks (png, jpg, ou gif?)
Leçon 1.03 - Création de sites web
LES COULEURS WEB HEXADECIMAL
#000000 #FFFFFF #CCCCCC #CC3333
Red Green Blue Alpha
rgba(255, 0, 0, 0.4);
Leçon 1.03 - Création de sites web
POIDS
source :
Leçon 1.03 - Création de sites web
IMAGES BITMAP & VECTORIELLES
.AI
.PNG
(VECTORIEL) VECTORIEL + BITMAP (SOURCE FW = .PNG AVEC CALQUES)
source : Jean-Baptiste Felix, drupality.be
(BITMAP)
Leçon 1.03 - Création de sites web
HTML / CSS
source : firebug
Leçon 1.03 - Création de sites web
PAGES WEB ET FEUILLES DE STYLE
.htm Principe de l'hérédité dans les langages HTML et CSS..
.css
Leçon 1.03 - Création de sites web
PAGES WEB ET FEUILLES DE STYLE
Source : Tests HTML et CSS sur W3schools
Leçon 1.03 - Création de sites web
LES NAVIGATEURS WEB
source : smashing
Leçon 1.03 - Création de sites web
SYSTÈME D’EXPLOITATION Markets/OS
Linux
Windows
Mac OS & iOS
Symbian
Blackberry
1.08%
88.21%
6.82%
---
---
25%
68%
7%
---
---
27%
3%
17%
37%
15%
Desktops & laptops (based on web usage)
Netbooks & tablets
Smartphones
source : wikipedia - October 2010
Leçon 1.03 - Création de sites web
TYPOGRAPHIE WEB @FONT-FACE KITS
source : fontsquirrel (vive les @fontface kits et familles nombreuses)
Leçon 1.03 - Création de sites web
ANIMATIONS INTERACTIVES JQUERY
.js
source : jquery, jqtouch, shadowbox
Leçon 1.03 - Création de sites web
ANIMATIONS INTERACTIVES ADOBE FLASH
.swf MICROSOFT SILVERLIGHT
.xap OPENSOURCE
.svg source : thefwa.com
CE COURS EN LIGNE tim.infographie-sup.be
VALÉRIE GÉRARD Professor twitter.com/proftiw infographie-sup.be Web graphic designer twitter.be/moove moove.be be.linkedin.com/in/valeriegerard
THANK YOU ENJOY;) Les baguettes et la tapette à mouche font référence aux films Karate kid (old school) & Karate kid (2010) symbolisant la patience et la technique ; le transfert de savoir et le dépassement de soi de la relation maîtreélève. Cover image, courtesy of my own Miyagi : Luke Scott at madisonmott.com
V. Gérard © 2011 infographie-sup.be