FOWD London ‘08 Review

En cette mi-avril avait lieu à Londres la première conférence de l’année du Future Of Web Design. Étant actuellement à Paris, j’en ai profité pour aller y faire un tour afin de vous refléter les futures tendances dans le domaine du Web Design. J’en profite pour remercier mon agence sans laquelle ce voyage n’aurait pas été possible.
Au programme, de très bons maîtres de conférences / designer tel que Patrick McNeil, Jon Hicks ou encore Elliot Jay Stocks que je suis depuis quelques temps via leurs blog et twitter.
Je vais reprendre dans cet article les conférences que j’ai tout particulièrement apprécié et y apporter mon avis personnel sur la question, ainsi que ce qu’il en est ressorti. Vous trouverez des blogs relatant les autres conférences à la fin de l’article.

Finding Inspiration from Design – Patrick McNeil

Cette conférence fut l’une des plus intéressante pour moi, Patrick Mc Neil assez connu pour ses sites Daily Slurp et Design Meltdown allait nous parler l’inspiration dans le domaine du Web Design.
Il a tout d’abord évoqué l’idée que l’inspiration pour créer des sites ne venait pas uniquement du web. Tout ce qui nous entoure nous inspire, essentiellement les choses dans d’autres domaines artistique comme les peintures anciennes.
Il est revenu sur l’emploi du nombre d’or et son influence dans le Web Design (vous pouvez d’ailleurs regarder le très bon article de Br1o à ce propos).

Et pour clore ce premier chapitre, il a abordé le sujet assez complexe de la frontière entre l’inspiration d’un site web et sa copie. Il est vrai qu’on se demande souvent où s’arrête l’inspiration et où commence la copie. Nous pouvons considérer un site comme copie à partir du moment que celui-ci reprend la css d’un autre et que l’auteur s’est contenté de changer quelques images. Par contre un site dont on a modifié la css et les images mais qui reprend le même esprit qu’un autre (par la grille, les couleurs, les icones, …) peut-il être considéré comme copie?
Il a ensuite évoqué les tendances actuelles dans le Web Design tel que les larges headers avec de grandes images et un texte gigantesque, et l’emploi des familles de bruns et des web designs texturés.

Il a aussi parlé des textes « super sized » dans le Web Design, un des exemples les plus concret de cette tendance et le formulaire d’inscription au site de microblogging trumblr qui utilise d’énormes champs d’input . Cette technique facilite grandement la lisibilité et donne une impression de simplicité d’utilisation à l’internaute.
Dans une 3ième partie il nous a fait part de ses prévisions sur les futures tendances du Web Design. Il préconise le retour aux couleurs claires et assez désaturées dans les sites après une longue période « web2 » aux couleurs hyper contrastées et saturée.
Il a ensuite évoqué la nouvelle tendance des sites « wide » sans scroller horizontal (en html / css). Personnellement je ne crois pas trop en cette tendance qui peut être bien pour un portfolio mais ne contient pas assez de place pour un blog ou un site avec trop d’information.
Pour finir il nous a parlé de l’emploi de plus en plus fréquent de la vidéo dans les headers des Web Design récents.

Web is the New Print – Elliot Jay Scott

Après une inoubliable conférence à New York en octobre dernier (d’ailleurs celle de 2008 est déjà programmée, avis aux amateurs ^^) sur le thème « Destroy The Web2 Look », Elliot allait cette fois aborder un thème complètement différent avec l’instruction que peut avoir le domaine de l’impression sur celui du web. Cette question peut apporter plusieurs réponses plus où moins valables, je vais tenter dans ce paragraphe de confronter les miennes aux siennes. Il commença par nous montrer des couvertures assez avant-gardistes et typographiques de George Orwell en nous avouant qu’il n’aimait pas trop ses livres ^^.

