5 ms·

We need new design tools... Designers currently choose between photoshop and illustrator. Neither was created for the job of web design and it shows. Yes, I kno

by ollysb 14y ago

We need new design tools... Designers currently choose between photoshop and illustrator. Neither was created for the job of web design and it shows. Yes, I know you could mock it up in html/css but let's be honest, that is not a great medium for someone playing with the visual layout of the page, it's just too damn slow (not to mention the context switch of going between visual and textual representations). Imagine a design tool that understands what a responsive grid is. This would be a great go between for a design tool and a web page. It would present a strong visual representation and it would allow the designer to resize the page and see how the design responds, without having to think about numbers... There's smaller things as well, you can't use ems to specify text size for instance. What about a viewport mode where parts of the page that aren't in view are greyed out(with some presets for common viewport sizes). Web pages do need a dynamic layout but are still entirely visual, I don't see any reason why a designer should have to learn how to code them up.

jiggy2011 14y ago
It would probably be much easier to create great web design tools if HTML/CSS was a little saner and not a constant moving target.
- ollysb 14y ago
  I think the feature set that would be relevant to a designer is pretty stable. Things like new selectors/elements are pretty irrelevant to a designer, they just make it easier to code up a design.
wilfra 14y ago
This is what mockup software is for i.e. Balsamiq. Once you have what you want there, then you go to Photoshop. Then export your pretty images, insert them into Balsamiq and keep tweaking.
- ollysb 14y ago
  I do like balsamiq, it's a great tool for roughing out a design, but I don't see how it addresses any of the points I made. Dynamic layout - as far as I can tell balsamiq uses an entirely static layout, unless I'm missing something. Viewport preview - again can't see how it helps with this Text dimensions - have to be specified in pixels, not ems. and these are just examples of some features that are missing...
- sgdesign 14y ago
  Except in many cases you can't make layout decisions without also considering fonts and visual style. This is why Photoshop and Illustrator are still the best tools for web design: they enable relatively quick wireframing, but also give you the possibility of increasing the level of polish within the same document. If a new alternative is to appear, it will need to provide at least support for realistic grids, typography, and basic CSS styles, not just empty boxes and Comic Sans.
  - systemtrigger 14y ago
    Completely agree - to which I would add the new alternative you speak of has already arrived: Google Chrome. I can design an entire page in Chrome without ever a need to refresh. Grids, typography, CSS - not to mention JavaScript, images and video - done faster and better in Chrome than I could dream for coming from Adobe. Specialized image editors like the Adobe set are properly relegated to "the cast," support roles at best. The article's screencaps are a testament to the huge recent improvements for designers within the medium itself, the browser.
    - deleted 14y ago
      [deleted]
    - hilko 14y ago
      It'll be a while before most designers can comfortably use Chrome though...
splatcollision 14y ago
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.

by ollysb 14y ago

jiggy2011 14y ago

It would probably be much easier to create great web design tools if HTML/CSS was a little saner and not a constant moving target.

ollysb 14y ago
I think the feature set that would be relevant to a designer is pretty stable. Things like new selectors/elements are pretty irrelevant to a designer, they just make it easier to code up a design.

wilfra 14y ago

This is what mockup software is for i.e. Balsamiq. Once you have what you want there, then you go to Photoshop. Then export your pretty images, insert them into Balsamiq and keep tweaking.

ollysb 14y ago
I do like balsamiq, it's a great tool for roughing out a design, but I don't see how it addresses any of the points I made. Dynamic layout - as far as I can tell balsamiq uses an entirely static layout, unless I'm missing something. Viewport preview - again can't see how it helps with this Text dimensions - have to be specified in pixels, not ems. and these are just examples of some features that are missing...
sgdesign 14y ago
Except in many cases you can't make layout decisions without also considering fonts and visual style. This is why Photoshop and Illustrator are still the best tools for web design: they enable relatively quick wireframing, but also give you the possibility of increasing the level of polish within the same document. If a new alternative is to appear, it will need to provide at least support for realistic grids, typography, and basic CSS styles, not just empty boxes and Comic Sans.
- systemtrigger 14y ago
  Completely agree - to which I would add the new alternative you speak of has already arrived: Google Chrome. I can design an entire page in Chrome without ever a need to refresh. Grids, typography, CSS - not to mention JavaScript, images and video - done faster and better in Chrome than I could dream for coming from Adobe. Specialized image editors like the Adobe set are properly relegated to "the cast," support roles at best. The article's screencaps are a testament to the huge recent improvements for designers within the medium itself, the browser.
  - deleted 14y ago
    [deleted]
  - hilko 14y ago
    It'll be a while before most designers can comfortably use Chrome though...

splatcollision 14y ago

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.