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

http://www.jmockups.com

by matt1 • 16 years ago

68 75 16 years ago

matt126• 16 years ago

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• 16 years ago

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.

scrrr• 16 years ago

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.

matt126• 16 years ago

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.

petervandijck4• 16 years ago

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.

petervandijck4• 16 years ago

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.

gurraman• 16 years ago

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

matt126• 16 years ago

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?

oneplusone• 16 years ago

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.

jamesteow5• 16 years ago

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.

euroclydon2• 16 years ago

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.

matt126• 16 years ago

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?

euroclydon2• 16 years ago

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.

mgkimsal• 16 years ago

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

matt126• 16 years ago

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• 16 years ago

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.

notahacker• 16 years ago

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

daleharvey6• 16 years ago

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.

matt126• 16 years ago

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

daleharvey6• 16 years ago

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

matt126• 16 years ago

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.

jamesteow5• 16 years ago

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

sandGorgon• 16 years ago

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.

daleharvey6• 16 years ago

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.

bmelton2• 16 years ago

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.

matt126• 16 years ago

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?

bmelton2• 16 years ago

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.

wensing• 16 years ago

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.

matt126• 16 years ago

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.

nickl• 16 years ago

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

matt126• 16 years ago

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• 16 years ago

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?

bobfunk• 16 years ago

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

Breefield3• 16 years ago

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

Breefield3• 16 years ago

Wait, jMockups is way more confusing, nevermind.

matt126• 16 years ago

Can you elaborate? How is it confusing?

christonog• 16 years ago

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.

thasmin• 16 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.

matt126• 16 years ago

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

I'd like to get more information.

shadchnev2• 16 years ago

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

matt126• 16 years ago

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.

sgrove• 16 years ago

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.

shadchnev2• 16 years ago

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.

djbriane• 16 years ago

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!

matt126• 16 years ago

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.

SingAlong• 16 years ago

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.

dageshi• 16 years ago

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.

matt126• 16 years ago

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.

jamesteow5• 16 years ago

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.

matt126• 16 years ago

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?

jamesteow5• 16 years ago

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.

synnik• 16 years ago

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

foomarks2• 16 years ago

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

matt126• 16 years ago

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.

foomarks2• 16 years ago

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!

jamesteow5• 16 years ago

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

shaunxcode• 16 years ago

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.

matt126• 16 years ago

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?

paulnelligan• 16 years ago

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

How do you plan to monetize ?

matt126• 16 years ago

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.

mfalcon• 16 years ago

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

matt126• 16 years ago

That should be doable. Thanks --

serverdude• 16 years ago

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.

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

Related Stories