Ça faisait longtemps que je n’ai pas partagé sur ce blog les bons tuyaux que je tweet depuis mon compte Twitter @br1o. Découvrez : comment contrôler la qualité de vos feuilles de styles CSS ; un journal papier à partir d’un flux de production allant de Google Documents à InDesign en passsant par WordPress ; les goulets d’étranglements qui grèvent les performances d’affichage de votre site web ; une galerie de pages d’erreur 404 ; un site sur les codes couleur ; comment gagner des encarts publicitaires sur des blogs low tech et hight tech ; un thème WordPress basé sur HTML5 Boilerplate.

Contrôle qualité des CSS

CSS Lint — Copier-collez votre feuille de style CSS dans le champs prévu à cet effet, et cliquez sur LINT! pour avoir un contrôle qualité : nombre d’erreurs et point de vigilance sous la forme d’un tableau indiquant la ligne, la colonne, le nom de l’erreur, sa description et le navigateur concerné, le cas échéant. Un clic sur la ligne saute directement à l’erreur concernée dans le contexte de la CSS. Pratique, même si certains point de vigilance sont un peu intempestifs. (Via @ThierryRoget).

Journal papier avec Google Docs, WordPress et InDesign

Docs to WordPress to InDesign — [Video] Faire un journal papier avec InDesign à partir de Google Docs et WordPress, c’est possible !

Via La Social NewsRoom qui explique les différentes étapes en français.

Performances web avec Page Speed

Page Speed Online — Analyser l’affichage de vos pages web et obtenez des suggestions pour améliorer les performances de votre site, tant il est vrai qu’une page web qui se charge rapidement décourage les taux de rebond élevés et augmente les taux de conversion. Existe également comme extention Chrome ou Firefox.

Erreur 404 : page non trouvée

404 — Une bien belle collection de page d’erreur 404 «curatée» par PiouPiouM sur Flickr. De quoi trouver un peu d’inspiration pour ces pages souvent rébarbatives mais Ô combien indispensables !

Code couleur

Code Couleur – Code couleur HTML et Conseil sur la colorimétrie. Le site possède plusieurs rubriques dédiées à la couleur : signification des couleurs (couleurs primaires, couleurs secondaires, couleur tertiaires, et autres couleurs) ; dictionnaire des couleurs avec l’ensemble des couleurs nommé et leurs valeurs hexadécimales, RVB, CMJN et TSL.

Gagner des encarts publicitaires

A l’occasion du premier anniversaire du blog des nouvelles technologies, j’offre à @lryo17 de faire gagner à ses lecteurs et lectrices un encart publicitaire au format 200×200 à paraitre sur le blog low-tech css4design.

En participant à l’événement, vous pourrez également gagner d’autres encarts publicitaires sur des blogs High Tech comme WebActus, Waebo, WebSourcing, Blogmotion et Semageek !

Pour participer, il suffit de Retweeter ce message :

Anniv J8 #bnt @webactus @waebo @br1o @xhark @semageek @lionelroux : RT pour gagner 1 encart publicitaire http://t.co/Di0yZBH (via @lryo17)

WordPress Basics

Last but not least : n’oubliez pas de télécharger votre version de WordPress Basics avec des morceaux de HTML5 Boilerplate, des microformats, des rôles ARIA et bourré (je me comprends) de sémantique HTML 5

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2
• WordPress Basics, mode d’emploi
• Améliorations cosmétiques et ergonomiques sur ce blog
• WordPress — Chaines de caractères à traduire vs. variables ?

J’utilise de plus en plus Google Chrome pour tester mes pages web. J’ai trouvé dernièrement une petite astuce qui m’évite d’ouvrir Photoshop pour connaitre la correspondance des couleurs hexadécimales dans les formats RGB ou HSL. Dans une optique de dégradation gracieuse, je prends l’habitude de préciser une couleur au format «hexa» suivie de la même couleur au format RGBa pour profiter des effets de transparence.

