principes fondamentaux conception graphique [dernier … · 2012. 12. 24. · les six principes de...

02/02/2011

test 1

1Laurent Congras - ESICAD - 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


Pao

� Qu’est-ce la micro-édition ou plublication

assisté par ordinateur ?� traitement de texte mais plus encore

� processus sophistiqué impliquant

� texte, les graphismes

� utilisation des polices de caractères

� respect de plusieurs principes graphiques

� dans un but de communiquer un message

� application : print, web, présentation multimédia


Principes fondamentaux

� Comportement de lecture� balayer

action en grande partie inconsciente

� survolerquand la page stimule les yeux, la porte de l’esprit est ouverte

� parcourirle contenu du corps du texte est lu


� 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

La mise en page


Les six principes de base

� Le contraste


02/02/2011

test 2

� L’équilibre



Équilibre FORMEL

Équilibre INFORMEL

� Proportion



Monotone Structuré

� Rythme



Élémentdominant

� Espace blanc



Concentration altérée

Lecturesimplifiée

� Unité



Désoriente Élémentdominant

� Polices avec ou sans empattement

Les typographies


Times news romanCentury

Arial Helvetica

02/02/2011

test 3

� Polices avec empattement

Les typographies


� Polices sans empattement

Les typographies


� Polices ornementales

Les typographies


Décoration

� Quelques conseils à suivre� Utilisation des Majuscules

� titre en majuscule, un message important

� expressions courtesne pas dépasser cinq mots consécutifs

Les typographies


Symbolique des couleurs


� Le mode RVB� destiné à l’écran informatique

� Le Mode CMJN� destiné à l'impression

Les couleurs


02/02/2011

test 4

� Les couleurs pantone� couleur unique et standardisé

Les couleurs


� Les différentes illustrations

� schémas, diagrammes

� dessins

� photographie

Les illustrations


Les formats d’images


Format d’image Définition

TIFF Excellente prévisualisation à l’écranBonne 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

� Mesurée en dpi (point par pouce)

� résolution idéale pour l’impression300 dpi

� résolution idéale pour le web72 dpi

Résolution


� le monde graphique a beaucoup d’impactsur la façon dont les gens reçoivent et gèrel’information

� la conception graphique représente un outilpuissant permettant d’améliorer la communication

� définissez des objectifs modestes pour commencer

� apprenez votre logiciel

Conclusion

23Laurent Congras - ESICAD - 2011 24Laurent Congras - ESICAD - 2011

02/02/2011

test 5

� Outils Professionnels� Quark Xpress

� Indesign

� Difficilement accessible et coût élevé

Communication print


� Outil Publisher� Microsoft Office Publisher 2010 permet de

créez des publications de qualité professionnelle

Communication print


� Outil Scribus� Scribus est un logiciel « open source »

(libre) de PAO

Communication print


� Pour commencer, la théorie - Avoir la bonne approche comment il sera imprimé, comment il sera utilisé : flux de production

� 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

Méthodologie


� Mise en pratique (durée environ 1h30) � sur un cas pratique

mener une réflexion et créer un document de communication avec le logiciel Publisher.

� travail en binôme et sur un thème non imposé

� esquissez une maquette, rassemblez vos images et rédigez le texte

� mise en page avec l'outils publisherCréez des blocs titres, textes et imagesIntégrer des habillages graphique afin de personnaliser votre document

Communication print


� Mise en pratique (durée environ 1h30) � enregistrez votre travail et envoyer un fichier pdf

à l'adresse suivante [email protected]

� objet du mail : travail communication print

� merci de préciser vos noms et prénoms

Communication print


02/02/2011

test 6


Un diaporama sert à appuyer un discours

� Exemple de présentation

Communication support visuel


� Autre exemple



� PowerPoint

� logiciel de création de présentations édité par Microsoft

� outil essentiel pour tout communiquant



� ImPress, équivalent de PowerPoint

� logiciel open source de création de présentations édité par OpenOffice

� libre et gratuit



� 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..)



02/02/2011

test 7

� Une présentation efficace

� contenu

� deux ou trois points principaux

� graphisme

� lisibilité, texte contrasté

� présentation

� disposition



� 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

� user avec parcimonie des couleurs

� la taille du texte est primordiale

� utiliser des éléments graphiques adaptés



� Conseils à prendre en compte

� intégrer des sons uniquement si nécessaire

� utiliser la même transition

� pas trop d'effet

� accompagner la progression de l’oral

� attention au rythme

� pensez à tester avant la présentation



� 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

� intégrez des visuels, du texte, des graphiques des transitions

� entre 10 et 15 diapositives

� personnaliser un thème graphique de votre choix

� document à envoyer au format pdf ou ppt à [email protected]




� International Network ou réseau international

� Ordinateurs connectés les uns aux autres

� 1960 : ARPANET et MILNET

Internet


02/02/2011

test 8

� internet TCP / IP

� permet d’exploiter des données

� courrier électronique

� transfert de fichiers

� World Wide Web (www) ou la toile, ou le web

� Réseau et hypertextes

Protocoles


� Création du protocole en 1993

� Transfert des fichiers hypertextes

� Conventions

� URL� langage HTML

� mise en forme

� insertion de sons, vidéos, animations

� langages tiers Php - Asp - JavaScript

HTTP


� Pages web hyperliées� accueil : index

� pages stockées sur un serveur

� Navigateur interpréte

Un site web


� Etape 1 - Définition du projet� quelle sera ma cible ?

