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.
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.
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
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.
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.
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.
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!
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.
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?
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.
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.
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?
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.
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!
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: [email protected].
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.
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
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.
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.
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.
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.
[+] [-] daleharvey|15 years ago|reply
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.
[+] [-] jamesteow|15 years ago|reply
[+] [-] sandGorgon|15 years ago|reply
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.
[+] [-] matt1|15 years ago|reply
... And if this was an easy task, someone else would have already done it :)
[+] [-] daleharvey|15 years ago|reply
* Put a much nicer looking website for a demo than hacker news, maybe the 37 signals front page
[+] [-] matt1|15 years ago|reply
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|15 years ago|reply
[+] [-] mgkimsal|15 years ago|reply
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|15 years ago|reply
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.
[+] [-] foomarks|15 years ago|reply
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|15 years ago|reply
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.
[+] [-] jamesteow|15 years ago|reply
[+] [-] jamesteow|15 years ago|reply
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|15 years ago|reply
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?
[+] [-] shadchnev|15 years ago|reply
- 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|15 years ago|reply
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.
[+] [-] euroclydon|15 years ago|reply
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|15 years ago|reply
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?
[+] [-] scrrr|15 years ago|reply
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|15 years ago|reply
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.
[+] [-] djbriane|15 years ago|reply
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|15 years ago|reply
There are a lot of mockup tools and they each have their own strengths and weaknesses. If you like jMockups and see its potential please use it and give me feedback on how I can improve it. We'll see where the feedback takes it.
[+] [-] dageshi|15 years ago|reply
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|15 years ago|reply
[+] [-] synnik|15 years ago|reply
I pursued that tool for about 6 months before shutting it down.
You may get a different result, as that was almost 10 years ago...
[+] [-] thasmin|15 years ago|reply
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|15 years ago|reply
I'd like to get more information.
[+] [-] SingAlong|15 years ago|reply
With the Chrome Web Store launching soon, you could consider making this as a chrome extension. You could sell this at a good price to those who want it locally.
[+] [-] petervandijck|15 years ago|reply
I would take the technology (which looks great) and search for a better field to apply it to.
[+] [-] matt1|15 years ago|reply
---
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?
[+] [-] gurraman|15 years ago|reply
[+] [-] shaunxcode|15 years ago|reply
[+] [-] matt1|15 years ago|reply
Also, what's the inkscape alignment you're talking about?
[+] [-] wensing|15 years ago|reply
[+] [-] matt1|15 years ago|reply
Also, since you can share your designs, there's a benefit in letting people create several for free. There's a balance there, but I think 5 is a good fit for light users.
[+] [-] serverdude|15 years ago|reply
[+] [-] paulnelligan|15 years ago|reply
How do you plan to monetize ?
[+] [-] matt1|15 years ago|reply
[+] [-] Breefield|15 years ago|reply
[+] [-] Breefield|15 years ago|reply
[+] [-] nickl|15 years ago|reply
No
[+] [-] matt1|15 years ago|reply
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.