A while back I posted about this design tool I've been working on. I've made some progress since then and I'd love to hear some feedback.
The goal is to provide a a simple workspace where designers can brainstorm and build clickable prototypes quickly and easily.
Awesome, good to see you've made progress! I'll give it a whirl.
Really excited to check it out. Super slammed today but I'll try and record my first impressions this evening =]
Awesome mate, looking forward to it!
Congrats Colm! Looking forward to trying Plexi out. Was digging what I saw of 'Design Tool' in your occasional tweets about it — looked very austere and intuitive.
I'm impressed. Where are you going with this?
Thanks! The plan for now is to keep improving it. I'd like to add things like:
- Keyframe animations
- Element states (hover, focus etc.)
- Better inspector (multiple borders, box shadows etc.)
- Better drawing tools (Undo/redo, rotation etc.)
I also have plans for things like collaboration, code output/integration, live data import etc. but that's way down the line.
If people like it and I can think of a name for the damn thing, I'm hoping to turn it into a SaaS app.
I love the contextual menus (The "align" dialog options appearing when selecting multiple elements made me smile)
I'd say interactions are a little confusing. What is affected when what is pressed? The order could be reversed and it would be just as clear.
Will have a proper play later tonight. Nice progress!
Cheers Tom! I must say, I'm pretty fond of those align buttons myself :) I'm trying to keep the chrome to a minimum to free up as much canvas space as possible.
Yeah interactions are missing some input labels, maybe some better tooltips. I might also re-arrange the order of the inputs.
Let me know if you have anymore feedback. Thanks.
I want to start by saying: good work Colm! That intro tutorial was quite nice.
Have you thought of adding some sort of 'guides' ?
Also, to increase understanding of tools to left instantly, maybe have 2 versions of that bar - one with tool tips showing, which you can dismiss to view the minified version with icons only.
Just a few pennies. I will follow your progress. Keep up the good work bud!
Thanks Pierre, really appreciate the feedback!
By 'guides', do you mean tutorials? When I launch beta I'm planning to provide some short video tutorials.
You might have a good point with the toolbar. I'll probably add a lot more hints and tooltips soon.
You betcha Colm! It's my pleasure.
By guides, which didn't really need to be quotes, I mean't vertical and horizontal lines that serve as guidelines a user can setup to structure their canvas. I see that you have a version of smart guides already in place.
Also, I'm certain a few short video tutorials never hurt anyone :)
Looking forward to seeing the evolution from the strong base. Cheers
Ah, I see. Ok, I've added that to the to-do list. Thanks again.
Wow, I've only used it for a few moments and I can see the potential. Definitely impressed. I'll give it a shot this week and return with feedback :)
Good news :)
Cheers mate, really looking forward to the feedback!
Excellent! Love how simple it is to create a quick and dirty clickable prototype. Tools like Sketch to a terrible job of this. I would use this ALL THE TIME! Not only that, but this is something that non-designers in the office could use to share their ideas.
Found some small bugs, like I wasn't able to change font color after a while. So cool that you bring in the OSX color picker. Didn't even know that was possible.
Keep it up and let us know if you need anything in the mean time. I would gladly pay for this product.
Awesome feedback mate, thanks!
I added font color to the to-do list. Any other features you'd like to see? What would you like to see me work on next?
Lol, this is default color picker for HTML5. Simply write:
Nice work Colm - Its nice and clean, I like the double-click menus for object properties.
Thanks Kevin. I'm sure you've noticed I used Shorthand for the interactions. I'm planning to submit a PR soon with the custom functions.
That is awesome. I am also building Shorthand into the next version of Edit Room and will even expose it as generated, hoping it gains some traction on its own!
This looks amazing Colm. I can't wait to get my hands on it and play around. Exactly what I've been wanting out of a prototyping design tool. If I had more thumbs, I'd put them all up.
Thanks Shane, great to hear!
If you think of any specific features or improvements you'd like to see, let me know :)
Nice work, i can see my self paying for it when its complete. Kudos!
That's what I like to hear mate, thanks :)
It's quite good but I find the double click to edit options a bit tiring. Maybe a fixed sidebar a la sketch 3 might help there?
Besides of that: Good work!
This is really awesome. I am looking forward to where you take this! Having a blast playing around at the moment.
Cool, glad you're liking it :)
If you think of any suggestions or come across any issues, let me know.
This is a great start Colm.
As a heads up, while playing with it, I found you can change the canvas number in the URL and see other people's work. For example: http://design-tool.herokuapp.com/canvases/12http://design-tool.herokuapp.com/canvases/385http://design-tool.herokuapp.com/canvases/323
I know it's an alpha, but that's probably one worth fixing.
Looking forward to seeing how you evolve this.
Thanks for the feedback mate.
That's not actually a bug. Notice how the /edit is missing from the url. When you visit a canvas that you don't own, it redirects you to the preview mode for that canvas. So right now, all canvases are public, so you can share your work with guests/clients.
In the future, I'll probably add the ability to make your work private.
Let me know if you come across anything else :)
Yay, I am canvas 12!
Bummer that it only works in Chrome :( Firefox and I are friends.
I really like the "learn by doing" tutorial.
But I have been trying to add an interaction to the button for a few minutes and still can't figure it out. It's very unclear to me.
Great start though.
Yeah it needs a lot more work. I'll try to explain:
button1 toggle rect1 click
That would mean, when you click button1, it would toggle the visibility of rect1.
Then you need to click the "preview" icon to go to preview mode and try it out. That icon is the browser window icon, second from the bottom at the bottom of the toolbar.
that was a bit unclear to me aswell. especially because the menu where you're editing this overlaps the tutorial text.
I love this a bunch already. Is email an ideal way for me to get in touch with you, Colm? I have some thoughts I'd love to share.
Cheers, Jenny Ma
Email is cool, email@example.com
Looking forward to hearing your thoughts :)