

Ask HN: Review my mockup tool: WireframeSketcher - peter_severin
http://wireframesketcher.com

======
adamhowell
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.

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

~~~
adamhowell
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

~~~
DanBlake
mockflow.com also- A collaborative one

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

~~~
peter_severin
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?

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

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

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

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

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

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

~~~
wallflower
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>

------
duck
What makes your tool better than Balsamiq Mockups?

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

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

------
newobj
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.)

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

------
pierrefar
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".

~~~
peter_severin
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>

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

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

~~~
warfangle
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 ;)

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

~~~
peter_severin
Done :)

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

