Comment faire un projet Web? Conception Graphique Standards 9/15

Rabat 2011- Comment faire un projet web?

Conception graphique

et standards du web

Dabne

[email protected]

[email protected]


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 2



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.

http://www.veblog.com/fr/2000/1122-graphismeweb.html

pour 3




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

pour 4



Le design graphique, source de confiance:

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.

Voir: http://acsur.org

pour 5


http://acsur.org/


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 6




pour 7



pour 8



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.

Voir:

• Zen Garden: http://www.csszengarden.com/

pour 9


http://www.csszengarden.com/


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 WordPress: http://wordpressthemes.free.fr/, http://www.wpthemes.ch/

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

pour 10


http://www.spip-contrib.net/Themes

http://www.wpthemes.ch/

http://wordpressthemes.free.fr/

http://drupal.org/project/Themes


Les illustrations doivent donner de la force aux contenus

pour 11



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

pour 12



Les standards du Web

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

pour 13



Pourquoi les standards?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 14



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

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



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

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

pour 16



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

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

http://openweb.eu.org/articles/pourquoi_standards/

pour 17




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



Références

• http://www.veblog.com/fr/2000/1122-graphismeweb.html

• http://www.csszengarden.com/

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

• Thèmes pour WordPress: http://wordpressthemes.free.fr/, http://www.wpthemes.ch/

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

• http://openweb.eu.org/articles/pourquoi_standards/

pour 19



http://www.spip-contrib.net/Themes

http://www.wpthemes.ch/

http://wordpressthemes.free.fr/

http://drupal.org/project/Themes

http://www.csszengarden.com/



pour 20


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.

Comment faire un projet Web? Conception Graphique Standards 9/15

Documents

Transcript of Comment faire un projet Web? Conception Graphique Standards 9/15