Ask HN: Review my mockup tool: WireframeSketcher | Hacker News Reader

Ask HN: Review my mockup tool: WireframeSketcher

wireframesketcher.com

36 pointspeter_severin28 comments

Man, there are a lot of these "Balsamiq-esque" apps lately.

I've started wondering if it has anything to do with Peldi's financial transparency. People saw what a cash cow it was and decided they wanted a piece.

In my case I've started working on WireframeSketcher roughly at the same time Peldi did. He just was much more successful than me :). You can see that my blog posts go way back to October 2008. So WireframeSketcher didn't start as Balsamiq's copycat but it certainly looks like it now.

To give credits where it's due, the original idea came to me after seeing MockupScreens. I thought that with my Eclipse experience it would be easy to do something like this but better for Eclipse. I was looking for a side project and this one seemed like a perfect candidate to me.

I haven't seen any Mockup-products coming out recently, care to share some links?

Personally I'm not too interested in having IDE integration so...

The way I see it there are 2 classifications. Wireframing tools and then mockup feedback tools.

Wireframing

* Mockingbird (http://gomockingbird.com) - Built on Cappuccino, best designed of the bunch

* Napkee (http://www.napkee.com/) - Flex

* Hot Gloo (http://www.hotgloo.com/) - Just a web app I believe

* Pencil Project (http://www.evolus.vn/Pencil/) - Firefox add-on

* Several more wireframing type apps...

Mockup feedback

* Mocksup (http://mocksup.com) - Make your mockups clickable (Full disclosure, I'm co-owner)

* Notable (http://www.notableapp.com/) - Mark up websites and mockups with comments

* ConceptShare (http://conceptshare.com/) - Same

* Several others that focus on just mockup feedback, not much differentiation

mockflow.com also- A collaborative one

Hi there! I maintain a Twitter list of all the tools I know of: http://twitter.com/balsamiq/wireframing-tools - I hope it helps!

Peldi

mockups is not a disruptive app / service. Even if inspired by Peldi's posts, if another product can take the game up a notch, it should benefit both the founder as well as the cusotmers.

The tour pages are really well put together content wise; When trying to decide if a program is worth a downloading, I usually scan the screenshots page and make a quick decision based on first impressions. Comes across as easy to use but with some nice power features.

The landing page screenshot has been poorly resized however. I'd make that a bit bigger and prettier, and you could even go so far as adding slick little javascript tooltips to explain different tools. Could help your conversion rates maybe? Also perhaps consider using the same shiny green 'Try It Now' button on the bottom of the tour pages, instead of switching to a text link. Small grammar nitpick, 'How it works' is not a question.

Thank you for your feedback. I quickly fixed the text and changed the buttons.

I know that the screenshot is badly resized but couldn't do better. I've used GIMP. What tool should I try?

Yeah gimp does ugly resizing. Python image lib would probably be better, or if you have access to photoshop that works very well of course (bicubic sharpen setting). Or email me the file if you like. :)

Other ideas- I'd make the top blue gradient extend the whole width of the page. If you're going to make your signup buttons with fancy css shadows etc, might as well do the same for your logo text rather than having it in an image. Any reason for the lack of spaces in 'Wireframing&Prototyping'? You've got 'learn more' text in two different formatting styles on the landing page. No need for external links to open in new tabs, your users will be savvy enough to use their back button. I'd consider burying the 'get it free' in the footer rather than by the buying info - perceived value and all that.

I've emailed you the original image. Thanks for looking into it.

I've just started improving the website design and striped headers and footers are next on my list. I need to figure out how to do it with Blueprint CSS. CSS buttons is something that I've added only a week ago. I've used the fancy-buttons plugin for compass to do it.

I've fixed that '&' everywhere. It didn't occur to me that there should be spaces. I've also fixed the links.

I actually thought about placing the "get it free" section somewhere else or removing it altogether. I thought it was a good strategy to acquire as many users as I can.

The Eclipse Update system is horrid (especially when your copy of 3.3 is ancient). Nice work - it is one of the better Eclipse plug-ins I have used.

Some points - since you are hosting this in Eclipse, it seems that you are focusing on developers. Most graphic designers won't touch Eclipse. Also most developers once they experience another IDE (IntelliJ, for example) find it harder to return.

Maybe nitpicky but when I drag an object like a container or button into the screen canvas, it messes with my flow when I get an immediate edit box for the text attribute. I'd rather double-click to edit.

Comparing with Balsamiq, one thing that I don't like about Balsamiq is you can't yet have named groups of items (e.g. all the navigation elements). Being able to have a reusable user-defined library of custom groups - e.g. new "Edit screen for editing Foo in module X" would differentiate mockup tools from the spawn of Visio.

Grouping logically would be the difference between bitmap type editing and Illustrator-type editing. It would be nice to be able to have an outline tree view of elements organized in a hierarchy by UX intent.

I think the update system got better in later versions although there are sill some usability problems and I am not a big fan of it.

I realize that Eclipse is not for everyone. But a plugin for IntelliJ or some other IDE is a completely different product. FWIW there is a "standlone" version of WireframeSketcher that you can get through Yoxos: http://wireframesketcher.com/install_details.html#yoxos

I'll see what I can do about the immediate edit box. Obviously an option for it could be a solution. I'll see if there are more requests for it.

Take a look at master screens. I think it might be what you are looking for. You can reference screens from other screens and create reusable units this way. Changes to referenced screens are propagated automatically.

I plan to add editing inside groups. I think your idea of logical grouping is good. It was actually this issue that was stopping me from adding the possibility to put in Outline the complete contents of a group. Logical hierarchy would give much more appropriate results.

Just tried master screens. Did exactly what you said it would do. Nice feature. Would be nice to have a poor man's layer system where you can quickly toggle the visibility or at least dim the master screen(s) so they kind of become the background/grid.

Suggestion - include some sample screens built to your best practices and a couple storyboards using those screens.

Yes, I've had other requests for dimming masters. For now you can overlay a semi-transparent panel to achieve the same effect.

Better samples, better screencasts - all this is on my list. But like for any coder it takes some great effort for me to spend my time on website/marketing. But I'll get there I promise.

Nice side project. Your investment in the coding really shows off.

In case you did not see Dan Grover's response about the work breakdown on his Etude sheet music iPhone app:

"Were you the only one developing it? How long did it take? Love the app and the video on the webpage, by the way."

"Luckily, I have a precise answer to this because I have this weird habit of tracking every minute of my time on my own projects. Here's the breakdown on Etude in hh:mm

Actual iPhone app: 210:11

Song converter: 72:52

Store (UI + server side): 82:23

Building site and designing marketing materials: 44:52

I did most of the work, but I did contract some of the graphics I had trouble with to a designer, and I've taken someone awesome on board to work with music companies and other "strategic" stuff for the future."

http://news.ycombinator.com/item?id=1196308

What makes your tool better than Balsamiq Mockups?

http://www.balsamiq.com/products/mockups

I target specifically Eclipse users. There are many advantages of having the tool integrated into the IDE: familiar and customizable interface (views, window system), use the same resource management (files, projects), version control.

Feature-wise it's more difficult to differentiate but WireframeSketcher has some distinct features like master screens and storyboarding. There are more subtle differences like the possibility to insert icons in any piece of text which gives a lot of flexibility. Take a look at this blog entry: http://tinyurl.com/yeuo3v4

Speedwise I'd say WireframeSketcher is as close to native speed as it gets considering that it's also cross-platform.

My $0.02 - the mock up on the front page looks like someone trying to design a clunky looking desktop app from the 90's (what's more, designing something that looks like it is at least partially subverting the standard OS File Save dialog) Maybe a more 'relevant' mockup would help (e.g. something suggestive of a webapp, or something abiding by more modern Windows/OSX interface guidelines). Even some of the some of the screenshots on the feature tour page I though were a little more relevant. Or perhaps a rotating carousel or video. A/B test it :) Other than that I think the product is good, I even have a vague recollection of downloading this a while ago when I was looking for wireframers for our team to use. (We ended up not using any tool, fwiw.)

You are totally right. I'll replace this example with something better. Making a good video is next on my list.

Looks good. I couldn't see anything about exporting as (say) HTML? That's one thing I really really really would pay for: I sketch, and the tool exports a basic HTML & CSS template. Probably best used for what you call "Masters".

You can export to PDF. Also take a look at storyboards which let you create something similar to PowerPoint presentations. Those can be exported into a multi-page PDF: http://tinyurl.com/yczskbh

Exporting to, say, XCF or a similar image file format with layers (is there one out there that will work across Photoshop+GIMP?) would be much more useful to a graphic designer than a PDF. PDFs are great for printing and overview, but having wireframes in a layered image file format for your graphic designer would be a huge plus.

You can also do PNG exports. There is batch export that will let you export a set of screens all at once. You'll have multiple files but I am not sure if it's a limitation.

Layers, I think, are more important for individual sections of the wireframe - this allows the eventual visual designer to take portions of the design atomically, leading to greater internal visual consistency throughout the site. It also eases the pain of slicing and dicing ;)

I think the Eclipse integration is a very interesting way to differentiate.

One nit: I'd put a space around the "&" in the page title for SEO.

Done :)

I was looking for this just minutes ago! Will certainly check it out.

Reply on news.ycombinator.com