Une fois n’est pas coutume, je vais aborder la question du web design sous l’angle du graphisme, sans considération de langage de développement ou de technique en général. Je n’aborderai pas les questions liées à l’architecture de l’information, à l’ergonomie ou à l’accessibilité. A la place, après un aperçu sur le travail du Directeur artistique et du graphiste, je vous propose une liste commentées des éléments graphiques que l’on trouve de manière récurrente sur les sites web, avec pour chacun un rapide commentaire. 

La question du «pourquoi tel élément plutôt qu’un autre ?», rejoint un peu la question posée par Leibniz : «pourquoi y a-t-il quelque chose plutôt que rien dans l’univers ?». A laquelle je ne peux m’empêcher d’ajouter mon grain de sel sous forme de question subsidiaire : «pourquoi tel élément de «design» plutôt qu’un autre ?»

Direction artistique & Web design

Le Directeur artistique détermine le fond du message ; le graphiste s’occupe de la (mise en) forme. Le DA met sa connaissance des codes artistiques des temps passés, présents et futurs pour proposer un univers graphique sans se soucier des contraintes techniques. Quant au graphiste, il rend en quelque sorte «utilisable» le travail du DA en fonction du support et des techniques dont il dispose.

Chacun d’eux porte son attention sur une partie différente des bonnes pratiques liées à son métier. Le DA s’assure que les codes graphiques qu’il a retenus sont adaptés à la marque et à son public. Le graphiste veille à ce que la mise en oeuvre des choix graphiques respecte à son tour les attentes de la marque et du public.

En pratique, le DA évitera généralement de proposer des couleurs vives pour un site web vendant des articles funéraires et que le graphiste s’abstiendra de placer le logo et le champs de recherche en bas de la page. Si ces cas extrêmes sont généralement évités, il n’en reste pas moins qu’il n’est pas toujours évident de choisir entre des coins arrondis ou des angles droits, des dégradés ou des aplats de couleurs, du Stars and Stripes ou du Sex and Sun !

Finalement, la question que je me pose est la suivante : «quand et pourquoi se décide-t-on pour un coin arrondi ou pour un coin carré ?». Cette question est valable pour tout élément ayant un impact sur l’apparence d’une page web. Pour éviter de faire ces choix parfois cornéliens sur un coup de poker, voici quelques éléments de réflexion que j’ai rassemblé ici parce que vous le valez bien :-)

En-tête, bannière et pied de page

Header

Les en-têtes de blogs plus ou moins délirants ont eu leur heure de gloire, mais ont fini par lasser. Ils sont souvent composés d’une image bariolée occupant la largeur du site ou d’une image centrée dans le background débordant largement de la largeur du contenu. On peut voir la première technique dans le thème par défaut de WordPress 3. La deuxième a été popularisée par des sites comme celui de Matt Mullenweg ou Web Designer Wall.

Un bon gros header

Footer

Les pieds de page sont souvent les laissés pour compte du webdesign. Toutefois, la mode des Big Footer leur a redonné une certaine importance, même si au départ, il s’agit surtout d’améliorer le maillage interne en mettant un paquet de liens. Pour faire passer la pilule, les plus créatifs ont utilisé cette zone, peu sexy en général, pour en faire quasiment la vitrine de leur site web. Voici quelques conseils pour optimiser votre Fat Footer (explications en français).

Exemple de big footer simple et graphique à la fois

Big Footer de Soh Tanaka

Colonnes et barres latérales

Il est assez rare de rencontrer un blog ou un site web composé d’une seule colonne. Tout au plus trouve-t-on des thèmes WordPress affichant l’article seul sans les barres latérales. Jusqu’en 2003 environ, les sites web étaient souvent composés d’une zone de contenu entourée de deux barres latérales. Dans celle de droite, on trouvait généralement le champs de recherche et les liens annexes, tandis que la colonne de gauche accueillait la publicités, des listes de liens extérieurs (blogroll), etc.

Les frameworks CSS permettent de créer une système de colonne pour votre site web

The Grid Simpler : une grille simple et souple

Aujourd’hui, la tendance est clairement à une composition en deux colonnes : le contenu à gauche et la barre latérale à droite. Lorsqu’on a besoin d’une deuxième sidebar, elle est souvent située à côté de la première, avec la même largeur, mais pas forcément. L’idée maitresse est de créer une asymétrie graphique. Par ailleurs, la friction monétaire étant ce qu’elle est, cette organisation permet de mettre en avant le contenu pour les moteurs de recherche qui digèrent le code HTML de haut en bas et de gauche à droite (c’est peut-être différent pour les langues qui se lisent de droite à gauche).

Contours et angles

Arrondir les angles ou pas ?

Le modèle de boite du W3C reposant sur des angles droits, l’utilisation des coins arrondis a permis à une époque de sortir du lot. De fait, ils sont utilisés depuis longtemps malgré de nombreux obstacles techniques. L’arrivée de CSS3 et de border-radius, qui rendent accessibles les coins arrondis au plus grand nombre, remettront peut-être les angles droits ou irréguliers à l’honneur.

Cela dit, l’origine de l’engouement pour les bords arrondis est à chercher du côté symbolique. L’arrondi est une forme organique qui donne une impression de proximité affective. Il a un pouvoir immersif qui s’adresse au cerveau droit et joue sur l’émotionnel. A l’opposé, le coin carré s’adresse plutôt à la raison, à l’intellect.

L’arrivé de border-image avec CSS3 devrait élargir les possibilités créatives, en se rapprochant de ce que l’on trouve dans Illustrator, par exemple.

Rubans (ribbons)

Ils ont pratiquement toujours existés et le web ne cesse d’inventer de nouvelles formes dont le but est d’ancrer le ruban dans la page tout en le faisant ressortir. Force est de constater que les derniers rubans à la mode en provenance du monde anglo-saxon (oui, le jour où les graphistes francophones cesseront de se croire le nombril du monde…) réussissent ce tour de force.

Ombres portées

Elles ont toujours fait partie du paysage graphique autant en PAO et sont apparues sur le web dès que cela a été possible. D’abord en utilisant des cellules de tableau, puis avec des balises div imbriquées et enfin, depuis peu, avec les propriétés CSS3 box-shadows et text-shadows.

Bords déchirés

On voit relativement peu de contours déchirés ou de bords irréguliers, malgré leur fort potentiel graphique.

backgrounds

Fond blanc

Associé à du texte (presque) noir, le fond blanc présente le meilleur rapport de contraste que l’oeil puisse trouver. Il s’agit généralement de la couleur de fond de page par défaut des agents utilisateurs depuis plusieurs années. C’est une valeur sûre qui ne devrait être modifiée qu’après mûre réflexion ;-)

Aplat de couleur

L’utilisation des aplats de couleur permet de faire ressortir une partie du texte tout en lui conférant une certaine puissance. Si en peinture, l’obtention d’un à-plat digne de ce nom n’est pas une sinécure, il n’en va pas de même pour la PAO ou le web où il suffit de saisir une valeur pour obtenir en beau «noir au blanc». Les sites web des années 2000 faisaient un large usage des aplats, tandis qu’aujourd’hui leur emploi est réservé à des petites portions de texte, comme des titres ou des encarts. Il peuvent être utilisés pour signaler les hors-textes en lieu et place des guillemets géants qui commencent à lasser un peu (mais c’est joli quand même).

Dégradés

Si les aplats de couleur sont roboratifs, les dégradés se digèrent plus facilement. Toutefois, ils restent peu utilisés sur le web à part dans les backgrounds en haut de page pour ancrer l’en-tête du site dans la fenêtre du navigateur. Ils devraient trouver une seconde jeunesse grâce à la nouvelle propriété gradient apparut avec CSS3. Attention à l’overdose : ces effets sont à utiliser avec parcimonie.

Zébrures (Stripes)

