« Average font » est un projet qui consiste à faire émerger l’essence même de la police de caractère universelle. Pour y parvenir, Moritz Resl à écrit un programme qui a superposé les 900 fontes installées sur son système en ajoutant une faible opacité. Il en ressort la forme intemporelle de chaque lettre de l’alphabet pour un résultat paradoxalement organique et fantomatique. →
Design dans le navigateur : tous les chemins mènent au DOM !
A la lecture des articles et des commentaires sur le thème du design dans le navigateur, j’ai l’impression que l’on confond deux choses pourtant bien distinctes, voire trois, si l’on ajoute au design et au graphisme, la notion de direction artistique. Si dans certains cas, il est possible de faire la direction artistique, les wireframes et les graphismes dans le navigateur, cette méthode intégrale ne saurait s’appliquer à la majorité des projets. →
Les goûts et les couleurs
Cette présentation faite par David Rault à l’occasion de Paris Web 2011 présente la symbolique que notre culture occidentale associe généralement avec les couleurs de notre quotidien. Vous y trouverez la représentation des 11 couleurs de base, quelques conseil pour le choix d’une palette de couleurs, ainsi que de nombreux exemples de sites web commentés. L’auteur a pris soin de parsemer son discours de nombreuses anecdotes qui rendent cette vidéo agréable à consulter. →
10 principes de design pour les sites du gouvernement anglais
Le gouvernement de Sa Majesté a produit, après un long congrès sur la question, le document Government Digital Service Design Principles — actuellement en version bêta — pour expliciter les principes qui devraient régir la conception des services en ligne en direction du public. Il ne s’agit pas de règles à prendre au pied de la lettre ni d’une liste des mauvaises pratiques à éviter. Il s’agit simplement d’un ensemble de 10 recommandations accompagnées d’exemples d’application pour inspirer les éditeurs de sites et les inciter à mieux travailler pour les citoyens. →
Nouvelle méthode de remplacement de texte par une image
Dans l’article Nouvelle méthode de remplacement d’image en CSS, je vous faisais part d’une nouvelle méthode de remplacement de texte par l’image en CSS proposée par Scott Kellum qui utilise la propriété text-indent
avec un décalage en pourcentage. Cette méthode n’étant pas dénuée d’effets de bord (voir dans la suite de l’article), une nouvelle technique a fait son apparition lors de la mise à jour de HTML5 Boilerplate. Je vous propose une traduction de l’article Another CSS image replacement technique écrit par Nicolas Gallagher qui détaille une technique avec font-size
: →
Utilisez une grille de mise en page, il en restera toujours quelque chose
Contrairement à l’imprimé où le langage de description de page Postscript d’Adobe 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). Toutefois, des webdesigners talentueux ont mis en place des systèmes de grilles adaptés au web. Ces frameworks CSS — qui ont popularisé le placement des blocs sur une grille — ont fait (re)découvrir aux concepteurs de sites web que le design graphique est une pratique plusieurs fois millénaire qui a forgé ses propres règles pour que le contenu devienne message grâce au contenant. →
Direction Artistique et Design : deux facettes complémentaires du graphisme
La question du fond et de la forme est un sujet récurrent dans le Webdesign. Ces notions sont suffisamment différentes pour que l’on ne les confondent pas, mais elles font oublier que la forme est aussi la somme de deux compétences : la Direction artistique et le Design, que l’on peut traduire par l’intention et l’exécution. Une réalisation peut très bien être le fruit d’une direction artistique exemplaire tout en présentant un design très cheap, ou l’inverse. L’article Art Direction and Design de Daniel Mall paru sur A List Apart explique en détail ce qui ressort de la Direction artistique et ce qui ressort du Design dans la mise en place d’un site Web. →
Tutoriel grille verticale en CSS par Smashing Magazine
95% des sites web sont faits de typographie ! Cette assertion d’Oliver Reichenstein dans l’article Web Design is 95% Typography semble toujours d’actualité. Dans la plupart des cas, les visiteurs se rendent sur un site pour lire. C’est une excellente raison pour prendre soin de la typographie dans le web design. Dans l’article Technical Web Typography: Guidelines and Techniques, Smashing Magazine détaille la mise en place d’une grille verticale en utilisant les règles immuables d’une bonne typographie, qu’il s’agisse de créer un carton d’invitation pour un anniversaire ou un faire-part de décès. →
pointypo– L’actualité typographique en français
Recherche de pistes graphiques
La mise en place d’un nouvel habillage graphique est l’occasion de réfléchir sur les questions de fond : l’objectif du site et les types de contenus qu’il va accueillir. A savoir : l’intégration web et le webdesign, l’actualité de la création numérique en mettant l’accent sur les sujets transversaux abordés sur mes autres sites, avec une pensée particulière pour le graphisme, la typographie et la mise en page, sans oublier les logiciels qui permettent de donner vie aux idées créatives, comme Photoshop, Illustrator, Indesign, Première Pro ou encore After Effects. →