css 4 design » Design & Graphisme

Quelques propositions de logo pour Worth1000

Bruno Bichet — Sat, 21 Jan 2012 19:30:22 +0000

Voici quelques propositions de logo que j’ai soumis fin 2005 — début 2006 dans le cadre des concours organisés par le site Worth1000. Ce site rassemble des communautés où des artistes du monde entier participent tous les jours à des compétitions créatives. Les trois propositions concernaient l’association Smoke Free Union, l’université ARC-U et la société Complete Vision Care.

Smoke Free Union

Smoke Free Union est une association dont l’objectif est de sensibiliser le public sur les dangers du tabagisme passif et de développer les lieux non-fumeurs pour protéger les jeunes, les femmes enceintes en particulier, et les gens, en général.

Le logo apparaitra sur tout types d’imprimés : annonces presse, poster, affiches, site web de l’organisation, etc.

Proposition de logo pour Smoke Free Union

Brief complet

Toutes les propositions

Aresty Research Center for Undergraduates (ARC-U)

Création d’un logo pour l’Université ARC-U (Aresty Research Center for Undergraduates) située dans le New Jersey. Le logo apparaitra sur le site web et les documents promotionnels.

Proposition de logo pour Aresty Research Center for Undergraduates

Brief complet

Toutes les propositions

Complete Vision Care

Création d’un logo pour Complete Vision Care. Cette société spécialisée dans l’optométrie depuis 1984 à Coralville, dans l’Iowa, propose à ses clients des soins médicaux grâce à l’utilisation des dernières technologies disponibles dans la correction de la vision en proposant des lunettes ou des lentilles de contact.

Le logo sera reproduit sur des cartes de visite, le site web, les en-têtes de lettre et les documents marketing de la société.

Proposition de logo pour Complete Vision Care

Brief complet

Toutes les propositions

Worth1000 ?

Si vous voulez en savoir un peu plus sur Worth1000, n’hésitez pas à lire le court article Worth1000 – le paradis pour Photoshop ? que j’avais écrit peu après le lancement de ce blog.

Articles sur le même sujet

Ebauche de logo pour illustrer le concept de code source libre

Bruno Bichet — Fri, 05 Aug 2011 13:40:20 +0000

Au détour d’un tweet qui parlait de Logiciel Libre, j’ai laissé mon crayon dessiner librement sur mon carnet. En rentrant, j’ai dégainé Illustrator pour fixer mes idées. Ce travail de recherche créatif est un projet personnel devenu collectif par la force des choses, puisque j’ai tenu compte des suggestions et des critiques des membres de Google+ et de Twitter où chaque version du projet a été largement discutée. Je précise d’emblée que je ne suis pas un expert ès licences libres, ce qui fait que j’ai pu faire — à l’insu de mon plein gré — des rapprochements visuels allant à l’encontre de la philosophie du mouvement Open Source ou du Logiciel Libre (1).

Version 2 & 1

Le libre prend son envol (les oiseaux)
Le libre, ça pousse (jeu sur les verticales)
Le libre est nourricier, retour à la nature (l’arbre, les oiseaux, les couleurs)

Version 3

Plus viril,
Moins « écolo »,
Moins « bio »,
Plus « futuriste » (si si),
Axé sur le partage et la redistribution.

Possibilité de réduire le logo au L de LIBRE avec l’étoile !

Version 5 & 4

J’ai troqué l’expression « Logiciel Libre » par une traduction française d’Open source proposée par +Laurent Gloaguen (une traduction littérale aurait donné Code source ouvert) qui a l’avantage de conserver le terme « libre » pour faire une sorte de synthèse entre les deux mouvements.

J’en ai profité aussi pour ajouter une référence au copyleft avec le symbole du copyright inversé. Le logo peut ainsi se lire également comme une ode aux sources libres.

Enfin, la baseline reste fidèle à l’esprit du Logiciel Libre.

Version finale (ou presque)

Le fil directeur de cette version 0.8 est de supprimer le superflu et de garder l’essentiel pour avoir un logo plus ramassé, plus compact et plus lisible.

Par rapport à l’ancienne version :

Suppression du mot code, inutile, puisque finalement l’idée est de partager des sources, qu’il s’agisse de code ou de .psd .ai, etc.
Suppression de la barre de progression : trop présente par rapport à sa signification.

Google+ comme facilitateur d’expérimentations logotypiennes