Les fonds hachurés ont eu leur heure de gloire dans les années 2005 — 2006 mais ils n’ont pas totalement disparus. Comme les dégradés, ils permettent d’utiliser une couleur de fond tout en restant léger. Il peuvent être orientés de plusieurs manières et présenter des tailles de zébrures variables. (cf. Des fonds hachurés avec la positive attitude).

Tartan

Le tartan est une autre manière de remplir un fond sans agresser l’oeil. Peu employé, il pourrait reprendre du poil de la bête. Voici un générateur de tartan au cas où vous voudriez prendre de l’avance.

Images

les visuels «Full Background» sont généralement à éviter, mais si votre produit ou votre thématique nécessite une immersion du visiteur dans votre univers, foncez ! L’essentiel est de garder un oeil sur la lisibilité d’ensemble. C’est certainement très subjectif, mais je trouve que les sites utilisant des images généreuses sur un fond noir avec du texte clair s’en sortent mieux que ceux qui utilisent des grandes images sur un fond blanc avec du texte noir ^^

Background « bruité »

Ces backgrounds utilisant généralement la fonction Filtre > ajout de bruit de Photoshop remplacent avantageusement les dégradés lorsqu’il s’agit de donner un peut de matière et de profondeur à la page.  Avec l’option bruit gaussien, les raccords entre plusieurs fond bruités sont un jeu d’enfant.

Fonds artistiques

Parmi les fonds plus ou moins artistiques — qui sont de plus en plus utilisés –, j’aime beaucoup celui de All For Design qui parvient à conserver un bon niveau de lisibilité malgré le faible contraste entre la couleur du fond et le texte.

C’est tout pour le moment

Cet article devrait trouver une suite avec quelques notes sur l’utilisation des textes, des illustrations, des palettes de couleurs, etc. N’hésitez pas à partager vos impressions ou à fournir toute information complémentaire susceptible de faire avancer le «schmilblick» :-)

Articles sur le même sujet

• Quelques notes sur le design graphique des sites web et autres futilités
• Quelques notes sur XHTML et CSS, au fil de l’eau…
• Trucs et astuces CSS
• 390 ressources Javascript & jQuery
• Un site Web n’a pas forcément besoin de graphismes

Dans la série des délires (ré)créatifs où prennent place mes recherches graphiques, voici une piste pour un site auquel vous avez échappé : Envie de buzzer ! Comme vous allez le voir, vous n’échapperez pas au logo que je viens de retrouver dans un sous-dossier d’une sauvegarde que je croyais perdue à jamais. Envie de buzzer est un site que j’avais envisagé de lancer lors de la grande mode du buzz. Genre, si à 50 ans tu n’a pas lancé un site avec le terme «buzz» dedans, tu as un peu raté ta vie ^^

Un look des années «70» pour un site qui vous permet de buzzer quand vous voulez…

Envie de buzzer... What else?

Articles sur le même sujet

• Nouvelle proposition de logo pour le HTML-FP
• Proposition de logo pour le HTML Framework Project
• Quelques propositions de logo pour Worth1000
• Ebauche de logo pour illustrer le concept de code source libre
• Un « Logothic » pour WordPress Basics

La plupart des formations dédiées à la création de sites web ressemble trop souvent encore aujourd’hui aux formations PAO d’hier où l’on apprenait à utiliser des logiciels sans rien connaitre des aspects «métier». A quoi bon connaitre les différentes manières de faire des colonnes dans Quark XPress ou InDesign et d’importer du texte et des images si l’on a aucune notion de mise en page et de typographie ?! C’est la même chose avec Dreameweaver ou votre éditeur HTML préféré. Les fondamentaux du graphisme et les principes de base de l’ergonomie doivent faire partie intégrante des projets de formation en Webdesign, sans quoi ils sont voués à l’échec.

Introduction

En attendant que les pouvoirs publics ne se décident à financer des formations adaptées — et puisque le Pôle-Emploi est souvent hors du coup et hors des coûts –, se sont des générations de Webdesigners qui sont souvent formés à la va comme je te pousse ! A moins qu’un veilleur bien inspiré de la Région Rhône-Alpes ne vienne lire ce billet…

«Les Standards du Web, connais pas, c’est quoi ? Moi, j’ai suivi une formation en Webdesign Dreamweaver. Mais une fois, le formateur nous a fait cliquer sur le mode Source. Ça ne compte pas ?»

Par Astrid Graeber via Wikimedia Commons

Former des grands débutants à la création de site Web From Scratch est un pari difficile. Voici quelques éléments issus de la formation Chargé d’Intervention Multimédia que j’ai mise en place il y a une dizaine d’années pour le compte de la région Rhône-Alpes.

A l’issue de cette formation, les apprenants devaient être capables de mettre au jour les besoins du client, de formaliser les besoins dans un cahier des charges, de créer l’architecture d’un site internet, de concevoir le design à l’aide de Photoshop et d’Illustrator, de réaliser l’intégration d’un PSD dans Dreamweaver et de comprendre les bases de Javascript, PHP & MySQL.

Si je devais remettre cette formation en place aujourd’hui, je remplacerais Dreamweaver par Notepad++, j’insisterais lourdement sur les CSS 2.1 et CSS3 et la sémantique associée aux balises HTML5 et j’ajouterais la réalisation d’un thème WordPress comme examen de fin d’année ;-)

«J’ai bien envie de savoir découper un PSD autrement qu’en exportant toutes les tranches depuis ImageReady, c’est possible ?»

Niabot (Licence GFDL ou CC-BY-3.0), via Wikimedia Commons

Tout au long de la formation, j’insiste sur l’accessibilité, l’ergonomie, les standards du Web, la rédaction Web et le référencement (SEO). J’aborde également les outils de mesure d’audience (Google Analytics, GetClicky, Feedburner) et l’utilisation des réseaux sociaux pour faire la promotion de son site et effectuer une veille technique pro-active.

Ça fait beaucoup de choses, mais distillés par petites touches, ces conseils trouvent leur place et permettent de recadrer la production des apprenants avec des arguments concrets du type : «oui, ton texte est très bien écrit, mais non, en verdana 9px ça passe difficilement et en plus tu risques d’augmenter ton taux de rebond» ou encore : « Ton formulaire de recherche est bien placé mais sans bordure, avec son fond gris clair sur blanc on ne le distingue pas », etc.

Après Css Sans Stress — Auto-formation HTML & CSS avec les Frameworks CSS , ce billet fait partie d’un ensemble d’articles que je compte consacrer à la mise en place d’une formation globale sur l’intégration HTML & CSS dont le nom de code provisoire est :

« CSS Sans Stress & HTML S’en Mêle »

C’est quoi le Web ?

Expliquer comment faire un site Web c’est d’abord dire deux mots sur le Web et l’Internet dans les grandes lignes : histoire, protocoles, notions de client-serveur, débits, navigateurs et enfin la page web elle-même. Un site web n’est qu’une collection de pages reliées entre elles par une intention plus que par une technologie. C’est cette intention qui se traduit par le design dans le sens de «dessein».

A partir de là seulement, on peut évoquer la partie technique : HTML, CSS, Javascript, formats d’images et vidéos puis aller voir sous le capot l’apparence du code source. Pour éviter que l’expression «code source» ne soit source de confusion, j’insiste sur le fait que ni HTML ni CSS ne sont des langages de programmation, contrairement à Javascript côté client ou PHP côté serveur, par exemple.

Une très brève histoire du web

Représentation symbolique du réseau Arpanet (september 1974)

Par Yngvar (Public domain), via Wikimedia Commons

En 1969, un réseau connecte les universités d’Utah et de Californie. A partir de 1972 et jusqu’en 1981, les 213 hôtes qui sont reliés donneront naissance au cœur du réseau des réseaux (l’Internet). C’est à cette époque que les RFC sont mises en place : elles permettront de proposer et de distribuer les protocoles qui régissent et font vivre Internet aujourd’hui encore. Source Wikipédia.

