iPad est le nouveau meilleur ami du webdesigner

Quelques ressources inattendues pour le wireframing

Un tutoriel sur le wireframing sous Illustrator

Moi qui pensait être le seul à faire mes wireframes et mes maquettes sous Illustrator, Adobe me démontre le contraire en sortant carrément une vidéo dédiée sur le sujet.

A l’occasion je ferai probablement un article avec mes propres astuces pour faire des maquettes et des wireframes efficacement sous Illustrator…

Un blog dédié au wireframing

Découvert il y a déjà quelques temps, grâce à Frédéric : un blog complètement dédié au wireframing

On y trouve à la fois des exemples, des logiciels, des templates et autres librairies de composants. Comme d’habitude d’ailleurs, beaucoup de modèles existent uniquement pour Omnigraffle. Ce logiciel renommé pour faire des wireframes, entre autres, n’existe malheureusement que sur Mac.

Un outil pour faire des wireframes volontairement « moches »

Les auteurs de ce blog sont visiblement sponsors de Balsamiq Mockups que je connais bien pour avoir travaillé avec chez Dismoioù. C’est un outil original dans la mesure où il se base sur des composants prêts à l’emploi que vous n’avez plus qu’à disposer (boutons, champs de saisie, listes déroulantes, zones de texte, images, onglets…) et qui ont tous l’air d’avoir été dessinés à main levée (et encore en étant un peu atteint de parkinson).

Le genre de wireframe que l'on peut réaliser avec Balsamiq Mockups : ça ne vous rappel rien ?...

Il existe d’autres outils délibérément contraignants qui imposent de n’utiliser que des formes préétablies et dont le rendu est volontairement peu réaliste. Cette démarche qui se généralise est intéressante car elle répond à deux besoins très courants :

• D’abord le besoin pour les décideurs non-graphistes (responsable marketing, chef de produit…) de pouvoir transmettre leurs idées sans avoir à maîtriser Photoshop ou utiliser des outils peu adaptés comme Powerpoint.
• Ensuite le besoin pour les designer eux-mêmes de pouvoir travailler sur l’ergonomie et le scénario d’usage d’une ou plusieurs pages d’un site sans que le travail soit parasité par des questions purement graphiques ou esthétiques.

Dans le second cas l’avantage pour le designer est notamment de pouvoir avancer progressivement sur un travail de conception en posant des bases solides petit à petit. Il est souvent périlleux de vouloir faire valider un design en proposant directement une maquette graphiquement aboutie, car rien ne garanti que la composition et le contenu de la page sont bons, or si ces éléments changent il est probable qu’une grande partie du travail soit à refaire…

Du papier et un crayon…

Comme certains outils essayent de vous permettre de réaliser des wireframes qui ont l’air d’avoir été fait à la main, pourquoi pas essayer de les faire directement avec un bon vieux crayon et du papier ?

On aura beau dire, même si vous dessinez très mal et que vous êtes perdu sans une souris, commencer par faire quelques essais à la main est très souvent une bonne idée. Les gens qui sont réticents à cette pratiques argumentent souvent qu’ils trouvent l’inspiration en manipulant leur logiciel favoris (Photoshop of course). Mais comme j’en ai déjà longuement parlé, c’est une fausse bonne idée, voilà pourquoi :

• un bon design de site web commence par un bon concept
• un bon concept ne nait pas dans Photoshop, mais dans le cerveau d’un être humain
• les meilleurs outils pour accoucher d’un bon concept restent (encore aujourd’hui !) un bloc de papier et un crayon

Et oui, le challenge quand on part de rien n’est pas d’avancer le plus vite possible dans un processus créatif, mais d’être sûr d’arriver !

Ebauches papier de quelques sites (très) populaires

Si vous doutez encore de l’intérêt d’utiliser un crayon, allez jeter un coup d’oeil sur cet article de Deeplinking qui montre les premières ébauches de quelques un des sites les plus populaires du Web tels que Flickr, Twiter ou Vimeo !

Comme quoi les meilleurs idées se conçoivent simplement…

Première ébauche de la page d'accueil de Twitter

Là où tout commence… Dans le néant !

Je cherchais une bonne façon de démarrer ce blog. Quel en serait le premier post ?

Dans un esprit cartésiens, j’envisageais de lister les différentes étapes d’une sorte de méthode pour partir d’un besoin et aboutir à un site fini – en fait plutôt un ensemble de règles pragmatiques que je fini par appliquer assez systématiquement. Cette idée se révélait rapidement assez foireuse… Le but du format « blog » est, pour moi, de pouvoir distiller mes idées au fil de l’eau. Si elles étaient déjà bien structurées et ordonnées j’écrirais directement un bouquin…

Ainsi, laissons tomber le côté « Grand Un, petit A : le B-A-BA de la prise de brief » et tentons une approche plus concrète. Par contre, j’aime bien quand même la tournure « contre exemple » que prennent les choses… La bonne façon de faire apparaît souvent quand on réalise qu’on s’embourbe dans la mauvaise.

C’est donc par la que je vais commencer, par la hantise du Webdesigner qui fini (ou plutôt commence) par se voir, à tort, comme un artiste : le vide ! J’entend par là le moment où il va se lancer dans l’arène et devoir prendre en main un  projet de design de site Web.

Pour ne pas parler dans le vide justement, je vais profiter d’un article sur lequel je suis tombé aujourd’hui grâce au blog SimpleEntrepreneur : Web Design is a Journey

read more