Exibit - blog/portfolio de Benoît Vrins, webdesigner : Blog - <p>Web, design et rock ’n roll !</p>

Blog : Webdesign

24h pour faire un site web

Ce vendredi, Grégoire, Rainer et moi avons pris la route pour Namur afin de rejoindre la webjam organisée à l’occasion du Webdesign International Festival. Le principe est simple : chaque équipe a 24h pour réaliser un site sur un thème imposé. Tous les participants sont rassemblés au premier étage du Palais des Congrès. A 11h, nous prenions nos marques et à 14h nous écoutions attentivement la lecture du thème devant un auditore plein à craquer :

Concevez ou réinventez le futur site : Belgium.be

Demain, dans 10 ans ou dans 10 000, quel sera l’espace virtuel de notre petit bout de terre sur la toile...

Nous y allions pour diverses raisons : par défi de se plier aux contraintes d’un concours, pour tester nos complémentarités et le travail en groupe, pour sortir un peu de notre quotidien de travail et enfin de faire de chouettes rencontres. Dire que nous n’étions pas du tout intéressés par les prix mis en jeu serait quand même un peu présomptueux : 2 places à la finale internationale du concours à Limoges en juin.

C’était... génial ! J’ai attendu de récupérer quelques heures de sommeil avant d’écrire ces quelques lignes car en terme d’endurance c’était vraiment un challenge (on avait des têtes pas croyables samedi matin après la nuit blanche).

L’ambiance était très chouette et bravo aux organisateurs (DogStudio) d’avoir trouvé les moyens pour nous rendre l’aventure si joyeuse : petit dej offert, locaux confortables, réseau stable, stewards et hotesses à notre écoute.

Le thème imposé, de l’avis général, était difficile. Ils ont d’ailleurs été plusieurs à abandonner la compétition au fil des heures. Nous avons avancé méthodiquement : pris le temps de définir notre voie et l’idée, schématiser notre application avant de passer au design et au développement de l’application. Enfin les dernières heures ont été consacrées au debug et l’intégration du contenu (là c’était peut-être pas la meilleure idée vu la fatigue nous n’étions pas toujours complètement maitres de nos propos). Très content de l’expérience donc, et content du travail accompli.

Nous n’étions plus là pour l’annonce des résultats comme beaucoup d’autres qui n’avaient plus qu’un seul objectif en tête : rejoindre un lit au plus vite ! C’est donc par Twitter que nous avons lu le nom des gagnants :

Prix du jury : Lost boys
Prix étudiant : Team Leser
Deuxième Prix : EPIC
Premier Prix : Pfaff Staf

Excellent niveau, nos représentants belges à la compétition international sont de véritables talents. Sans passer pour "mauvais perdant", j’exprime mon seul regret de la compétition : un règlement qui mériterait de s’étoffer quelque peu. Pourquoi mettre en place un serveur PHP sans base de données ? Pourquoi ne pas rappeler les règles essentielles de ce qu’on peut et ne peut pas faire juste avant de lancer le coup d’envoi ? Les possibilités sont tellement multiples et pas toujours adaptées aux limites imposées de façon un peu arbitraire par le règlement. Ce qui m’amène à mon dernier point. Je pense qu’il faudrait vraiment pour la prochaine fois mettre en place des catégories. Le palmarès en est la 1er preuve : n’ont été récompensés que des sites en Flash, technologie que j’essaie d’éviter d’utiliser dans mon métier pour diverses raisons. Cela veut-il dire que les autres types de réalisations partent d’office avec une longeur de retard pour impressionner le jury ? Ne serait-il pas mieux d’avoir des catégories genre "sites en Flash", "sites en HTML/CSS", "applications mobiles"... ? Cela motiverait en tout cas ma re-participation à la compet l’année prochaine.

Notre site réalisé (login/pass = gest/guest)
Le microblog que nous avons tenu pendant la compétition
quelques photos par Shoob

8 février 2010 - 1 commentaires - tags : Web actualités , Webdesign

Cover revue 2009

J’avais commencé tout un blabla qui m’a finalement amené (déjà !) à la fin du premier mois de l’année. Et puis je me suis dis que l’adage qui veut que les petites dessins valent mieux que les grands discours s’accordait pleinement à cet article. Je prends donc un raccourci de dernière minute. Voici donc mon "best of 2009" sur les deux sujets principaux de ce blog : le web et le rock : les endroits où j’ai préféré me faire prendre dans la toile et les musiques que mes petites oreilles ont le plus appréciées.