Je tiens à remercier tous les Plussiens et les Plussiennes qui ont apporté leur contribution sous forme de critiques, d’encouragements et de suggestions sur Google+ :

Version 0.8 : http://plus.tl/3q
Version 0.7 : http://plus.tl/3j
Version 0.6 : http://plus.tl/3i
Version 0.5 : http://plus.tl/3g
Version 0.4 : http://plus.tl/38
Version 0.3 : http://plus.tl/31
Version 0.2 : http://plus.tl/2T
Version 0.1 : http://plus.tl/2Q

La richesse des échanges prouve que, loin d’être inutile ou redondant, Google+ s’avère un excellent medium pour les créatifs de tout poil qui voudraient présenter leur travaux finis ou en cours d’élaboration.

plus.tl/bruno

(1) Bon ok, j’avoue que la version Soviet était faite exprès pour réveiller les consciences :o)

Articles sur le même sujet

Useful Shortcuts — Symboles accessibles via la touche Alt de votre clavier

Bruno Bichet — Sun, 31 Jul 2011 15:11:30 +0000

Ah ! les symboles… Que celui ou celle qui n’a jamais galéré pour retrouver ce satané symbole caché dans les circonvolutions de son clavier me jette la première touche ! Useful Shortcuts est un site dont l’objectif est de répertorier et de classer la quasi-totalité des symboles accessibles via la touche Alt de votre clavier. Notez qu’il est également possible d’utiliser les symboles directement par copié-collé depuis les pages de Useful Shortcuts.

Ces symboles sont classés par thèmes :

Lettres avec accent – Caractères avec accent grave, accent aiguë, accent circonflexe, tilde, tréma, etc.
Messagerie instantanée — Coeur, émoticônes, symboles garçon et fille),
Mathématiques — Fractions, inégalités, carré, cube, pi, infini,
Décoration — Puces, flèches,
Monnaie — Livre anglaise, euro, dollar, cent, yen, pesetta,
Dessin – Coins, angles, remplissage,
Symboles grec — Alpha, beta, gamma, delta, etc.,
Typographie — Ligatures, tirets,
Droit d’auteur & propriété intellectuelle — Copyright, trademark, registered,
Flèches – Flèches et carrés d’épaisseur différente,
Programmation — Accolades, parenthèses diverses, pipes,
Ponctuation — Point d’interrogation, point d’exclamation, parenthèses, édition, guillemets, abréviation.

Et tout un tas d’autres symboles dont l’énumération serait aussi longue que fastidieuse ;-)

Articles sur le même sujet

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

Un « Logothic » pour WordPress Basics

Bruno Bichet — Mon, 23 May 2011 14:22:21 +0000

Une dizaine de jour après le lancement du thème Basics pour WordPress, j’ai fais quelques recherches d’ambiance pour un logo et je me suis arrêté sur le style Gothic, assez peu employé dans l’univers de WordPress. Ce logo repose sur deux éléments bien distincts qui s’opposent l’un à l’autre (ce qui les rend donc complémentaires) : la lettre «W» dans le coeur plein de courbes de WordPress je thème et le mot «basics» tout en angles et agressivité. For Those About To Rock, Fire!

Un logo Gothic Back in Black avec Fette Fraktur (taille réelle : 240x72)

Fette Fraktur

La typographie est laissée aux bons soins de la fonte Fette Fraktur qui ne manque pas de caractère et que vous pouvez retrouver chez Linotype. Personnellement, j’ai toujours rêvé d’utiliser dans un projet une typographie qui casse trois pattes à un canard : avec Fraktur, ça c’est fait ;)

Back in Black

Pour les couleurs : du noir, du noir et encore du noir, pour : 1) coller à l’univers Gothic (Hark Rock, AC/DC, etc.) ; 2) s’adapter à la sobriété de l’habillage de Basics que j’ai mis en place sur WordPress & Webdesign ; et 3) rendre hommage à Bon Scott, le premier chanteur d’AC/DC.

(We Salute You)

Articles sur le même sujet

L’intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

Bruno Bichet — Tue, 26 Apr 2011 11:53:45 +0000

Les claviers ont crépité la semaine dernière autour du rendu des maquettes Photoshop au pixel près. En relisant les billets et les commentaires, j’ai finis par me demander de quoi on parlait exactement. Lorsque l’intégrateur web reçoit un PSD (qui a déjà été validé, donc) à découper, il se se pose généralement pas la question : il prend une longue inspiration, se remémore quelques épisodes de Dexter et commence à découper sa maquette bien proprement.