Alors, c’est quoi le Web ? La lecture de l’article La plateforme Web de Karl Dubost (@karlpro sur Twitter) est très instructive. Le web est un espace d’information composé d’éléments caractérisés par des identifiants, appelé URI pour Uniform Resource Identifier. En gros, il s’agit de documents accessibles via un identifiant, par exemple une URL. Ce n’est peut-être pas grand chose, mais c’est déjà beaucoup.

Les premiers documents Web

Le site web du consortium du World Wide Web en 1992 encore accessible sur le site du W3.org

Les premières pages web sont principalement des documents universitaires, ce qui n’est pas étonnant puisque le Web est né du besoin des universités de partager leurs connaissances ou de confronter leurs travaux. Les balises HTML ont été conçues pour mettre en ligne des documents sémantiques et structurés et HTML5 ne déroge pas à ce sacro-saint principe.

Mise en page en tableaux

Les tableaux ont permis aux Webmasters de proposer des pages moins linéaires. On a ainsi vu apparaitre des en-têtes, des colonnes et des pieds de page. L’augmentation progressive des débits de connexion aidant, les images ont pris peu à peu la place qu’elles occupaient déjà dans les documents imprimés.

Inutile de sortir votre palette et vos pinceaux : la mise en page en tableaux ne fera pas de vous un(e) artiste ! (Photo par Rinina25)

photo by Rinina25 sur Wikimedia

Les tableaux c’était bien, mais leurs limites ont rapidement été atteintes : la maintenance est un casse-tête, l’accessibilité est souvent compromise et le ratio «code vs. contenu» n’est pas du bon côté de la force.

Mise en page avec CSS

Dans les années 2001, on a commencé à se dire que les CSS permettraient de produire des sites web plus efficaces en terme de maintenance, notamment en ce qui concerne la partie liées à la décoration des polices de caractères pour éviter d’alourdir les pages avec trop de «font» . Mais c’est à partir de 2005 (à la louche) que leur utilisation a vraiment commencé à s’imposer dans les esprits grâce au nouvelles possibilités de positionnement des blocs.

Les feuilles de styles CSS de l’intégrateur web ne sont pas fatiguées d’être sexy, elles !

By danBLOO (Own work) Public domain, via Wikimedia Commons

Toutefois, à cette époque encore, les CSS ont la réputation d’être un peu rigides ; les sites un peu funky n’y trouvent pas toujours leur compte. On reproche aux CSS de produire des mise en pages trop «carrés» (bien avant border-radius, donc). Pour certains, les CSS permettent tout juste d’arriver à la hauteur des sites Web en tableaux les plus basiques.

La lecture régulière de sites tels que  Cybercodeur, Openweb, CSS Zen Garden ou Alsacréations ont permis de tirer le meilleur du couple HTML & CSS vers le haut pour produire des pages Web respectueuses des standards, des maquettes du client et des délais (et des performances).

C’est quoi le graphisme ?

Les notions de Graphisme et de Design sont un peu les «laissés pour compte» dans les formations en création de site web. Tout au plus a-t-on le temps d’enfoncer le clou de la lisibilité et de donner quelques conseils de base concernant les trois mamelles du gris typographique : polices de caractères, contraste et interlignage.

Ce n’est pourtant pas une mission impossible. Il suffit de rappeler que le graphisme est composé de deux parties distinctes et complémentaires : Direction artistique et Design. La première va définir l’ambiance, le style, ce que le visiteur va ressentir en voyant le site ; tandis que le second est l’application des bonnes pratiques concernant la manière dont sont agencées les composantes de chaque page. Ce n’est jamais que l’expression de l’opposition de principe entre le fond et la forme, l’intention et l’exécution.

Une fois que l’on a bien compris que la direction artistique et le Web Design sont deux choses différentes, on peut se concentrer sur les fondamentaux du graphisme : les principes du design (traduit en français sur pouipouidesign) et les éléments que ces principes doivent organiser.

Graphisme & Webdesign

Voici le minimum syndical dont tout apprenant en Webdesign devrait entendre parler, ne serait-ce que dans les grandes lignes en fonction de la durée de la formation.

Quelques principes de base, un milliard de possibilités

Équilibre (symétrie, asymétrie)

Les notions de base de notre physique quotidienne comme la masse, la gravité ou encore le vide restent actives lorsque nous regardons une composition graphique. Nous attribuons un «poids visuel» aux éléments qui composent une mise en pages. Cet équilibre peut être arrangé de manière symétrique ou asymétrique.

Dans le premier cas, la composition est répartie autour d’un axe vertical ou horizontal. Il en résulte une impression… d’équilibre, de paix, de stabilité. Dans le cas de l’asymétrie, les éléments sont organisés de manière à produire une plus grande tension visuelle par l’utilisation de plusieurs petits éléments pour équilibrer une plus grande forme, par exemple.

Rythme (régulier, mouvant, progressif)

L’intervalle entre la répétition ou l’alternance d’éléments crée le sens du mouvement et définit des motifs ou des textures. Le rythme peut être régulier lorsque les intervalles ou les éléments sont similaires en taille ou en longueur, fluide avec un mouvement plus organique ou plus naturel, ou encore progressif lorsque des étapes sont suggérées.

Proportion (distribution des formes, échelle et relation entre les éléments)

Il s’agit des dimensions ou de la distribution des formes, mais aussi de l’échelle entre un élément et un autre. Un petit objet à côté d’un plus important peut donner l’impression d’être plus éloigné.

Hiérarchique ou prédominance (quelle place pour quel élément)…

…Ou comment établir la perspective d’une composition et décider de l’importance relative des éléments entre eux selon le premier-plan, le plan médian et l’arrière-plan. Il existe la perspective à deux points de fuite et à trois points. Rarement utilisée, cette dernière est utilisée pour augmenter une perspective représentant des immeubles très hauts, des clochers d’église, etc. Via ABC Dessin.

Unité (d’après la Gestalt théorie)

Il s’agit de la composition vue comme un tout, où chaque élément, les liens et les relations qu’ils entretiennent font partie d’une démarche conceptuelle qui pousse l’esprit à établir des liens, à former des catégories ou des groupes porteurs de sens. La nature a horreur du vide, l’esprit humain aussi !

• Fermeture — L’esprit imagine les pièces manquantes dans une composition,
• Continuité — L’œil continue dans une direction donnée,
• Similarité — Relation entre la forme et la fonction,
• Proximité — Relation entre les éléments et comportement induit,
• Alignement — Mise en place des objets dans l’espace pour organiser des ensembles cohérents.

La couleur

J’ajoute un topo sur les couleurs, sans lesquelles la vie serait bien triste. Sans entrer dans le détail de la symbolique des couleurs, je retiens que l’on a toujours besoin d’une couleur dominante et de quelques couleurs secondaires.

1. Couleur dominante (bandeau ou logo) déclinée en 3 couleurs moins saturées et/ou plus claires pour découper la page en blocs fonctionnels.
2. Couleur tonique pour les titres, déclinée en deux couleurs pour les puces, les pictos ou des textes courts,
3. Troisième couleur pour les encarts, déclinée en deux couleurs pour les mises en exergue, les traits de séparation,
4. Couleur typo pour le texte principal,
5. Fond de page.

Le nuancier Pantone, que les imprimeurs appellent aussi « pantonier » et qui ne comprend pas moins de huit cents teintes, donne en fait les proportions de chacune de ces dix teintes de base

Nuancier Pantone

Un travail de qualité ne saurait se contenter de ces cinq étapes pour déterminer une palette de couleurs. Néanmoins, cette to-do list permet de franchir le cap de la feuille blanche. N’hésitez à consulter Choisir sa palette de couleurs où vous trouverez pas moins de 14 outils en ligne pour vous aider dans cette tâche. C’est d’ailleurs l’une des phases les plus passionnantes dans le processus de création ; c’est aussi celle qui sera la plus impactante en terme de première impression.

L’idéal serait d’avoir un très beau visuel sur lequel promener la pipette pour recueillir délicatement quelques gouttes de pixels… Ne rêvons pas trop, car la réalité est souvent plus proche d’un logo conçu en fonction des contraintes de l’imprimé versus les possibilités chatoyantes de l’écran.