Pour cela, je lance les outils de développement de Google Chrome (Ctrl + Maj + i ou Clic droit et «Inspecter l’élément»). Je clique ensuite plusieurs fois sur le carré de couleur jusqu’à ce que le mode rgb() apparaisse. Il suffit ensuite de copier-coller les valeurs dans lafeuille de style CSS.

Exemple visible sur la nouvelle version de WordPress & Webdesign :

#menu-download-basics a {
    background: #807666;
    background: rgba(128,118,102,0.8);
}

Finie, l’ouverture de Photoshop pour connaitre les valeurs RGB d’une couleur au format Hexadécimal !

Fonction "Inspecter l'élément" de Google Chrome

Parmi les modes colorimétriques disponibles, on trouve :

• Hexadécimal (Rouge, Vert, Bleu) : #807666,
• RGB (Rouge, Vert, Bleu) : rgb(128, 118, 102),
• HSL (Teinte, Saturation et luminance) : hsl(37, 11%, 45%).

Le dernier mode (TSL en français) est très intéressant car il permet de modifier, pour une couleur donnée, uniquement la teinte (en gardant les informations de saturation et de luminosité intactes), la saturation (en gardant les deux autres) ou la luminosité (idem).

Je ne dis pas que ces outils de développement remplaceront l’extension ColorZilla de Firefox, mais ils peuvent ponctuellement rendre des services.

Articles sur le même sujet

• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Le petit journal du web — WordPress, Couleur, CSS, Page Speed, 404
• L’intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

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

Voici quelques liens qui vous permettront de choisir les couleurs de vos sites web. J’ai volontairement laissé de côté les outils en ligne spécialisés dans la création de palettes de couleur dont j’ai déjà eu l’occasion de parler dans Choisir sa palette de couleur.

• Liste de couleurs — Ce tableau reprend la plupart des couleurs communes classées dans l’ordre alphabétique. Fournit les valeurs hexadécimales, RVB, CMJN et TSL en plus d’un échantillon visuel. Très pratique quand il s’agit de se comprendre entre gens qui ne proviennent pas forcément du même monde.
• chroma — Ce dictionnaire thématique regroupe les noms de couleur, de teinte ou les nuances, comme : « rouge », « ambre », « olive » ou « mordoré », « zinzolin », « purpurin »… mais également « verdoyant », « métallique », « plombé ». Les couleurs sont classées par ordre alphabétique ou par teinte, mais aussi par champs chromatique, qualificatifs ou par fiche descriptive de la couleur.
• Coloria — Cette liste regroupe plusieurs centaines de couleurs hexadécimales avec pour chacune leurs noms usuels dans plusieurs langues (mais surtout en finnois…). N’hésitez pas à vous rendre sur la racine du site et à explorer le site avec une traduction automatique si le finnois n’est pas votre langue maternelle ;)
• 0 to 255 est un outil en ligne très pratique pour afficher et copier les variations autour d’une couleur de base par palier de 3% ou 4%. Lire 0 to 255 — Trouvez les variations autour d’une couleur de base pour plus d’informations.

Articles sur le même sujet

• Le petit journal du web — WordPress, Couleur, CSS, Page Speed, 404
• Astuce CSS3 et RGBA avec les outils de développement de Google Chrome
• CSS Sans Stress — Une formation intégrateur HTML & CSS
• 23 listes pour Webdesigners
• Webdesign — Après le contenu, le contraste est roi !

0 to 255 est un outil en ligne très pratique pour afficher et copier les variations autour d’une couleur de base par palier de 3% ou 4%. On peut sélectionner une couleur parmi celles qui sont proposées ou saisir la couleur de son choix au format hexadécimal. C’est l’outil idéal pour choisir les couleurs secondaires d’un site web, comme les effets :hover, les bordures, les dégradés, etc.

Les tons doux sont plus appréciés que le bon vieux bleu ou rouge que nous avons connu au début de l’internet. Connectware

