

Review my Startup: jMockups - A Better Way to Web Design - matt1
http://www.jmockups.com

======
daleharvey
I completely disagree with everyone else, I believe there is a large market
for tools like this. Adobe make a lot of money from photoshop and I personally
along with most web designers I know are dissatisfied with photoshop and its
alternatives, they are are terrible tools for designing websites and
applications.

I think it needs a lot of polish, your application is designed like a website
itself, dont have a footer, reduce the size of the header etc, make the
"canvas" more obvious etc. I dont have time to do a proper critique right now,
but the next time I need to design something I will make sure to write it all
down and send it along

(I think you should rethink the name as well, jAnything just makes me things
its some jquery plugin)

Awesome work so far, dont be disheartened if all the feedback isnt sunshine
and roses right now.

~~~
sandGorgon
Photoshop's power = macros and actions (IMHO there are commercial outfits
producing actions for Photoshop)

I have yet to see a web based design tool that has a good macro system - even
basic ones (like auto align, increase/decrease font size, etc.) are missing

It's like telling someone who uses emacs to go and use gedit.

~~~
daleharvey
I have very very rarely used photoshop macros.

Obviously power users will be hard to make switch, however there is a whole
lot of people paying for "less powerful" code editors because they have a much
lower barrier to entry and do the things way want to do better, bringing up
textmate vs emacs at least to me strengthens the argument.

------
matt1
jMockups is an HTML5-based web app that lets you create and share high
fidelity website mockups. A lot of folks use Photoshop to do this, but
Photoshop is hard to use, lacks common HTML elements, and makes it non-trivial
to share your designs and get feedback. Long term I want jMockups to be not
just a tool for designing your site, but a tool that helps you design it well
(including built in grid systems, an extensive widget library, etc).

This is my fourth web app, the other three being Domain Pigeon (launched Jan
09 [1]), HNTrends (launched Sept 09 [2]), and Preceden (launched Jan 10 [3]).
Being a developer more than a designer, I spent an endless amount of time
designing each of them, which is one of the major reasons I created jMockups.

Check it out and let me know how I can make it better--it's something that I
hope you can all use with your sites as well.

[1] <http://news.ycombinator.com/item?id=456471>

[2] <http://news.ycombinator.com/item?id=810112>

[3] <http://news.ycombinator.com/item?id=1114834>

PS: Make sure you check out the demo.

~~~
ljf
Going to have more of a mess around with it tonight, but like what i see so
far. Only thing I would change is to make it clear from the off that there is
a free version/trial - just to get people in quickly.

------
mgkimsal
I gotta say, I'm impressed. Couple of things that I see missing that might
make me want to pay...

1\. Team sharing 2\. Feedback - allowing someone with a password to come in
and lay comments around on the screen.

I think there _is_ a market here, but as someone else pointed out, it might be
a shorter term market to make something like this but customized for, perhaps,
joomla. If this tool had knowledge of a particular system, and would allow me
to create a 'joomla' layout specifically, I think you'd have a big winner
here. Then expand to things like mojoportal, etc.

Go for platforms where there's not a huge community already (basically - not
wordpress) and offer something useful to those communities that may not get a
lot of attention from designers.

All in all, a lot of potential - great work :)

~~~
matt1
Thanks.

Team sharing and overlayed comments are great ideas and definitely something I
want to implement in the coming weeks.

Exporting the mockup to HTML or to a template is possible but very difficult
to get right. I'm going to wait and a few months and see how the core mockup
product works before venturing into that arena. We'll see where the feedback
drives it.

~~~
Travis
hey matt. I tried an earlier version and think you're on to something. Wanted
to chime in and say that I doubt export to HTML will be a huge feature. Most
of the people using a tool like this are going to want to write their own HTML
(I would think). I've never seen an HTML generator I respect, and I'd imagine
most of the designers in your target niche are similar.

OTOH, having it cut out the major divs that I'm using to scaffold my own code
would be both useful and simpler to implement.

