Vous êtes sur la page 1sur 20

Rabat 2011- Comment faire un projet web?

Conception graphique et standards du web

Dabne

carolina@dabne.net

ana@dabne.net

Rabat 2011- Comment faire un projet web?

Conception graphique

Qu'entendre par design graphique:

Il ne faut surtout pas réduire à la présence d'illustrations stricto sensu le design graphique (ou design visuel) d'un site web. Par design graphique, il faut comprendre les éléments participant à l'impression visuelle laissée par un site au sens large :

gabarit général des pages,

présence d'illustrations (statiques ou animées) au sein du gabarit des pages ou de leur contenu,

design de la navigation (textuel, boutons ou icônes),

distinction entre les zones de chaque page,

couleurs de fond de page et de texte,

choix des polices et des tailles de caractères,

etc

pour
pour

2

Rabat 2011- Comment faire un projet web?

Conception graphique

De plus, les principes conceptuels techniques généraux du site participent de son apparence générale: emploi restreint ou généralisé de technologies d'animation pour le contenu ou la navigation, ou au contraire prédominance du HTML textuel, conduiront à définir des identités visuelles radicalement différentes.

pour
pour

3

Rabat 2011- Comment faire un projet web?

Conception graphique

Le design graphique, source d'identification

Le premier rôle du design visuel est de permettre une parfaite identification du site sur lequel on se trouve, et ce même si on n'y arrive pas par la page d'accueil. Par conséquent, le logo de l'émetteur du site, sa marque, doivent être aisément repérables, en partie supérieure de la page.

De plus, Les choix de couleur et de composition de page devront permettre d'éviter toute confusion entre l'apparence d'un site et celui de ses concurrents directs (identification «différentielle»). En contrepartie, une galaxie de sites appartenant à un même univers (par exemple un réseau d'hôtels indépendants mais affiliés au même réseau de vente) ont tout intérêt à unifier le «look and feel» de leur site pour mettre en avant leurs avantages communs (identification par association).

