Review my Startup: jMockups - A Better Way to Web Design | Hacker News Reader

Review my Startup: jMockups - A Better Way to Web Design

jmockups.com

68 pointsmatt175 comments

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.

There's a lot I dislike about Photoshop but saying that it's terrible for designing websites and applications is slightly exaggerated.

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.

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.

Thanks. I'd love to hear your feedback. You can email me at either matt@jmockups or matthew.h.mazur@gmail.com. That's the kind of feedback I want and need.

... And if this was an easy task, someone else would have already done it :)

some very quick details * the canvas size is fixed, cant seem to be able to expand it * the resize handlers are annoying, selections dont "feel" nice, "feeling nice" is important imo * I didnt see how to define gradients

* Put a much nicer looking website for a demo than hacker news, maybe the 37 signals front page

Interesting -- the canvas size shouldn't be fixed. There's a grip in the bottom right corner which should allow you to resize it. If it doesn't, let me know.

Can you articulate why the selections don't feel nice?

Gradients are possible and also on the todo list. Designing a clean UX to facilitate their creation is tough though. If only there was a tool I could use to experiment with different designs...

As far as the demo site, I'll change it. But today's HackerNews launch day, so it only seems appropriate.

oh sorry, I didnt notice the canvas resize, I think thats more along the problem I mentioned before, it feels like a website a little much, I expect my "canvas" to be centered and on a darker gray bg, as it would be in gimp / photoshop / inkscape / fireworks etc.

the selection is harder to explain, the canvas can quite busy and its not very easy to know exactly what is selected, the combination with the floating dialog is kinda annoying as well.

but yeh, too busy to give you proper feedback, will email

also, whats with the weird feature detection for canvas, why not just send people straight to the demo and use standard canvas detection methods, it can bail out with a message if canvas isnt there.

I almost failed the test because the canvas text didnt render the same

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.

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.

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 :)

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.

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.

Hooking up to tools your target audience already use (like Basecamp) might be the best solution for team sharing

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

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.

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!

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.

Seems like what you're talking about is a baseline grid.

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.

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?

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.

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'

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

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.

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.

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

Just as an aside (I watched your video and was quite impressed, but I haven't used it yet), it might be worth working with photoshop rather than against it. I could imagine your tool being used to rough something out, and being able to export to png/jpg (which you already have) or psd for some more serious editing or to be sent to a web designer. It's not anything I'd worry about in the short term, but it might be a nice differentiator.

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.

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?

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.

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.

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.

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.

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?

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

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

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.

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!

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.

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.

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.

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

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.

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

I'd like to get more information.

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.

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.

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?

No actually. It is the reason Photoshop is number one. It is an incredibly powerful tool because it doesn't try and tell you how to do things. I personally wouldn't do it that way most of the time, but there is situations where that is the best solution.

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.

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

PS will not be a better tool until their font rendering is identical to that of the browsers.

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.

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?

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.

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.

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.

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

How do you plan to monetize ?

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.

Oh hey, I have the same webapp. http://www.recurseapp.com

Wait, jMockups is way more confusing, nevermind.

It'd be nice if your app had a video, demo, more than one screenshot I could play around with prior to signing up. jmockups had something to mess around in to see the value beforehand.

Can you elaborate? How is it confusing?

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.

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

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.

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?

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.

Some numbers to back this up. We run http://www.domestika.org - the largest spanish-speaking community for designers with some.

There we have around 19% using IE and the rest on Firefox, Safari and Chrome.

If you assume that at least some of the IE users would be happy to download Firefox, Chrome or Safari when using a specific tool and you can get at least some more to install chrome frame, the percentage of IE users left means that for this kind of audience it really doesn't make sense trying to work around the limitations of that browser...

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

That should be doable. Thanks --

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.

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?

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.

Reply on news.ycombinator.com