CSS & Webdesign » Design

Quelques notes sur les éléments graphiques du webdesign

Bruno Bichet — Tue, 24 May 2011 16:59:12 +0000

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

Le design est un dessin et un dessein

Bruno Bichet — Wed, 06 Apr 2011 09:18:19 +0000

Le design est une discipline visant à représenter concrètement, une pensée, un concept ou une intention en tenant compte éventuellement d’une ou des contraintes fonctionnelles, structurelles, esthétiques, didactiques, symboliques, techniques et productives. Ces représentations peuvent être tangibles ou virtuelles et s’inscrivent de préférence dans un contexte social, économique, culturel.

Plus loin dans Wikipédia, nous pouvons lire qu’à la Renaissance, disegno (en italien) est l’un des concepts majeurs de la théorie de l’art. Il signifie à la fois dessin et projet. Au xvii^e siècle en France, les théoriciens de l’art le traduisent par dessein et conservent le double sens (l’idée et sa représentation).

En 1712, Shaftesbury introduit dans la théorie anglaise de l’art le concept de design fidèle au sens de disegno. Ainsi, nous avons drawing pour le dessin en tant que tracé et design signifiant l’idée et sa représentation, le projet et son graphisme.

Néanmoins, ce double sens de design va se disjoindre rapidement pour suivre les théories de l’art dominantes de l’époque. Car c’est en 1750 en France que la distinction apparaît pour donner deux champs sémantiques distincts, celui du dessin (la pratique) et du dessein (l’idée) marquant une rupture fondamentale qui n’est pas sans rappeler la dualité matière/esprit de Descartes. À l’Académie royale de peinture et de sculpture, on enseigne désormais les arts du dessin et non plus du dessein.

Source : Design sur Wikipédia

Articles sur le même sujet

Direction artistique et Design : deux facettes complémentaires du graphisme

Bruno Bichet — Thu, 04 Nov 2010 07:06:27 +0000

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.

Direction artistique et Design

Dernière tendance en date dans le design interactif ? Glorifier l’arrivée de la Direction artistique. De nombreuses galeries lui sont dévouées. Il existe même un plugin WordPress pour ça. Malheureusement, de nombreux designers ne comprennent pas la différence entre le Design et la Direction artistique. Plus triste encore c’est la même chose pour de nombreux DA.

C’est la Direction artistique qui permet à votre travail de transmettre un message spécifique pour un groupe particulier de personnes. Elle mélange l’Art et le Design pour provoquer une réaction émotionnelle. Elle est présente dans le cinéma, la musique, les sites Web, la presse magazine, etc. Elle est comme la bougie qui transforme un repas ordinaire en soirée romantique. La Direction artistique est l’art de provoquer la bonne émotion, de connecter ce que l’on voit avec ce que l’on ressent.

Par contraste, le Design est simplement l’exécution technique de cette connexion. Est-ce que ces couleurs vont bien ensemble ? Est-ce que la longueur des lignes permet de lire confortablement pendant une longue période ? Est-ce que cette photo est appropriée ? Est-ce que la hiérarchie typographique fonctionne ? Est-ce que la mise en page est équilibrée ?

Si j’annonce à ma femme que je l’aime en faisant la grimace, elle risque de recevoir un message brouillé. En revanche, si je le lui dit avec un sourire charmeur et un bouquet de fleur, la signification sera plus claire. Dans cet exemple, mon amour est la Direction artistique, tandis que mon sourire et le pourpre des roses sont le Design. Les deux travaillent main dans la main pour nous amener au point où le coeur et la raison se rejoignent.

Voici quelques suggestions qui devaient illustrer les approches différentes entre la direction artistique et le design :