Revue web

Revue rock

Archive - Controlling Crowds Dark was the night Eels - Hombre Lobo Franz Ferdinand - Tonight Official Secrets Act - Understanding Electricity The Crocodiles - Summer Of Hate Ghinzu - Mirror Mirror

28 janvier 2010 - 0 commentaires - tags : Web actualités , Rock ’n Roll , Web 2.0 , Webdesign

10 règles d’utilisabilité

Rien que le mot rendra le regard de certains perplexe. C’est la francisation du mot anglais "usability". Pour la définition française, j’ai choisi celle d’Amélie Boucher dans son ouvrage "Ergonomie web" :

L’utilisabilité a pour objet la mise en œuvre de la décision. Un produit est dit utilisable lorsqu’il peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés, cherchant à atteindre des objectifs donnés, dans un contexte d’utilisation donné.

Le titre original de ce post vient d’un autre article publié par Dmitry Fadeyev sur le Smashing Magazine : "10 Useful Usability Findings and Guidelines". Article très intéressant pour le webdesigner que je suis, à la fois pour vérifier et adapter sa pratique du webdesign au quotidien mais également comme support argumentaire lors de débat avec le client. La première règle par exemple concerne la position des intitulés dans un formulaire. Que faire quand le client désire absolument les mettre à gauche des champs alors que je trouve qu’esthétiquement ils ont leur place au dessus (bien plus facile techniquement je le reconnais !). Voici donc un argumentaire tout prêt ! Excellent article donc, dont je me limiterai à référencer le lien et à traduire les 10 règles en français :

Les intitulés de formulaire fonctionnent mieux au-dessus des champs
Les utilisateurs ont le regard attirés par les visages
La qualité du design est un indicateur de crédibilité
La plupart des utilisateurs ne scrollent pas
Le bleu reste la meilleur couleur pour les liens
La taille idéale du champ de recherche est de 27 caractères
Les espaces blancs améliorent la compréhension
Les test d’efficience sur les utilisateurs n’ont pas besoin d’être cher
Les pages d’informations sur les produits vous aide à vous démarquer
La plupart des utilisateurs sont aveugles face aux publicités

La suite ici.

6 novembre 2009 - 0 commentaires - tags : Webdesign

Le bon buzz à la belge

Le truc web belge du moment est sans conteste "La Patate".

La Patate Un idée pas neuve pour un balle (le concours de T-shirt fraisien) mais le grain de troisième degré belge renouvelle à merveille l’exercice de style (le Gallodrome n’est pas loin non plus).

Les icônes locales mises à l’honneur ("Yes we drink"), les bleds du plat pays aux noms poétiques tels que Blankenberge Beach ou Wanfercée-Baulet University. Nul doute que le produit trouvera son public.

Les outils du moment ont été judicieusement utilisés : maintien du suspens dans un premier temps sur Twitter et Facebook avant une reconversion de la communication vers le public conquis de ces deux plateformes (promos, vie sociale, ...). Enfin, l’excellente idée d’un concours "Votre ville sur les T-shirts de la Patate" en utilisant intelligemment l’application "Facebook Connect" (notamment pour inviter son réseau à voter).

La friterie est tenue par l’agence Pepper & Koffie basée à Namur. Projet à suivre et chouettes idées cadeaux pour les prochains anniversaires...

17 août 2009 - 2 commentaires - tags : Web 2.0 , Webdesign

Flash or not Flash ?

Logo Flash La question revient fréquemment en prospection : "Vous faites du Flash aussi ?". Je me lance généralement dans un discours argumenté plus ou moins mal préparé dont le but ultime est de déconseiller l’utilisation de Flash. La raison principale est que je perçois chez mon interlocuteur l’envie du fun à son site et que Flash résonne en ses termes à ses oreilles. Un site en Flash est un site qui en met plein la vue.

Ce post a donc pour objet de résumé mon point de vue sur le pour ou contre Flash avec un maximum d’arguments à mettre dans la balance sur son choix ou pas d’utiliser Flash dans un projet web.

Les principaux griefs que j’ai vis-à-vis de Flash :