Le gris typographique

C’est grosso modo l’impression visuelle faite par un pavé de texte que l’on regarde de loin en plissant les yeux (‘-_-’). En appliquant cette idée du gris typographique à l’ensemble des blocs (et au texte qu’ils contiennent), il est possible de travailler sur le rythme du site et la respiration de la page.

Rythmer la navigation

Nous avons plus haut la notion de rythme appliquée au niveau de la page. Ici, je m’intéresse aux relations qu’entretiennent les différentes pages d’un site en fonction des éléments qu’elles partagent : logo, bandeau et les menus de navigation qui fédèrent par nature les pages d’un site Web. L’enchainement des liens va donner du souffle à la navigation et à l’expérience utilisateur.

Il ne faut pas non plus que le site se transforme en machine à cliquer. Chaque page doit retenir le visiteur en offrant un espace qu’il peut identifier et situer immédiatement par rapport au reste du site. Si ce n’est pas le cas, il faut revoir la copie !

Plan de cours

A l’issue de cette série de billets , je proposerai un plan de cours sur cinq jours pour l’apprentissage de HTML & CSS auprès d’un public de débutants plus ou moins avancés. Cette formation devrait être idéale pour les webdesigners ou les graphistes voulant aller plus loin que le mode «Aperçu» de Dreamweaver ;-).

Exemple pour la première journée :

1. Lundi

   Matin :

   • Présentation rapide de l’objectif de la formation : exemple de page web à assembler le dernier jours #1,
   • Qu’est-ce que le web (les grands jalons historiques),
   • Qu’y trouve-t-on, (sites web, les blog, pages perso, intranet),
   • La relation client-serveur (comment ça marche, les protocoles utilisés).

   Après-midi :

   • Présentation détaillée de l’objectif de la formation : exemple de page web à assembler le dernier jours #2,
   • Présentation des briques composant l’exemple de la page web sur un support papier distribué aux apprenants,
   • Présentation du code source commenté de la page web en isolant bien chaque brique et en indiquant où elle se situe sur le support papier.

C’est tout pour le moment ;)

PS — Ah, j’oubliais : n’hésitez pas à me contacter pour que nous discutions ensemble de votre projet de formation, que vous soyez débutant, ou pas.

Articles sur le même sujet

• Une solution CSS accessible pour remplacer du texte HTML par une image
• Améliorations cosmétiques et ergonomiques sur ce blog
• Petit bilan statistique du CSS Naked Day
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Quelques notes — Programme de formation HTML & CSS

Dans Webdesigner est-il ? j’évoquais mon parcours Print où une grande partie de mon travail consistait à mettre en pages des publications périodiques. Dans Intégrateur web + graphiste = intégraphiste, j’ai émis l’idée saugrenue qu’un intégrateur Web pouvait avoir une sensibilité et des compétences artistiques lui permettant d’aborder la création d’un site Web avec un point de vue différent de celui du graphiste artistico-créatif ou de l’intégrateur technico-bourrin. L’intégraphiste peut être très exigeant sur les aspects purement graphiques d’un site Web, tout en acceptant facilement l’idée qu’un site n’a pas forcément besoin de graphismes (le «s» est important) pour fonctionner.

A partir de quel moment a-t-on besoin de graphismes ? Pour Will Burtin, les choses sont très claires :

Quand la simple énumération des faits est insuffisante, laborieuse ou peu claire pour le lecteur et qu’une organisation visuelle s’impose, il faut alors faire appel au graphisme. Celui-ci doit avoir les qualités d’une bonne prose. Sa lisibilité doit être parfaite.

A la lumière de cette citation, on peut conclure que travailler sans le contenu est un non-sens. Les graphismes devrait faire leur apparition lorsque toutes les autres possiblités ont été épuisées. L’absence de graphismes n’est pas l’ennemi du design, c’est peut-être même tout le contraire. Il est souvent bon de s’attarder sur la phase de placement des blocs de contenus et les relations qu’ils entretiennent entre eux.

Le design minimalisme est toujours une bonne option

Les plus sceptiques d’entre vous penseront certainement qu’il est difficile de se tromper lorsqu’on ne fait rien, et qu’à vaincre sans péril on triomphe sans gloire. Certes, mais pourquoi votre client ferait-il les frais de votre envie de faire des dessins un peu partout ? Pourquoi ne pas se contenter de textes noirs sur fond blanc sans autre fioriture graphique que le logo du client ? Je plaisante. Il est évident que votre client est unique et que son site Web devrait refléter cette singularité.

Mais comment traduire cette singularité ? A partir de quel moment se dit-on : «Tiens, là, je fais un truc sobre, ça va le faire», ou «Et puis non , je vais mettre le paquet sur le background» ou encore «Allez hop, je vais lui en mettre plein la vue !» ?

Le Webdesign au kg : je vous en mets pour combien ?

La question du bugdet ne devrait pas entrer en ligne de compte quand il s’agit de créativité, mais force est de constater que les considérations financières ont un impact qui n’est pas négligeable sur le résultat final. Un site Web sobre et/ou minimaliste coûte forcément moins cher qu’un site avec de nombreux graphismes, n’est-ce pas ? Par graphismes, je fais référence à tout ce qui n’est pas uniquement réalisé avec des aplats de couleur, du texte ou des filets réalisé à l’aide de HTML et de CSS.

Les effets CSS3 changent un peu la donne en la matière, mais dans la plupart des cas, les concepts d’amélioration progressive ou de dégradation gracieuse ne sont pas toujours pertinents au regard de l’ouverture d’esprit des interlocuteurs ou de votre movation à faire plusieurs sites pour le prix d’un.

Ceci n’est pas une conclusion

Ce billet est une réflexion en cours, une sorte de prélude pour me motiver à écrire un article sur les différentes manières d’aborder la conception graphique, un peu à l’image du livre Exercices de style de Raymond Queneau. Beaucoup de questions donc, et peu de réponse dans ces quelques notes qui me servent à noter les idées pour lesquelles je n’ai pas encore trouvé l’angle d’attaque qui permettrait de mieux structurer mes idées. Soyez indulgent et n’hésitez pas à apporter votre point de vue dans les commentaires pour faire avancer le Schmilblick.

Articles sur le même sujet

• Quelques notes sur les éléments graphiques du webdesign
• CSS Sans Stress — Une formation intégrateur HTML & CSS
• Webdesigner est-il ?
• Quelques notes sur le design graphique des sites web et autres futilités
• Quelques notes — Un seul design pour les rassembler tous ?

Le Graphisme au XXe siècle est la traduction française de Graphic Design (A Concise History) écrit par Richard Hollis et publié en 1994. Ce livre est une mine d’or pour pour qui veut connaitre l’histoire du Graphisme à travers les pays qui lui ont donné ses lettres de noblesse : le futurisme et l’Italie, la Russie soviétique, l’Allemagne, les Pays-Bas, la Suisse, la France, la Grande-Bretagne, les Etats-Unis, l’Europe du Nord. Il contient plus de 800 illustrations et le texte est très riche. Je lis généralement en prenant des notes pour plus tard ou en surlignant les passages qui me plaisent au Stabilo. Ce billet est la compilation des extraits qui ont plus particulièrement suscité mon intérêt. Ils ne suivent pas forcément l’ordre des pages et certains passages ont été remaniés afin de rester compréhensibles une fois sortis de leur contexte.