OUTIL	DIRECTION ARTISTIQUE	DESIGN
Couleur	Est-ce que cette palette de couleur correspond à la marque ? Est-ce approprié à la situation ? Des couleurs chatoyantes ne devraient pas être utilisé pour véhiculer la tristesse.	Est-ce que ces couleurs vont bien ensemble ? Vibrent-elle ? Chaque couleur est-elle le meilleur choix pour le support (ex. Pantone pour l’impression et palette de couleurs sécurisée pour le Web ?)
Typographie	Est-ce que cette fonte est connotée ? Comment la forme des lettres est-elle ressentie indépendamment des mots employés ? Comic Sans est un peu niais, mais Helvetica est peut-être trop conventionnel.	Est-ce que la taille des caractères créent un bonne hiérarchie visuelle ? Est-ce que la graisse de cette fonte est suffisante dans ce contexte ?
Composition	Quel équilibre devrait posséder cette composition ? Les mises en page symétriques sont plaisantes mais souvent passives. Les compositions asymétriques sont moins évidentes mais plus intéressantes.	Est-ce que les marges sont égales ? Y a-t-il un rythme naturel dans la page qui permet de guider le regard du visiteur ?
Concept	De quelle manière les visuels véhiculent-ils l’ambiance de la marque ? Vers quel message ou quelle histoire le design nous entraine-t-il ?	De quelle manière les visuels s’adaptent-ils avec la charte graphique de la marque, les espacements du logo, la typographie et la palette de couleur ?
Résumé	Est-ce que tu le sens bien ?	Est-ce que tu le vois bien ?

Dans la suite de l’article, Dan Mall demande à collègues travaillant dans le domaine de la direction artistique et du design de proposer leur vision des choses, puis il poursuit avec des exemples illustrés et commentés, riches d’enseignements.

Traduit avec la permission de A List Apart Magazine et de l’auteur.

Cet article est un résumé traduit de l’article Art Direction and Design écrit par Dan Mall pour le magazine A List Apart le 2 novembre 2010. Je suis allé à l’essentiel en essayant de préserver au maximum l’intégrité de l’article à défaut de son intégralité. J’ai «fait» anglais en troisième langue : merci d’être indulgent et de m’indiquer les éventuels contre-sens qui se seraient glissés dans cette «craduction».

Articles sur le même sujet

Le prêt-à-bloguer bride-t-il la créativité ?

Bruno Bichet — Fri, 08 Oct 2010 18:54:47 +0000

Comme toutes les disciplines graphiques, la conception de modèle de site internet (Webdesign) est traversée par les modes et les tendances. Parmi elles, le design minimaliste (style épuré, typographie fine, utilisation parcimonieuse des visuels, grille de mise en page tirée au cordeau) est sans doute le plus répandu. C’est certainement celui qui est amené à perdurer en raison de son faible potentiel de lassitude. Toutefois, il ne faut pas confondre ce style épuré avec le style «sans style». Sorte de design pauvre mis au service d’un contenu pré-mâché où le contenant n’a d’intérêt que s’il permet à Google d’avaler les contenus sans avoir le hoquet.

Force est de constater que le fait d’avoir mis l’installation des blogs à la portée de tous, allié à la propension des individus au moindre effort ainsi qu’à leur tendance à la reproduction des comportements, abouti à une double uniformisation des contenus et des contenants.

Des contenus dupliqués à l’extrême

Si on enlevait les blogs des spécialistes SEO autoproclamés, des Community Manager en devenir ou des chantres des réseaux sociaux et du High-Tech s’extasiant sur le moindre déplacement d’un bouton de connexion, la circulation sur les autoroutes de l’information serait plus fluide. Savez-vous qu’un seul blog peut en remplacer un bon millier ? Goopilation, par exemple, propose la traduction des actualités publiées sur les blogs de Google. On retrouve plus ou moins la même chose pour Twitter avec la version française du blog de Twitter.

Il suffirait de traduire ainsi une grosse dizaine de blogs anglo-saxons issus du web 2.0 pour mettre au chômage 90% des blogs francophones soi-disant High-Tech. Les 10% restants sont les blogueurs qui apportent une valeur ajoutée grâce à leur vision sur le long terme et leur compréhension des enjeux socio-économiques sous-jacents.