le «look and feel» de leur site pour mettre en avant leurs avantages communs (identification par
le «look and feel» de leur site pour mettre en avant leurs avantages communs (identification par
pour
pour

4

Rabat 2011- Comment faire un projet web?

Le design graphique, source de confiance:

Conception graphique

Sous certaines conditions, un bon design visuel peut améliorer la confiance du visiteur dans l'émetteur du site (toutes choses égales par ailleurs, cela ne suffit pas). Comment? En prodiguant un gabarit de page constant au travers des pages et une composition rigoureuse et précise de celles ci. Un site dont la composition de page ferait trop «patchwork» ou souffrirait d'imprécisions graves verrait son potentiel de diffusion de confiance sérieusement entamé: un site au look professionnel véhiculera plus facilement une image professionnelle de la société qui l'édite.

véhiculera plus facilement une image professionnelle de la société qui l'édite. Voir: http://acsur.org pour 5
pour
pour

5

Rabat 2011- Comment faire un projet web?

Conception graphique

Le design graphique, source d'ergonomie

Ce point est essentiel: un bon design graphique doit permettre de repérer facilement les choix de navigation offerts à l'internaute, et de distinguer clairement les zones dédiées au contenu des zones "fonctionnelles".

Trop de sites rendent difficile cette distinction par des mauvais choix de polices, de contraste entre fond et texte, par un mauvais design des boutons, etc

pour
pour

6

Rabat 2011- Comment faire un projet web?

pour
pour

Conception graphique

7

Rabat 2011- Comment faire un projet web?

Conception graphique

Rabat 2011- Comment faire un projet web? Conception graphique pour 8
pour
pour

8

Rabat 2011- Comment faire un projet web?

Conception graphique

Gabarits

Un gabarit, souvent nommé en informatique template (terme anglais utilisé en informatique pour désigner un modèle de présentation des données), est un patron de mise en page où l'on place images et textes.

patron de mise en page où l'on place images et textes. pour Voir: • Zen Garden:
pour
pour

Voir:

Zen Garden:

9

Rabat 2011- Comment faire un projet web?

Conception graphique

Il y a des gabarits déjà construits pour certaines systèmes de gestion de contenu web.

Son utilisation est moins cher que de faire une nouvelle conception graphique.

Thèmes pour Drupal: http://drupal.org/project/Themes

Thèmes pour Spip: http://www.spip-contrib.net/Themes

pour
pour

10

Rabat 2011- Comment faire un projet web?

Conception graphique

Les illustrations doivent donner de la force aux contenus

pour
pour

11

Rabat 2011- Comment faire un projet web?

Conception graphique

L'illustration peut souvent être un excellent complément de l'information textuelle: une bonne image vaut mieux qu'un long discours.

être un excellent complément de l'information textuelle: une bonne image vaut mieux qu'un long discours. pour
pour
pour

12

Rabat 2011- Comment faire un projet web?

Les standards du Web

Conception graphique

Les standards du Web est une expression désignant différentes technologies et protocoles utilisés sur le Web et en particulier ceux définis par le W3C sous forme de recommandations.

Elle se réfère principalement aux technologies formant le socle principal d'un document web: le HTML et le XHTML, les feuilles de style en cascade (CSS) et le DOM (Document Object Model).

document web: le HTML et le XHTML, les feuilles de style en cascade (CSS) et le
pour
pour

13

Rabat 2011- Comment faire un projet web?

Pourquoi les standards?

Conception graphique

Depuis les premières heures du Web, les principaux fabricants de navigateurs ont tenté de se créer un public captif en créant des extensions HTML propriétaires, restituées uniquement par leurs produits respectifs. Le Web s'est ainsi divisé en deux camps : Microsoft IExplorer et Netscape. Pour que leurs sites soient accessibles aux deux principaux navigateurs, les développeurs Web ne pouvaient opter que pour des choix aussi insatisfaisants les uns que les autres :

n'utiliser qu'une syntaxe commune aux deux navigateurs, et se retrouver avec un site très pauvre, se démarquant peu de la concurrence ;

ne s'adresser qu'à l'un des deux camps et sacrifier ainsi une grande partie de son audience et de sa clientèle potentielle ;

faire deux versions du même site, au prix d'un travail bien plus important et forcément plus coûteux.

La concurrence entre Netscape et Microsoft a donc mené à une balkanisation du Web, allant complètement à l'encontre de son ambition initiale.

Mais aujourd'hui, les choses ont bien changé. Depuis 1994, un organisme de standardisation, le W3C , met en œuvre des normes Web. Les fabricants de navigateurs, à commencer par Microsoft, Netscape et Opera, font à présent preuve d'une volonté commune de respecter ces normes, mettant fin à ces contraintes coûteuses pesant sur les développeurs.

pour
pour

14

Rabat 2011- Comment faire un projet web?

Conception graphique

Pour l'avenir du web. Web sémantique, PDA, téléphones mobiles, etc.

Pour une interopérabilité et une portabilité certifiée. Tous les navigateurs.

et une portabilité certifiée. Tous les navigateurs. • Pour une accessibilité universelle aux contenus. Tout

Pour une accessibilité universelle aux contenus. Tout le monde avec ses

technologies disponibles.

Pour la production de contenu Web à moindre coût.

Il est maintenant possible de créer des CSS qui s'appliqueront globalement à un ou plusieurs documents, permettant ainsi de changer radicalement l'apparence entière d'un site en quelques minutes à peine, en modifiant tout simplement la feuille de style qui y est associée.

pour
pour
d'un site en quelques minutes à peine, en modifiant tout simplement la feuille de style qui

15

Rabat 2011- Comment faire un projet web?

Conception graphique

Pour tirer profit de la technologie XML. Pour parvenir à

concevoir des applications capables de tirer avantage des apports du Web sémantique, tout en préservant les aspects d'accessibilité, de portabilité et d'interopérabilité, il est nécessaire d'emprunter la voie de la normalisation et de commencer à coder les documents selon la syntaxe XML.

et de commencer à coder les documents selon la syntaxe XML. • Pour un contrôle qualité
et de commencer à coder les documents selon la syntaxe XML. • Pour un contrôle qualité

Pour un contrôle qualité optimisé du travail fourni

par les prestataires. Étant donné que les standards sont très bien documentés par eux-mêmes, l'application des normes garantit que quiconque sera appelé à prendre la relève sur un projet existant pourra s'y plonger rapidement, plutôt que de perdre un temps précieux à essayer d'en reconstituer les lignes directrices.

Pour

une

réduction

considérable

du

volume

des

documents. Les normes XHTML et CSS permettent une réduction substantielle du poids des documents Web en éliminant les redondances dans le code.

CSS permettent une réduction substantielle du poids des documents Web en éliminant les redondances dans le
pour
pour

16

Rabat 2011- Comment faire un projet web?

Conception graphique

Pour un référencement plus efficace dans les moteurs de recherche.

Garantie de meilleurs résultats de classement et de reconnaissance des sites, d'où une visibilité accrue dans les moteurs de recherche.

Pour la pérennité des documents. La pérennité des documents nous

assure que, quelles que soit la direction dans laquelle évolueront les technologies dans les prochaines années, les documents seront toujours interprétables par les agents utilisateurs du moment (navigateurs, interpréteurs Web, etc), préservant ainsi de précieuses informations pour les générations à venir.

de précieuses informations pour les générations à venir. • Pour une rétro compatibilité avec les anciens

Pour une rétro compatibilité avec les anciens navigateurs. On garantit ainsi

que tous les navigateurs répondant aux normes de l'industrie pourront afficher correctement le contenu. Bien sûr, la présentation de ce contenu sera plus sobre dans les navigateurs plus anciens, mais il demeurera parfaitement accessible.

pour
pour

17

Rabat 2011- Comment faire un projet web?

Conception graphique

Quelle importance donner au design/ à la conception graphique.

Comment la conception graphique s’intègre sur une page web.

Quel va être le coût d’un changement dans le design / la conception graphique.

Pourquoi utiliser des standards?

L'utilisabilité et l’accessibilité: dans quel but?

Le design est-il le même pour une web en caractères dariya ou en caractères latins?

Comment notre site web est vue dans tous les navigateurs.

Recommandations pour le design/la conception graphique.

pour
pour

18

Rabat 2011- Comment faire un projet web?

Références

Conception graphique

Thèmes pour Drupal: http://drupal.org/project/Themes

Thèmes pour Spip: http://www.spip-contrib.net/Themes

pour
pour

19

Rabat 2011- Comment faire un projet web?

pour
pour

Conception graphique

2011- Comment faire un projet web? pour Conception graphique Cette oeuvre est mise à disposition selon

Cette oeuvre est mise à disposition selon le contrat Attribution-ShareAlike 3.0 Unported disponible en ligne http://creativecommons.org/licenses/by-sa/3.0/ ou par courrier postal à Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.

20