1. Les trois fonctions du graphisme sont : identifier, informer et promouvoir.
2. Contrairement à l’artiste, le graphiste travaille en vue d’une reproduction industrielle.
3. Les progrès des arts graphiques sont dus à quelques pionniers qui travaillaient en équipe.
4. Les arts graphiques sont un langage à la grammaire indéfinie dont le vocabulaire s’étend sans cesse.
5. Les imprimeurs du moyen-âge réutilisaient déjà à volonté les illustrations gravées sur bois.
6. L’affiche est le premier support et l’entité la plus élémentaire des arts graphiques, mêlant le texte et les images.
7. La règle de base de l’Isotype est que la représentation d’un nombre important d’éléments doit se faire par de nombreux signes (et non par un seul signe de grande taille).
8. Eléments de base de la «typographie Bauhaus» : linéales, chiffres surdimensionnés et barres horizontales ou verticales pour utilisées de manières  esthétique et pour hiérarchiser l’information.
9. En 1906, les timbres dessinés pour la Bosnie-Herzégovine furent les premiers à utiliser la photographie.
10. Les graphistes viennois restaient cependant avant tout des artistes et il fallut longtemps encore avant que la profession de graphiste n’existe à proprement parler.
11. Les biscuits Bahlsen, le café Hag et les encres Pelikan furent parmi les premiers à adopter l’idée d’une image de marque.
12. Le matériel publicitaire que Behrens conçut pour AEG, austère et géométrique, est considéré comme la première utilisation d’un graphisme élaboré au service d’une politique commerciale.
13. Le concept du «style maison», ou de charte graphique fut développé dans les années 1930 par Olivetti et par la Container Coroporation of America (CCA).
14. La première guerre mondiale affirma l’importance du graphisme.
15. A la fin du XIXe siècle, la lithographie permet aux artistes d’imprimer de grands aplats de couleur, ce qui leur donne la liberté de dessiner eux-même les lettres plutôt que d’utiliser la gamme restreinte des caractères existants. Cette nouvelle maitrise de l’impression marque la naissance du graphisme.
16. Le métier de graphiste date du milieu du XXe siècle.
17. Les affiches des pays en guerre reflétaient leur niveau de développement graphique.
18. Mallarmé considérait la double page d’un livre comme un seul et même espace.
19. Le futurisme marque une rupture avec  la mise en page traditionnelle et symétrique.
20. Après la révolution de 1917, les arts graphiques devinrent un outil de communication de masse.
21. Les livres conçus par Lissitzky expriment l’idée selon laquelle les mots imprimés sont vus et non pas entendus.
22. Au sein du Bauhaus, une analyse approfondie de la communication visuelle commença par celle de l’alphabet.
23. Koch avait repris le Erbar, un caractère géométrique du début des années 1920, pour son Kabel qui apparut en même temps que le Futura, en 1927.
24. Le style moderne internationale survécut au nazisme pour réapparaitre dans les années 1960 sous le nom de «style suisse».
25. L’agence de publicité est une invention américaine.
26. Dans le travail de Cassandre, c’est le texte, la lettre qui déclenchent les idées qui engendrent la forme plastique.
27. L’affiche déclina au cours des années 1930 face au développement des magazines affichant de la publicité.
28. De nos jours, l’art de la mise en pages tire sa force de la libre association des techniques. Avec un appareil photo, une paire de ciseaux, une bouteille d’encre de chine et de la colle, une composition peut naitre et une idée nouvelle s’exprimer — Alfred Tolmer, imprimeur à Londres en 1931.
29. Aux Etats-Unis, dans les années 1930, les similitudes entre les pages éditoriales et publicitaires étaient révélatrices de l’interdépendance économique de la presse et de la publicité.
30. Aux Etats-Unis, la profession de directeur artistique était antérieure à celle de graphiste. Le club des directeurs artistiques de New York fut fondé en 1920.
31. Mehemed Fehmy Agha s’occupa de la direction artistique de Vogue, de House and Garden et de Vanity Fair. On lui doit la grille de maquette en double pages et l’utilisation de faux textes. Il fut le premier à considérer un magazine comme une succession de double pages plutôt que comme une suite de pages individuelles. Il est considéré comme le premier directeur artistique moderne.
32. Quand la simple énumération des faits est insuffisante, laborieuse ou peu claire pour le lecteur et qu’une organisation visuelle s’impose, il faut alors faire appel au graphisme — Will Burtin.
33. C’est justement quand vous commencez à vous ennuyer de votre création que votre public commence à la remarquer.
34. Le graphiste, affirmait Lou Dorfsman, doit être capable de montrer que le projet répond à un besoin, comment il fonctionnera, ce qu’il coûtera, à qui et comment il sera diffusé.
35. Au milieu des années 1960, le graphisme fut enfin reconnu comme une profession à part entière et les mensuels spécialisés comme Print, Communication Arts et Art Direction témoignaient de son excellente santé.
36. En 1940, la CCA avait créé son «laboratoire graphique», équipé d’une caméra qui enregistrait les mouvements de l’oeil sur un dessin.
37. Tschichold affirmait que le Bauhaus commettait deux erreurs : le rejet de toute mise en page centrée et l’utilisation exclusive de linéales.
38. Le système de grille de Gerstner trouvait sa source dans l’unité de base de mesure typographique et non dans les proportions de la page.
39. En 1957, le caractère sans sérif Neue Haas (rebaptisé Helvetica) devint incontournable pour les graphistes «constructivistes» des années 1950 et 1960.
40. La charte graphique d’Olivetti concernait même les logements, les écoles et les hôpitaux créés pour les employés.
41. Dans les années 1950, les photographies détourées accompagnées d’aplats de couleur devinrent des éléments incontournables du graphisme italien.
42. Au magazine Elle, dans les années 1960, Peter Knapp diposait d’un personnel considérable : 14 maquettistes, 2 retoucheurs, 1 dessinateur de lettres, 5 photographes de laboratoire, 5 compositeurs, 5 illustrateurs et 6 photographes de modes et leurs assistants.
43. Les graphistes suisses, comme Knapp, avait une formation complète et étaient habitués à des exigeances techniques inconnues en France.
44. En Grande-Bretagne, après la seconde guerre modiale, les arts graphiques participaient au programme de reconstruction économique et sociale.
45. Pendant les années 1950, les graphistes se forgèrent une identité professionnelle en adhérant à la Society of Industrial Artists qui leur offrait une charte professionnelle semblable à celle des architectes.
46. La qualité typographique du livre en Allemagne reposait sur les règles de composition établies par des graphistes tels que Renner et Tschichold dans les écoles d’imprimerie d’avant-guerre , et grâce auxquelles les mots et les lignes étaient correctement espacés, un aspect souvent négligé dans d’autres pays (particulièrement en France).
47. Si l’on considère le graphisme comme un moyen de résoudre un problème, tout ce que l’on peut espérer communiquer, c’est le problème lui-même. Le style est un virus — Neville Brody.
48. Grâce à l’informatique, le nombre de caractères disponibles dépassa le millier dès les années 1980.
49. Tant que nous aurons besoin de l’alphabet et de l’image, le graphisme existera.

Pour terminer cette longue liste, voici ce que pensait Ashley Havinden, qui résume parfaitement l’éclectisme dont doit faire preuve le graphiste :

Le graphiste est celui qui est capable de résoudre les problèmes de communication, quel que soit le médium imposé. Les graphistes sont libres de s’inspirer du classicisme de l’Antiquité, du fonctionnalisme du Bauhaus, de la symétrie du XVIIIe siècle, du réalisme de la Renaissance, de l’expérimentalisme cubiste, des bizarreries victoriennes, des images oniriques surréalistes, des photographies d’amateurs, des dessins industriels, des divisions de l’espace dans l’art abstrait et l’architecture moderne, de la typographie du XVe siècle, de la radiographie, de la gravure sur bois, de la nouvelle typographie de Tschichold, etc.

Le Graphisme au XXe siècle

Richard Hollis

Traduit de l’anglais par Christine Monnatte

ISBN : 2-87811-115-X

J’espère que ces quelques notes vous auront donné envie d’en savoir plus sur l’histoire du graphisme dans le monde. Si le format de ce billet vous plait, j’ai d’autres vieux bouquins dans ma bibliothèque qui n’attendent qu’une relecture pour se manifester !

Articles sur le même sujet

• La typothèque idéale par Smashing Magazine
• Guide stylistique — Exemple de charte graphique et éditoriale
• Quelques notes sur les éléments graphiques du webdesign
• Près de 60 polices de caractère pour Google Font Directory
• Le petit journal permanent de la TypOgrApHiE !