Un outil parfait pour choisir les couleurs secondaires de votre design web

Articles sur le même sujet

• Astuce CSS3 et RGBA avec les outils de développement de Google Chrome
• CSS Color Editor remplace automatiquement les couleurs dans vos CSS
• 15 outils en ligne pour créer des palettes de couleur
• Le petit journal du web — WordPress, Couleur, CSS, Page Speed, 404
• CSS Sans Stress — Une formation intégrateur HTML & CSS

Lorsqu’on réalise le design d’un site web, il est d’usage de formaliser les choix créatifs retenus en répertoriant les éléments qui composent l’identité graphique et éditoriale dans un guide stylistique. Son objectif est de garantir à l’utilisateur final une expérience visuelle et intellectuelle cohérente tout au long de la navigation. Ce guide stylistique s’adresse généralement aux professionnels chargés de la réalisation technique du site (développeurs, intégrateurs web, etc.) et à ceux qui devront intégrer les contenus au quotidien, qu’il s’agisse des textes et de tout élément graphique ou multimedia. Il peut également préciser les valeurs de la marque et son positionnement vis-à-vis de ses concurrents. C’est dire l’importance de ce guide qui servira souvent de référence dans l’entreprise.

Visite guidée dans le guide stylistique de Mark Boulton pour le redesign du site web Drupal.org

Je vous propose une visite guidée dans le guide stylistique réalisé par Mark Boulton chargé du redesign du site Drupal.org. Ce guide est un petit bijou de concision tout en étant très complet. On y trouve trois parties principales : Langage visuel, Editorial et Prototype.

Langage visuel

La partie visuelle est la plus importante. Elle regroupe les informations liées à la marque, au logo, aux couleurs, aux choix typographiques, à la grille de mise en page, à la navigation sur le site, au traitement des images, aux formats publicitaires et à leurs emplacements, aux icônes ainsi qu’aux styles de mise en forme spécifiques pour les tableaux ou les formulaires.

Marque

Il est toujours utile de rappeler ce qui fait la spécificité de l’entreprise qui fait appel à vos services.  Les éléments mis en avant par l’entreprise sur elle-même sont un bon point de départ, mais il ne faut pas oublier de décrire précisément les produit ou les services qu’elle propose. Par ailleurs, un résumé des motivations qui pousse l’entreprise à (re)faire un site web est très utile. Cette partie se rédige idéalement en tout début de projet pour servir de garde-fou à votre imagination fertile.

Logo

Affichez le logo avec les éléments indispensables à son bon fonctionnement : marges mini et maxi, tailles, couleurs, version noir et blanc ou en niveau de gris, etc. Sans oublier les conseils comme : ne pas encadrer ou ne pas souligner le logo, par exemple. Il est utile de rappeler qu’il faut partir de la version originale du logo plutôt que de modifier la taille d’une version déjà en ligne. A cet égard, rappelez également le format png, gif ou jpg choisi avec le taux de compression ou d’échantillonnage approprié.

Couleur

Donnez un échantillon des couleurs utilisées dans le site en indiquant les valeurs RVB et Hexadécimales. Si les couleurs font partie des couleurs nommées en HTML, précisez-le. Dans le cas contraire, donnez un nom à chaque couleur pour faciliter la communication entre les différentes personnes susceptibles d’intervenir sur le site. Vous pouvez également enregistrer votre palette de couleur et fournir des palettes au format Photoshop ou Illustrator.

Typographie

Affichez un échantillon des polices de caractère que vous avez choisies selon les éléments HTML : niveaux de titre h1, h2, etc., paragraphes p, les liens a (survolés a:hover, visités a:visited, etc.), les listes (ordonnées ol, non-ordonnées ul, de définition dl). Ainsi que tout autre élément susceptible d’être utilisé. Affichez la typographie sous forme d’images au cas où la fonte en question ne serait pas disponible sur le poste de l’utilisateur.

Grille

