Show HN: Shireframe – Open source declarative wireframing tool for programmers (opens in new tab)

(github.com)

34 pointstsxxst10y ago11 comments

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.

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.

sago10y 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.

tsxxstOP10y ago

Agree, this effect should be configurable.

gcz9210y 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.

tsxxstOP10y 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.

oxplot10y 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/

geoka910y ago

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

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

tsxxstOP10y 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.

beberlei10y 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.

mcmillion10y ago

This is absolutely painful to look at.

j / k navigate · click thread line to collapse

11 comments

threepipeproblm10y ago

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

vdaniuk10y ago

sago10y 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.

tsxxstOP10y ago

Agree, this effect should be configurable.

gcz9210y ago

tsxxstOP10y 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.

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.

oxplot10y 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/

geoka910y ago

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

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

tsxxstOP10y 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...

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

beberlei10y 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.

mcmillion10y ago

This is absolutely painful to look at.

j / k navigate · click thread line to collapse