Je reviens vers vous une nouvelle fois sur le sujet du webdesign pour dissiper les malentendus qui semblent s’être glissés dans mes derniers articles. En résumé, j’aurais tendance à dénigrer le métier de webdesigner en mettant en avant des techniques et des méthodes de travail permettant de travailler directement dans le navigateur avec les possibilités chatoyantes de CSS3, sans utiliser les logiciels de création consacrés comme Photoshop et Illustrator ou Gimp et Inkscape. Le titre est court mais l’article l’est beaucoup moins pour remettre les «pendules à l’heure».

Prologue : webdesigner, mon frère, mon semblable

J’ai mis du temps avant de comprendre ce que l’on me reprochait car j’aime ce métier — mon métier — et l’ensemble des acteurs qui en compose le flux de production. Oui, même les graphistes sauvages, je les aime bien.

J’ai commencé à utiliser Photoshop 2.5.1 et Illustrator 88 au début des années 1990 et je continue encore aujourd’hui : je ne suis donc pas (seulement) un intégrateur web qui ne jure que par la sobriété d’un Notepad. J’en profite pour préciser que je ne suis pas développeur PHP ou Javascript, mais j’en connais suffisamment pour faire de l’intégration en terrain «hostile».

En relisant mon dernier article sur le graphisme et le webdesign, je reconnais avoir fait quelques remarques désabusées sur un certain type de webesigners, mais pas de quoi fouetter un chat pour autant. J’ai surtout l’impression que dès que l’on écrit autre chose que des billets composés de listes, des tutoriels ou des avis tranchés pour ou contre, le lecteur est perdu et a tendance à tout prendre au pied de la lettre ou à suivre son propre raisonnement au lieu d’entrer dans celui de l’auteur qu’il est en train de lire (ce qui n’es pas très poli, vous en conviendrez).

C’est en tout cas mon sentiment, notamment en ce qui concerne l’article Le Design serait inutile dans 80% des cas ! Beaucoup se sont arrêté au titre, sans même évaluer le conditionnel «serait» qui en disait pourtant beaucoup sur mes intentions. Dans le billet en question, mon propos n’est pas de dire que le design ne sert à rien. La réussite de certains sites moches n’est pas dû à l’absence de design,  mais dépend d’un facteur totalement indépendant : la motivation des visiteurs pour le contenu qui les pousse à naviguer sur le site, y compris à contre-courant.

Donc, loin de penser que le design ne sert à rien, je voulait mettre en garde les aspirants à la médiocrité qui auraient pu croire qu’il suffit de faire un site moche comme le Bon Coin pour que ça fonctionne. Tout le contraire donc.

Je reconnais que je n’ai pas été aussi explicite que ça dans le billet. Les malentendus de ce genre sont nombreux à cause, sans doute, de mon style un peu éliptique où l’humeur, l’humour et le second degré s’immiscent dans les démonstrations les plus sérieuses. C’est d’ailleurs pour ne pas sacrifier cette liberté de penser que vous avez un simple «blog» sous les yeux au lieu d’un site plus classique avec du contenu Premium ^^

J’assume totalement ce soupçon d’élitisme qui fait mon charme…

Cela dit, il reste quand même des cas où les malentendus semblent venir d’ailleurs.

Past is the new Futur?

C’est en lisant le commentaire de PooLP que je me suis rappelé qu’à une époque on travaillait directement dans Quark XPress sans forcément passer par une maquette Photoshop. (Bien qu’il m’est arrivé de travailler avec des DA qui concevaient des maquettes dans Photoshop. A charge pour l’exé de tout décortiquer ensuite.)

Lorsqu’il fallait (re)faire un logo ou tout autre illustration vectorielle, je lançais Illustrator et lorsque c’était le moment de retoucher une photo ou de créer un fond de page, j’utilisais Photoshop. Une fois les éléments graphiques terminés et enregistrés chacun dans le format adéquat, je réalisais l’intégration (l’exé PAO), préparais le tout pour l’impression et partais avec mon disque dur sous le bras pour aller boire un café avec l’imprimeur.

En me remémorant cette période, j’ai compris pourquoi on ne parlais pas toujours le même langage : la plupart de mes expériences en tant qu’infographiste et maquettiste ont eu lieu dans un environnement de publication périodique à fort contenu éditorial avec beaucoup de textes et quelques images, tandis que de nombreux webdesigners ont aujourd’hui une culture graphique qui privilégie l’image et l’émotion qui va avec.

Le travail consistait en grande partie à créer des chartes graphiques de type «journal» ou «magazine» et à les adapter aux différents contenus apportés par les commerciaux et les journalistes : publicité, hors-série, dossier spécial, nouvelle rubrique, etc. Après 10 ans dans les métiers de la chaine graphique, je suis passé du «côté Web» vers 2001  pour voir si l’herbe était plus verte.

«J’te dis Web» (feat. @thanh)

Elle l’était, plus verte. Mais pas comme je l’imaginais : tout était vraiment très vert, pas mûr pour être plus précis :

• La PAO connaissait les calques pouvant accueillir textes et images, le web ne proposait que des tableaux rigides,
• La PAO offrait des centaines de polices de caractère de qualité, le Web offrait… que dalle,
• Là où il fallait se coltiner les problèmes liés aux flashage (photocomposition), le Web s’enlisait dans les différences de rendu entre les différents navigateurs…

Le Web est né en Suisse, pas en Californie !

Bref, il fallait une bonne dose de motivation mais je me suis accroché. Ce qui m’intéressait le plus au début, c’était le côté «Cyber» du bouzin, le côté «on réinvente tout», «on coupe les ponts», «la belle typo on s’en fiche, c’est pour les bougeois», etc. Faut dire que j’avais déjà une culture graphique proche de l’école Suisse. Emil Rüder, principalement, pour sa sobriété, son attachement au message à véhiculer, sans fioriture, direct par l’intellect sans passer par l’émotion. Enfin, c’est peut-être surtout moi qui voyais les choses de cette manière.

Sans fioriture ne signifie pas que je zappe la phase «recherche de pistes graphiques». Je vais chercher l’inspiration ailleurs que dans les tutoriels que l’on trouve sur le Web. Mon fil directeur est de mettre les contenus en valeur en supprimant tout ce qui peut être supprimé pour atteindre le moment où «ça y est», ni plus ni moins. Mon Saint-Graal est que «ça fonctionne» comme on dit.

Si votre Saint-Graal nécessite plus d’éléments ou si votre culture est plus Californienne que Suisse, je n’y vois pas inconvénient et je peux même l’apprécier.

Voilà, c’est bientôt fini. J’ai essayé d’être honnête et de montrer dans ce billet plus personnel que les autres, une partie de mes motivations et de mes centres d’intérêts ainsi que ma façon d’aborder le métier d’enveloppeur web option webdesigner.

Merci de votre attention.

Epilogue : le Web est une e-toile inaccessible. Wesh.

Articles sur le même sujet

• Et si Photoshop permettait de tester des maquettes fluides ?
• CSS Sans Stress — Une formation intégrateur HTML & CSS
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Une très brève histoire des métiers du web et de la PAO (publication assistée par ordinateur)
• Un site Web n’a pas forcément besoin de graphismes

Ces quelques notes sont le fruit d’une réflexion rapide qui fait suite au commentaire de Papier-pixel sur l’article Conception dans le navigateur avec HTML5 & CSS3. Il regrette grosso modo qu’il y a des thèmes récurrents dans mes billets qui tendent à laisser penser que le webdesign et la mise en place d’une vraie charte graphique ne sont pas indispensables. Le fait de coder directement dans le navigateur ou d’oublier photoshop pour finir par m’interroger sur la pertinence du design qui serait « inutile » dans 80% des cas nous entrainerait dans un web uniforme, sans véritable réflexion visuelle en amont.

Prologue