Tout le monde ne travaille pas avec une grille de mise en page, mais si c’est le cas, affichez la grille en indiquant les valeurs retenues pour les colonnes, les gouttières et la largeur totale du design. Indiquez également les regroupements de colonnes prévus et donnez quelques exemples d’utilisation en surimpression avec la grille en arrière-plan.

Navigation

Indiquez les différentes solutions visuelles retenues pour la naviguation à l’intérieur du site : navigation principale (ex. les catégories), navigation secondaires (ex. les tags), les liens dans le pied de page avec des exemples de mise en forme pour chaque élément.

Images

Donnez des exemples d’utilisation des images en fonction du nombre de colonnes et des différentes manières de les habiller selon le texte et le contexte lorsque : l’image occupe toute la largeur d’une colonne ou d’un regroupement de colonnes ; des marges la séparent des bords ; l’image est habillée à droite ou à gauche ; un titre se trouve au-dessus, etc. Pensez à tous les cas de figure.

Publicités

Les formats publicitaires sont un peu le tue-l’amour du design web. Et pourtant, pour nombre de sites web, c’est le nerf de la guerre. Sans aller jusqu’à définir le pas de votre grille en fonction des formats les plus courants, il est important de préciser où et comment la publicité peut s’intégrer dans la mise en page.

Fournitures diverses

Regroupez ici les éléments visuels utilisés dans le site : icônes, boutons, mais aussi les styles spécifiques pour la mise en forme des tableaux, l’affichage de commentaires, les formulaires, etc. Si les icônes et les boutons sont très nombreux, n’hésitez pas à créer une rubrique spécifique pour les styles particuliers pour ne pas surcharger cette section.

Editorial

Après la charte graphique au complet, la charte éditoriale est un éléments primordiale : c’est elle qui servira de guide pour que les différents intervenants puissent faire vivre le site web en employant des conventions communes pour que le discours ne s’éparpille pas lorsque les rédacteurs sont nombreux.

Notez que même si vous êtes l’unique rédacteur de votre site, mettre votre charte éditoriale noir sur blanc n’est pas une perte de temps, bien au contraire !

Qu’est-ce qu’une charte rédactionnelle ?

La charte rédactionnelle (ou charte éditoriale) est un document qui définit un style particulier de rédaction, en relation avec l’image de l’entreprise ou d’un produit. Plus précisément, la charte rédactionnelle peut formaliser et fixer des principes d’écriture :

• Rédaction des titres (long, court, informatif, accrocheur, laconique, comique),
• Style d’écriture (impliquer le lecteur, écrire à la 1re personne du singulier, à la 2ème personne du pluriel)
• Nombre de mots optimum par billet et par paragraphe,
• Illustration des billets (photos, dessin, graphique),
• Comment citer l’entreprise et ses produits dans les liens hypertextes, ainsi que les collaborateurs, les marques déposées, les concurrents, etc.,
• Déterminer la liste des mots interdits (dans le milieu médical, par exemple).

Les plus courageux d’entre vous se plongeront dans le Guide stylistique de la CFP dont la version PDF pèse pas moins de 165 ko !

Prototype

La partie Prototype liste toutes les pages du site et donne pour chacune d’elle un exemple de mise en place de la charte graphique en terme de fonctionnalités. Cet exemple est réalisé en HTML / CSS pour donner une idée aussi proche que possible de la version finale si les prototypes en question étaient retenus par le client.

En guise de conclusion

La mise en place d’une charte graphique et éditoriale est assez chronophage, c’est pourquoi elle est souvent réservée aux projets importants. Mais sa rédaction tout au long de la phase de conception peut s’avérer une aide précieuse pour éviter la dispersion et formaliser les choix créatifs au fur et à mesure de leur cristallisation.

Articles sur le même sujet

• Quelques notes de lecture sur Le Graphisme au XXe siècle
• Calculer une grille de mise en page « typo » avec le nombre d’Or
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Framework CSS — Sémantique, maquette dynamique et autres notes
• « css 4 design » — Nouvelle charte graphique et redesign du logo

