Design x Food de Ryan MacEachern

Copyright : Ryan MacEachern

Ryan MacEachern, un graphiste et designer basé au Royaume Uni, a décidé de représenter son régime sous la forme d’infographies. Comme il le souligne dans l’introduction décrivant son projet, il a pris cette décision radicale après une période intense en déjeûners copieux et en amas de matières grasses en tout genre ! L’idée première de ce compte-rendu était de pouvoir suivre l’évolution des calories qu’il ingurgitait pendant ce régime. Et c’est ainsi que naît Design x Food.

Ryan MacEachern met en avant les valeurs nutritionnelles des repas qu’il va manger au cours d’une semaine. Il s’amuse à contraster les données et donc les presque tristes aliments appartenant à son régime avec de la nourriture bien plus colorée pour ses infographies. Il ne mangeait bien évidemment pas de donuts tout au long de ce régime ! En tout cas, cette jolie infographie finale présente bien l’ensemble de son travail.

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Design x Food

Mind, Body & Spirit de Peter Bahouth

Copyright : Lindsay Appel

Peter Bahouth est un architecte américain, qui avait envie de réaliser son rêve d’enfant : construire une maison dans les arbres. Ce projet avait l’air d’être un pari fou, mais l’architecte n’a écouté que son envie !

Depuis tout petit, comme les enfants, Peter Bahouth a toujours rêver de vivre en suspension, dans une cabane dans les bois, aérienne, dans laquelle il serait le seul chef d’orchestre !

When I was 6 years old, I was like every kid. I had a treehouse. It was your territory. You set the rules. Nobody told you what to do. Mine was just a board and branch. But I would sit up there and think, ‘If I could make my own treehouse, it would be great.’.

Peter Bahouth

Il existe désormais, à Atlanta aux Etats-Unis, une série de petites maisons construites dans les arbres. Celles-ci sont reliées les unes aux autres par le biais de ponts construits avec des branches d’arbres. Peter Bahouth est avant tout un amoureux de la nature, qui a su allier son désir de préserver l’environnement à son envie de Peter et son envie de bâtir un véritable conte de fées. Les trois maisons principales sont rebaptisées Mind, qui possède une pièce rappelant un salon qui permet d’échanger, Body qui possède une chambre bien aménagée pour le confort, et Spirit, une plateforme possédant une vue des plus saisissantes.

I love it when people come up here. They’re unrestrained. People say things they wouldn’t say on the ground. They tell jokes they wouldn’t normally tell. It’s like international law, as if you’re out at sea, and it’s a free-for-all.

Peter Bahouth

Je propose donc de parcourir les quelques photos des réalisations de cet architecte, designer et grand rêveur, réalisées par Lindsay Appel.

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Une maison dans les arbres

Amélioration progressive et dégradation élégante

Copyright : stevendepolo

Aujourd’hui, aucun navigateur ne peut prétendre permettre l’utilisation de toutes les spécifications de l’HTML5, ni même de toutes les propriétés prévues pour le langage CSS3. Ces langages n’en restent pas moins utilisables et permettent de simplifier la vie des développeurs.

On peut alors avoir recours à deux grands procédés pour mettre en place ces nouvelles fonctionnalités de façon à ce qu’elles soient au maximum comprises des navigateurs : l’amélioration progressive et la dégradation élégante.

Qu’est-ce-que l’amélioration progressive ?

L’amélioration progressive consiste à créer d’abord des fichiers compréhensibles et interprétables par tous les navigateurs, pour ensuite y ajouter des améliorations visuelles et/ou sémantiques pour tous les navigateurs qui peuvent les comprendre. Il s’agit donc de créer des pages web "basiques" qui seront par la suite agrémenter de nouveaux éléments.

A titre d’exemple, on peut choisir de créer un fond en dégradé à l’aide d’une image répétée sur un axe pour un navigateur comme Internet Explorer 7, et décider ensuite d’utiliser la fonction linear-gradient() pour obtenir un dégradé plus précis, qui sera généré sans image. Mieux encore, on peut considérer que ce dégradé n’a pas d’influence sur le contenu du site et décider que les anciens navigateurs peuvent avoir une couleur unie en arrière-plan. De cette manière, on allège aussi le poids de notre fichier CSS.

