Conception de site web

Guide stylistique — Exemple de charte graphique et éditoriale

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

Traductions

7 conseils pour mélanger plusieurs fontes dans votre design web

La typographie peut devenir la partie la plus créative de votre design ou la plus frustrante. Travailler avec ne serait-ce qu’une police de caractère peut déjà devenir un défi insurmontable pour de nombreux webdesigners ; alors imaginez ceux qui utilisent jusqu’à sept fontes ou plus dans leur design ! Voici un résumé de l’article 7 Rules for Mixing Multiple Fonts in Good Web Design qui passe en revue les éléments à prendre en considération pour utiliser plusieurs polices de caractère dans votre site web. →

Design & Graphisme

Les mathématiques appliquées au webdesign

Mathematics is beautiful? et pourquoi pas Code is poetry pendant qu’on y est ! C’est pourtant vrai : les mathématiques pourront servir de tremplin à l’inspiration lorsque mettrez en route votre prochain design web. Comment ? Vous saurez tout en lisant l’excellent Applying Mathematics To Web Design paru chez Smashing Magazine où j’ai eu la surprise de voir mon article sur l’application du nombre d’or et la suite de Fibonacci dans le webdesign cité dans la partie Fibonacci Design o/ →

Design & Graphisme

Le principe de proximité dans le webdesign

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

Création graphique

NoSushaï — Un thème WordPress pour js4design

Le lancement d’un nouveau blog est un moment délicat dans la vie d’un blogueur. Le risque est grand de ne pas tenir la distance car la régularité s’accommode mal d’un faible nombre de Visiteurs Uniques ou de Page Vues. De ce point de vue, js 4 design démarre doucement mais semble trouver son public. Une chose en amenant une autre, j’ai décidé de lui donner un coup de pouce supplémentaire en l’habillant d’un thème à l’occasion du 77ème jour de sa mise en ligne. →

Le petit journal du web

Typekit — La typographie sur le web

Parmi les solutions disponibles pour afficher des titres avec une police de caractère sortant des sentiers battus, Typekit sort du lot. Si SIFR, FaceLift, ou Typeface.js s’appuient globalement sur la technologie Flash et Cufon sur Javascript, Typekit quant à lui s’appuie sur le standard CSS3 et la propriété @font-face pour faire son petit effet. Frambi-framboise sur le gâteau, cette propriété @font-face est prise en charge par les navigateurs modernes (Firefox 3+, Safari 3.1+) mais aussi par Internet Explorer à partir de la version 6. A noter que @font-face ne fonctionne pas avec Google Chrome. →

Design & Graphisme

Quelques notes sur les grilles de mise en page

A mesure que les techniques des langages du web l’ont permis, des designers web talentueux ont travaillé à l’élaboration d’environnement de travail permettant de mettre en place des systèmes de grille adaptés aux contraintes de la création de pages web. Contrairement à l’imprimé où le langage de description de page Postscript d’Abode est un standard, il n’existe pas sur le web de dispositif « officiel » pour créer des colonnes à l’épreuve des différences de rendu entre les agents utilisateurs (les navigateurs). →

Design & Graphisme

Grid — Gardez le contrôle sur votre design web

Les grilles de mise en page font partie de la boite à outils du web designer qu’il s’agisse pour lui de s’y soumettre ou de s’en écarter. Pour faciliter notre travail, Allan Jardine propose Grid, un bookmarklet qui prendra place dans la barre d’outils de votre navigateur préféré (ou pas car pour l’instant Google Chrome n’est pas totalement pris en charge). Plutôt qu’un long discours, voici une capture d’écran de Grid avec les valeurs de la grille que j’ai élaborée pour css 4 design. →