4 ms·

Let me introduce you to your new design tool, my product Edit Room. Imagine a design tool that lets you organize your content first, assign semantic HTML tags

Let me introduce you to your new design tool, my product Edit Room. Imagine a design tool that lets you organize your content first, assign semantic HTML tags to your layers, and lets you easily draw out your layers with visual design tools built to honor your Photoshop muscle memory as much as possible, but also built for speed. Imagine all your design work being cleanly rendered in HTML and CSS, while giving you the creative freedom to play with layout and typography, color and form. Not just flexible, but responsive as well - you can preview different display widths directly in the design editor and create custom breakpoints for adjusting your design for smaller screens. The tool you're looking for is already here - http://www.edit-room.com http://www.edit-room.com

ollysb 14y ago
Hey, just been playing with it, looks very interesting. This looks like a good start, I think there's a long way to go with it but it's definitely headed in the right direction. Here's some feedback: 1) Maybe start with the design page, I want a blank canvas I can add things to straight away. I realise that you've gone with organising the content first but I can't imagine a designer starting to build a page this way. Following on from this it would be great to be able new content into the design view. 2) The black button to show the tools only appears if you click on the left end of the button, this confused me for a while(I kept clicking all over it until it appeared). 3) The grid - I think you need to lean on this far more. Have it on display from that start and then use the grid to actually generate the markup (rather than it just being a visual guide). I found that things jumped around a lot when I was dragging/dropping(actually on the drop). This would work well at least for horizontal positioning/alignment. 4) Snapping - I really missed this from illustrator, when you're dragging/resizing it should snap to align with other objects on the page. 5) When you resize the page the tool area remain the same size, currently the left edge is left in the same place and tool area resizes. 6) The generated markup looks pretty decent, after trying Muse and seeing the abomination that generated this was very good to see. 7) Colour picker - took a couple of seconds to grok it but actually I really liked it. Being able to adjust in several different ways feels very natural i.e. maybe a bit darker, I want a red, maybe a bit more saturated... very nice! One bug though which was incredibly confusing is that you can't adjust the color of the layer until after you've clicked on one the color blocks above the pallet i.e. if you click on the layer color picker icon and adjust the sliders nothing happens. They only work after you've first clicked on one of the colors at the top. 8) Might be nice to give an indication of the boundary for the selected box. 9) Layers - found this a little bit confusing for some reason, I could see lots of things in there but couldn't find them anywhere on the actual design. Clicking on something in here should make it visible on screen i.e. scroll to it, select it. BTW they dropped off the bottom of the page a bit so I couldn't see them all clearly. 10) Units - seemed a bit strange defining borders and padding in ems, couldn't find any way to use pixels. This looks a great effort and I hope you continue to develop it as there's definitely a market for something like this. I think you need to do a ton of user experience testing to get it more usable. Get some designers to try and build something in it while you're watching. Keep doing this until they find it easy and you're going to have a very popular app on your hands. Hope the feedback is useful(didn't have time to reduce if I'm afraid), feel free to email if you want to talk about it.
- splatcollision 14y ago
  Thanks Olly - great feedback! I'm definitely developing it further - thanks for the kind words. I'll be in touch, but a few things I wanted to touch on: The panel button bug is fixed - once I can deploy safely again (Heroku/RubyGems issue) I'll have that fixed. I'll consider adding a start into the design editor, but the content screen is first for a reason, and it gives you something to start with. Pixels are (mostly) not available, again, by design. You should be using EMs and Percents, they are more natural to web design. Borders and shadows are the exceptions - both are more useful as pixels. Glad you like the output - I've worked a bunch to make that as clean as possible. Everything else is good, and I'll definitely incorporate this into future updates.

ollysb 14y ago

Hey, just been playing with it, looks very interesting. This looks like a good start, I think there's a long way to go with it but it's definitely headed in the right direction. Here's some feedback: 1) Maybe start with the design page, I want a blank canvas I can add things to straight away. I realise that you've gone with organising the content first but I can't imagine a designer starting to build a page this way. Following on from this it would be great to be able new content into the design view. 2) The black button to show the tools only appears if you click on the left end of the button, this confused me for a while(I kept clicking all over it until it appeared). 3) The grid - I think you need to lean on this far more. Have it on display from that start and then use the grid to actually generate the markup (rather than it just being a visual guide). I found that things jumped around a lot when I was dragging/dropping(actually on the drop). This would work well at least for horizontal positioning/alignment. 4) Snapping - I really missed this from illustrator, when you're dragging/resizing it should snap to align with other objects on the page. 5) When you resize the page the tool area remain the same size, currently the left edge is left in the same place and tool area resizes. 6) The generated markup looks pretty decent, after trying Muse and seeing the abomination that generated this was very good to see. 7) Colour picker - took a couple of seconds to grok it but actually I really liked it. Being able to adjust in several different ways feels very natural i.e. maybe a bit darker, I want a red, maybe a bit more saturated... very nice! One bug though which was incredibly confusing is that you can't adjust the color of the layer until after you've clicked on one the color blocks above the pallet i.e. if you click on the layer color picker icon and adjust the sliders nothing happens. They only work after you've first clicked on one of the colors at the top. 8) Might be nice to give an indication of the boundary for the selected box. 9) Layers - found this a little bit confusing for some reason, I could see lots of things in there but couldn't find them anywhere on the actual design. Clicking on something in here should make it visible on screen i.e. scroll to it, select it. BTW they dropped off the bottom of the page a bit so I couldn't see them all clearly. 10) Units - seemed a bit strange defining borders and padding in ems, couldn't find any way to use pixels. This looks a great effort and I hope you continue to develop it as there's definitely a market for something like this. I think you need to do a ton of user experience testing to get it more usable. Get some designers to try and build something in it while you're watching. Keep doing this until they find it easy and you're going to have a very popular app on your hands. Hope the feedback is useful(didn't have time to reduce if I'm afraid), feel free to email if you want to talk about it.

splatcollision 14y ago
Thanks Olly - great feedback! I'm definitely developing it further - thanks for the kind words. I'll be in touch, but a few things I wanted to touch on: The panel button bug is fixed - once I can deploy safely again (Heroku/RubyGems issue) I'll have that fixed. I'll consider adding a start into the design editor, but the content screen is first for a reason, and it gives you something to start with. Pixels are (mostly) not available, again, by design. You should be using EMs and Percents, they are more natural to web design. Borders and shadows are the exceptions - both are more useful as pixels. Glad you like the output - I've worked a bunch to make that as clean as possible. Everything else is good, and I'll definitely incorporate this into future updates.