En clair, l’amélioration progressive permet d’avoir une expérience utilisateur de base conçue de façon à ce que tout navigateur soit en mesure de proposer un même schéma de parcours pour tout internaute. La particularité de cette conception, c’est que ces pages devront nécessairement être construites en ayant conscience de l’optimisation qui peut y être apportée. De nouvelles fonctionnalités seront ainsi réfléchies au préalable et viendront compléter cette expérience utilisateur de base pour les navigateurs capables d’implémenter ces propriétés.

Qu’est-ce-que la dégradation élégante ?

La dégradation élégante est une technique par laquelle, on s’applique d’abord à créer des fonctionnalités pour les "meilleurs" des navigateurs, ceux capables de supporter la quasi-totalité de la solution envisagée. Puis, elle consiste à ensuite prendre en considération les plus anciens navigateurs, en leur spécifiant des comportements moindres, à la sensorialité complètement différente, mais qui seront supportés par ceux-ci. C’est par exemple avoir recours aux balises <noscript /> pour spécifier un comportement différent si le navigateur qui parcourt la page n’admet l’utilisation de JavaScript.

Dans le cadre de l’HTML5, il s’agit parfois de proposer des solutions souvent plus lourdes ou moins performantes aux navigateurs ne supportant l’ensemble des normes actuelles. Lorsque sont créés des <canvas />, une implémentation permettant de réaliser des images de manière dynamique, on peut préciser à l’intérieur des balises de cet élément, une solution alternative qui ne sera prise en compte que par les navigateurs ne supportant l’élément. Ainsi, sur Internet Explorer 6, une image statique par défaut peut être proposée à l’utilisateur.

L’idée ici est de bien cibler au préalable les fonctionnalités cruciales du site avant toute création. Cela permet au moment de l’intégration, de pouvoir se focaliser sur l’essentiel du visuel à mettre en place. Un exemple familier de dégradation élégante est l’attribut alt pour les images. C’est devenu une habitude, préconisée par le W3C, mais c’est avant un moyen de permet aux anciens navigateurs d’afficher un texte par défaut, descriptif de l’image qui ne sera pas lue.

Comment savoir quelle solution adopter ?

Il faudra sans cesse vous posez la question suivante : Qu’y a-t-il de mieux en termes d’accessibilité pour mes utilisateurs ?. Ces deux solutions peuvent en réalité s’appliquer sur une même page, sur des éléments complètement différents.

A titre d’illustration, si vous êtes un artiste au portfolio conséquent, et que vous avez à l’esprit une mise en page full-Flash ou complètement interactive au moyen d’animations CSS3, vous réfléchirez avant tout à comment réaliser ces animations de la manière la plus simple soit-elle, sans obligatoirement tenir compte des anciens navigateurs. The Walking Man, par exemple, est une animation full-CSS3 d’Andrew Hoyer qui représente un homme qui marche. Celui-ci est visible mais complètement immobile sur Internet Explorer 7. → dégradation élégante

En revanche, si vous souhaitez que la police choisie pour le texte de votre site possède des contours beaucoup plus lisses, vous pouvez toujours ajouter ce comportement grâce à la propriété -webkit-font-smoothing que seuls les navigateurs basés sur Webkit comprendront. → amélioration progressive.

En ce qui me concerne, je vais privilégier au maximum l’amélioration progressive dans mes implémentations. Je pense que cela permet en toute situation de créer une solution suffisamment stable, qu’un grand nombre de navigateurs sera en mesure d’interpréter. Je trouve ça important d’accorder un temps de développement pour les anciennes plateformes car, malheureusement, bien des internautes les ont encore sous la main.

Quoi qu’il en soit, un des meilleurs sites pour vous aider à votre tâche est, à mon sens, Can I Use. Il vous permettra de tester une nouvelle propriété et de rapidement savoir quels navigateurs sont en mesure de l’adopter.

Je serais curieuse d’avoir vos retours quant à vos habitudes de conception en matière de développement. Quelle approche vous semble la plus logique ?

