multimedialab poule
coursmagdocgalerieliensinfos
Le web est un médium spécifique: accessible grâce à un navigateur, il rend accessible une série sans cesse croissante de sites aux statuts les plus divers (services, pages personnelles, web art, commerce, etc).

PDF_image

Histoire de l'Internet.

Une chronologie de l’avènement de l’Internet,
incluant l’appropriation de ce média et de ses outils par les artistes.

PDFTélécharger (PDF - 5,1 Mo).

Une série de normes, définies par le W3 C (World Wide Web Consortium) définissent les conditions d'accès à ces ressources, dans le cadre d'une technologie mise au point au CERN par Tim-Berners Lee en 1990.

La connaissance et l'application de ces normes est un des aspects incontournables du webdesign: référencement dans les moteurs de recherches, qualité de l'affichage, sites web adaptatif (responsive design), chargement correct de la page, etc...

Pour réaliser des projets de ce type, un choix d'outils logiciels est nécessaire, induisant une manière personnelle de les utiliser, voire de les détourner. Se conformer aux normes du WWW et aux outils, ou bien les détourner en en expérimentant les limites ? Il s'agit là d'options personnelles.

Depuis que je rencontre des étudiant(e)s qui souhaitent se lancer dans la création de contenus en ligne, je suis frappé autant par leur détermination que par leur perception inexacte de ce qu'est réellement le réseau Internet, et en particuliers le World Wide Web, qui en fait partie. La plupart du temps, cette incompréhension occasionne pas mal d'énervement, voire de découragement, à cause d'erreurs de conception souvent mineures (mais lourdes à rectifier) et totalement évitables.

La première chose à faire sera de consacrer le temps nécessaire à comprendre en profondeur les principes fondamentaux de la publication en ligne. Durant cette phase d'introduction, vous effectuerez divers essais (construire une page, l'envoyer en ligne) qui vous permettront d'expérimenter chaque étape du travail.

4 exemples de sites particulièremment soignés (forme & contenu):

Zen Garden
Zen Garden
Zen Garden
Zen Garden


4 exemples de sites d'expertise:

Zen Garden
Zen Garden
Zen Garden
Zen Garden


PDFTélécharger le PDF de la projection utilisée en classe (PDF - 2 Mo).

Webdesigner ?

Avant de parler des spécificités techniques propres au web, il faut préciser qu'un webdesigner est d'abord un designer tout court. Le mot "design", hérité du vocabulaire anglo-saxon, est généralement perçu de manière confuse par les néophytes et ne bénéficie d'aucune traduction littérale. "Design" pourrait se traduire par "conception".

Il est utile de rappeler que le design est souvent associé à un domaine: design graphique, design numérique, design industriel. Néanmoins, le design dans sa globalité est plus important que n'importe quel domaine isolé auquel il se rapporte. Le design est une façon de penser. C'est aussi une façon de se situer, d'explorer un problème objectif,
et de déterminer des approches pour concevoir et évaluer des solutions ingénieuses et adaptées à ce problème.
La communication, l'ergonomie ou encore l'architecture ne sont jamais bien loin.

Le designer établit aussi des méthodes et des processus pour communiquer les solutions et les mettre en application. Un designer bien informé peut être en mesure de remettre en cause certaines hypothèses
émises par son client. Il doit donc être parfaitement informé sur les enjeux de son travail:
ressources humaines, budget, aspects techniques, contexte, contraintes diverses, projets similaires, références culturelles... Il doit faire preuve d'un esprit d'analyse, de synthèse, d'observation, de compréhension,
et d'une stratégie de communication.

Il devra veiller à satisfaire les besoins des utilisateurs afin de leur permettre une expérience réussie. Dans la plupart des cas, il reviendra au designer d'agir comme le porte-parole de l'utilisateur tout au long de la conception.

D'un point de vue historique, le design est un concept hérité des recherches de l'école allemande du Bauhaus,
nées d'un dialogue entre l'art, l'industrie et les nouvelles technologies.

Revenons spécifiquement au webdesigner: il doit comprendre l'entièreté des techniques et des compétences nécessaires à l'ensemble d'une réalisation destinée au web. Il est utile de s'entourer d'avis d'experts, ou à défaut, de bien se documenter (le web regorge de ressources de qualité) pour anticiper les phases ultérieures de production, notamment l'intervention des métiers de réalisation technique: ingénieurs, développeurs, analystes...

