Notre veille

Article

Webdesign : Compte rendu de FOWD London "08

Article

Le mois dernier 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 rapporter 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 / designers tels que Patrick McNeil, Jon Hicks ou encore Elliot Jay Stocks que je suis depuis quelques temps via leurs blogs et Twitter. Je vais reprendre dans cet article les conférences que j'ai tout particulièrement appréciées et y apporter mon avis personnel 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éressantes pour moi, Patrick Mc Neil assez connu pour ses sites Daily Slurp et Design Meltdown allait nous parler de 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 artistiques 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 où 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 une copie? Il a ensuite évoqué les tendances actuelles dans le Web Design telles 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 évoqué les textes « super sized » dans le Web Design. Un des exemples les plus concrets 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 3è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ées. Il a ensuite évoqué la nouvelle tendance des sites « wide » sans scroller à l'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'informations. Pour finir, il nous a parlé de l'emploi de plus en plus fréquent de la vidéo dans les headers des Web Designs récents. | View | Upload your own
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 le 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 y reviendrons plus tard). Il rappela que domaine du Web Design est beaucoup plus récent que le print dans le domaine de l'art, il y a donc encore énormément de choses à faire dans ce domaine et de nombreux horizons inexplorés. Il 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 ses 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 (2ème niveau de l'accueil ou encore réglage du volume), ce qui se veut assez revendicateur. On se demande bien sûr quelles sont les intentions du webmaster en créant un tel site. Question à laquelle Eliot a répondu en 3 points :
  • « Casser la moisissure », c'est-à-dire sortir des sentiers battus et de la norme qui veut que les sites soient beaux et agréables à 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 tels 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édente / suivante". 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, …); puis 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 libres dans le domaine Web Design. Un bon design n'est pas forcément 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 s revendicateurs qui établiront des bases 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 au design assez « pauvre » mais avec 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. | View | Upload your own
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 (le design du site y contribue grandement). Il est donc clair qu'un design de site web soigné est important. Cette première impression peut être aussi considérée comme une expérience. Tout le monde se rappelle de la première fois qu'il a déballé un iPod ou un 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 souci du détail : les détails de votre site sont très importants. Essayez de le personnaliser afin que les utilisateurs puissent le reconnaître facilement. Par exemple, dans un parc d'attractions, 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 leurs commentaires et 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 !
| View | Upload your own
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 en a tiré la conclusion que tout dépendait du type du contenu. En effet, chacune de ces solutions peut être plus ou moins bonne 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 limitatives 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 une 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éveloppeurs 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. | View | Upload your own
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 gardez 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 questions : 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 questions : 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/ou 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 s'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 difficile, restez positif et optimiste. N'oubliez pas de toujours avoir le client avec vous et non contre vous.
| View | Upload your own 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 forcément 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 telles 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 :

Chargement