Si vous aussi, vous vous demandez comment Dexter s’y prendrait pour découper vos .psd avec brio ;-)

Découper avec «dextérité»

Selon sa méthode de travail, l’intégrateur s’occupe du marquage HTML après avoir tout bien tranché. Il teste ensuite le rendu final dans tous les navigateurs disponibles. Il peut aussi découper, intégrer et tester le rendu dans plusieurs navigateurs au fur et à mesure. Dans les deux cas, on ajuste le code HTML (le moins possible, s’il a été pensé de manière sémantique) et les CSS pour que le site s’affiche de manière identique partout ou presque, en faisant au mieux avec les innombrables bugs et incohérences qui font le charme (ou pas) de l’univers impitoyable des navigateurs.

A cette étape, si l’intégrateur a eu le temps nécessaire pour travailler sereinement, le site devrait s’afficher parfaitement dans les navigateurs les plus courants, y compris dans IE6 ! Oui, parfaitement.

Il s’agit-là de la méthode «standard» pour faire un site web à partir d’une maquette réalisée dans un logiciel de traitement d’image, et ce depuis déjà de nombreuses années. Généralement, ces sites possède une largeur fixe et s’affichent entièrement sur des écrans ayant une résolution de 1 024 par 768 pixels. Ils regroupent sans doute plus de 80% de l’ensemble des sites web. Ils sont généralement prévus pour s’afficher de manière identique sur les navigateurs présents sur le marché.

Bref, le «pixel perfect» comme je le comprends existe depuis longtemps déjà. Savoir si c’est une bonne chose ou non est un autre débat.

Sur le fil du rasoir

Selon la «nature graphique» de cette maquette, l’intégrateur peut être tenté d’utiliser certains effets CSS3 pour rendre les arrondis, les ombres portées, les dégradés, etc. A partir de là, on n’est bien conscient qu’il s’agit d’utiliser des technologies émergentes qui sont encore à l’état de brouillon. Les éditeurs de navigateur travaillent déjà dur pour implémenter ces technologies ; on ne peut pas leur demander en plus d’assurer un rendu identique à celui du voisin (du moins pour l’instant) !

Au niveau des spécifications, il est normal de penser qu’un bord arrondi ne devrait pas être différent d’un navigateur à l’autre. C’est pareil pour une ombre portée ou un dégradé. Mais à supposer que chaque navigateur parvienne à implémenter correctement ces effets CSS3, je continue de penser qu’une légère différence d’affichage n’est pas préjudiciable : un visiteur consulte rarement le même site simultanément dans deux navigateurs différents, si ?

Conclusion…

… Y en a pas ;-) Ou plutôt : dites-moi si dans les travaux que vous réalisez, vous trouvez que les maquettes à découper «au poil de c.. près» sont en augmentation par rapport aux maquettes où l’on peut faire tout ou partie du design directement dans le navigateur, ou pas ?

Articles sur le même sujet

Intégration HTML & CSS des maquettes Photoshop au pixel près

Bruno Bichet — Fri, 22 Apr 2011 14:36:42 +0000

Je reviens rapidement sur la question du rendu identique des maquettes quelque soit le navigateur. Je pense que tout le monde est d’accord pour reconnaitre que les standards ont encore une marge de progression et que les spécifications CSS3 et HTML5 prendront du temps avant d’être validées et implémentées correctement dans au moins deux navigateurs. En attendant, il faut bien faire avec l’existant. Est-ce à dire qu’il faut faire son deuil du rendu unique dans tous les navigateurs ?

Avec CSS3…

Pas forcément. En ce qui concerne CSS3, il faut s’en tenir aux conseils donnés dans CSS3 pour les web designers par Dan Cederholm :

Utiliser CSS3 «ici et maintenant» à condition de s’en tenir aux éléments de présentation ou d’interactivité en ciblant la couche d’expérience non critique (interaction, récompense visuelle, réactivité et mouvement) sans toucher à l’identité visuelle, l’utilisabilité, l’accessibilité ou la mise en page.

… ou à l’ancienne ?

Pour tout le reste, il faut se débrouiller avec des images de fond, en limitant les dégâts au maximum : marquage HTML réduit au minimum, utilisation de sprites pour les images, tenter de se passer de Javascript pour des effets visuels, éviter les hacks, etc. J’irais plus loin en conseillant d’éviter même les balises sémantiques HTML5 en raison de leur accessibilité perfectible.

