principes fondamentaux conception graphique [Dernier

Transcription

02/02/2011
Communication visuelle & web
Module sur trois journées
1, 5 jour : communication print & visuelle
1.5 jour : communication web
mise en pratique
evaluation sur QCM
Vous serez en mesure
participer à la conception d'une communication
visuelle et oral
participer à la conception d'un projet web
intervenir dans la mise à jour
1
Laurent Congras - ESICAD - 2011
Pao
2
Principes fondamentaux
Qu’est-ce la micro-édition ou plublication
Comportement de lecture
balayer
assisté par ordinateur ?
action en grande partie inconsciente
traitement de texte mais plus encore
survoler
processus sophistiqué impliquant
texte, les graphismes
utilisation des polices de caractères
quand la page stimule les yeux, la porte de l’esprit
est ouverte
parcourir
le contenu du corps du texte est lu
respect de plusieurs principes graphiques
dans un but de communiquer un message
application : print, web, présentation multimédia
3
La mise en page
4
Les six principes de base
Le contraste
Permet de véhiculer une information
cible et objectifs
prendre en compte
taille
forme de la composition
occuper l'espace de manière optimale
exemple 1 : connaître la taille des enveloppes
exemple 2 : connaître la résolution d’écran
test
5
6
1
02/02/2011
L’équilibre
Équilibre
FORMEL
Proportion
Équilibre
INFORMEL
7
Monotone
Structuré
8
Rythme
Espace blanc
Élément
dominant
Concentration
altérée
9
10
Les typographies
Unité
Désoriente
Lecture
simplifiée
Polices avec ou sans empattement
Élément
dominant
Times
news roman
Century
Arial
Helvetica
test
11
12
2
02/02/2011
Les typographies
Les typographies
Polices avec empattement
Polices sans empattement
13
14
Les typographies
Les typographies
Polices ornementales
Quelques conseils à suivre
Utilisation des Majuscules
titre en majuscule, un message important
expressions courtes
ne pas dépasser cinq mots consécutifs
Décoration
15
16
Les couleurs
Symbolique des couleurs
Le mode RVB
destiné à l’écran informatique
Le Mode CMJN
destiné à l'impression
test
17
18
3
02/02/2011
Les couleurs
Les illustrations
Les couleurs pantone
Les différentes illustrations
schémas, diagrammes
dessins
photographie
couleur unique et standardisé
19
Les formats d’images
Format d’image
Définition
TIFF
Excellente prévisualisation à l’écran
Bonne qualité d’impression
JPG ou JPEG
Format de compression très efficace mais avec perte
de qualité
Format adapté aux photographies
GIF
Format qui utilise une compression sans perte de
qualité.
Le format GIF supporte la transparence et il permet
également de créer des animations : les GIFs animés.
PNG
Les fichiers PNG sont généralement plus légers que
les GIF, par contre le PNG est moins performant que le
JPEG pour la compression des photographies.
EPS
Format très lourd mais gère les transparences.
Qualité médiocre pour la prévisualisation à l’écran
Bitmap ou bmp
Ne gère pas les niveaux de gris
20
Résolution
Mesurée en dpi (point par pouce)
résolution idéale pour l’impression
300 dpi
résolution idéale pour le web
72 dpi
21
22
23
24
Conclusion
le monde graphique a beaucoup d’impact
sur la façon dont les gens reçoivent et gère
l’information
la conception graphique représente un outil
puissant permettant d’améliorer la
communication
définissez des objectifs modestes pour
commencer
apprenez votre logiciel
test
4
02/02/2011
Communication print
Communication print
Outils Professionnels
Outil Publisher
Quark Xpress
Microsoft Office Publisher 2010 permet de
créez des publications de qualité
professionnelle
Indesign
Difficilement accessible et coût élevé
25
26
Communication print
Méthodologie
Pour commencer, la théorie - Avoir la bonne
approche comment il sera imprimé, comment
il sera utilisé : flux de production
Outil Scribus
Scribus est un logiciel « open source »
(libre) de PAO
prenez une feuille de papier et un crayon et
esquissez votre maquette
rassemblez vos images, préférablement à 300 dpi
ou plus, en TIFF ou PNG
rédigez le texte dans un traitement de texte.
Corrigez les fautes et révisez la grammaire
rassemblez tous ces documents dans un répertoire
27
Communication print
28
Communication print
Mise en pratique (durée environ 1h30)
Mise en pratique (durée environ 1h30)
sur un cas pratique
enregistrez votre travail et envoyer un fichier pdf
mener une réflexion et créer un document de
communication avec le logiciel Publisher.
objet du mail : travail communication print
à l'adresse suivante [email protected]
travail en binôme et sur un thème non imposé
merci de préciser vos noms et prénoms
esquissez une maquette, rassemblez vos
images et rédigez le texte
mise en page avec l'outils publisher
Créez des blocs titres, textes et images
Intégrer des habillages graphique afin de
personnaliser votre document
test
29
30
5
02/02/2011
Communication support visuel
Exemple de présentation
Un diaporama sert
à appuyer
un discours
31
PowerPoint
logiciel de création de présentations édité par
Microsoft
outil essentiel pour tout communiquant
33
test
34
ImPress, équivalent de PowerPoint
logiciel open source de création de
présentations édité par OpenOffice
libre et gratuit
32
Autre exemple
Méthodologie – reflexion
avoir en tête le déroulement de la présentation
tenir compte du temps de présentation global
outil essentiel pour tout communiquant
préparer tous les éléments à intégrer dans la
présentation (les images, graphiques, sons
etc..)
35
36
6
02/02/2011
Une présentation efficace
contenu
Conseils à prendre en compte
ne mettre qu’une à trois idées par diapositive
ecrire peu de texte
ne pas mettre (ou peu) de mots en
majuscules
deux ou trois points principaux
graphisme
lisibilité, texte contrasté
présentation
disposition
user avec parcimonie des couleurs
la taille du texte est primordiale
utiliser des éléments graphiques adaptés
37
38
Conseils à prendre en compte
intégrer des sons uniquement si nécessaire
utiliser la même transition
Mise en pratique (durée environ 2 h)
mener une réflexion et créer un document
de communication visuel avec PowerPoint
travail en binôme
pas trop d'effet
intégrez des visuels, du texte, des graphiques
accompagner la progression de l’oral
des transitions
attention au rythme
entre 10 et 15 diapositives
pensez à tester avant la présentation
personnaliser un thème graphique de votre
choix
document à envoyer au format pdf ou ppt à
[email protected]
39
40
Internet
International Network ou réseau international
Ordinateurs connectés les uns aux autres
1960 : ARPANET et MILNET
test
41
42
7
02/02/2011
Protocoles
HTTP
internet TCP / IP
Création du protocole en 1993
permet d’exploiter des données
courrier électronique
transfert de fichiers
World Wide Web (www) ou la toile, ou le web
Transfert des fichiers hypertextes
Conventions
URL
langage HTML
mise en forme
insertion de sons, vidéos, animations
langages tiers Php - Asp - JavaScript
Réseau et hypertextes
43
Un site web
Etape 1 - Définition du projet
accueil : index
quelle sera ma cible ?
pages stockées sur un serveur
quel sont les objectifs et enjeux ?
quel sera le contenu ?
Navigateur interpréte
45
Conception – projet web
46
Etape 2 - structure et organigramme
Etape 2 - scénario
organisation des contenus
règles de nommages
liens
penser au référencement
principes généraux de navigation
extension html et htm
fonctionnalités
gabarit
différentes zones de contenu
agencement
44
Pages web hyperliées
test
47
48
8
02/02/2011
Exemple de gabarit
Etape 3 – conception graphique
aspect général et ergonomie du site
rappel des objectifs
adéquation avec la cible
Composants essentiels de la charte
dimensions
zones de contenu de navigation
couleurs et typographie
visuels
VALIDATION
49
Exemple de charte graphique
50
Etape 4 – Développement
objectif : tester le site
décliner la charte
créer toutes les pages
tests
techniques
visiteurs
Livraison
51
52
Régles d'écriture multimédia
Etape 5 – Lancement et maintenance
Lecture à l'écran
objectif : traçabilité
différent du support papier
transfert de compétences
contraignante
stratégie d'annonce de lancement
lecture dite de survol
recherche rapide
lecture
plan de maintenance
fréquence de mise à jour
projet d’èvolution
statistiques
Format écran
horizontal (paysage)
Pyramide inversée
message essentiel
attaque
test
53
liens hypertextes
54
9
02/02/2011
Régles d'écriture multimédia
Le référencement
En résumé
Objectif
simplifier la présentation
Annuaires et moteurs
soumettre auprès d’une annuaire
soumettre auprès d'un moteur
structurer autour du lien hypertexte
un titre explicite
un chapeau complétant le titre
Stratégie annuaires
des inter-titres
site stabilisé
phrases courtes (20 mots maxi)
pas de site en construction
rythmé par des liste à puces
préparer
url, titre, descriptif, catégorie
choisir une police sans empattement
55
Le référencement
Le référencement
Stratégie moteurs de recherche
Fonctionnement d’un moteur
à partir du lien "soumettre un site"
robots appelés spiders
mission d'indexation
délai de plusieurs semaines
communiquer l’url
balises d'en tête de vos pages
57
Le référencement
Optimiser vos contenus
Popularité du site
mission d'indexer
500 mots par page
utiliser des balises html de titre H
utiliser des balises html gras ou bold
mise à jour très régulière
images et animations, les noms !
Attribult ALT des balises images
test
58
Le référencement
56
mon site est-il populaire ?
pas de popularité artificielle
pertinence des liens
connaitre son PageRank
http://www.pagerank-direct.fr/
59
60
10
02/02/2011
La mise en ligne
Les hébergeurs
Hébergement
Hébergement mutualisé
comparer les offres
espace disque partagé
les services
idéal pour débuter
estimer vos besoins
Hébergement dédié
technologies
taille de votre site
médias
client indépendant
réservé aux sites à forte audience
nécessite des compétences
coût plus élevé
61
Transférer votre site
Le web analytics
Protocole de communication FTP
Le suivi statistique
File Transfer Protocol
Solution de votre hébergeur
échange de fichiers sur un réseau
Exemple
Logiciels clients FTP
Solution Google analytics
logiciels libres
Filezilla pour windows,
Fetch pour Mac OS X
leader mondial et gratuit
système d'analyse de trafic d'Urchin
objectif : AdWords
63
62
Le web 2.0
Le web 2.0
Le blog
Le forum
Avantages
Peu onéreux
Facile et rapide à mettre en place
lieu d'échange
commentaires archivés et accessibles
le modérateur
Notions de partage et d'échange
La newsletter
Le blog expert
projet global de communication
Le blog évenementiel
objectifs
notoriété, image
produit, service
fidéliser
trafic
Le blog de marque
Le blog d'actualités
test
64
65
66
11
02/02/2011
newsletter
Le web 2.0
Objectifs
Le flux RSS ?
Mise en page
Diffuser ses actualités
Contenu
Really Simple Syndication
Hypertextes
Fichier au format XML
(Extensible Markup Language)
Tester
avant envoie
<?xml version="1.0" encoding="iso-8859-1"?>
<rss version="2.0">
<channel>
<title>Mon site</title>
<description>Ceci est un exemple de flux RSS 2.0</description>
<link>http://www.example.org</link>
</channel>
</rss>
67
68
Le web 2.0
Widget
Le widget
Wise et gadget
mini application
système d’exploitation
blog
69
Développement de site
HTML
CMS
Principes de base
Content managment system
Gratuit WordPress - Joomla
facile et rapide à mettre en place
demande pas de connaissance technique
connaissance du langage HTML et un +
test
70
Derrière une page web
Le code source Html
instructions placées entre <
Exemple 01
>
<title> le titre de mon site </title>
balise title dans la balise <head>
voyons sa structure
71
72
12
02/02/2011
HTML
HTML
Structure d'une page web
Les balises
exemple <b>texte en gras< />
Balise de début et de fin
<b> b pour bold, ce qui signifie gras
<i> i pour italic, ce qui signifie italique
<p> p pour paragraphe, ce qui signifie
paragraphe
Balise dites uniques
<br> <img>
Pas de balise de fermeture </img> ou </br>
73
74
HTML
HTML
Les lettres accentuées et caractères
Créer votre premier document html
spéciaux
Ouvrir NotePad
à sera noté à
éditeur html de windows
é sera noté é
insérer le code suivant et enregistrer
index.htm
Les balises de mise en forme body
<html>
<head>
<title>page d’accueil</title>
</head>
<body>
Mon premier exercice pratique !
<font color="#FF0000">texte
rouge</font>
</body>
</html>
un exemple simple
<body bgcolor=’’#4E6DDA’’>
couleur de l'arrière plan de la page web
75
76
HTML
HTML
Organisation d'un site web
Les titres
Améloire le référencement IMPORTANT
<html>
<head>
<title>page d’accueil</title>
</head>
<body>
<H1> TITRE PRINCIPAL </H1>
<H2> TITRE SECONDAIRE </H2>
<H3> Paragraphe principale</H3>
<H4> Paragraphe secondaire</H4>
<H5> titre Paragraphe 1 secondaire</H5>
<H6> texte1, texte1, texte1, texte1 </H6>
</body>
</html>
test
77
78
13
02/02/2011
HTML
HTML
Imbrication des balises
pas correct : <a><b> texte </a></b>
correct :
<a><b> texte </b></a>
Balises de mise en page
saut de ligne : balise unique <br />
paragraphe : <p> un texte assez long </p>
Alignement à gauche
<p align =’’left’’> paragraphe aligné à gauche </p>
79
HTML
HTML
Insertion d’une image
enregister une image
Code html
<img src="logo.jpg">
faites le test
çà marche pas ?
Normal !
Liens hypertextes vers une page html
<a href="contact.htm">contacter notre
service</a>
Liens hypertextes vers un mail
<a href="mailto:[email protected]">
contact</a>
81
80
82
HTML
HTML
Les tableaux en html
<table> …. </table>
<table> <tr>…..</tr> </table>
<table> <tr><td>….. </td></tr> </table>
Éditeur html
Permet de créer des pages html
Bloc note (que du code)
Dreamweaver (payant, professionnel)
assitant, plus facile à prendre en main
convivial
Kompozer (open source)
assitant, plus facile à prendre en main
moins profesionnel que dreamweaver
test
83
84
14
02/02/2011
Conclusion
Communication visuelle & web
Reflexion, analyse,
Définir les cibles et objectifs
Stratégie de communication globale
Ne vous laisser pas dépasser par la technique
Informez-vous – documentez-vous
veille concurrentielle
sens critique avec justification
Bilan de ces trois jours ?
test
85
15

principes fondamentaux conception graphique [Dernier

Transcription

Documents pareils

locataire - Campus de Bissy

bachelor ressources humaines

Forum de l`emploi et de la formation 2016 Quint

positionnement des cartes

Tournoi découverte de Badminton 1ère

Laurent CHARBONNIER Président

De: Laurent Charbonnier Envoyer: mer 10/12

PDF

laurent chaout-jung - galerie brun leglise