------
foomarks
I love where this is going. One thing that I would like to see included, which
is absolutely essential for the way I design website is line-height: it is the
core structure of my design and layout. (Read more about line-heights and
vertical rhythms here: <http://24ways.org/2006/compose-to-a-vertical-rhythm>)

At this moment in time I feel trapped using Adobe products to produce my
layouts. If jMockups solves the following problems in priority, I will make
the switch!

1\. Render fonts accurately 2\. Render line-heights accurately 3\. Better
drawing path tools

~~~
matt1
Thanks.

Can you elaborate on the font rendering? Does it not currently do it
correctly?

Line-heights: Good idea. Will do.

Drawing path tools: give me an example of how you would use this.

Stay tuned.

~~~
foomarks
Font rendering: I realize jMockups might only render "web-safe" fonts. But I
would love to see an iteration that incorporates any typeface shared between a
team of designers who have fonts locally stored. I have made attempts to
switch to Inkscape, but it's inability to render different type formats is
what is holding me back from using it.

Drawing path tools: This would be handy if I needed to create arrows and
icons. I suppose I could draw them and import them as images; however, it
would be really nice if I can draw them in directly!

~~~
matt1
There's some hacks for detecting which fonts are available on your computer,
so I could, in theory, let you use any of them. And since the product is an
image it wouldn't matter if the person you shared it with didn't have it. I'll
see what I can do.

------
jamesteow
My background is visual design and I've worked at a couple agencies in NY/SF.

I think this site does a couple things pretty well: \- Really easy to
implement Q+D ideas \- Linking to images online in a great idea.

Why I wouldn't use it (Just going to focus on my big deal breakers):

\- Where I start to think this breaks down is working with a lot of layers. In
Photoshop I can group things together into layer folders and either drag all
layers at once, delete them all at once, or lock them so that I don't
accidentally drag them. In here, I don't have that option. I know you can use
the mouse tool to drag a marquee that selects multiple objects but at a
certain point that isn't a great option, such as if I want to keep the
background container but not the foreground content.

\- Keyboard Shortcuts: This is something that most professional designers use
as it speeds up the process tenfold. Keep in mind that designers have been
using said shortcuts for years so by changing it up (so that I have re-learn
new shortcuts for the same functions) or not having them at all is a very
large dealbreaker.

\- I don't like the element adjustment menu that follows me whenever I click
an element. I prefer having tools docked to the side so I can view the canvas
purely even I'm clicked on something.

~~~
matt1
Hey James, appreciate the comments.

I have mixed feelings about layers. In an elaborate design I understand how
they're useful, but for most website mockups I think you can get by without
them. You can, for what its worth, lock elements currently with jMockups (see
the property inspector), which might be a good middle ground.

The editor currently supports most of the standard keyboards you'd expect from
an app (Ctrl+S/A/Z/Y) with the main exceptions being Copy and Paste, which I'm
working on. I'm open to adding as many more as people find useful. Let me
know.

Regarding the property inspector: Depending on what direction I take with the
width of the canvas, I could add an option for docking it to the left or right
of the canvas. What do you think?

~~~
jamesteow
Thanks for the response.

I think a good portion of designers who use Photoshop use more shortcuts than
standard user. M for marquee. U for shape. Command + Click on Object and move
to duplicate the object. Space for hand tool. In other words, every tool has a
shortcut so that it's easier to access and in fact, I barely use tool menus
except to edit values. It's just so much more efficient to use keyboard
commands than to click on every single element.

Docking the property inspector to the left or right or allowing the user to
customize it would be a great option.

I still think layers provide a lot of power that's really useful (layer
styles, easy to switch which object appears over what, easy to create multiple
states) but I'll defer to you since this is your vision for the project.

~~~
daleharvey
I just wanted to echo the feature request, layers (and nested layers at that)
would be a huge huge feature for me, thats pretty much why I dont use gimp.

and being able to see your selections as you drag for a miltiple selection
would be cool too, I think thats part of what I was talking about before with
'feeling nice'