Il y a effectivement quelques articles dans ce blog qui explorent d’autres voies que celle de Photoshop, mais j’en ai écris encore plus sur le design et le graphisme (ne vous arrêtez pas aux derniers articles parus qui ne sont pas forcément représentatifs de mon point de vue). Petite précision avant d’aller plus loin : l’article où je m’interroge sur le graphisme qui serait inutile dans 80% des cas est une ode au design, ne vous méprenez pas.

Un seul design pour les lier tous ?

Le design ou la conception dans le navigation ne signifie pas absence de design ou de conception : c’est même tout le contraire !  Sur la question de l’uniformisation du design des sites web, il est important de prendre en compte plusieurs choses :

• D’une part — et c’est le plus important — en quoi le fait que tous les sites se ressemblent est si grave ? Au pire, le visiteur a une impression de «déjà vu», au mieux, il ne perd pas de temps à se demander comment fonctionne le site.
• D’autre part, les sites soi-disant graphiques se ressemblent tous d’une certaine façon (de mon point de vue, c’est valable pour l’immense majorité d’entre eux). La quantité de pixels utilisés n’enlève rien à une autre forme d’uniformisation. Sans compter que la plupart des fantaisies graphiques rendent souvent le site difficilement utilisable : il faut souvent entrer dans l’univers du graphiste avant d’entrer dans le contenu.
• Par ailleurs, je pense que l’absence de design est parfois préférable à un mauvais design pour peu que le concepteur a fait attention à l’ergonomie et la navigation. Si en plus il a choisi une police de caractère lisible de 16px avec un interlignage de 24px contrastant suffisamment avec le background, c’est parfait ;)

Cela dit, il existe de nombreux cas ou l’on a besoin de faire entrer le visiteur dans un univers visuel : lorsque l’expérience immersive produit du sens en tant que tel en fonction de la marque ou du produit. Mais il ne faut pas se voiler la face : ces cas sont assez rares et quand on les rencontre, il sont malheureusement souvent mal fichus.

Le graphisme n’est pas une surcouche ?

Le webdesign est entré dans une phase de maturité où — n’en déplaise à beaucoup — le graphisme est une couche appliquée sur un marquage HTML, lui-même fruit d’une réflexion sur les différents types de contenus qu’il enveloppe. A cet égard, je ne résiste pas au plaisir de placer l’article Métiers du web — Je suis « enveloppeur web » moi monsieur !

Bientôt (dès demain, en réalité) de nombreux effets graphiques seront réalisés avec les langages du web, ce qui ne veut pas dire que Photoshop sera obsolète, bien au contraire. L’uniformisation des designs de sites réalisés avec HTML5 et CSS3 et «designés» directement dans le navigateur seront un type de prestation parmi d’autres.

Il y aura toujours besoin de créatifs originaux pour les projets où une «patte graphique» sera nécessaire. Mais au moins les créatifs devront-ils faire preuve d’un peu plus d’audace que mettre des dégradés, des coins arrondis ou des ombres portées dans Photoshop ou Illustrator…

Pour ne pas conclure

Lorsque je regarde de près les meilleurs «designs de l’année», je vois bien qu’il y a du travail de qualité, mais en creusant un peu, j’ai le sentiment qu’il s’agit souvent du portfolio d’un webdesigner réputé ou d’un site web réalisé par une agence pour un client qui a dépensé beaucoup d’argent. Bref, des projets que la startup ou la PME française moyenne n’a pas les moyens de s’offrir ou qu’elle ne veut pas payer.

Épilogue

Zut, à la relecture je me rends compte que je donne encore l’impression de sacrifier le graphisme sur l’autel de la sobriété et du mauvais goût. Il y a tellement de cas de figure différents qu’il est difficile de faire un seul billet sur cette question en restant concentré… Mais je reviendrai prochainement vers vous avec un billet sur la notion du Good Enough dans l’industrie du webdesign.

Articles sur le même sujet

• Quelques notes sur les éléments graphiques du webdesign
• Un site Web n’a pas forcément besoin de graphismes
• Quelques notes de lecture sur Le Graphisme au XXe siècle
• Direction artistique et Design : deux facettes complémentaires du graphisme
• Le petit journal du web — Non, Twitter n’a pas tué les Backlinks… La preuve !

A force de refiler des bons tuyaux aux plus de 4 300 abonnés de mon compte Twitter j’en avais presque oublié mon petit journal du web. Cette rubrique qui me permets d’arrêter le temps, l’instant d’un billet, pour jeter un oeil dans le rétro, histoire de me remémorer les sites ou les articles qui ont attiré mon attention. En ce qui me concerne, il ne sera pas dit que Twitter sera un dévoreur de Backlinks ! Pour vous donner le goût des autres, ce billet est composé de sites que j’ai découvert récemment.

Nvision

De la création de structures adéquates à la mise au point de stratégies à succès, du design de pages web élégantes au développement de sites dynamiques performants, Nvision conçoit les sites web hauts de gamme au Luxembourg. Le blog parle de design, de techniques, de tendances, du métier et de nos projets.

Lire Si on parlait des utilisateurs avant de parler de contenu ?

Braincracking

BrainCracking est une revue de presse quotidienne et des articles originaux traitant principalement de performances, HTML5, CSS3, et de javascript avancé. Ce nouveau blog remplace feu jpv.typepad.com, le changement de nom de domaine étant une invitation pour écrire à plusieurs :)

Lire Passer son blog WordPress à la sémantique HTML5 et ARIA

Hounkpe-Media

Hounkpe Media propose des solutions de référencement naturel garanti adaptées aux webmasters qui permet de gagner du trafic qualifié sur des mots-clés pertinent. Leur travail consiste à améliorer votre site pour l’optimiser vis-à-vis des moteurs de recherche dominants, en particulier google.

Lire Du SEO et des sites qui restent toujours en première place

Locita

Locita est une source d’informations sur le web, les réseaux sociaux et les nouvelles technologies. Locita vous informe sur les entreprises, les services en ligne et les réseaux sociaux en publiant quotidiennement des articles d’actualité, des analyses de fond et proposant des guides pour vous aider à mieux exploiter les réseaux sociaux et les sites web 2.0.

Lire 7 principes pour un meilleur classement dans les moteurs de recherche

Victor Coulon

Blog d’un développeur web qui maîtrise le PHP orienté objet, jQuery, HTML et les CSS et qui rafolle de tout ce qui touche le développement web & le web design.

Lire Une modal box en CSS3 et sans javascript

Débuter avec WordPress

Débuter avec WordPress propose des articles de fond, des tests de plugins, des modes d’emploi et des astuces sur le CMS WordPress. C’est un laboratoire où l’auteur expérimente différents plugins et partage ses découvertes.

Lire Comparer WordPress et Drupal

HTeuMeuLeu

Faites le pleins de trucs et d’astuces sur les langages HTML5 et CSS3, et tout ce qui fait le quotidien d’un intégrateur !

Lire Gmail et les marges sous les images

TroisPointZéro

TroisPointZéro est un blog de veille autour du webdesign, du graphisme, du développement web, du Cloud Computing, et plus généralement tout ce qui touche au web et au hi-tech.

Lire [script] Recuperer les liens dans une liste créée sous Twitter

Design Folio

Un blog sur les thèmes des nouvelles technologies, des services innovants, de l’interopérabilité dans le domaine médical, des réseaux sociaux et du buzz marketing.

Lire HTML5 : conseils, astuces et techniques

Voici, c’est fini pour aujourd’hui. N’hésitez pas à vous manifester si vous avez lancé un site ou un blog sur la création ou la gestion de sites web durant les six derniers mois.

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• Quelques notes sur la balise h1 avec HTML5
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• 23 listes pour Webdesigners
• Référencement de sites Web — Chassez le naturel, il revient au SEO !