La collection "The web designer’s idea book"

Copyright : Andy Sowards

Afin de rester à l’ordre du jour au niveau des tendances graphiques actuelles, j’ai eu l’occasion de profiter d’une série de livres sur les nouvelles prédispositions du webdesign, une collection signée Patrick McNeil. J’ai, pour ma part, en ma possession (ou presque) le premier de la série : MCNEIL Patrick. 2008. The Web Designer’s Idea Book. United States : HOW Books. 256 p..

Dans ce premier tome de cette série, près de 700 sites sont référencés afin de fournir aux lecteurs un ensemble de bonnes pratiques pour la conception de maquettes web. Ces différents sites sont classés selon leur type, leur appartenance structurelle d’un point de vue design, les couleurs prédominantes de leurs pages web ou encore leurs thèmes. J’en profite ici pour vous proposer en lecture, un texte de Joshua David McClurg-Genevese, un directeur artistique et designer senior de la société American Electric Power, qui décrit l’ensemble des éléments du design.

Et donc, selon Patrick McNeil, si l’on crée un site personnel, le design à concevoir doit être pensé complètement différemment que celui créé pour un site servant de vitrine à une entité offrant des services web par exemple. Dans cette même optique, on peut imaginer qu’attribuer une couleur verte à une page web c’est avant tout lui affecter la notion de flexibilité ou lui conférer des ambiances environnementales.

Un autre des points que j’ai apprécié sur ce livre est l’agencement d’une palette de couleurs hexadécimales située de manière connexe à l’ensemble des sites proposés sur une double page. Ces couleurs peuvent ainsi permettre au concepteur de recréer une atmosphère particulière, grâce à des variations qui lui ont plu.

Je pense qu’il est important de s’intéresser aux dernières évolutions liées au design des pages du web. Bien que ces préoccupations peuvent sembler être au premier abord celle du graphiste ou de l’intégrateur, chaque développeur doit être en mesure de penser son travail en fonction des éléments présents sur les maquettes conçues à l’énoncé du besoin. Ce dernier point doit être observé afin de se préparer au mieux à l’implémentation de ces maquettes, que ce soit pour générer de l’interactivité, ou pour mettre en place des modules techniques bien précis, qui nécessitent un vrai développement.

The Web Designer’s Idea Book permet entre autres, de bien comprendre les bonnes pratiques permettant à un espace web de fournir des éléments sémantiques, compréhensibles de tous. Je vous recommande donc cette collection de livres, que vous retrouverez sur Amazon.

Refonte graphique : une identité visuelle

Copyright : Gemma Evans

Enfin, afin de réaliser une bonne refonte graphique, il est important de bien identifier ce qui fait l’identité visuelle de votre site. Tous les éléments visibles de votre marque, liée à votre activité, comme les couleurs, les formes, l’apparence finale de votre structure actuelle graphique forment l’identité de votre marque : ce par quoi elle est reconnaissable d’entre mille.

Perfectionner son identité visuelle

Pour éviter de complètement désorienter l’internaute, il faut tenter de garder certaines pratiques de l’ancien site. Il peut s’agir des couleurs, de l’environnement graphique ou simplement d’un plan de site assez similaire. L’univers graphique, quoique amélioré, doit posséder quelques similitudes avec l’ancienne interface du site. C’est une bonne pratique pour permettre à l’utilisateur de rapidement se retrouver dans un endroit qui lui semblera familier. L’idée est de lui fournir un espace aussi agréable qu’usuel.

Les anciennes versions de Facebook proposaient déjà des déclinaisons de charte graphique à partir du fameux bleu #44619D : ainsi, changer cette couleur reviendrait à bouleverser les habitudes des utilisateurs de ce réseau social. Cet ensemble de couleurs se retrouve à chaque nouvelle version du site. Bien évidemment, l’interface est sans cesse revisitée et les teintes ne sont pas exactement les mêmes, les icônes changent, etc., mais une certaine linéarité persiste. Facebook s’est créé une véritable identité. Et les lecteurs habitués restent capables d’avoir un usage optimal de l’interface.