Il nous évoqua ensuite le fait que l’impression est beaucoup plus libre que le Web Design en terme de contraintes (nous n’avons aucun code html/css dans le print voire même d’action script). Celui-ci est au final une grande page blanche sur laquelle nous pouvons tracer, dessiner, positionner et ainsi exprimer notre créativité. Ainsi, nous pouvons sortir d’une grille beaucoup plus facilement en impression que dans le web. Il a aussi évoqué les affiches faites entièrement de typographique, ce qui est plutôt rare dans le web (nous reviendrons dessus plus tard).
Il rappela que domaine du Web Design et beaucoup plus récent que le print dans le domaine de l’art, il y a donc encore énormément de chose à faire dans ce domaine et de nombreux horizons inexplorés.
Il nous a ensuite parlé un peu de flash, « la saveur de l’univers » et nous a cité une phrase que Khoi Vinh avait écrite dans un de ces récents billets

Flash speaks their language. It’s visual in nature and has similar tools and UI to Photoshop, Illustrator, and their ilk.

Il montra ensuite un site flash assez connu Conclave Obscurum (il ne faut pas oublier qu’Elliot adore les designs assez « grunge » et texturés). Le moins que l’on puisse dire c’est que ce site sort véritablement de la norme web. Premièrement nous avons vite de grand espaces blanc, les pages, ce qui nous oblige à bien nous concentrer dessus. Au fur et à mesure de la visite du site de nombreux obstacles viennent gêner la navigation (saut d’écran, passage « à blanc », obligation de clics intensifs pour afficher des parties, alors que la norme veut que les sites soient de plus en plus intuitifs, accessibles et agréables à la navigation. On pourrait aussi citer les différents éléments assez repoussants (2ième niveau de l’accueil ou encore réglage du volume) ce qui se veux assez revendicateur. On se demande bien sur quelles sont les intensions du webmaster en créant un tel site. Question à laquelle Eliot a répondu par 3 points :

• « Casser la moisissure » c’est-à-dire sortir des sentiers battus et de la norme qui veux que les sites soient beaux et agréable à naviguer.
• Créer un grand niveau de tension, ce qui permet de vire une expérience unique sur un site web.
• Faire participer l’utilisateur en l’obligeant à rester attentif

Il prit ensuite la direction de la deuxième partie des designs web : les sites html et css. Il nous montra des sites typographique sortant de la norme tel que l’excellent Seed Conference ou encore Standard image (à ce propos je vous conseille vivement la lecture de l’excellent blog d’analyse de site typographique typesite). Il nous parla ensuite des sites narratifs. Pour lui ceux-ci ne sont pas justes des sites dans lesquels nous naviguons rapidement en appuyant sans cesse sur les boutons page précédentes / suivantes. Ces sites ont une structure évolutive faite de problèmes et de solutions qui forment un mouvement continu sensé. Il nous a ensuite montré l’excellent site de Shaun Inman qui change de couleur suivant plusieurs paramètres (ancienneté du post, pertinence, …). Il nous a ensuite exposé la pyramide de Freytag qui définit la «dramatic structure » dans l’écriture de nouvelles.

Elliot aime les cartes de visites, il nous fait donc profiter de ses favorites (je vous conseille d’aller un jeter un coup d’œil dans la présentation ci-dessous, il y en a des très bonnes). Et nous rappelle que notre page d’accueil n’est pas notre carte de visite, au même titre que notre navigation ou même notre page de contact. Notre conception est notre carte de visite.
Il en vient enfin à tirer sa conclusion : le design du print se divise en deux tangentes dans le monde du web : les sites flash et les sites html. Nous devons unifier ces deux tangentes afin d’être encore plus libre dans le domaine Web Design. Un bon design n’est pas forcement un design qui se contente d’être joli, c’est un design qui impressionne. Ainsi il ne faut pas hésiter à tirer différents éléments et philosophie du print pour les appliquer au web.
Personnellement je pense aussi que nous devrions essayer de casser les « normes » établies dans le Web Design, qui je pense va prendre peu à peu la même voie que l’histoire du print avec différents mouvement revendicateurs qui établiront des base pour le futur (il suffit de regarder le mouvement avant-garde que j’apprécie tout particulièrement). Nous avons deux grandes branches qui commencent à se diviser dans le web design actuel à savoir les sites très graphiques avec un contenu littéraire souvent assez faible et des sites contraires avec un design assez « pauvre » mais une véritable valeur littéraire. Il faut tenter tant que nous le pouvons d’unifier ces deux branches afin de créer des sites à la fois riches en design et en narration. Et c’est dans ce sens qu’il nous reste encore beaucoup à apprendre du print.

Design the user experience - Andy budd

D’après Andy budd l’expérience d’un utilisateur sur un site web pouvait se diviser en 7 grandes parties :

• La première impression : elle a toujours son influence, et se fait souvent par la vue (donc le design du site y contribue grandement). Il est donc clair qu’avoir un design de site web soigné est important. Cette première impression peut être aussi considéré comme une expérience, tout le monde se rappelle de la première fois qu’il a déballé un iPod ou iPhone.
• Avoir un site clair : avoir une bonne usabilité est très importante, sachez guider l’internaute et ne laissez rien au hasard.
• La personne : prendre en compte l’internaute comme acteur du site (ou être humain tout au moins) est une notion importante. On pourrait prendre comme exemple StarBucks qui au lieu de vous appeler par un numéro ou le nom de votre café vous appelle par votre nom, ou Flickr qui vous dit « Hey Paul, welcome back ! ».
• Le soucis du détail : les détails de votre site sont très importants. Essayez de personnaliser votre site afin que les utilisateurs puissent le reconnaître facilement. Par exemple dans un parc d’attraction, même les poubelles sont brandées avec la marque du parc.
• Les commentaires & le feedback : les gens peuvent vous aider à améliorer votre site, n’oubliez pas de prendre en compte les commentaires et les feedbacks.
• Make it fun: n’hésitez pas à partager avec vos visiteurs, vous pouvez le faire grâce à nombreuses applications web2 tels que flickr pour les photos, last fm pour la musique…
• Donnez aussi en retour et n’hésitez pas à allez voir les sites de vos internautes.
• Créez l’expérience : à vous de jouer !

From design to deployment - John Hicks

Jon étant un grand amateur de fromage, il s’est basé sur un exemple de réalisation d’un site internet sur la culture du fromage en 24h: Cheesophile.
Sa première directive fut de créer des dossiers de travail et de les classer afin de ne pas s’y perdre rapidement avec ses différents fichiers. Puis de mettre en place un serveur local sur Apache utilisant MAMP ou Headdress.
Il a ensuite crée son « balisage » mais sans div structurel : juste les paragraphes, la liste des articles, les rubriques et les différents éléments.
Puis il nous a parlé des grands débats « css fluide vs fixe », « em vs pixels », « HTML ou Flash » et il en a tiré la conclusion que tout dépendait du type du contenu. En effet chacune de ces solutions peuvent être plus ou moins bonnes suivant la situation, il n’existe pas de « combinaison magique ».
Il a ensuite parlé du choix des navigateurs web qui devraient supporter votre site, pour lui il n’est maintenant plus nécessaire d’aller au-delà d’ie6 pour un site personnel ou de petite échelle.

Il aborda ensuite les @imports pour les CSS et leur importance pour le bon développement d’un site web. D’après lui le marqueur * { margin: 0; padding: 0; } est devenu peu pertinent et n’empêche pas les erreurs, il préconise donc l’utilisation de la feuille de style « Reset CSS » de Eric A. Meyer qui permets un d’avoir une page vraiment propre.
Il préconise également l’usage d’une feuille de style dédiée au texte et à leur mise en page. A ce niveau, il pense qu’il faut arrêter d’utiliser les polices dites « web-safe » (et aussi des couleurs) qui sont trop limitative et de voir dans un choix plus large tout en respectant leur ordre d’importance.

Il a ensuite vanté les mérites de Fireworks quant à sa capacité à compresser d’image, passant d’une photo de base de 550ko, à 180ko dans Photoshop pour finir à 67ko dans FireWorks (j’ai vérifié, ça marche plutôt pas mal).
Puis il a abordé la construction d’une grille grâce à certains add-ons firefox ou petites applications web.
Pour finir il a rappelé que la phase de débugage était essentielle et devenue assez simple grâce au très bon add-on firebug (à essayer d’urgence si vous ne connaissez pas encore).
Il a continué avec ie6 qui est la hantise des développeur html/css. Sur ce sujet, il opte pour la solution du HasLayout (vous pourrez également trouver une explication en français ici) avec l’emploi de la propriété « zoom :1 ; « par exemple.
Cette présentation m’a vraiment beaucoup plu, elle était assez synthétique et donnait pas mal de bonnes astuces concernant la création d’un site.

Get your design approved in 12 simple steps - Larissa Meek

• 1- Faites-vous ami avec votre client : ça ne doit pas être très difficile pour elle ^^ , cependant garder toujours en tête que votre client n’est pas votre ennemi et qu’il vaut mieux avancer ensemble qu’à contresens.
• Posez vous beaucoup de question : n’hésitez pas à vous poser de nombreuses questions à vous-même ainsi qu’à votre client. Vous apprendrez ainsi à mieux maîtriser votre projet, n’hésitez pas à vous renseigner sur le secteur et les entreprises concurrentes.
• Posez vous encore plus de question : dans un 2ème temps, posez vous la question de qui sera l’utilisateur de votre site. N’hésitez pas à faire tester votre site par de vraies personnes.
• Créez un fil conducteur, mais ne devenez pas dépendant ! Il est très important pour le client d’avoir un fil conducteur et souvent une maquette (papier ou numérique) sous les yeux. Cependant il est clair que ce fil peut évoluer ou être modifié suivant les conditions et/où les difficultés rencontrées.
• Parlez de votre conception avant d’ouvrir photoshop : soyez sûr de ce que vous allez faire avant de commencer votre design. Il est beaucoup plus rapide de rassembler différentes ressources avant de commencer que de commencer un Web Design sans aucune ressource.
• Connaissez votre direction : donner trop d’options à votre client n’est pas la bonne solution. Sachez garder une ligne directrice sans trop vous égarer.

• Présentez dans un navigateur : pensez bien à montrer la maquette de votre site dans un navigateur.
• Faite des prototypes : n’hésitez pas à mettre en place des prototypes de votre site surtout si il s’agit d’une application web.
• Demandez des commentaires constructifs : il est important d’avoir des retours constructifs de la part du client afin de pouvoir faire évoluer votre travail. Mais prenez garde à ne pas avoir trop d’interlocuteurs afin de ne pas faire de modification inutiles (il vaux mieux réunir tous les commentaires dans un document, plutôt que de les recevoir au coup par coup par différentes personnes).
• Soyez confiant en votre travail : guidez le client dans ses choix et enseignez lui ce qu’il ne sait pas.
• Le temps nous le dira : même si votre client ne comprend pas tout de suite votre point de vue, avec le temps et les explications il finira toujours par comprendre.
• Tirer le meilleur parti des situations difficiles : en cas de situation difficiles, restez positif et optimiste. N’oubliez pas de toujours avoir le client avec vous et non contre vous.

Pour conclure, une très bonne journée passée à Londres en compagnie de Bastien. Vraiment beaucoup de choses à absorber en une journée qui est passée très vite. Au final cet article m’a permis aussi de réfléchir un peu sur ce que j’avais entendu mais pas forcement retenu. Il est clair que le futur du Web Design est encore assez flou au vu des nombreuses tendances et des nouvelles techniques qui se créent. Il faut tenter avant tout de lier de plus en plus les techniques qui pendant longtemps se fuyaient tel que le flash et la combinaison html/flash mais également dans le rapport contenant/contenu. Il faut maintenant penser aux futurs mouvements qui pourraient naître et ne pas seulement réfléchir en termes de « normes » actuelles.

Crédit photos: Bastien Labelle

Pour aller plus loin :

• Thaisie FOWD Review
• Wrapping up The Future of Web Design
• Sketch notes from Future of Web Design conference
• FOWD 08 Review

Popularity: 63% [?]