Exotech.biz

Web, Technology & life by Bastien Labelle

Aller au contenu | Aller au menu | Aller à la recherche

Website stencil kit par Design Commission

On a beau être avoir accès à des technologies extrêmement avancées comme iPlotz (qui a l'air d'être un excellent outil gérant très bien le feedback) pour faire du wireframing et du UI design, mais parfois, il faut avouer que rien ne vaut un crayon et de papier. Cela est valable pour un UI designer, mais aussi pour quelqu'un qui fait de la programmation, pour noter des algorithmes ou pour modéliser des bases de données.

Si vous êtes plutôt du genre à bosser façon 37 Signals, que vous n'aimez pas perdre de temps sous Photoshop, et que vous codez directement les brouillons des UI que vous avez dessiné sur papier, le website stencil kit proposé par Design Commission devrait vous plaire. Un bloc-note où est imprimé la barre de navigation de Firefox, un crayon, et un trace lettre (vous savez, ces règles qui permettent de dessiner des lettres, sauf que là ce sont des icônes).

J'ai découvert ce kit sur le Tumblr de Soxiam (l'UI designer chez Vimeo) qui publie de temps en temps des brouillons d'interfaces, et j'avoue avoir été séduit de suite. C'est l'arme parfaite de l'UI designer, et ça coute environ $20 sur le shop Design Commission. Ne serait-ce que pour le bloc note façon Firefox, je me tate presque à m'en acheter un!

I'm a designer and...

A vous d'écrire la suite. J'avoue que sur le coup j'ai été un peu méchant:

I am a designer and... I code better XHTML than the guy who coded that website with useless tables

I am a designer and...

