
Show HN: Shireframe – Open source declarative wireframing tool for programmers - tsxxst
https://github.com/tsx/shireframe
======
threepipeproblm
I'm going to give this a try. I think it would look a lot better with a bit
less dramatic line waviness.

~~~
vdaniuk
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.

------
gcz92
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
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
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](http://plantuml.sourceforge.net/index.html)

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

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

[http://i.imgur.com/3mWdvGU.png](http://i.imgur.com/3mWdvGU.png)

~~~
tsxxst
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
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
This is absolutely painful to look at.