� quel sont les objectifs et enjeux ?

� quel sera le contenu ?

Conception – projet web


� Etape 2 - structure et organigramme� organisation des contenus

� liens

� principes généraux de navigation

� fonctionnalités



� Etape 2 - scénario� règles de nommages

� penser au référencement

� extension html et htm

� gabarit

� différentes zones de contenu

� agencement



02/02/2011

test 9

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



Exemple de charte graphique


� Etape 4 – Développement� objectif : tester le site

� décliner la charte

� créer toutes les pages

� tests� techniques

� visiteurs

� Livraison



� Etape 5 – Lancement et maintenance� objectif : traçabilité

� transfert de compétences

� stratégie d'annonce de lancement

� plan de maintenance

� fréquence de mise à jour

� projet d’èvolution

� statistiques



� Lecture à l'écran� différent du support papier

� contraignante

� lecture dite de survol

� recherche rapide

� lecture

� Format écran

� horizontal (paysage)

� Pyramide inversée

� message essentiel

� attaque

� liens hypertextes

Régles d'écriture multimédia


02/02/2011

test 10

� En résumé� simplifier la présentation

� structurer autour du lien hypertexte

� un titre explicite

� un chapeau complétant le titre

� des inter-titres

� phrases courtes (20 mots maxi)

� rythmé par des liste à puces

� choisir une police sans empattement

Régles d'écriture multimédia


� Objectif

� Annuaires et moteurs

� soumettre auprès d’une annuaire

� soumettre auprès d'un moteur

� Stratégie annuaires� site stabilisé

� pas de site en construction

� préparer

� url, titre, descriptif, catégorie

Le référencement


� Stratégie moteurs de recherche� à partir du lien "soumettre un site"

� communiquer l’url

� balises d'en tête de vos pages

Le référencement


� Fonctionnement d’un moteur� robots appelés spiders

� mission d'indexation

� délai de plusieurs semaines

Le référencement


� Optimiser vos contenus� 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

Le référencement


� Popularité du site� mon site est-il populaire ?

� pas de popularité artificielle

� pertinence des liens

� connaitre son PageRank

� http://www.pagerank-direct.fr/

Le référencement


02/02/2011

test 11

� Hébergement� comparer les offres

les services

� estimer vos besoins� technologies

� taille de votre site

� médias

La mise en ligne


� Hébergement mutualisé� espace disque partagé

� idéal pour débuter

� Hébergement dédié� client indépendant

� réservé aux sites à forte audience

� nécessite des compétences

� coût plus élevé

Les hébergeurs


� Protocole de communication FTP� File Transfer Protocol

� échange de fichiers sur un réseau

� Logiciels clients FTP� logiciels libres

� Filezilla pour windows,

� Fetch pour Mac OS X

Transférer votre site


� Le suivi statistique

� Solution de votre hébergeur� Exemple

� Solution Google analytics� leader mondial et gratuit

� système d'analyse de trafic d'Urchin

� objectif : AdWords

Le web analytics


� Le blog� Avantages

� Peu onéreux

� Facile et rapide à mettre en place

� Notions de partage et d'échange

� Le blog expert

� Le blog évenementiel

� Le blog de marque

� Le blog d'actualités

Le web 2.0


� Le forum� lieu d'échange

� commentaires archivés et accessibles

� le modérateur

� La newsletter� projet global de communication

� objectifs

� notoriété, image

� produit, service

� fidéliser

� trafic

Le web 2.0


02/02/2011

test 12

newsletter


Mise en page

Contenu

Objectifs

Hypertextes

Tester avant envoie

� Le flux RSS ?� Diffuser ses actualités

� Really Simple Syndication

� Fichier au format XML (Extensible Markup Language)

Le web 2.0


<?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>

� Le widget� Wise et gadget

� mini application

� système d’exploitation

� blog

Le web 2.0


Widget


� CMS � Content managment system

� Gratuit WordPress - Joomla

� facile et rapide à mettre en place

� demande pas de connaissance technique

� connaissance du langage HTML et un +

Développement de site


� Principes de base� 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

HTML


02/02/2011

test 13

� Structure d'une page web

HTML


� 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>

HTML


� Les lettres accentuées et caractères spéciaux

� à sera noté à

� é sera noté é

� Les balises de mise en forme body� un exemple simple

<body bgcolor=’’#4E6DDA’’>

� couleur de l'arrière plan de la page web

HTML


� Créer votre premier document html

� Ouvrir NotePad� éditeur html de windows

� insérer le code suivant et enregistrerindex.htm

HTML


<html><head><title>page d’accueil</title></head><body>Mon premier exercice pratique !<font color="#FF0000">texte rouge</font></body></html>

� Organisation d'un site web

HTML


� Les titres� Améloire le référencement IMPORTANT

HTML


<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>

02/02/2011

test 14

� Imbrication des balises

� pas correct : <a><b> texte </a></b>

� correct : <a><b> texte </b></a>

HTML


� 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>

HTML


� Insertion d’une image

� enregister une image

� Code html <img src="logo.jpg">

� faites le test

� çà marche pas ?

� Normal !

HTML


� 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>

HTML


� Les tableaux en html

� <table> …. </table>

� <table> <tr>…..</tr> </table>

� <table> <tr><td>….. </td></tr> </table>

HTML


� É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

HTML


02/02/2011

test 15

� 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 ?

Conclusion


principes fondamentaux conception graphique [dernier … · 2012. 12. 24. · les six principes de...

Documents