Même s'il est inutile, j'adore le concept. Le design aussi pour tout dire (bon, le code laisse à désirer, c'est vrai). Pour la petite histoire, c'est la première webapp de Leah avec Google AppEngine. Dommage que ce ne soit pas un mashup Twitter du genre Boarding.fr, qu'on aurait pu remplir avec des tweets du type "#iamadesignerand I love sushis". Peut-être pour la prochaine version? Des permalinks seraient utiles aussi, histoire qu'on puisse conserver l'URL de nos produits.

A noter que l'URL est inprononçable si on parle anglais: http://www.dotdotdotspot.com/. Et remerciez Victor, sans quoi le tweet annonçant cette webapp serait passé à la trappe!

Striped Backgrounds, générateur de fonds, et plus encore

Si vous aimez les bandes verticales comme celles qu'on peut trouver sur les mouchoirs ou les cravates Paul Smith, alors Striped Backgrounds est une webapp de Sam Herbert qui va certainement vous plaire. Il s'agit d'un Stripe Generator en version ight, qui permet de créer des fonds à bandes, uniquement verticales.

Striped Backgrounds

Striped Backgrounds a tout de même quelques avantages par rapport à Stripe Generator: il permet de créer des fonds d'écrans, de nombreuses résolutions sont d'ailleurs disponibles, allant du format iPhone (320*240) au format Widescreen WUXGA (1920*1200), en passant par des formats plus classiques 4:3 (jusqu'à 1600*1200) ou encore des formats plus originaux tel que le format HDTV (1080p).

Mais ce qui m'a le plus marqué sur cette webapp que je considère désormais comme un must-have pour les webdesigners, c'est la possibilité la fonction Random, qui permet de choisir les couleurs au hasard. Et force est de constater que Striped Background peut servir d'outil pour inventer des palettes de couleurs, que vous pourrez poster sur d'autres sites comme Colour Lovers (ce n'est malheureusement pas automatisé), car le site affiche les codes hexadécimaux des couleurs générées.

A noter aussi la version iPhone qui permet de générer des fonds au format iPhone directement.

FOWD'08 Review

Comme vous le savez peut-être, j'étais la semaine dernière à Londres pour la conférence Future Of WebDesign - FOWD pour les intimes, prononcez FAOUW'D à la Daniel Burka. Même si j'ai pu admettre que parfois le contenu prime sur le webdesign, et ce n'est pas des sites comme Craigslist qui me contrediront, j'accorde une certaine importance au webdesign, et à toutes les notions qui l'entourent, que ce soit l'ergonomie, l'utilisabilité, et tous ces gros mots pour la simple et bonne raison qu'ils sont une des clés du succès d'un site web.

Un petit résumé s'impose donc, car cette conférence a été de bonne qualité dans l'ensemble.

FOWD

Finding Inspiration for Design, Patrick McNeil

Une présentation très intéressante qu'a donné Patrick McNeil, où il nous rappelle que l'inspiration web ne vient pas seulement du web, mais aussi de tout plein de choses que l'on trouve dans ce que j'appellerais le monde réel, comme les tableaux, notamment. Des explications sur les tendances actuelles au niveau du webdesign (large headers, polices extra-larges, patterns), mais aussi de l'avenir de ces tendances, car oui, il faut l'admettre, la période web 2.0 glossy shiny & flashy est bel et bien révolue, la mode est désormais aux couleurs plus claires, comme celles de l'administration de Wordpress 2.5 par exemple. Et ce n'est pas Polo qui me contredira! Il parait que la prochaine tendance à suivre sera la vidéo, mais je n'en suis pas vraiment convaincu en termes d'utilisabilité.

User Experience Vs Brand Experience, Steve Pearce & Andy Clarke

Un titre un peu aguicheur, qui présente une vraie confrontation qui finalement se traduira par une conclusion "User Experience IS Brand Experience". Un Steve Pearce un peu mou, qui parle tout doucement, mais qui se rattrape par la qualité de ses slides dessinés qui résument plutôt très bien la situation: l'expérience utilisateur est un iceberg, et il est préférable de travailler sa partie cachée (ce que les gens font) plutôt que sa partie visible (ce que les gens voient). Andy Clarke est quant à lui bien plus à l'aise, mais on est tellement captivé par la personne que l'on en oublie presque ce qu'il dit!

Designing the User Experience Curve, Andy Budd

Encore une présentation intéressante, où Andy Budd résume l'expérience utilisateur d'un site web en 7 points importants: La première impression, l'utilisabilité, la personnalisation, les détails, le feedback, le fun, et l'expérience. De très bonnes illustrations et exemples viennent illustrer parfaitement ces points clés, allant de la homepage de Yahoo aux Apple Stores en passant par Flickr et l'iPhone.

Microsoft Session, Benedict Ireland

Sans vouloir faire de polémique là-dessus, tout le monde s'est accordé à dire que la présentation de Silverlight était mauvaise. Dans une conférence où le maître mot est utilisabilité, il apparait évident que la présentation du site d'Aston Martin, qui est clairement inutilisable, n'avait pas sa place ici. Mais il faut bien laisser la parole aux sponsors...

Getting your designs approved, Larissa Meek

Une présentation intéressante, où l'on est forcément plus captivé par la belle Larissa Meek plutôt que par sa présentation, où elle évoque 12 points clés pour la réussite d'un projet de design: soyez ami avec votre client, posez-lui beaucoup de questions, posez-lui encore plus de questions, utilisez des gabarits, discutez avant de concevoir, concentrez-vous sur un seul design, montrez le design dans un navigateur, prototypez si nécessaire, obtenez du feedback constructif, soyez confiants, prenez du temps, tirez le meilleur parti des situations difficiles. Pas de grande nouveauté ni de révolution, donc, mais des rappels toujours bons à entendre!

Photoshop Battle, Jina Bolton & Hannah Donovan Vs Jon Hicks & Elliot Jay Stocks (modérateur: Andy Clarke)

Dur dur de suivre une battle photoshop où s'enchainent les deux duos de designers tour à tour sur Photoshop, en étant eux-mêmes interviewés. On se laisse aller à regarder la manipulation sous Photoshop (pas vraiment extraordinaire, mais le temps est compté, donc on leur pardonnera) qui donne un trucage assez comique, et on n'écoute pas ou peu les interviews des designers. Ou alors, c'est moi qui ne sais pas faire deux choses à la fois, ce qui est fort probable!

Print is the New Web, Elliot Jay Stocks

Elliot Jay Stocks nous a montré ce qui l'inspirait dans le domaine du print, des livres ou encore des business cards. Il pense que l'on devrait plus s'inspirer du monde du print, car il laisse une plus grande liberté. A noter que c'est le point de vue un peu à contre courant d'un designer Flash, alors que la majorité de la salle préfère les standards du web, à savoir XHTML et CSS. Ceci dit, il ne faut pas croire que son intervention est dénuée d'intérêt.

From Design to Deployment, Jon Hicks

N'aimant pas le fromage, j'ai pourtant apprécié cette présentation sur la création d'un site web sur le fromage en 24h. Un cas - très - pratique, où Jon Hicks nous délivre sa méthode: arborescence des dossiers de développement, priorité au contenu plutôt que sur la forme (les div), problématiques CSS, add-ons & plug-ins Firefox, etc. Nous avons été très surpris avec Polo de voir combien Fireworks était puissant en termes de compression d'image! Le site est d'ailleurs en ligne: Cheesophile.com

Adobe Session, Andrew Shorten

Encore un autre sponsor de la conférence, concurrent direct de Microsoft au niveau des interfaces riches avec AIR, Andrew Shorten n'a pas hésité à tirer dans les pattes de son concurrent. Une présentation très sponsorisée, certes, mais bien meilleure que celle de Microsoft.

Unconventional ways to promote your site, Paul Farnell

Des idées intéressantes sont dites par Paul Farnell: créer des satellites, se concentrer sur le contenu, s'impliquer dans des communautés, être humain. Intéressant, oui, mais je ne suis pas convaincu que ces moyens de promouvoir un site soient réellement efficace, il me semble que la valeur ajoutée par rapport au temps passé à appliquer ces points n'est que minime.

Iteration & You, Daniel Burka

Certainement la présentation la plus intéressante à mon sens, avec des parallèles très intéressants entre le webdesign et l'architecture, où l'on distingue la high road architecture (buildings, batiments) de la low road architecture (les caravanes par exemple), cette dernière étant plus modulaire. Il ne faut pas hésiter à réutiliser des choses qui marchent, il est préférable d'adapter plutôt que de tout recommencer. Un Daniel Burka très dynamique et impliqué dans ce qu'il dit, j'ai d'ailleurs pu le ressentir lorsqu'il m'a parlé de sa présentation la veille lors du déjeuner.

Quelques photos...

Pour ceux qui veulent voir quelques photos, il y en a quelques unes sur Flickr!. J'ai aussi mis des photos de la pre-party et de l'after party.

Flickr FOWD

Le design d'un blog est-il si important?

Je viens de découvrir via Romain ce petit sondage que j'avais totalement raté chez Fran6art. Si vous me lisez un peu, vous savez que de par les services que j'ai l'habitude de présenter et les quelques réflexions que je fais par ici, que le design est pour moi important, voir même très important. C'est d'ailleurs pour ça que je suis en train de travailler sur le nouveau design de ce blog. Le sondage datant d'une petite quinzaine de jours, je vais donc réagir ici.

Lire la suite...

Artician, communauté de design 2.0

Artician est un site encore en beta privée que m'a fait découvrir Aymeric, il s'agit d'un site communautaire pour designers, un peu comme Deviant Art. Très classique dans ses fonctionnalités principales, qui sont la gestion d'un portfolio et d'un blog, il faut admettre qu'Artician se démarque par sa beauté et sa finition impressionantes!

Artician - Main page

C'est d'ailleurs le point qui m'a marqué: La team d'Artician a effectué un travail d'orfèvre impressionant: non seulement tout est beau et bien réalisé, mais en plus tout est customisable à souhait. Artician s'adressant à un public de graphistes et webdesigners, le fait de pouvoir tout customiser n'est pour une fois pas un mal en soi!

Prenons par exemple la gestion du portfolio, l'interface est relativement intuitive, la sémantique est respectée (on peut uploader des images, du flash, des icônes, etc.). Il est possible d'uploader plusieurs fichiers à la fois, notamment des previews et des archives, ce qui est très pratique pour des icônes notamment.

Artician - Submit interface

Les thèmes pour le profil sont de très bonne facture, et comme dit plus haut il est possible de les customiser. Un exemple avec un screenshot de mon profil artician:

Artician - Profile

Alors, on peut bien se demander ce qu'on peut reprocher à Artician qui selon moi rencontrera un succès certain... Pour ma part ce sera le côté un peu fermé et peut-être trop communautaire. Par exemple, pas mal de designers postent leurs créations sur Flickr, avec des groupes associés, et il serait bon de pouvoir importer des images depuis Flickr. Même bilan concernant le blog. A l'heure actuelle, beaucoup de gens, comme moi, ont un blog, et le fait de devoir créer un nouveau blog ne me tente pas vraiment. J'aurais préféré avoir la possibilité d'importer un flux RSS comme celà se fait très bien sur Tumblr ou Jaiku par exemple. Je pense que je vais faire remonter tout ça à Eric, le lead developer d'Artician.

Je viens d'inviter Daniel, le designer de Digg et Pownce, pour qu'il teste lui aussi la bête. Si vous voulez une invitation, faites signe en commentaire! Artician vaut vraiment le détour!

CommandShift3, webdesign battle écologique?

On connaissait les annuaires de jolis sites webs tels que CSS Mania, Css Remix, Screenalicio.us ou encore CSS Based, pour n'en citer que quelques uns.

Je suis tombé sur CommandShift3 il y a quelques jours lors de ma veille habituelle, et je l'ai retrouvé dans la liste des indispensables de Pol0. Le nom est assez parlant pour les Mac users, CommandShift3 étant le raccourci pour effectuer un screenshot sous Mac OS X depuis bien des années (c'était déjà valable sous Mac OS 8, c'est pour dire si Apple a une longueur d'avance comparé aux opérations fastidieuses sous Windows). Le principe est simple: on vous propose deux screenshots de sites web, et vous votez pour celui que vous préférez en termes de design. Un peu comme Hot or Not, comme ils disent, mais autrement plus intéressant pour les geekets que nous sommes! Et surtout sans pub...

CommandShift3, Webdesign Battle

Une fois voté, sous les screenshots se dresse la liste des votes que vous avez effectués. On peut consulter le classement selon plusieurs périodes, un peu comme à la Digg, ou encore effectuer une recherche par tags. En parlant de tags, Rémian a parlé récemment du tag cloud de Virb, que je risque d'intégrer peut-être dans le design de ce blog (si jamais je trouve le temps de le refaire). A noter aussi qu'hormis les tags dits "populaires", CommandShift3 effectue une liste très sympa et très originale qu'aucun des annuaires cités en début de ce billet publie: la liste des tags associés aux sites les plus moches, mais aussi la liste des sites les plus plus moches!

L'argumentaire de CommandShift3 est aussi assez marrant: Your clicks are saving the rainforest! Car quand vous restez comme un idiot à seulement cliquer au lieu de faire des tas de choses épuisantes (des choses de gens normaux, comme faire du sport), vous ne produisez quasiment aucune énergie, ce qui fait que vous contribuez au non réchauffement de la planète... A l'heure où j'écris ces lignes, 420817 clics ont été effectués, ce qui équivaut à un réchauffement de la température de la planète de l'ordre de 0.0000000000000000061483003 degrés. CommandShift3 serait-il un geste recommandable par la Fondation Nicolas Hulot?

En vrac: Web 3.0 symbiotique, iPod Touch, Illimythics, iPhone, Yahoo, etc.

Quelques lectures fort intéressantes

Non à la personnalisation des appplications!

Eric Schmidt disait il y a quelques jours que le web 3.0 passerait (entre autres) par des applications de plus en plus personnalisables... Or force est de constater que la personnalisation des applications ne m'inspire pas grand chose. Voilà quelques exemples sur lesquels s'appuyer, représentant quelques cas de figures...

MySpace, le pire du pire?

Exemple de MySpace

Force est de constater qu'il existe de très beaux MySpace, (comme celui de DJ M. Ice) mais la tendance la plus courante est celle d'avoir un MySpace totalement déstructuré, comme celui de Virginie, par exemple (désolé, je n'ai rien contre toi, mais ton MySpace m'horripile) ou celui de Dirty B (qui reste, malgré un MySpace moche, un très bon DJ). Ceci est dû à une chose essentielle: MySpace est très permissif, on oublie très vite que c'est un fleuron du Web 2.0 tant il ressemble à du Web 1.0 voir 0.5 (au passage, on notera que MySpace ne fait plus trop l'actualité sur les réseaux de blogs concernant le Web 2.0)!

Au final on a donc des pages web souvent surchargée (vous n'avez qu'à visiter les deux liens pour vous en convaincre) et déstructurées (donc moches)! De plus, l'ergonomie laisse vraiment à désirer. J'en déduis deux conclusions possibles: soit les gens n'ont pas de goût, soit les gens ne savent pas faire (je pencherais plutôt pour la seconde d'ailleurs). Le problème étant... qu'ils essaient quand même coûte que coûte de faire (et dieu sait que faire du CSS c'est pas évident)!

