Le wireframe est un outil important pour la conception et le développement de produits et services qui abordent la question des interfaces… Et ils sont nombreux ! Que vous construisiez le prochain service sur lequel toute votre startup va tenir ou que que vous vous attaquiez à la conception d’une application, d’un site, d’une web-app, les wireframes sont très précieux pour réfléchir simplement et avoir une vue d’ensemble.

Ce qui est également intéressant c’est qu’ils sont compréhensibles par tous et qu’ils peuvent être modifiés vraiment rapidement pour s’adapter à la nature collaborative et itérative de la conception de produit, de services. D’une manière ou d’une autre, vous devrez un jour en réaliser, même si c’est sous la forme d’un croquis rapide.

Dans cet ouvrage sont abordés les concepts de base, quel est le but des wireframes, comment vous pouvez les utiliser. Sont détaillés également les nombreux types de wireframes et les différents types d’outils utilisés pour les créer. Enfin, pour les lecteurs plus expérimentés, des explications beaucoup plus poussées notamment pour le mobile.

Le guide ultime pour faire des wireframes

(télécharger le PDF)

Espérons que cela vous sera utile, que vous pourrez aussi élargir votre vision du wireframe, depuis le croquis rapide au système hyper élaboré.




7 commentaires

  1. Merci pour cette source d’information.

    Existe-t-il une solution pour générer un wireframe depuis un site web existant ?

    Je trouve qu’il est toujours plus facile et rapide de designer directement en HTML/CSS que de passer par un wireframe, mais je comprend que ça peut être très utile dans la communication avec clients et d’autres département.

  2. Hello,

    L’article est partiellement intéressant. Il se veut objectif mais l’est finalement assez dangereusement. Effectivement, l’auteur est complétement vendu à la cause de UXPin :). Au début on ne le sent pas trop mais rapidement son ascendant prend le dessus. A prendre avec des pincettes donc.

    Skypol, je ne sais pas s’il existe des solutions pour « générer » des wireframes. Cela pourrait être effectivement intéressant pour travailler sur des améliorations si l’on a pas eu la chance de travailler sur la version précédente d’un site.
    Cependant, généralement comme l’on commence par des wireframes et qu’on les maintient à jour (en même temps que les User Stories) du coup dans la plupart des cas ce n’est pas nécessaire.

    D’ailleurs, il y a un point que l’auteur à un peu oublié dans son article. Certes, avec des produits comme Photoshop on ne peut pas jouer d’interactions. Mais assez rapidement avec Edge Reflow on y arrive (CSS/HTML généré à partir d’un PSD). Je parle de Edge Reflow mais il y en a au moins un autre sur le store d’Apple (dont je ne me rappel pas du nom mais qui apparemment est très bon). J’ai également vu un produit web de Adobe qui permet d’uploader des PSD et d’obtenir en ligne la page en HTML/CSS. Ce qui permet à l’équipe d’intégration d’obtenir les styles à partir des PSD du designer graphique. Évidemment, ces produits ont leur limite en terme de code et doivent être utilisés à bon escient.


Répondre à Geoffrey Dorne Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.