Ergonomie ou marketing ?

Beaucoup pensent que l’ergonomie est aux blogs ce que l’aérodynamisme est à l’automobile : un moyen permettant d’aller plus vite en essayant de ne pas gaspiller trop de ressources. Cela semble séduisant, mais à l’époque des débuts de l’aventure automobile, la forme des véhicules n’avait que l’imagination des créateurs comme limite… Les blogs vont-ils tous se ressembler pour offrir le moins de résistance au clic sponsorisé et s’adapter au plus petit dénominateur commun ?

Voilà en substance ce que j’écrivais en mars 2007 dans Ergonomie des blogs : utilisabilité ou marketing ? Je pensais à l’époque que la monétisation des blogs allait tuer la blogosphère mais il semble que la course au SEO et aux classements s’en soit chargés avant…

L’absence de design, ce n’est pas du minimalisme

Dis, c’est quoi le design ? En anglais, une des acceptions du terme «design» est «dessein», comme dans The Great Design. Je n’irais pas jusqu’à dire que si l’on enlève une lettre à «dessein» on obtient «dessin», mais presque !

Le minimaliste c’est du design où les fioritures graphiques auraient laissé la place à du blanc distribué avec générosité et à bon escient. Mais attention : tous les sites web ne gagnent pas à être ultra minimalistes ! Une fois qu’il n’y a plus rien à retrancher dans le design d’un site internet, il peut être judicieux d’ajouter des éléments graphiques pour flatter l’oeil et valoriser le contenu.

Trouver son chemin

Sur la durée, l’intérêt d’un blog réside en grande partie sur l’originalité du contenu (style, angle de vue, diversité des sujets abordés par l’auteur) que le contenant devrait refléter. Le design est une vitrine pour les contenus. Pour que les lecteurs s’arrêtent, il est important de personnaliser son blog quand bien même on n’aurait pas de véritable patte graphique. L’important est que le ramage se rapporte au plumage.

Ecrit à quatre mains avec Jiann Venturini – @_jiann sur Twitter – étudiant en Master Webdesign à Sup de Pub Paris.

Articles sur le même sujet

Gridulator calcule la grille de votre design web

Bruno Bichet — Tue, 28 Sep 2010 08:31:34 +0000

Gridulator — Cet outil en ligne créé par David Sleight permet de faciliter les calculs de votre grille de mise en page. Il suffit de spécifier la largeur de votre design, le nombre de colonnes que vous voulez et Gridulator vous donnera tous les résultats présentant des valeurs entières (difficile de diviser un pixel, n’est-ce pas ?). L’application est pilotable au clavier, ce qui facilite les tâtonnements pour trouver le meilleur rapport entre la largeur des colonnes et des gouttières.

Comme vous pouvez le remarquer sur la capture ci-contre, il est possible de prévisualiser et de télécharger la grille choisie au format PNG.

Avec Gridulator, «griduler» n'a jamais été aussi simple !

Lire Say Hello to Gridulate pour en savoir plus. Via @LeCourrierIndus

Articles sur le même sujet

Quelques notes sur le design graphique des sites web et autres futilités

Bruno Bichet — Tue, 21 Sep 2010 12:16:59 +0000

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

Le petit journal du web — Non, Twitter n'a pas tué les Backlinks… La preuve !

Bruno Bichet — Mon, 06 Sep 2010 14:18:51 +0000

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

Le Design serait inutile dans 80% des cas

Bruno Bichet — Fri, 03 Sep 2010 13:23:35 +0000

Désolé pour le titre accrocheur, mais que voulez-vous, c’est la tendance ! Et les tendances dans le webdesign, c’est sacré. Du moins c’est ce que l’on a tendance à croire parce que c’est pratique.