Tumblr, le changement des couleurs...

J'aime bien Tumblr, les thèmes par défaut sont jolis (un exemple avec le mien). Je ne connais ce service que depuis quelques jours, je n'en ai donc pas visité beaucoup, mais force est de constater qu'il doit bien exister un Tumbleblog avec des couleurs horribles, j'en suis plus que persuadé. En revanche (et c'est une bonne chose), Tumblr se rattrape, car laisser le choix des couleurs ne vient pas déstructurer le contenu comme le fait MySpace, les pages sont donc toujours structurées (encore que il y a une option pour modifier le template en entier, mais j'avais surtout envie de pointer du doigt le choix des couleurs).

Note: J'avais envie de parler d'une autre application personnalisable un peu comme Tumblr, qui ne permettait pas de modifier le template, mais malheureusement, je suis obligé de laisser l'exclusivité à Jennifer, qui soit dit en passant, lui revient de droit!

Twitter, ou le changement du fond d'écran

Personnalisation Twitter

Regardez la vignette. Jusque là, rien de choquant (si ce n'est qu'un fond comme ça ne permet pas une lisibilité optimale, et que les Champs Elysées c'est plus joli quand il fait beau). Visitez-donc maintenant le Twitter de Mary Hodder (je l'ai pris au pif). Vous voyez la belle photo de fond? Si comme moi, vous travaillez dans une grande résolution (1680*1050 pour ma part), le fond se répète, et même si il ne se répétait pas, ça serait moche, voir pire. Et quand saimoche, saimal©!