Le webdesigner ne sera pas forcémment le programmeur ou le webmaster.
Il est donc incontournable d'identifier précisémment les tâches nécessaires à la production, la conception
et la réalisation. Le webdesigner peut agir dans l'une ou l'autre de ces phases, selon ses compétences,
mais il gardera une vision d'ensemble.

J'ai regroupé dans un dossier téléchargeable 4 documents issus d'un site aujourd'hui disparu (desinteractif.net).
Ces documents contiennent des informations de qualité que je considère comme pédagogiquement utiles :
- Glossaire du design interactif.
- Élaborer un document de charte graphique pour le web.
- Élaborer un brief créatif
- L'architecture de l'information

.zip test HTML Télécharger le dossier .zip contenant les 4 fichiers PDF (1,01 Mo).

Le webdesign est un travail d'équipe, même si en pratique, les équipes peuvent être très petites. Tout faire soi-même ne sera jamais la bonne solution pour être vraiment performant...

Même (et à plus forte raison) dans de petites structures de travail, la discipline et la maîtrise
du webdesigner devront permettre d'échapper aux catastrophes, souvent évitables:
surcoûts et dépassements de toute nature (retards, sous estimation des tâches, etc).

Quelques sites d'agences:

Réussir un projet de site web. Le site du livre de Nicolas Chu (Eyrolles). Des extraits à télécharger.
Redesign de sites Web. Le livre de Kelly Goto et Emily Cotler (Eyrolles). Un chapitre à télécharger.
Conception, suivi et animation d'un site web associatif. Le livre d'Eve Demazière à télécharger.
Ergonomie du logiciel et design web. Le livre de Jean-François Nogier chez Dunod.
Chef de projet web ? 7 pièges à éviter... Un article de Vincent Bénard sur son site Veblog.
A quoi sert le graphisme sur un site web ? Un article de Vincent Bénard sur son site Veblog.

Les coulisses d’un design. Un article de Douglas Bowman traduit sur Pompage.
Une terminologie de la conception web. Un article de H. Bergevin et J. Gallant traduit sur Pompage.

End of webdesign. Un article provocant mais visionnaire de Jakob Nielsen sur son site Use it.
La fin du design web (revisitée). Une réaction de Vincent Bénard sur Usabilis.
Usability experts are from Mars, graphic designers from Venus. Réponse à Nielsen sur A list apart.
Web 2004 Essentials. Conférence internationale bien fréquentée...

Grille de contrôle de la qualité des contenus en ligne. Des conseils très utiles à suivre sur Rédaction.
Ergonomie informatique : les principales méthodes. Un article de Ergolab.
Chiffres-clés. Un dossier permanent du Journal du net sur les tendances de l'internet.

Les feuilles de style. Un dossier du CERIG.
Images et graphiques pour le web. Un dossier du CERIG.
L'optimisation des images pour le web. Une note technique du CERIG.
Mesurer l'audience d'un site web. Une note technique du CERIG.
Stratégie de présentation des pages web. Une note technique du CERIG.
La typographie du web. Un dossier sur le site du CERIG.
Du bon usage des cadres. Une note technique du CERIG.
Le problème de la couleur sur le web. Une note technique du CERIG.
Les feuilles de style en cascade. Une note technique du CERIG.

OpenWeb. Site éditorial dédié aux standards du web.
The Web Design Group. Site d'infos et de ressources. Voir notamment le HTML validator.
CSS validation service. Vérification de la conformité des feuilles de styles du W3 Consortium.
Architectural and philosophical points. Notes personnelles de Tim Berners-Lee sur l'architecture du W3.

W3 Schools. Tutoriaux en ligne sur tous les aspects du webdesign.
Webdesign course. Un cours (en anglais) donné par Colin Moock.
Yoyo design. Expérimentations techniques simples et concepts de navigation, par exemple: nColor.
Lowtech. Étonnant: créer uniquement avec des technologies accessibles gratuitement.
Website Design & Development. Tutoriaux sur le site du Media College.