Des ressources pour faire vos Wireframes en HTML ou en CSS

Le 14/04/2015

Dans Webdesign

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

Cependant, 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 nous vous proposons aujourd'hui est très simple : faites vos wireframes directement en HTML ou en CSS ! De cette manière, vous pourrez les réutiliser pour le passage en production et les interactions (changement de page, petits toggles JavaScript…) se font avec des techniques web que vous connaissez surement déjà. 

Intéressé ? On vous laisse découvrir les ressources suivantes.

Shireframe

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.

Par exemple <browser-chrome><p>contenu</p></browser-chrome> qui permet de créer une fausse fenètre de navigateur comme ci dessous et <kitten/> insère une image aléatoire de chat comme placeholder. 

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

Booksketch

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

WireFrame

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). Le seul point plus complexe est Font Awesome.

Cette ressource est disponible en thème clair ou sombre.