CSS Color Editor est une application en ligne qui permet de modifier légèrement ou radicalement votre palette de couleurs en trois étapes : indiquez l’emplacement de votre fichier CSS ; modifiez les anciennes couleurs grâce à un Color Picker complet et intuitif ; téléchargez le fichier CSS modifié.

CSS Color Editor propose plusieurs modes colorimétriques pour le choix des couleurs de remplacement : hexadécimal, RGB, CMYK et HSV ainsi que la sélection libre avec la souris.

Modifiez complètement les couleurs de votre site web avec CSS Color Editor.

Articles sur le même sujet

• 15 outils en ligne pour créer des palettes de couleur
• 0 to 255 — Trouvez les variations autour d’une couleur de base
• Le petit journal du web — WordPress, Couleur, CSS, Page Speed, 404
• Astuce CSS3 et RGBA avec les outils de développement de Google Chrome
• CSS Sans Stress — Une formation intégrateur HTML & CSS

Le « principe de proximité » est un concept issu de la Psychologie de la forme (Gestalt) qui énonce que le cerveau a tendance à regrouper des éléments qui sont placés à proximité pour former un ensemble cohérent. Des éléments placés côte à côte sont perçues comme des éléments ayant un rapport entre eux. Ils forment dans notre esprit des sous-ensembles qui vont alors fonctionner comme un tout. Pour appliquer ce principe de proximité dans le cadre de la conception d’un site web, on rassemblera les éléments qui partagent un destin sémantique commun au sein d’un ensemble visuellement identifiable.

Dans les faits, ce principe de proximité est relativement simple à mettre en oeuvre : il suffit d’augmenter ou de diminuer la « distance » entre deux ensembles pour que l’utilisateur identifie rapidement les zones principales à parcourir, le faisant passer du statut de « visiteur » à celui de « lecteur ».

Cette notion de proximité est tellement évidente que nous sommes tous plus ou moins experts en « principe de proximité ». Nous apprenons au cours de notre scolarité à rassembler nos idées et à les structurer en parties et sous-parties avec une introduction pour commencer et une conclusion pour finir. Dans le cas d’une dissertation, la « distance » entre deux idées sera souvent exprimée par la longueur de la transition entre deux paragraphes.

Mettez des distances …

En ce qui concerne la composition graphique, nous disposons de plusieurs techniques pour exprimer cette « distance » :

• Ajouter ou retrancher de l’espace,
• Changer la police de caractère ou les styles typographiques,
• Jouer sur les couleurs, les contrastes, les fonds, les textures, etc.
• Augmenter ou diminuer la taille des blocs ou des éléments qu’ils contiennent,
• Utiliser des filets, des bordures ou des cadres,
• Indenter certaines parties du contenu ou décaler les blocs,
• Combiner ces différentes techniques.

… et n’ayez pas peur du blanc.

Pour parvenir à exprimer la distance entre plusieurs ensembles, il ne faut pas avoir peur d’user et d’abuser de l’espace blanc. Il ne coûte pas cher à produire, mais se fait curieusement plus rare à mesure que le talent du Webdesigner diminue. Une composition graphique doit respirer pour vivre ! Inutile donc de disperser les éléments du design comme s’il ne devait plus rester un seul espace vide.

Notez que ce qu’on appelle l’espace blanc n’est pas nécessairement blanc. Il s’agit de n’importe quel espace non rempli, indépendamment de la couleur du fond, fut-ce un dégradé.

Pour regrouper visuellement les élément liés entre eux …

Une profusion d’espace blanc ne garantit pas la lisibilité. Si les éléments d’une adresse postale sont dispersés au quatre coins de la page, il faudra du temps au lecteur pour réunir les informations, à supposer qu’il fasse le lien entre eux.

Au sein d’un même espace, il faudra veiller à utiliser du blanc pour hiérarchiser l’information. Ces micro espaces blancs devront idéalement être en rapport avec les macros espaces blancs qui circulent entre les blocs.

