Webdesign le graphisme et ses principes

24
Le Graphisme et ses principes de base Webdesign Olivier Dommange

Transcript of Webdesign le graphisme et ses principes

Page 1: Webdesign le graphisme et ses principes

Le Graphismeet ses principes de base

Webdesign

Oliv

ier D

omm

ange

Page 2: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

Utiliser des ressources visuelles de façon à organiser et renforcer le contenu et son message.

Le graphisme à pour effet de :

Augmenter la crédibilité et mettre en confianceValoriser le contenu et faciliter sa lectureOrganiser le contenu en fonction du supportIdentifier et établir des repères visuelsSéduire

L'effet du graphisme

Page 3: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

La couleuret ses fonctions

Page 4: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

Elles communiquent

Les couleurs

Page 5: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

Combinaisons naturelles des couleurs

Les couleurs

Page 6: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

La déclinaison des modes de couleurs

Couleurs - modes de couleurs

Page 7: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

https://kuler.adobe.com

Couleurs - outils

Page 8: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

La typographieet sa mise en forme

Page 9: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

Leurs spécificités

La typographie

Page 10: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

@fontface (ou les polices Web autres que les « standards »)

La typographie - Webfonts

Fontface apparue avec le CSS 3 offre la possibilité d’utiliser dorénavant des polices spécifiques dans les pages Web.

Page 11: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

La typographie et la mise en forme

La typographie

Page 12: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

La typographie et la mise en forme

La typographie

Page 13: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

La compositionet la mise en page

Page 14: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

Objectif de la composition

Il s’agit de définir des emplacements stratégiques pour les contenus, menus et outils de la page.

Faciliter l’accès aux contenus Gérer le niveau de lecture des contenusSimplifier la navigation par l’emplacement stratégique des menus de navigation Equilibrer et harmoniser les espaces et les contenusFaciliter le repérage des outils.

La composition

Page 15: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

Structurer et organiser le contenu

La composition

Page 16: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

La disposition du contenu

La composition

Page 17: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

Les niveaux de lecture

La composition

Page 18: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

Le sens de la lecture

La composition

Page 19: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

Les zones stratégiques

La composition

Page 20: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

L'accessibilité des zones

La composition

Page 21: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

L'imageet le traitement

Page 22: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

Créer des compositions surréalistes

L'image – le montage photographique

Page 23: Webdesign le graphisme et ses principes

Oliv

ier D

omm

ange

L'infographie combine l'illustration et le texte pour expliciter un concept.

L'image – l'infographie (graphisme d'information)

Page 24: Webdesign le graphisme et ses principes

http://www.linkedin.com/in/olivierdommange

Olivier Dommange