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.
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.
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.
... And if this was an easy task, someone else would have already done it :)
* Put a much nicer looking website for a demo than hacker news, maybe the 37 signals front page
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.
the selection is harder to explain, the canvas can quite busy and its not very easy to know exactly what is selected, the combination with the floating dialog is kinda annoying as well.
but yeh, too busy to give you proper feedback, will email
I almost failed the test because the canvas text didnt render the same
This is my fourth web app, the other three being Domain Pigeon (launched Jan 09 ), HNTrends (launched Sept 09 ), and Preceden (launched Jan 10 ). 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.
PS: Make sure you check out the demo.
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.
For me personally, that isn't a selling point.
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 :)
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.
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.
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
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.
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!
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 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.
and being able to see your selections as you drag for a miltiple selection would be cool too, I think thats part of what I was talking about before with 'feeling nice'
- 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
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.
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.
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?
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.
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.
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.
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.
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?
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.)
Can you make a good looking button? Not as good as Photoshop, yet, but that's definitely on the todo list.
Can you design a logo? No, and no plans for it. You can design your logo in Photoshop or Illustrator and import it into jMockups though.
Can I design a repeating background pattern? No, and no plans for it, other than gradients. But again, you will be able to add the repeating background to your mockup in the future.
You're still going to have to use Photoshop for graphic-intensive tasks. But for designing a site, most people don't need 99% of what Photoshop offers (you might need more because you're a professional wireframer).
I might just be being dense today too.
I'm really trying to understand it, but I just don't.
Now, if it was a tool that helped me create html+css that I could actually use in production, and that would help me quickly create a visual design that looks decent, that would be useful for me.
I 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.
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.
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...
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.
I'd like to get more information.
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.
I would take the technology (which looks great) and search for a better field to apply it to.
Hey, how do I create a grey rectangle with a black line border, on Photoshop CS4?
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 mean isn't that ridiculous?
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.
Also, what's the inkscape alignment you're talking about?
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.
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.
How do you plan to monetize ?
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.
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?
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 email@example.com.
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...