… utilisez les grilles de mise en page …

L’avantage d’utiliser une grille pour structurer une mise en page, c’est de pouvoir compter sur une gamme d’espaces blancs cohérents composés des colonnes et des gouttières. Les grilles permettent de tester rapidement différentes maquettes en laissant plus ou moins de colonnes entre les différentes parties de la page pour exprimer la distance sémantique qui les sépare.

Pour ce faire, il est important que le pas de la grille soit aussi fin que le nombre d’éléments le nécessite. Si les contenus présentent de nombreuses différences et/ou s’il existe des niveaux hiérarchiques en pagaille, il faudra un nombre de colonnes assez conséquent, ou utiliser une partie des éléments cités plus haut pour mettre de l’ordre.

… pour guider le visiteur dans la page …

Le principe de proximité est au service de la lisibilité, elle-même au service de l’action. Le groupement des éléments dans des ensembles, eux-même rassemblés dans des blocs permettra de montrer le chemin à suivre.

… vers le contenu approprié.

Tout les éléments abordés jusqu’ici n’ont finalement qu’un seul but :  permettre au visiteur d’optimiser sa navigation au sein du contenu pour qu’il trouve ce qu’il cherche le plus rapidement possible ou, le cas échéant, qu’il s’aperçoive vite que ce qu’il cherche ne s’y trouve pas. Plus vite il quittera votre site et moins il vous en voudra. Il est même capable de revenir plus tard ;)

Linkographie

En français

• Langage visuel: la Gestalt
• Les principes du design
• Quelques notes sur la conception d’une charte graphique
• Induire un comportement visuel avec la gestalt : principe de proximité

En anglais

• Design Basics: The Proximity Principle
• How C.R.A.P. Is Your Site Design?
• Using Grouping in Web Page Layouts
• Whitespace
• The Language of Design
• The Principles of Design
• Gestalt

Billet inspiré par The Principle of Proximity in Web Design écrit par Louis Lazaris pour Webdesigner Depot.

Articles sur le même sujet

• CSS Sans Stress — Une formation intégrateur HTML & CSS
• Quelques notes — Programme de formation HTML & CSS
• Webdesign — L’essence précède l’existence (Wireframe, Mockup et Mood Board)
• Quelques notes sur la balise h1 avec HTML5
• Quel tarif pour un thème WordPress ?

Pour le webdesigner d’aujourd’hui comme pour le peintre d’hier, le choix d’une bonne palette de couleur est déterminant pour la réussite d’une oeuvre, fut-ce un site web. Pour y parvenir, voici quelques ressources en ligne pour obtenir rapidement des palettes de couleurs de qualité, tout en s’amusant.

La couleur ? Longtemps elle a semblé échapper à toute appréhension, son caractère « accidentel » a découragé toute science. Sur elle on ne pouvait fonder un art. D’où la prééminence du dessin. Puis Newton établit que la lumière blanche n’est pas homogène mais composée. A sa suite, Buffon puis Goethe font leur place aux couleurs d’origine physiologique qu’ils rapportaient à l’oeil percevant. Les années 1840 marquent, elles, le grand tournant dont nous demeuront les héritiers : Chevreul, savant chimiste, remet en question les rapports admis de l’oeil avec l’objet perçu. Il établit la loi générale qui régit la perception des rapports entre couleurs contiguës. Une revalorisation de la couleur s’ensuivit qui a excercé une influence considérable sur plusieurs générations de peintres : Delacroix, les impressionnistes, Van Gogh, Gauguin, Seurat, Signac, les symbolistes, les futuristes et Delaunay. Le changement de paradigme ouvre sur la conquête des voies propres de la couleur qui conduiront la peinture jusqu’à l’abstraction.

Art et science de la couleur. Chevreul et les peintres, de Delacroix à l’abstraction. Edition revue et augmentée. George Roque. Gallimard, Collection Tel. 2009.