Bref, dans ces conditions — si le temps et l’argent le permettent — rien ne s’oppose à ce que la maquette du graphiste soit rendue au pixel près. C’est même souhaitable. L’intégrateur pourra prévoir des fallbacks pour l’affichage sur les tablettes tactiles comme l’iPad, les téléphones tels que l’iPhones ou Android. Ou alors, c’est le graphiste qui pourra dessiner comme bon lui semble la version iPhone, etc. s’il veut garder le contrôle.

C’est quoi un intégrateur web ?

Comme le dit STPo (@stpo) suite à l’article de Julien sur le rendu Pixel Perfect et les standards du web :

Le boulot d’un inté, c’est de placer intelligemment le curseur entre respect de la DA, performances, accessibilité, maintenabilité, etc. afin d’obtenir le meilleur produit final possible. Le graphisme n’est QU’UN de ces paramètres : parfois c’est le plus important, et on négligera les autres davantage. Et parfois, non.

Soyons agiles

S’il faut faire le deuil de quelque chose — que ça soit à cause de bugs ou de contraintes techniques indépassables — ce n’est pas sur cette question du rendu parfait, puisqu’il est accessible dès maintenant. Il faut faire le deuil de la méthode de travail unique. Il faut adapter ses méthodes et être agile. Et ce n’est pas facile.

Nous sommes tous à la recherche de trucs et d’astuces réutilisables. On n’aime pas réinventer la roue toutes les semaines. On préférerait que les clients comprennent nos contraintes (en même temps, si votre boss ne vous comprend pas, il n’y a pas grand chose à attendre du client qui n’y est pour rien…).

Intégrateurs web, prenez des risques !

Il faut comprendre le projet sur lequel on travaille et force est de constater que certaines organisations ne favorisent pas la prise de risque de la part de l’intégrateur web qui est rarement consulté en amont. Pourtant, avec un bref brief, l’intégrateur pourrait prendre de l’assurance et éviter de se prendre la tête pour aboutir systématiquement à un rendu parfait lorsque les projets ne le nécessitent pas.

Articles sur le même sujet

Logo pour les Libres Ballons du Bastberg

Bruno Bichet — Fri, 22 Apr 2011 09:44:44 +0000

Il y a environ un an, j’ai eu l’occasion de réfléchir avec Luc Muller (développeur Web spécialiste TYPO3) sur la création d’un logo pour l’association alsacienne Libres Ballons du Bastberg. Ces passionnés de montgolfière proposent aux membres de l’association des vols d’initiation, des formations au pilotage et des animations publiques. Et comme l’accessibilité ne concerne pas uniquement le web, l’association LLB-67 réfléchit à la mise en place de montgolfières accessibles aux personnes en situation de handicap en Alsace. Egalement accessible aux touristes de passage, logeant dans un hôtel ou un gîte en Alsace.

C’est dans le cadre de ce projet que j’ai eu le plaisir de proposer un logo pour permettre à l’association de le présenter aux différentes institutions susceptibles d’apporter leur soutien.

A ma connaissance, c’est la première fois que je réalise un logo qui s’envoie en l’air, imprimé sur une montgolfière ;-)

Articles sur le même sujet

Standards du Web vs. Standards du Print

Bruno Bichet — Fri, 22 Apr 2011 00:36:02 +0000

Julien Dubedout @mariejulien vient d’écrire un article très intéressant sur le rendu au pixel près des maquettes dans les différents navigateurs. Il explique son point de vue sur certaines différences de rendu de certaines propriétés qui ne sont pas { acceptables | logiques | normales } ; elles proviennent d’un standard qui — par définition — devrait garantir un affichage identique d’une même propriété sous tous les navigateurs. L’argumentation est rigoureuse et l’analyse est fine ; je partage une grande partie des points abordés par Julien que je résume rapidement ainsi :

On peut dire que certaines prises de position sur le «lâcher-prise» concernant le design web sont parfois l’expression de l’impuissance travestie en abstinence. On ne peut pas le faire, donc c’est mal.

Toutefois, pour en revenir à l’exemple des ombres portées, j’ignore s’il existe une norme qui définit comment elles doivent s’afficher. Leur rendu à l’écran (quels écrans ?) dépend surtout des logiciels qui permettent de les créer. Une ombre portée n’est probablement pas strictement identique dans Photoshop, Gimp ou Paint. Pourquoi serait-ce différent pour les navigateurs web qui sont des logiciels comme les autres ?

