Resources to make your wireframes directly in HTML/CSS

The concept wireframing is a very interesting. By providing a style voluntarily “sketchy” and clearly not finalized at all, they allow customers to focus on the location of the blocks and some interactions and content rather than on details.

Only concerns: making Wireframes takes time. The various tools on the market take time of learning, especially for the establishment of interactions.

The solution I propose today is very simple: make your Wireframe directly in HTML / CSS! This way, you can reuse them for the transition to production, and interactions (page change, small toggles JavaScript .. .) are with web techniques you probably already know. Interested? I let you discover the following resources.

Shireframe

Shireframe is a tool developed using Bootstrap, Angular.Js (for support of simple interactions). Without doubt it is the most comprehensive tool of this list, and it includes many small syntactic sugar that will save a lot of time (<browser-chrome> <p> content </p> </ browser-chrome> allows to create a false window browser such as below, < kitten /> inserts a random chat as a placeholder image,…)

Of course, this syntax will be to remove during production, but I think the game is worth the candle.Shireframe Shireframe example

Booksketch

Booksketch is a simple theme for Bootstrap, and therefore 100% production ready. Once you were able to agree with your client, you just have to submit a basic theme and begin the work!

booksketch Booksketch example

Wireframe

Much easier than the previous two resource wireframe just helps to make its visible divs as if they had been drawn in chalk. Usable with any type of CSS frameworks. It is available in light or dark theme.

Wireframe Wireframe example

Do you like those wire framing tools. Then you will also like our list of 65 UX design tools.

WBD Team

Our excellent WBD team working day and night to put together best content for you.

You may also like...