Un site en Flash coute plus cher
D’expérience, un temps supplémentaire devra être consacré à l’interactivité, aux animations et si nous voulons un site web dont les contenus sont gérés avec un CMS (ce qui correspond à une majorité des demandes aujourd’hui) cela augmente encore les développement pour faire communiquer le CMS avec Flash. Soucis qui ne sont évidemment pas présents (ou en moindre mesures) lors de la réalisation d’un site basé sur le standard XHTML-CSS.
Un site en Flash se référence mal
Aux dernières nouvelles, Google indexe toujours très mal ce qui se trouve à l’intérieur du fichier Flash .swf. Il faut donc trouver des astuces pour offrir à manger et à boire à Google pendant qu’on envoie la sauce full Flash au surfeur, ce qui nous renvoie au point 1.
Un site en Flash n’est pas accessible
Préoccupation sociale, argument qui me semble important à mettre dans la balance. Ce qui se trouve dans un fichier Flash ne sera pas lu par une barrette braille par exemple ou tout autre navigateurs "non graphiques" (lire ce post pour en savoir plus)
Un site en Flash est mal supporté sur les browsers mobiles
Un site en Flash n’est pas consultable sur un iPhone. Je sais que d’autres terminaux mobiles supportent parfois plus ou moins le Flash Player mais les mises à jour ne sont pas toujours aussi vite supportées que pour les browsers classiques. A contrario : développer un affichage de son site spécifique aux terminaux mobiles est un jeu d’enfant sur base du standard XHTML-CSS
Un site en Flash vieillit mal
changement de l’enveloppe graphiques, ajouts de modules complémentaires... Autant d’éléments qui peuvent remettre en question fondamentalement un site développé en Flash.

L’alternative...

L’AJAX bien entendu ! La librairie JQuery par exemple permet une quantité d’effets qui ajoutent une touche de fun et d’interactivité à un site web réalisé sur une base XHTML-CSS : effet de transition fade-in-fade out, déplacement d’éléments, textes, images, etc. Le contenu reste accessible, référençable, lisible parles terminaux mobiles et facilement adaptable sur le moyen long terme. En terme de coût, cela génère bien entendu un temps de travail supplémentaire mais la communauté open-source entourant généralement les projets de librairies AJAX permet de se reposer sur des outils performant à un cout d’utilisation intéressant.

L’AJAX ne remplacera bien entendu pas Flash. Une belle animation faisant appel à différents éléments graphiques tels que des modélisation 3D mélangées à de la vidéo et des textures photoshopées le tout mis en rythme sur un beat musical ne pourra bien entendu être réalisée qu’en Flash (les mauvaises langues ajouteront "ou en Silverlight"). Ce qui m’amène au point suivant...

Les cas où je trouve que Flash se justifie

les expériences multimédia : un site où l’objectif est avant tout de plonger l’utilisateur dans une expérience multimédia et interactive. 1MD a réalisé récemment un beau projet dans le style, the Prototype experience.
les sites de vidéos : la popularité du format FLV pour la vidéo est un élément à mettre clairement en avant si le site à réaliser proposera beaucoup de contenu vidéo.
les animations localisées sur le site : dans certains cas, un petit élément animé dans une entête de page peut effectivement apporter un plus au site (et renforcer la cohérence d’identité visuelle du projet). Dans ce cas, on fera en sorte que cette zone ne contienne pas de "contenu" à proprement parlé.
le bannering : principalement destiner à la publicité.

Deux exemples pour terminer

Le site du Brussels Summer festival : Au départ une chouette idée. Le fond d’écran n’est pas une image fixe mais une vidéo par dessus laquelle vient s’afficher le contenu. L’effet visuel est intéressant, bonne expérience utilisateur. Cet effet positif est malheureusement pas suffisant pour justifier la réalisation de ce site en Flash. Cette décision m’empeche par exemple de consulter deuis mon téléphone les horaires de passage des artistes alors que je suis en route pour le festival. Idem pour une personne mal voyante qui est pourtant une grande amatrice d’autres expériences sensorielles comme la musique.
Le site du designer Daniel Gutiérrez : les effets sur le menu et le diaporama d’images sont réalisés en AJAX. Ces petits éléments ajoutent un effet fun au site tout en respectant le standard XHTML-CSS. Autre exemple de galerie : Anywhichway

Enfin pour répondre à la question du premier paragraphe : "Oui je fais du Flash et je connais ActionScript 2".

9 juillet 2009 - 3 commentaires - tags : Webdesign