Avant/Après d'une page sur Facebook

Décider de l’évolution du logo

La question de l’évolution du logo peut devenir essentielle. On peut choisir de le faire évoluer lors d’une refonte pour en modifier le message ou pour sublimer sa simplicité. On peut en contre-partie choisir de le conserver pour transmettre les mêmes valeurs au nouveau design créé. Dans tous les cas, il convient de réfléchir à ce qu’apporte le logo actuel et à ce qu’une évolution de celui-ci pourrait apporter. Encore une fois, l’idée n’est pas de bouleverser totalement le design de la marque : cela pourra donner l’impression qu’il s’agit d’une nouvelle entité et ce n’est absolument pas le but recherché par les graphistes.

Il faut faire une étude de l’existant et du contexte dans lequel évolue le logo avant de décider de totalement le modifier : Starbucks, par exemple, a au fil des années proposé un logo assez proche du précédent pour aujourd’hui lui préférer une version totalement épurée.

Evolution du logo Starbucks

Plusieurs questions interviennent au cours de l’élaboration d’une refonte comme le précise l’excellent article Art Direction and Design écrit par Dan Mall figurant sur le site A List Apart : Est-ce-que les couleurs choisies s’adaptent correctement à la marque ? Est-ce-que les couleurs choisies vont bien ensemble, ne créent-elles pas un sentiment d’inconfort au lecteur ? N’est-il pas préférable de privilégier des couleurs web-safe ? — Les couleurs dites web-safe constituent une palette des 216 couleurs ayant la même apparence quel que soit l’ordinateur ou le système d’exploitation de l’internaute.

Mettre en place une véritable structure typographique

D’un point de vue typographique, on peut laisser libre court à toutes les fantaisies mais il apparaît essentiel de favoriser la facilité de lecture. La police choisie ne doit pas fatiguer l’œil du visiteur et doit convenir à tous types d’âges et de visions.

De manière générale, dans le monde du web, on opte donc pour une police traditionnelle pour le texte global telle que les polices Arial, Tahoma, Verdana, Helvetica, etc. Ces polices sont dites sans-serif. Une police sans-serif est une police qui ne possède pas de sérifs, comme son nom l’indique. Les sérifs sont les petites césures situées à la fin des contours des lettres en typographie. Les polices sans-serif procurent à un texte son caractère neutre. C’est d’ailleurs la raison pour laquelle elles sont généralement utilisées pour le corps de texte. Elles ont aussi l’avantage de garantir une apparence similaire quelle que soit la résolution de l’écran de l’internaute.

Pour les titres, les citations ou les emphases, d’autres familles de polices apparaissent : semi-serifs, monospaced, script, etc.. Elles sont alors complètement soumises au choix du designer : l’empattement typographique n’est alors plus pris en compte.

Un autre point à ne pas négliger : lorsqu’il s’agit de polices complètement originales telles que les polices Museo Slab ou Capsuula en guise d’illustrations, il faut savoir que pour permettre à tous les internautes d’apprécier la lecture des caractères, il faut absolument "installées" ces polices. On utilise alors l’attribut @font-face en CSS afin qu’elles soient rendues disponibles pour les ordinateurs qui n’en sont pas équipés. Cette installation nécessite plusieurs types de fichiers (TrueType .ttf, OpenType .oft, Embedded OpenType .eot pour Internet Explorer et/ou Scalable Vector Graphics .svg). Et surtout, il n’est pas recommandé de faire un usage trop important de ces polices originales, car plus celles-ci seront nombreuses, plus le chargement des pages pour l’utilisateur d’un site sera long.

Refonte graphique : interfaces & utilisateurs

Copyright : Tim Gouw

L’idée d’une refonte graphique n’intervient pas que dans l’optique de modifier l’architecture d’un site. Bien évidemment, tout dépend des cas évoqués, et il se peut que celle-ci soit réellement envisagée. Mais, le principal objectif d’une refonte graphique est de pouvoir conserver certaines bonnes pratiques tout en améliorant l’ergonomie du site et sa prise en main pour l’utilisateur. Elle a pour rôle d’intervenir en tant que mise à niveau technique et conceptuelle. Une refonte graphique permet ainsi d’observer une mise à niveau liée à l’usage évolutif des technologies : un menu vertical était une pratique largement développée il y a quelques années par exemple.