La question du jour est : faut-il absolument qu’un site web s’affiche de manière identique sur tous les navigateurs ? Les réponses divergent selon que l’on est du côté de la conception graphique ou du côté de l’intégration web. On peut toujours répondre «non» ! La réponse toute faite étant qu’un visiteur donné n’utilise qu’un navigateur à la fois. Ce n’est pas faux, mais ce même visiteur peut très bien utiliser Internet Explorer 6 sur son lieu de travail, Firefox à la maison,  Google Chrome chez un ami et Opera chez un autre ami…

Le graphisme, c’est de l’expérience utilisateur

L’expérience utilisateur au sens large, c’est-à-dire en prenant en compte les différents contextes de visite d’un utilisateur qui bouge (sans se  limiter à la session en cours, donc), peut être compromise. Comment faire confiance à un site qui change d’apparence comme de chemise ? Selon l’écart qu’il peut y avoir entre les différents affichages, le visiteur peut légitimement se demander s’il n’est pas victime d’une tentative de Phishing (même s’il est plus facile de refaire une page web à l’identique qu’avec des différences, on est bien d’accord).

Ça va sans dire mais mieux en le disant : si la confiance est un élément important dans votre communication, il vaut mieux que votre site s’affiche de manière identique sur les différentes combinaisons plate-forme-navigateurs présentes sur le marché. Et vous l’aurez sans doute deviné, si l’on veut que le site web présente une interface identique sur tous les navigateurs, les notions d’amélioration progressive et de dégradation gracieuse perdent toute leur substance.

FUD ? Je reconnais qu’avec cette histoire de confiance, la peur, l’incertitude et le doute se sont insinués dans votre esprit. Et ce n’est que le début car j’aborde maintenant un élément essentiel dans toute communication d’entreprise : l’identité graphique. Il s’agit de faire en sorte que les signes distinctifs d’une marque (société, produit, etc.) soient explicités, sublimés et fixés dans la charte graphique que les différents intervenants devront respecter quel que soit le domaine d’intervention : plaquette imprimée, site web, drapeau planté sur la lune, etc.

Adapter la charte graphique au web, pas le contraire !

Pour s’en sortir, il faut parfois s’affranchir de la charte graphique de l’entreprise si celle-ci n’est pas adapté au support web. On rencontre souvent, par exemple, des chartes qui prévoient le logo en bas à gauche de la page compte tenu du parcours de l’oeil sur l’imprimé. Ce sens de lecture en Z, n’est pas forcément optimisé pour le web sauf à limiter la hauteur de la page à la hauteur de l’écran disponible sans défilement. Ce n’est pas impossible mais ce n’est pas souhaitable non plus si l’on veut profiter à fond du support.

Qui ne m’audit, consent…

L’idée serait donc d’adapter la charte graphique de l’entreprise au support web dans un premier temps, puis de faire un audit pour connaitre les limites de cette charte graphique quand vient le temps de l’intégration pour connaitre le temps qu’il faut réserver à ceux qui interviennent le plus souvent en fin de chaine et qui paient les pots cassés, soit sur le temps de travail (travailler plus pour gagner plus ?) soit au détriment de la qualité du produit fini.

Après cet audit, il sera possible de revoir la charte graphique pour l’adapter aux contraintes du web soit en éliminant les coins arrondis et/ou les ombres portées par exemple, soit en mettant en place des stratégies techniques pour que ces coins arrondis et ses ombres portées puissent voir le jour dans de bonnes conditions. Reste aussi la possibilité de déterminer une politique de dégradation gracieuse et/ou d’amélioration progressive dès le départ. L’objectif est que l’équipe chargée de l’intégration ait connaissance de ces contraintes le plus tôt possible pour travailler avec la charte graphique et non pas contre.

Pour (éviter de) conclure

Bon évidemment cette démarche est réserver à celles et ceux qui veulent vraiment s’investir dans le web, pour les autres, il sera nécessaire d’expliquer à leurs prestataires qu’ils sont trop exigeants et qu’il faut apprendre à gérer les problèmes au lieu d’essayer de les éviter en amont !

PS : Les Quelques notes regroupent des débuts de billets restés longtemps sous forme de brouillons faute de matière suffisante que je partage en l’état :  l’humour peut côtoyer la mauvaise foi et l’exactitude peut se mélanger à l’approximation… Un joyeux b***** en fait, même si tout n’est pas à jeter !

Articles sur le même sujet

• Quelques notes sur les éléments graphiques du webdesign
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• Webdesign — L’essence précède l’existence (Wireframe, Mockup et Mood Board)
• Un site Web n’a pas forcément besoin de graphismes
• Quelques notes de lecture sur Le Graphisme au XXe siècle

Est-il vraiment sérieux de la part des entreprises d’embaucher des créatifs qui ignorent les conditions de post-production de leurs délires créatifs ? C’est la question que je me suis posée en lisant cet échange hallucinant. Prenez le temps, c’est du lourd(ingue) ^__^ En gros, un DA (pour Direction Artistique) s’indigne des conditions dans lesquelles son oeuvre est découpée (massacrée) par les intégrateurs. Je me souviens que ce genre de discours étaient récurrents il y a déjà une quinzaine d’années dans le domaine du print (on disait PAO à l’époque). Les DA se plaignaient déjà beaucoup :

– c’est quoi ces couleurs ? Tu trouve que ça ressemble à mon Pantone ? – Et mon Garamond en bleu quadri, 6 pts, c’est normal qu’il bave comme ça ? – Nan mais, elle tire pas un peu sur le bleu cette photo ? – etc.

Au moins à l’époque la structure globale de la mise en page n’était pas remise en question selon les habitudes de lecture, bien que je suis certain qu’on trouvait des lecteurs avec un QI égal à notre IE6 !

Les problèmes de rendu n’étaient pas moins importants qu’aujourd’hui :

• Il m’est arrivé de travailler avec des flasheurs (photocomposition) qui n’étaient pas équipés de la bonne version d’Adobe Postscript,
• d’autres qui n’avaient pas la puissance de calcul suffisante pour traiter des images lourdes avec des tracés de détourage complexe,
• il m’est souvent arrivé de travailler dans des environnements où il n’y avait aucune calibration de la chaine graphique,
• il fallait systématiquement fournir au flasheur les polices de caractère utilisées s’il ne les possédait pas, et ce, en toute illégalité.

Bref, en matière de «grand bazar», le web n’a rien inventé.

Je comprends bien les frustrations que peut ressentir le jeune graphiste d’aujourd’hui qui sort d’une formation généraliste et à qui on demande de créer pour le web avec toutes les limitations que l’on connait. Mais cette frustration doit rapidement se transformer en motivation pour que le jeune graphiste comprenne les tenants et les aboutissements de son métier.

Aucun graphiste n’a commencé ses études en se disant qu’il allait passer sa vie en mettant en page des formulaires, des notices pour des produits, faire des sites web pour une PME spécialisée dans le négoce du croc de boucher, etc. Mais c’est une réalité à laquelle peu de créatifs échapperont parce que c’est là que la friction monétaire est la plus forte.

Si le créatif ne peut ni ne veut s’adapter aux spécificités du web, il vaut mieux qu’il change de secteur d’activité : les technologies du web évoluent beaucoup plus rapidement que le print. De toutes façons, il y aura toujours des contraintes qui empêcheront les plus créatifs de s’éclater.

Le Directeur artistique n’est pas un artiste. C’est un travailleur comme les autres qui doit accepter sa part de frustration comme le font avec humilité les intégrateurs web et autres exé PAO qui sont des artistes dans leur domaine ;)

Je finirais par cette citation d’André Gide :

« L’art naît de contraintes, vit de luttes et meurt de liberté. »

PS : ça me fait penser que j’ai déjà abordé la question de «l’inconsistance» de nombreux «créatifs» dans Deux mots sur le graphisme, le design et l’ergonomie des sites web

Articles sur le même sujet

• Quelques notes sur le design graphique des sites web et autres futilités
• Quelques notes sur les éléments graphiques du webdesign
• Envie de buzzer ? What else…
• CSS Sans Stress — Une formation intégrateur HTML & CSS
• Un site Web n’a pas forcément besoin de graphismes