------
shadchnev
I stumbled upon this when I about to draw a wireframe for a new project on
paper, so I decided to give it a try. Here's my comments, as I'm creating the
mockup:

\- it's usable. Probably easier than Photohshop to throw together something
quick and simple

\- There's no way it's going to replace Photoshop anytime soon since I need a
many more tools to get a real design done but it works for mockups.

\- <strike>I don't get why the height is limited. My canvas is very wide (24
inch display) but only about 50% of the available space</strike>. Already
found out from the comments how to resize

\- it's hard to position elements exactly: it behaves differently from
Photoshop near the guiding lines, which takes time to adjust to

\- can't do ctrl-c, ctrl-v to duplicate objects. Again, it's a pattern I'm
used to

\- when the number of objects becomes large and overlapping, the list of
layers will be useful probably. Or, I'll move to photoshop for anything
complicated anyway

\- when I hold the shift key down, I expect the element to move much quicker
(I guess Photoshop does it this way)

\- I cannot make only part of the text underlined. If I have a piece of text
with some links in it, I'm forced to create individual elements for all links

~~~
matt1
Your comment on the width is well-received. I doubt many people are going to
use this to create a mockup wider than 960px, so when I implement the grid I
think I'm going to limit its width. I'd appreciate everyone's thoughts on
this.

Ctrl C/V : Will do.

Re layers: Can you give me an example (share your mockup link) where that
would be useful? I worry that it would complicate things more than they need
to be.

Can you elaborate on the shift key? How does that work?

Eventually I'd like to implement a rich text feature where you can format the
text however you want. Currently, as you noted, an element's font applies to
all the text within it.

Thanks for the feedback. Keep it coming.

~~~
shadchnev
I didn't create the mockup complicated enough to use the layers but for a real
pixel-perfect design they are a must, in particular the ability to show/hide
them individually. However, they would probably overcomplicate this product,
I'd keep it simple.

Re: shift. When I press an arrow key, the object moves a pixel or two. If I
need to move it 100px to the left, I have to either wait a bit or press the
button too many times. If the step was changed to 10 or 20px if shift is held
down, it'd be easier to move objects.

~~~
matt1
I like the shift idea a lot -- you can expect to see it implemented soon.

------
euroclydon
I agree that this market simply doesn't exist, and never will.

The site and technology looks nice however. You should use what you've wrote,
plus your skills, and quickly transition this application into a drop in
designer replacement for some existing, popular application who's designer
sucks. Believe me, there are plenty of candidates; they may be buried behind
firewalls, or in niche industries, but they exist. I know, I've made a living
doing this.

You need a new Ask HN thread, soliciting members to expose you to an
application they use every day, which could use a new kick-ass design tool. It
may even be some propitiatory small-run, expensive-license product, but if you
can get access to it, and show that your designer can be a huge productivity
enhancer, you could sell it to the vendor for some good money plus consulting.

~~~
matt1
What market do you think I'm going after?

If you design web apps, for example, you can (or will) benefit from jMockups
because it makes it easy to design and get feedback on your app before you
write a single line of code. And once you can link the mockups together (todo
list), you could essentially prototype an entire app and get feedback on it
with only a few hours of work. How's that for a minimum viable product?

~~~
euroclydon
I design web applications using so many different third-party toolkits, like
jQuery UI, little drop-in animation scripts, dynamic CSS, and often run them
in existing platforms. I think most other people do as well. I simply would
never achieve a "pixel perfect" representation of what I would deliver, or
even close to it, using your tool.

That's why strict Photoshop templates exist, and why mockup tools are cartoony
on purpose, because the customer _has_ to know it's only a spiritual
representation of the deliverable, or else the real thing. I can do neither
with your tool.

[Edit] I've completely replaced design tools that were a component of
lucrative applications in the pharmaceutical and electrical industries. If
someone were to have a made a presentation to the right people, showing what
you have, they probably could have walked away with a contract worth $300K.
I'm just trying to give you some advice here. If this product doesn't take
off, consider trying to re-purpose it for some staid industry.

