Show HN: Shireframe – Open source declarative wireframing tool for programmers

Show HN: Shireframe – Open source declarative wireframing tool for programmers(github.com)

34 points by tsxxst 11 years ago | 11 comments

I'm going to give this a try. I think it would look a lot better with a bit less dramatic line waviness.

vdaniuk 11 years ago | |

This is an intersting project, and I'll try it too. I agree that pseudo-hand-drawn style is too much, but the xkcd style of waviness is great for prototypes, it immediately communicates to all stakeholder that the sketch/ui mockup is not a finished product. This is a small, but important nuance when working with clients and in large teams.

sago 11 years ago | |

I agree, the Balsamiq-style sketching is cliche now, and isn't very well implemented in this case. A clean wireframe that doesn't pretend it was handdrawn, and good typography, would be much better.

I couldn't use this as is, unfortunately.

tsxxst 11 years ago | |

Agree, this effect should be configurable.

gcz92 11 years ago |

It would be super easy to convert this to html if you wanted to because the format is so similar. But also, at this point, wouldn't it just be easier to just write it in HTML and make the actual product or use a framework like bootstrap? Im just struggling to see the value add. Maybe there is something I am missing. Would love to hear your reasoning and what led you to create this.

tsxxst 11 years ago | |

You actually create wireframes in (angular- and bootstrap-enhanced) HTML with Shireframe. And yes, you can reuse some of the code when creating actual product.

I'm not really into graphics editors and enjoy writing code much more. The goal for me was to simplify creating wireframes with code by having a set of predefined "sketchy" styles and several ready-to-use UI widgets and shortcuts for common layout patterns/classes so I don't have to create and type them in from scratch for every new wireframe.

This already saved me a number of hours as I'm creating some wireframes on how a future product at my company will look like.

oxplot 11 years ago |

This is great for the exact purpose it was made. We need more tools like this. Some that I've used and liked in the past: PlantUML [1] and ditaa [2].

[1]: http://plantuml.sourceforge.net/index.html

[2]: http://ditaa.sourceforge.net/

geoka9 11 years ago |

It renders a bit edgy in Linux (Debian Wheezy), different from the github screenshots:

http://i.imgur.com/3mWdvGU.png

tsxxst 11 years ago | |

Thank you for feedback!

This is exactly how browsers render SVG filters currently, and it looks the same edgy on my non-retina Mac too...

And that's why I've included a separate script (make-screenshot) which uses PhantomJS and ImageMagic to render high-quality hi-res version of your wireframe. I used that to produce screenshots for github readme.

Another option is to try zooming-in a bit in browser, like to 125%, this way it looks a little bit better imho.

beberlei 11 years ago |

This looks super helpful! Thank you for this project.

I agree with other commenters, it could be a little less wavy, but to be honest I don't care much if this works, after all its just a wireframe.

mcmillion 11 years ago |

This is absolutely painful to look at.