Votre site, vous le voulez comment ?: Oh, quelque chose de minimaliste, orienté typographie : c’est pour consommer sur place.
Ah… Si j’ai bien compris, vous êtes dans la mouvance du web 2.0: Oui, oui, on ne produit rien, c’est l’utilisateur qui s’y colle… Nous voulons juste un design web 2.0 libre de droits (pas cher, donc)
Votre cible, c’est un peu l’utilisateur de l’iPhone, quand même ?: Tout à fait ! On veut un truc genre Apple, sobre et moderne, vous voyez ?
Genre le nouveau logo iTunes ?: Heu, non, pas jusque-là quand même…

Après ce préambule plus défoulatoire qu’autre chose, venons-en au coeur du sujet. Est-ce que le design d’un site a autant d’importance qu’on le pense généralement, surtout quand on regarde des sites web qui font beaucoup d’audience et d’argent comme Craiglist, Amazon, Ebay ou Google ?

Dans The Ugly Truth ou Le Design Ne Sert À Rien ! les auteurs mettent en avant les qualités de l’interface utilisateur au sens large pour expliquer la réussite de certains site relativement moches. C’est séduisant. Surtout lorsqu’on est plus attaché au fond qu’à la forme. Mais, l’ergonomie n’explique pas tout. Il existe une chose plus forte qu’un design affreux, plus solide qu’une ergonomie à la ramasse… C’est la MO-TI-VA-TION qu’a l’utilisateur de venir sur les sites en question.

Tous les sites montrés ~~du doigt~~ en exemple ont ceci en commun qu’ils proposent quelque chose dont l’internaute a besoin. Quelque chose qui fait qu’il est prêt à souffrir pour arriver essoufflé, la main tremblante sur la souris, jusqu’au formulaire de commande, heureux, enfin, de pouvoir sortir sa carte bancaire.

Articles sur le même sujet

942 — Screenshot de mon prochain design #spoil

Bruno Bichet — Mon, 07 Sep 2009 14:34:04 +0000

Pour rassurer Mikhail qui se demandait si le prochain thème à venir sur ce blog gardera la simplicité et la sobriété du thème Hybrid, voici un aperçu de mon prochain thème pour WordPress. Le design est encore encapsulé au format .ai d’Illustrator. Il me reste encore un peu de travail à faire et en attendant l’intégration HTML5 et CSS voici une capture d’écran :

Avec la grille horizontale et verticale

Parce que les grilles en 950 ou 960 pixels commencent à me fatiguer, j’ai opté pour une grille de 942 pixels de large en 16 colonnes de 42px et 18px de gouttière. Pourquoi 42 ? J’ai 42 ans cette année et je chausse du 42 ;)

Sans la grille

L’objectif est de conserver la sobriété et la lisibilité d’un thème comme Hybrid tout en apportant le maximum de personnalité et de chaleur humaine. J’espère m’être approché du but.

Je vous ai compris ;)

Vous avez été nombreux à trouver le dégradé blanc -> orange un peu cheap ou manquant de sobriété par rapport au reste du design. J’ai remis cent fois sur le métier mon ouvrage et voilà !

Suppression pure et simple du dégradé
Ajout d’une ligne dans les gris-clair pour séparer les parties et structurer la page,
Par ailleurs, Je tenais aussi à montrer le menu déroulant pour l’affichage des tags et des catégories suite au commentaire d’Auré ;)

Aperçu du header

Aperçu de la partie centrale

Aperçu du footer

Articles sur le même sujet

Usability Post, un blog sur le design et l'ergonomie

Bruno Bichet — Mon, 29 Dec 2008 21:14:40 +0000

Usability Post est un excellent blog sur le design et l’ergonomie que je viens de découvrir grâce au non moins excellent article sur les 10 techniques pour améliorer de design de l’interface utilisateur paru sur Smashing Magazine sur les trucs et astuces qui permettent d’améliorer l’ergonomie et l’utilisabilité en se focalisant sur quelques détails qui ont leur importance.