Ainsi, pour mettre en place une refonte graphique, il faut savoir tenir compte de certains éléments bien distincts, mais réellement importants pour ne pas engager une perte sérieuse d’utilisateurs (ou d’argent…). Aujourd’hui je vous propose d’appréhender l’usage de votre site au quotidien par vos utilisateurs.

Évaluer le comportement d’un internaute

Le premier point à prendre en considération est le comportement de l’internaute. L’utilisateur arrive généralement sur un site à la recherche d’un contenu pertinent ou de services simples et efficaces. Il faut donc tout mettre en œuvre pour lui faciliter l’accès à ces fonctionnalités. Un site possédant peu de données peut se permettre de laisser totalement libre court à la pensée graphique, contrairement à un site informationnel.

Un site informationnel doit permettre une lecture agréable des informations. Ainsi, l’architecture structurelle des données est à prendre en compte : l’interface proposée se doit être logique. Au cours d’une refonte, il faut garder à l’esprit que les 90% des utilisateurs d’un site ne sont pas des professionnels en informatique. Ce qui paraît évident à un internaute formé ou initié aux nouvelles technologies ne l’est pas forcément pour tous les internautes. Ainsi, se pose la question de la simplicité du rendu.

En matière d’interface, certains comportements rappellent des usages : un changement de curseur sur un bouton indique sa fonctionnalité par exemple. Beaucoup d’éléments interviennent en amont de la maquette créée, la personne chargée de l’intégrer a tout intérêt à penser le dynamisme des interfaces en vue d’une compréhension universelle de celle-ci.

Favoriser la compatibilité des navigateurs

Vient alors le souci de la compatibilité des navigateurs et de leurs versions multiples. Si aujourd’hui, un professionnel en informatique possède la version 29.0 de Firefox ou la version 11 d’Internet Explorer par exemple, l’utilisateur moyen lui n’a que faire de ces outils. Il s’estime heureux de pouvoir naviguer sur Internet à l’’aide de son navigateur par défaut – Safari 4, Firefox 3.6, Internet Explorer 7, et j’en passe – et n’a d’ailleurs probablement pas conscience de ne pas être à jour en termes de fonctionnalités. En revanche, l’usager s’attend à pouvoir utiliser un site aussi bien que n’importe quel utilisateur. Si vous demandiez à ma mère quelle version d’Internet Explorer, elle serait bien incapable de vous répondre !

Une vigilance toute particulière doit alors être réservée à l’intégration des maquettes élaborées. La moindre page doit subir un ensemble de tests de compatibilité afin d’éviter le maximum de désagréments et d’assurer un confort optimal à l’utilisateur bêta. Alors bien sûr, toutes les fonctionnalités prévues notamment en CSS3, avec les transitions ou les dégradés en background, en HTML5 avec les canvas etc. ne seront pas implémentées sur les anciens navigateurs. Mais l’essentiel à retenir ici, c’est que ces possibilités qui proposent une expérience nouvelle des outils créés pour le web, ne doivent pas être nécessaires au parcours et à la compréhension de l’interface. Une implémentation ne permettant pas d’accéder à un contenu quelconque sur un navigateur en raison de son ancienneté est une mauvaise pratique. Un dégradé manquant lui, en revanche, n’est pas gênant.

Lier l’interface aux usages

Pour une bonne refonte graphique, il faut donc savoir faire un compromis entre les comportements de vos utilisateurs, je parle de leurs habitudes pour consulter votre site, et la nouvelle structure que vous souhaitez mettre en place. Posez-vous ces deux premières questions : « Qu’est-ce-que recherchent les utilisateurs de mon site ? » et « Comment je peux les aider à trouver ces informations avec un parcours agréable ? ».

Ce n’est qu’un premier chapitre sur tout ce que j’aurais à vous dire concernant les refontes graphiques de manière générale. La suite, au prochain épisode… :)