1. Toucan Color Palettes

Toucan fait partie des outils de création et d’édition en ligne proposés par Aviary. Vous pourrez très facilement créer vos palettes de couleur et les sauvegarder. Il est possible de lier Aviary à son compte Flickr pour piocher des couleurs dans votre stock de photos. Cerise sur le gâteau, il est possible de visualiser une palette de couleurs selon différentes affections de la vision telles que : protanopy, protanomaly, deutéranopy, deutéranomaly, tritanopy, tritanomaly, achromatopsy ou achromatomaly. Pratique pour s’assurer que les informations véhiculées par les couleurs seront accessibles pour tous !

2. kuler

L’outil indispensable pour chercher l’inspiration ou créer votre palette de couleur à partir de couleurs choisies d’après un nuancier (analogique, monochromatique, triade, complémentaire) ou en fonction de différentes teintes ou saturation. Des curseurs interactifs vous permettront d’affiner les choix initiaux en toute liberté selon votre intuition ou vos savants calculs quelque soit le mode colorimétrique de base : HVS, RGB, CMYK, LAB, HEX

Il est également possible de déterminer une palette de couleur d’après une image que vous aurez téléchargée depuis votre poste de travail ou depuis le meilleur site de photo au monde : flickr. Vous obtiendrez une palette de couleur que vous pourrez modifier en faisant varier les points chauds de l’image en question au cas où les couleurs par défaut passeraient à côté d’une couleur significative de l’image. Vous pourrez également faire varier les couleurs par défaut selon six modes prédéfinis.

3. ColorSuckr

Créé par Paul Burgess, ColorSuckr génère votre palette de couleur à partir du profil chromatique de votre image une fois que vous aurez indiqué son URL. Il est également possible de choisir une palette d’après une photo présente sur flickr en précisant un mot-clé. L’originalité vient du fait que l’on peut — pour chaque dominante de couleur — afficher les palettes de couleur déjà créées sur COLOURlovers. C’est un excellent exemple de mashup dans la pure tradition du web 2.0 !

4. colourlovers

COLOURlovers est un générateur de palettes qui prend la température de ce qui se fait de mieux en terme de nuanciers à travers le monde autant qu’il influe sur les tendances à venir. COLOURlovers permet à chacun (publicitaire, designer, graphiste, architecte, etc.) de chercher parmi des centaines de nuanciers, de les comparer entre eux et de se tenir au courant de ce qui se passe dans le milieu de la couleur, le tout en version française !

Voir tout spécialement les outils spécifiques dans Tools.

5. Pictaculous

L’originalité de cet outil est d’être compatible avec votre iphone : prenez une photo depuis votre appareil, envoyez-là à l’adresse colors@mailchimp.com et patientez pour la réponse !

6. Color Palette Generator

Pour commencer, choisissez une couleur en utilisant le sélectionneur de couleur, et une palette composée d’un camaïeu de 6 couleurs sera calculée automatiquement. Ce site comblera les fanas de couleurs grâce à la possibilité de sauvegarder des sets de couleurs aux formats Photoshop et Illutrator ! Voire de se faire envoyer les camaïeu par email !

7. colr

Dans le même esprit que Color Palette Generator le site extrait les couleurs d’une photo et propose une fonction « schemes » qui propose un dégradé selon les couleurs trouvées. Notez que si les couleurs ne vous conviennent pas, vous pourrez cliquer à nouveau pour avoir une autre proposition. Il est possible de tagger les couleurs et d’effectuer des recherches par tag ce qui s’avère très pratique quand on cherche une couleur par association d’idée.

8. Color Blender d’Eric Meyer

Un peu plus frustre d’apparence, mais néanmoins très utile. Voir ma petite note sur ce Color Blender pour une traduction du mode d’emploi.

9. colorschemer

