Show HN: Shireframe – Open source declarative wireframing tool for programmers
1–10 of 12 posts
Re: Show HN: Shireframe – Open source declarative wireframing tool for programmers
#2I'm going to give this a try. I think it would look a lot better with a bit less dramatic line waviness.
Re: Show HN: Shireframe – Open source declarative wireframing tool for programmers
#3I'm going to give this a try. I think it would look a lot better with a bit less dramatic line waviness.
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.
Re: Show HN: Shireframe – Open source declarative wireframing tool for programmers
#4I'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.
Re: Show HN: Shireframe – Open source declarative wireframing tool for programmers
#5I'm going to give this a try. I think it would look a lot better with a bit less dramatic line waviness.
Agree, this effect should be configurable.
Re: Show HN: Shireframe – Open source declarative wireframing tool for programmers
#6It 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.
Re: Show HN: Shireframe – Open source declarative wireframing tool for programmers
#7It 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.
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.
Re: Show HN: Shireframe – Open source declarative wireframing tool for programmers
#8This is absolutely painful to look at.
Re: Show HN: Shireframe – Open source declarative wireframing tool for programmers
#9It renders a bit edgy in Linux (Debian Wheezy), different from the github screenshots:
Re: Show HN: Shireframe – Open source declarative wireframing tool for programmers
#10It renders a bit edgy in Linux (Debian Wheezy), different from the github screenshots: http://i.imgur.com/3mWdvGU.png
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.