Lorsque j’imprime une ombre portée réalisée dans Photoshop, son rendu diffère selon la nature du papier : offset, couché, non couché, bouffant ou bible ! Sans parler des différences d’une même plaquette imprimée sur le même papier chez deux imprimeurs différents (avec pourtant strictement les mêmes valeurs CMJN)…

Juste une petite pique, donc, en lisant que :

L’industrie de l’imprimerie a, de son coté, pas mal réussi à relever ce défi de standardisation, il faudrait donc s’en inspirer sur ce point et ne pas laisser tomber en route la standardisation de l’affichage.

Je ne peux m’empêcher de penser aux plus de deux millions de personnes qui se demandent pourquoi il y a encore, en 2011, cette satanée différence entre écran et résultat imprimé ;-)

Articles sur le même sujet

Et si Photoshop permettait de tester des maquettes fluides ?

Bruno Bichet — Thu, 21 Apr 2011 12:23:54 +0000

Si c’était possible techniquement, est-ce qu’on s’amuserait à faire des rendus différents pour le plaisir ? Réponse : NON. Cette interrogation de @mariejulien suite à la publication de l’article Les sites web doivent-ils s’afficher exactement de la même manière dans chaque navigateur ? et cette réponse lapidaire se poursuivent par la réflexion suivante : la norme est donc bien d’avoir un contenu identique, et le reste n’est qu’argument fallacieux à une impossibilité technique. Question à laquelle j’ai répondu en bottant un peu en touche en disant que le monde de l’imprimé et du web ne répondaient pas aux même lois de la physique.

Un question d’entonnoir

On peut voir la conception pour l’imprimé comme un entonnoir avec la grande ouverture vers le haut : qu’importe les techniques utilisées pourvu qu’elles passent sous les fourches caudines des systèmes d’impression qui aboutissent — si tout ce passe bien — à un rendu unique. En effet, qu’importe la manière dont vous faites vos ombres portées : seul le résultat imprimé compte !

Pour le web, l’entonnoir est dans l’autre sens. Il existe un nombre de techniques relativement limitées pour que ça fonctionne, en revanche — si tout ce passse bien — le nombre de périphériques de sortie est inconnu et chacun est susceptible d’avoir son propre système de fonctionnement. D’autant plus que les spécifications des groupes de travail du W3C ne sont pas toutes univoques. Pour enfoncer le clou, il faut savoir que les agents utilisateurs n’ont aucune obligation d’implémenter toutes les fonctionnalités prévues ! Cette modularité et cette liberté face aux standards est justement ce qui permet au web d’être ce qu’il est aujourd’hui… Sur le web, le résultat seul ne compte pas ; la manière d’y arriver est tout aussi importante !

Je reformulerais donc la question initiale de Julien de la manière suivante :

Si c’était possible techniquement, est-ce qu’on s’amuserait à ne faire que des maquettes à largeurs fixes si Photoshop permettait de créer et tester des rendus fluides ? Réponse : pas forcément.

Gutenberg n’est pas mort (ou pas)

Et encore, c’est en gardant un flux de production plusieurs fois centenaire qui date des années Gutenberg. Dans bien des cas, il n’est pas totalement farfelu de faire l’impasse sur le lancement de Photoshop : après un rapide crayonné — et si la créativité se limite à quelques dégradés, des bords arrondis, des ombres portées, etc. — il est tout à fait légitime de travailler directement dans le navigateur ET CE N’EST PAS MAL ;)

Faire le design dans le navigateur ne signifie pas pour autant absence de graphisme ou d’illustration. Si le croquis fait référence à des éléments dessinés, je lance plutôt Illustrator pour faire mes éléments de design à la demande. Il m’arrive aussi souvent de faire des maquettes entières dans Illustrator sans idée de découpe. Je prélève chaque élément dont j’ai besoin pour l’intégrer dans mon fichier HTML et CSS, sans jamais (ou presque) passer par les outils de découpe proprement dit.

Il est parfois nécessaire d’effectuer des copier-collés dans Photoshop depuis Illustrator pour certains éléments. L’avantage, c’est de conserver tous les éléments au format vectoriel, ce qui permet de moduler la taille des éléments directement dans Photoshop en les collant lors de la création d’un nouveau document.

A la relecture, je sens bien que cette méthode en semble pas en être une, mais elle fonctionne pour moi, c’est le principal ;-)

← Pssst : l’origine de cet article sur Les sites web doivent-ils s’afficher exactement de la même manière dans chaque navigateur?