------
scrrr
Another mockup app? Oh, well. But jMockups is nicely done.

Personally I'd like a feature to export to PDF and/or PPT and a print-view
(which automatically takes care of the PDF-export).

The Popup-Controls are well-done, but I'd like to use cmd-c an cmd-v to
duplicate instead. Images should be upload-able.

~~~
matt1
Most other mockup apps focus on creating low-fidelity (sketched) mockups,
whereas jMockups focuses on creating ones that look like the real thing. It
fits somewhere between Balsamiq and Photoshop.

I hear you on the Copy/Paste. I want to make it so that it works across
browser tabs, which is a bit tricky, so I put it off until after the launch.
Thanks for the feedback.

~~~
petervandijck
The question is: is there a space to be filled between Photoshop and Balsamiq?

In fact, there is one, it's detailed wireframes. It's not pixed-perfect html
mockups, sorry. I think you've chosen a market that doesn't exist here, I
can't imagine anyone actually using this in their work.

~~~
matt1
I don't mean somewhere between low fidelity and high fidelity (medium
fidelity?). I mean taking the best of Balsamiq (easy to use) and the best of
Photoshop (high fidelity) and combining them into one powerful, easy to use
web app.

You and I have discussed detailed wireframes via email, and that's not the
direction I want to go with this. If it helps, compare it to Photoshop in
terms of its ability to create and share mockups. What key features does
Photoshop have that jMockups currently doesn't?

~~~
petervandijck
In Photoshop I can make something look good, I don't get the feeling that I
can do that in jmockups. No layers, no visual design (buttons, logos, ...). I
really don't understand where this would fit into a workflow, I'm trying to
but I don't get it...