Facebook... Trop fermé??? Encore que...

Facebook Apps

C'est un des points que j'aime chez Facebook, son côté structuré, simple (comme on peut le lire chez Fabien), centré sur l'information. Facebook n'était donc à priori pas un joyeux bordel comme pourrait l'être MySpace. Tout ça, c'était avant que je découvre les merveilleuses Facebook apps, qui peuvent vite faire dégénérer une page, tant certaines sont moches. Et c'est vraiment dommage ça! Bon, je sais, je suis très exigeant, et je vous autorise à me traiter de pinailleur...

Pownce... Un must?

Pownce

4 thèmes pour Pownce, les couleurs sont toujours bien choisies. Pownce est sexy. On ne peut pas réellement le personnaliser, mais tous les Pownce sont clean. C'est ce que j'aime, quand tous les utilisateurs d'un site sont en harmonie. Et si l'on compare le Widget AIR de Pownce, il est terriblement sexy aussi. Rien à voir avec (pour ceux qui ont testé) TwitterAIR, qui se veut futuriste, mais qui n'a rien de très joli.

Il est à noter que Pownce s'appuie sur un set d'icônes qui a fait ses preuves: Silk, publié par FamFamFam. Mais l'ergonomie est vraiment bien pensée (Tumblr aussi, mais il a encore quelques incohérences)!

Alors la personnalisation?

Je dois vous avouer un truc. Ce billet est parti d'un petit problème que j'ai rencontré en utilisant l'application dont je n'ai pas le droit de parler. Je n'arrivais pas à trouver les bonnes couleurs (et surtout c'était assez mal foutu avec les liens qui sont forcément de la même couleur que la couleur de fond, mais je vous en reparlerai certainement dans un autre billet). Tout ceci pour dire que comme vous l'aurez compris, je ne suis pas un grand fan des applications ultra-personnalisable. Du moins, il faut savoir faire la part des choses, trouver un juste milieu. Pour moi ça passe pas les thèmes. J'aime les choses propres, harmonieuses et je n'aime pas le bordel (cette dernière phrase pouvant surprendre ceux qui ont déjà vu mon apart, j'en conviens). Parfois, j'ai l'impression que la plupart de ces applications personnalisables signent l'arrêt de mort du métier de webdesigner, et que c'est bien dommage...!!!

Note: Un peu de teasing: L'application dont je n'ai pas le droit de parler c'est... Jennifer elle-même qui vous en parlera!