Comme les autres, ce site permet de définir une palette de couleur mais se distingue en offrant l’utilitaire ColorPix pour prélever les couleurs visibles à l’écran. Le zoom va jusqu’à 2800% ce qui devrait suffire. L’application peut se lancer au démarrage et une option permet de placer la fenêtre au premier-plan ou la réduire dans la barre des tâches. En appuyant sur une touche, la couleurs sélectionnée est verrouillée. Redémarrez si cette fonction ne marche pas.

10. COLOROTATE

Colorotate offre une belle interface (bien qu’un peu confuse au premier abord) pour créer, mixer, mélanger les couleurs pour obtenir de palettes de couleurs. Le plus de Colorotate est d’afficher les palettes selon plusieurs types de déficiences visuelles.

11. Colorjack Studio

Je n’ai pas vraiment été convaincu par l’ergonomie et le look and feel de Colorjack Studio, mais qui sait, peut-être trouvera-t-il son public. En revanche, vous serez peut-être intéressés par les autres outils disponibles sur le site, comme Color Galaxy et Color Sphere.

12. Daily Color Scheme

Tous les jours une ressource colorée sous la forme d’une palette de couleur à télécharger pour Photoshop, Illustrator, etc. mais aussi sous forme de fichier CSS ou HTML.

13. Color Hunter

Crée une palette de couleur d’après un tag, une couleur hexadécimale (ne mettez pas le symbole# devant), l’URL d’une image ou en fonction d’une image sur votre disque dur. Propose également de modifier la tonalité des couleurs en diminuant la saturation.

14. Color Scheme Designer

Très bel outil pour créer des sets de couleurs modifiables globalement en jouant sur la saturation, le constraste ou en ajustant chaque couleur séparément.

Color-Hex

Un outil très simple, limite basique mais qui vous permettra d’aller à l’essentiel une fois que vous aurez saisi le code hexadécimale de votre couleur : traduction dans les autres modes colorimétriques (RGB, HSL, HSV, CMYK) ; affichage des couleurs triadiques, monochromatiques, analogues ou complémentaires. L’outil propose également quelques codes HTML et CSS prêts à l’emploi, comme .mybgcolor {background-color: #5e5391; }.

J’ai un faible pour les propositions monochromatiques qui permettent d’obtenir très rapidement une teinte plus claire ou plus foncé que la couleur de base.

PS : N’hésitez pas à participer à ce billet en soumettant à l’attention des lecteurs les outils qui font votre bonheur quotidien ;)

Articles sur le même sujet

• CSS Color Editor remplace automatiquement les couleurs dans vos CSS
• CSS Sans Stress — Une formation intégrateur HTML & CSS
• 0 to 255 — Trouvez les variations autour d’une couleur de base
• Améliorations cosmétiques et ergonomiques sur ce blog
• 390 ressources Javascript & jQuery

BIC est un meta framework CSS basé d’une part sur le reset CSS d’Eric Meyer pour la remise aux valeurs par défaut des éléments HTML (clean.css) et le framework 960.gs pour la partie grille de mise en page (layout.css), et d’autre part sur de bonnes idées en ce qui concerne le traitement de la typographie et de la couleur (typography.css et color.css).

L’existence d’un fichier wordpress.css sera très utile pour les fans de cette plateforme de blog ! Je regrette juste que les styles spécifiques à WordPress ne soient pas tous présent dès maintenant. Peut-être dans la prochaine version ? Pour finir, il reste myclass.css au cas où vous auriez quelque chose à déclarer :D

Bref, du beau, du bon, du pocky à télécharger d’urgence.

PS : Si vous trouvez que les frameworks pénalisent les performances globales de votre site web en raison des requêtes surnuméraires, jetez quand même un oeil dans les différents fichiers de BIC : vous y trouverez certainement matière à réflexion.

Articles sur le même sujet

• Css Sans Stress — Auto-formation HTML & CSS avec les Frameworks CSS
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• 36 frameworks CSS — Mettez une grille dans votre design
• Frameworks CSS + Reset CSS : design from scratch
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2