Design & Graphisme
Danse avec les loops #1 : un thème WordPress mis à nu
Après le thème Agrumz dont une version est encore visible sur Notorious Blog, et après avoir mis en place un thème provisoire en attendant, voici SquaryBluevie, le nouveau thème bleu et carré (et un peu vert aussi) pour css4design. Il ne s’agit pas vraiment d’un thème destiné à transformer ce blog en magazine, mais plutôt d’en faire un magazine qui ressemble à un blog, nuance, nuance… Un blogzine ? Oui, oui, c’est presque ça ! Comme promis, voici donc le premier volet de la série Danse avec les loops pour montrer ce qu’il y a sous le capot. Lire l’article »
Zapper la maquette Photoshop et passer directement à l’intégration HTML/CSS ?
Depuis longtemps je me dit qu’un jour je saurai faire une maquette complète d’un design web dans Photoshop. Pourtant, je lance Illustrator à chaque fois, et dès les principes graphique en place, je lance mon éditeur web préféré (en ce moment, c’est Aptana Studio) pour commencer l’intégration tout de go ! Dans mon fors intérieur, j’ai toujours trouvé que paufiner une maquette dans les moindres détails dans Photoshop était souvent chronophage : on se focalise sur les détails graphiques (le bidule, un peu plus à droite, c’est possible ?) au lieu de privilégier la bonne distribution des informations dans l’espace. Lire l’article »
Conception d’un thème magazine de A à Z — A comme “Allons-y !”
Le thème magazine se porte bien cette année et la tendance est à la hausse. Dans cette catégorie, quelques thèmes sont sortis du lot : Mimbo, traduit en français et modifié par niss et décrit par fran6. (Mimbo Pro est disponible à partir de 90$ — captures d’écran disponibles chez stagueve) et Révolution (à partir de 79$) qui a ouvert la voie aux thèmes magazine payants. Après eux, une foultitude de thèmes du même genre ont vu le jour. Les raisons du succès de ces habillages graphiques pour les blogs sont multiples : Lire l’article »
Publié le 14 mars 2008 par Bruno Bichet. 16 commentaires »
Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web
Dans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1 proposé par Information Architect (iA). L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. C’est la démontration réussie que l’on peut appliquer les règles de mise en page du monde de l’imprimé à l’écran, sans rien sacrifier. Je l’avais presque oublié. Lire l’article »
Publié le 25 février 2008 par Bruno Bichet. 38 commentaires »
Background CSS : des fonds hachurés avec la “positive attitude”
<
p>
Les fonds de page web hachurés sont particulièrement appréciés des webdesigners pour une raison double : les zébrures donnent de la vibes aux pages web tout en conservant un ratio poids/agrément des plus satisfaisant, vu qu’il s’agit d’un motif de petite taille (généralement quelques pixels) qui se répète sur tout ou partie de la page. Lire l’article »
Publié le 16 janvier 2008 par Bruno Bichet. 8 commentaires »
Les 10 plus beaux designs CSS selon SmashingCoding
Le concours organisé par Smashingcoding est terminé et les membres du jury ont rendu leur copie pour désigner le vainqueur parmi le top 10 des blogs inscrits. Je suis content d’être à la 5ème place et je félicite chaleureusement le 1er (avec une pointe de jalousie, il faut bien le dire) ainsi que tous les autres participants avec une pensée pour SuperChinois ;)
Voici donc les 10 plus beaux design CSS selon SmashingCoding qui avait pris en compte l’apparence du blog, la qualité du code, les astuces CSS utilisées et les difficultés surmontées en terme de webdesign :
- Affinity Web
- le blog de Damien Alexandre
- Webinventif, Kenny-Blog
- BizetFamily
- css4design
- Pixnlov
- Pixenjoy
- Pilok
- Buzz and People
- Tux Planet
PS : Vous remarquerez que Britney “CSS” Spears n’était pas très “fatiguée d’être sexy” ! Bien joué eMeRiKa :D
Publié le 31 octobre 2007 par Bruno Bichet. 17 commentaires »
Quel avenir pour le graphisme des blogs ?
J’ai eu le plaisir de répondre à quelques questions de Mickaël Thomassin sur le graphisme des blogs sur le blog de MotsAndCo. Cette agence spécialisée dans la création de contenu, sa traduction et son intégration au sein de pages web ou blog professionnels, réalise régulièrement des entretiens par mail avec des blogueurs sur un sujet en rapport avec les blogs ou la rédaction web. J’ai eu un réel plaisir à donner mon avis et participer ainsi à la série des interviews MotsAndCo.
Voici donc les trois questions sur lesquelles j’ai eu l’occasion de donner mon sentiment :
- «On entend souvent dire que le contenu d’un blog est ce qui fait revenir ses lecteurs. Penses-tu que le graphisme du contenant soit secondaire ?»
- «Globalement, peu de blogs corporate mettent l’accent sur le graphisme, s’arrêtant souvent à un logo et une interface ternes. Que conseillerais-tu à un entrepreneur souhaitant rendre son blog plus “créatif” ?»
- «Quelles sont les tendances du moment en matière de graphisme de blogs ? Va-t’on vers plus de simplicité ou au contraire, des colonnes sans cesse plus fournies ?»
Voici les réponses à ces questions.
Créer le logo et la charte graphique de mon nouveau blog en 4 étapes
J’ai déjà eu l’occasion de dire quelques mots sur la conception d’une charte graphique. Les 3 étapes évoquées alors étaient forcément réductrices… Plus qu’un billet sur le graphisme, il s’agissait d’une part de montrer comment la théorie peut s’articuler avec la pratique et d’autre part d’expliciter une méthode d’organisation. Aujourd’hui, je profite de la mise en place progressive de mon nouveau blog sur les blogs, les blogueurs, la blogosphère, le blogging, le microblogging, le moblogging (rien de sanglant, rassurez-vous) et la création de blogs événementiels, pour mettre la théorie en pratique. Après le teasing qui a débuté avec la chaîne Kawa-Yaka, je vous livre les étapes qui mènent de l’envie à l’idée, jusqu’à la réalisation finale. Lire l’article »
Publié le 4 septembre 2007 par Bruno Bichet. 17 commentaires »
5 règles simples pour gérer l’affichage de votre texte dans vos mises en page
Après avoir passé en revue les thèmes WordPress dans le cadre du SDC, j’ai voulu lister les erreurs les plus communes sous la forme d’un billet sur les 11 erreurs à faire pour être recalés à un concours de webdesign… Mais, il se trouve que parfois le hasard fait bien les choses : juste avant de fermer mon agrégateur pour un repos bien mérité, je suis tombé sur un titre racoleur. Et là, impossible de résister à la lecture et à l’envie de traduire en direct live cette profession de foi, Alpha et Omega pour tout **webdesigner qui se respecte (et qui respecte ses lecteurs !). Ce billet aurait pu s’intituler : Lisibilité, ce qui va sans dire, va mieux en le disant. Mais c’était sans compter le côté obscur de la force qui m’a soufflé un titre bien plus efficace ;) Lire l’article »
Publié le 10 août 2007 par Bruno Bichet. 18 commentaires »
Sandbox Designs Competition : 46 thèmes pour WordPress passés en revue
Les résultats du Sandbox Designs Competition sont disponibles depuis quelques heures après plusieurs jours passés à peser le pour et le contre de chaque proposition. Chaque membre du jury était libre de laisser libre court à sa subjectivité et à son intime conviction pour se prononcer sur les choix éditoriaux ou la mise en valeur des différentes fonctionnalités qui structurent un blog. Ou encore sur les choix purement esthétiques comme les visuels employés ou les choix colorimétriques. J’ai accordé un poids important au confort de lecture en traquant impitoyablement les déficits en blancs tournants, interlignages et autres espacements. Pour autant, je n’ai pas laissé de répit aux problèmes de lisibilité dépendants de la palette de couleurs retenue : un blog, c’est avant tout beaucoup de texte à lire. En second lieu, j’ai pris en compte l’équilibre global du design. J’ai vérifié ensuite si la structure résistait à l’épreuve de la compatibilité inter-navigateurs. Pour celà, j’ai testé les pages sous Firefox 2, Internet Explorer 6 et Opéra 9, le tout pour Windows. Merci à Scott pour avoir mis en place ce concours qui fut un modèle d’organisation. Vivement l’année prochaine ! Lire l’article »

Réaliser un effet de zoom sur une image nécessite généralement deux versions d’un même visuel : la première à 100%, et la deuxième à taille réduite. Les événements onmouseover et onmouseout pilotent traditionnellement le changement de source de l’image pour gérer la permutation.
Liste des derniers commentaires