Des ressources pour faire vos Wireframes directement en HTML/CSS

Le concept des wireframes est un outil très intéressant. En fournissant un style volontairement "sketchy" et clairement pas finalisé du tout, elles permettent au client de se concentrer sur l'emplacement des blocs et certaines interactions et le contenu plutôt que sur des détails.

Seuls soucis : faire des Wireframes prend du temps, et les différents outils du marché, bien que très simple, demande parfois un temps d'apprentissage, surtout pour la mise en place d'interactions, ou autres.

La solution que je vous propose aujourd'hui est très simple : faites vos Wireframe directement en HTML/CSS ! De cette manière, vous pourrez les réutiliser pour le passage en production, et les interactions (changement de page, petits toggles javascripts, …) se font avec des techniques web que vous connaissez surement déjà. Intéressé ? je vous laisse découvre les ressources suivantes.

Shireframe

Shireframe est un outil développé grace à Bootstrap, Angular Js (pour le support des interactions simples) et Font Awesome. C'est sans aucun doute l'outil le plus complet de cette liste, et il inclut de nombreux petits sucres syntaxiques qui feront économiser beaucoup de temps (<browser-chrome><p>contenu</p></browser-chrome> permet de créer une fausse fenètre de navigateur comme ci dessous, <kitten/> insère une image aléatoire de chat comme placeholder, …

Bien sûr cette syntaxe sera à supprimer lors du passage en production, mais je pense que le jeu en vaut la chandelle.

Booksketch

Booksketch est un simple thème pour Bootstrap, et est donc 100% production ready. Une fois que vous avez pu vous mettre d'accord avec votre client, vous n'avez qu'à remettre un thème de base et commencer le travail !

WireFrame

Beaucoup plus simple que les deux ressources précédentes, WireFrame permet simplement de rendre ses divs visibles comme si elles avaient été tracées à la craie. Utilisable avec tout type de frameworks CSS (ou même avec du CSS nature, d'ailleurs), la seule concession faite à la simplicité est Fonte Awesome (et on ne leur eut voulu pas, FontAwesome c'est trop bien).

Disponible en thème clair ou sombre.