Are you trying to replace Photoshop for web design? Can I design a good-
looking button with the app? (I didn't see how to.) Can I design a logo? (I
didn't see how to). Can I design a repeating background pattern? (etc.)

~~~
matt1
_Are you trying to replace Photoshop for web design?_

Somewhat, yes.

 _Can you make a good looking button?_ Not as good as Photoshop, yet, but
that's definitely on the todo list.

 _Can you design a logo?_ No, and no plans for it. You can design your logo in
Photoshop or Illustrator and import it into jMockups though.

 _Can I design a repeating background pattern?_ No, and no plans for it, other
than gradients. But again, you will be able to add the repeating background to
your mockup in the future.

You're still going to have to use Photoshop for graphic-intensive tasks. But
for designing a site, most people don't need 99% of what Photoshop offers (you
might need more because you're a professional wireframer).

~~~
petervandijck
I don't understand it. So you'll still have to use Photoshop. And you still
have to redo the html from scratch. In what step in the web development
process do you need pixel-perfect html that's not a Photoshop file and that's
not a final html design? I just can't imagine any place I've ever worked using
this for actual work, I just don't see a need for pixel-perfect yet not
designed throw-away html mockups.

I might just be being dense today too.

I'm really trying to understand it, but I just don't.

Now, if it was a tool that helped me create html+css that I could actually use
in production, and that would help me quickly create a visual design that
looks decent, that would be useful for me.

------
djbriane
I think its a good idea, there is definitely room for a mock-up / wireframing
tool that exists outside of Photoshop or other desktop apps. Unfortunately for
you there are several other options on the market right now that (so far) are
much better. For example, Balsamiq mock-ups has a web based product that has
most of the capabilities of your product with a more polished design (granted
its Flash based but not sure thats a differentiator).

I do like the fact that you are doing it in HTML5, and your browser test is
pretty ingenious (although would be nice if it wasn't necessary through
browser detection).

Keep it up, always room for a better tool for designing!

~~~
matt1
Appreciate it.

There are a lot of mockup tools and they each have their own strengths and
weaknesses. If you like jMockups and see its potential please use it and give
me feedback on how I can improve it. We'll see where the feedback takes it.

------
dageshi
I like this but personally it still doesn't do quite what I want. I want
someone who understands colour schemes + fonts, what goes together and what
doesn't to create a prepackaged template that I can plug into your app. Then I
can shift the text around, put fields where I want em like I would if I were
doing an iphone screen ui. Then hit export, export it as html/css so I can
start plugging the code into it.

Oh and sell each template as a one off fee, I would pay $24 as a one off for
access to template+tool I wouldn't pay it monthly because it's too big a
commitment for a tool I know I wouldn't use that regularly.

~~~
matt1
Great ideas. If you're a designer and would like to help create great color
palettes and templates for jMockups, you should email me: matt@jmockups.com.

------
synnik
I wrote a similar tool in 2001, and had a tough time with it. My findings at
the time were that there were 2 crowds: One who wanted an entire template laid
out for them, and another that was willing to design everything from scratch.
For the first crowd, tools like this are still too much. For the 2nd crowd,
they had no resistance to just learning HTML and CSS, so they didn't care for
the tool either.

I pursued that tool for about 6 months before shutting it down.

You may get a different result, as that was almost 10 years ago...

------
thasmin
My screenshot and canvas don't match, but I'm running Chrome. Same thing
happens in Firefox, so it's probably the OS. I'm running Windows XP with two
LCD monitors. ClearType was off so I turned it on, and that seems to have
fixed it.

There's a bug when selecting items with a box when the cursor leaves the
canvas. It would also be nice to set a new default font.

I was looking for a good web page mockup tool last weekend, but couldn't find
one. I know HTML though and went with a good editor.

~~~
matt1
Can you email me? (You don't have an email in your profile.) matt@jmockups.com

I'd like to get more information.

------
SingAlong
This is an awesome.

With the Chrome Web Store launching soon, you could consider making this as a
chrome extension. You could sell this at a good price to those who want it
locally.

------
petervandijck
Very nice technology. But I think you've chosen the wrong domain. I don't
think there's a big (or even small) market in doing "pixel-perfect mockups".
We have Photoshop for that, which (frankly) provides better tools than yours.

I would take the technology (which looks great) and search for a better field
to apply it to.

~~~
matt1
I found this quote while researching how to do something with Photoshop. Your
post made me think of it.

\---

Question:

Hey, how do I create a grey rectangle with a black line border, on Photoshop
CS4?

Answer:

I would just create two layers, one black, one grey, and then use the select
tool to select most of the black one (leaving a border) and then delete it

<http://www.thestudentroom.co.uk/showthread.php?t=839800>

\---

I mean isn't that ridiculous?

~~~
jamesteow
It's ridiculous because it's the worse advice.

Create a rectangle object.

Step 1: Select the rectangle tool

Step 2: Draw the rectangle and edit color.

Step 3: Double click on the layer to open Edit Layer Style

Step 4: Select stroke and edit size, and color.

Done. I could do that in less than 20 seconds.

~~~
matt1
The fact that we're even arguing it is what makes it ridiculous :)

------
shaunxcode
I think this is pretty cool - I was immediately trying to see what the
exported markup looked like though and then watched the video and realized
this is not your intention. It would be nice to be able to group and nest
elements. Also basic alignment features ala inkscape would go a long way.

~~~
matt1
Hey I know you! Hit me up on Skype or GMail and we'll catch up.

Also, what's the inkscape alignment you're talking about?

------
wensing
I think you're giving away too much for free. How about 1 mockup for free, not
5. Or how about you just let me pay you $x for 3 months of usage (which will
coincide with Project Y that I'm working on). If you let me do 5 mockups for
free there's not much incentive for me to pay.

~~~
matt1
The Pro plan will eventually include additional features which the Free plan
doesn't have.

Also, since you can share your designs, there's a benefit in letting people
create several for free. There's a balance there, but I think 5 is a good fit
for light users.

------
serverdude
Damn! Only yesterday I bought the balsamiq :) I checked your stuff briefly but
did not get a chance to play around. I definitely think there is a market for
this.

------
paulnelligan
Really great work matt, very intuitive and I hope you see lots of success with
it.

How do you plan to monetize ?

~~~
matt1
Gracias. There's currently a plan which lets you create up to 5 mockups for
free and there's also a Pro plan which lets you create up to 200 for $24/mo.
Lots of other ways to monetize down the road depending on how the cookie
crumbles.

------
Breefield
Oh hey, I have the same webapp. <http://www.recurseapp.com>

~~~
Breefield
Wait, jMockups is way more confusing, nevermind.

~~~
matt1
Can you elaborate? How is it confusing?

~~~
Breefield
Well, I initially thought it was a webapp where you upload images of your
mockup (something you designed in photoshop) to share with your clients.

But then I realized you're supposed to use your arsenal of tools to edit the
page, at which point I'm thinking "is this just loading an existing page and
letting you edit it?"

But then I went back and watched the video and now I see that it's straddling
this awkward middle ground. You use the term "mockup," rather than "wireframe"
– and you're concerned with it being "pixel perfect." So if a design were
going to integrate this into their workflow they wouldn't even touch
photoshop? They'd go straight to jMockups and make their website there, after
which point they can export a PNG to reconstruct in HTML & CSS? It just seems
unintuitive, as most designers start by creating this png (or psd) in
Photoshop.

Lemme know where I'm wrong.

------
nickl
If you’re using Internet Explorer, you need to switch to a different browser

No

~~~
matt1
Internet Explorer (at least through v8) don't support the canvas tag, which
jMockups is built on. Most web developers and designers don't use IE, so I
don't think I'm giving up too much by not supporting it.

Plus, you can share your mockups with anyone regardless of their browser so it
shouldn't be an issue for most of the target audience.

~~~
karanbhangui
Don't bother supporting older versions of IE. However, take a peek at this:
<http://code.google.com/chrome/chromeframe/>

Edit: also, great job on the app. Branding could use some work (i.e. the name)
but I think this is well beyond my expectations. I was about to pay for a
balsamiq license today, but I'd rather have this. Any idea for license costs?

~~~
matt1
The Google Chrome engine looks great, but I imagine most of the people who
understand why its important are already using one of the other browsers.
Regardless, I'll check it out--thanks for the pointer.

Naming it was tricky. Originally I was going to use leandesigns.com, but the
name was trademarked. The j jMockups is for JavaScript (think jQuery).

As far as price, jMockups is free for up to 5 mockups and $24/mo for up to
200.

If you have any questions you can contact me at matt@jmockups.com.

------
mfalcon
Is there a way of drawing tables?, It'd be great if I could do it.

~~~
matt1
That should be doable. Thanks --

------
bmelton
I played around with this, and I'll tell you where I have problems. It's
similar to the thing in AI where if you model a character as cartoonish,
people's subconsciouses will fill in the blanks, making the characters
appealing -- but if you get 'too close' to actual, then the brain only sees
the flaws, and it makes the characters seem creepy.

I feel that same thing here, where you're using actual HTML input elements,
and actual page items, but without being able to repeat a background, and
without being ACTUAL html. I only see the flaws.

Balsamiq works best for me because frankly, I'm not going to use the browser's
default HTML elements anyway, unless I've styled them at least a little bit.
So the 'cartoonish' rough markups you are striving to improve upon are really
features to me.

That said, I don't think there's no market -- I'm sure the idea will appeal to
some, but I don't know that the pixel-perfection is particularly a value add
for me, it's just a different choice, and (for me) not paying any extra for.

~~~
matt1
Imagine there being a toggle button on the toolbar that switches your mockup
between low and high fidelity. Would that be something you're interested in?

~~~
bmelton
Honestly, I don't know. I mean, I think the market is for people who aren't
put off by the high fidelity being somewhat limited still, or who like
Balsamiq, but for some reason hate sketch graphics. I dunno.

For me personally, that isn't a selling point.

