10 ms·

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

68 points by matt1 16y ago

matt1 16y 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 http://news.ycombinator.com/item?id=456471 [2] http://news.ycombinator.com/item?id=810112 http://news.ycombinator.com/item?id=810112 [3] http://news.ycombinator.com/item?id=1114834 http://news.ycombinator.com/item?id=1114834 PS: Make sure you check out the demo.
- ljf 16y 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 16y 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.
- matt1 16y 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.
  - petervandijck 16y 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.
    - matt1 16y ago
      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 16y ago
        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 16y ago
        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 16y 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 16y ago
  PS will not be a better tool until their font rendering is identical to that of the browsers.
- matt1 16y 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 http://www.thestudentroom.co.uk/showthread.php?t=839800 --- I mean isn't that ridiculous?
  - oneplusone 16y 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.
  - jamesteow 16y 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.
    - matt1 16y ago
euroclydon 16y 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.
- matt1 16y 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?
  - euroclydon 16y 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 16y 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 :)
- matt1 16y 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 16y 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 16y ago
    Hooking up to tools your target audience already use (like Basecamp) might be the best solution for team sharing
daleharvey 16y 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.
- matt1 16y 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 :)
- daleharvey 16y 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
  - matt1 16y 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.
bmelton 16y 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.
- matt1 16y 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?
  - bmelton 16y 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 16y 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.
- matt1 16y 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 16y ago
If you’re using Internet Explorer, you need to switch to a different browser No
- matt1 16y 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 16y ago
    Don't bother supporting older versions of IE. However, take a peek at this: http://code.google.com/chrome/chromeframe/ 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 16y ago
      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.
  - bobfunk 16y ago
    Some numbers to back this up. We run http://www.domestika.org 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...
Breefield 16y ago
Oh hey, I have the same webapp. http://www.recurseapp.com http://www.recurseapp.com
- Breefield 16y ago
  Wait, jMockups is way more confusing, nevermind.
  - matt1 16y ago
    Can you elaborate? How is it confusing?
    - Breefield 16y ago
      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.
  - christonog 16y 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.
  - deleted 16y ago
    [deleted]
thasmin 16y 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.
- matt1 16y ago
  Can you email me? (You don't have an email in your profile.) matt@jmockups.com I'd like to get more information.
shadchnev 16y 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
- matt1 16y 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 16y 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.
djbriane 16y 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!
- matt1 16y 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 16y 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 16y 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.
- matt1 16y 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.
jamesteow 16y 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.
- matt1 16y 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?
  - jamesteow 16y 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 16y 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...
foomarks 16y 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 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 16y 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.
  - foomarks 16y 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!
    - matt1 16y ago
      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 16y ago
  Seems like what you're talking about is a baseline grid.
shaunxcode 16y 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.
- matt1 16y 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 16y ago
Really great work matt, very intuitive and I hope you see lots of success with it. How do you plan to monetize ?
- matt1 16y 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 16y ago
Is there a way of drawing tables?, It'd be great if I could do it.
- matt1 16y ago
  That should be doable. Thanks --
serverdude 16y 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.

68 points by matt1 16y ago

matt1 16y 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 http://news.ycombinator.com/item?id=456471 [2] http://news.ycombinator.com/item?id=810112 http://news.ycombinator.com/item?id=810112 [3] http://news.ycombinator.com/item?id=1114834 http://news.ycombinator.com/item?id=1114834 PS: Make sure you check out the demo.

ljf 16y 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 16y 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.

matt1 16y 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.
- petervandijck 16y 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.
  - matt1 16y ago
    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 16y ago
      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 16y ago
        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 16y 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 16y ago
PS will not be a better tool until their font rendering is identical to that of the browsers.
matt1 16y 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 http://www.thestudentroom.co.uk/showthread.php?t=839800 --- I mean isn't that ridiculous?
- oneplusone 16y 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.
- jamesteow 16y 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.
  - matt1 16y ago

euroclydon 16y 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.

matt1 16y 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?
- euroclydon 16y 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 16y 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 :)

matt1 16y 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 16y 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 16y ago
  Hooking up to tools your target audience already use (like Basecamp) might be the best solution for team sharing

daleharvey 16y 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.

matt1 16y 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 :)
daleharvey 16y 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
- matt1 16y 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.

bmelton 16y 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.

matt1 16y 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?
- bmelton 16y 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 16y 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.

matt1 16y 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 16y ago

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

matt1 16y 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 16y ago
  Don't bother supporting older versions of IE. However, take a peek at this: http://code.google.com/chrome/chromeframe/ 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 16y ago
    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.
- bobfunk 16y ago
  Some numbers to back this up. We run http://www.domestika.org 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...

Breefield 16y ago

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

Breefield 16y ago
Wait, jMockups is way more confusing, nevermind.
- matt1 16y ago
  Can you elaborate? How is it confusing?
  - Breefield 16y ago
    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.
- christonog 16y 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.
- deleted 16y ago
  [deleted]

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

matt1 16y ago
Can you email me? (You don't have an email in your profile.) matt@jmockups.com I'd like to get more information.

shadchnev 16y 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

matt1 16y 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 16y 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.

djbriane 16y 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!

matt1 16y 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 16y 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 16y 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.

matt1 16y 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.

jamesteow 16y 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.

matt1 16y 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?
- jamesteow 16y 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 16y 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...

foomarks 16y 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 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 16y 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.
- foomarks 16y 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!
  - matt1 16y ago
    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 16y ago
Seems like what you're talking about is a baseline grid.

shaunxcode 16y 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.

matt1 16y 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 16y ago

Really great work matt, very intuitive and I hope you see lots of success with it. How do you plan to monetize ?

matt1 16y 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 16y ago

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

matt1 16y ago
That should be doable. Thanks --

serverdude 16y 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.