Go to content Go to navigation Go to search

Perfect Tools to Design for web (Part II)

Let’s review the tools that web designers use now and see what features and abilities they lack. That will help us realize what we want to keep and what we need to add to that perfect designer tool.

Photoshop is probably the leader there – you can do all kind of raster manipulations, use layer styles, move things around to absolutely position elements, use layers and so on.
It’s a perfect tool for fixed width design. No wonder – it was made initially to serve the needs of print designers.

It lacks the ability to relatively position elements, to make changes to text by picking new font for some group like headers through the entire document. And it lacks all other flexibility we have in a real web document.

Some folks use fireworks as their main tool in web design, which to me lacks the same features I miss in Photoshop. Using Illustrator is similar to this applications too – it has some neat features that can influence the style of graphics you prepare but still don’t let you build nice flexible layouts of the pages.

When you say layouts – you may think of programs like Quark and Indesign that were initially developed for that kind of work. But again – although they give you a really nice
control over the fonts and use kind of the same approach to text as styles do, they don’t let you design flexible stretchable pages. And they lack graphical abilities. It’s almost easier to build layout in Dremaweaver and do all the graphic work in Photoshop.
But as I told you I don’t want to go that way.

How about a new version of Photoshop that will in addition to what it has also will have a kit for flexible layout design.
Btw – I love the smart objects in new version of Photoshop. I think that Photoshop should continue the road of objective design and add some properties to objects similar to those we have in CSS. Not all of them but at least those that are responsible for positioning. Having that and control over different font groups will let designers to see right in Photoshop (or who knows how that hybrid will be called) by resizing windows, by increasing or decreasing the fonts sizes.

That would unleash the creativity of so many people. That would make our websites so much easier to design and that would open a new era of the new web.

It’s great that we have more and more sites that are designed with standards in mind and that are flexible to user needs. But we won’t see the majority of sites to be like that, unless there is a tool that makes it easy to design and develop.

I invite everybody to discuss this topic and make this subject known to the developers of applications for web design.

Jun 1, 05:13 PM |

  1. One thing that I think works as a pretty good example is how Microsoft Access or Visual Basic Studio allow you to create an element, then right click it and edit it’s properties. These could include font information, sizing, positioning – exactly what we need in CSS. Then with the “Photoshop” part, you could also image-edit any element, or the page as a whole (not necessarily needed). The “Dreamweaver” part would allow “code view”, in case you wanted to modify the page by hand. Of course when you switch back to WYSIWYG mode, it would update with your code. This part would also allow you to save Project files, and publish to the web via FTP.

    — Stephen N. McDonald    Jun 11, 06:53 AM   
  2. I like the idea of having properties box similar to what visual studio from Microsoft has. But I’m not sure if I want to have ability to actually code html in this design application.
    Just need an ability to simulate the site behavior in a browser. If it can be done easily then may be having actual html code will be better. But I have doubts that it won’t make application too complex.

    — PictureSell    Jun 15, 06:57 PM   
  3. Yeah – that is a good concern, bloatware is a huge problem and that’s one of the reasons I don’t use Dreamweaver. Maybe it should integrate nicely with a Code Viewer/Editor – some standalone program that is JUST the “split view” that Dreamweaver has – “View” pane and “Code” page. But, no WYSIWYG page or image editing capabilities.

    The only reason I like that hand-coding capabilities is because it allows for fixes of things that have limitations in Dreamweaver and FrontPage, for example it is much longer for me to create certain elements using their WYSIWYG buttons than to just write [hr] as text. But, if the program was made correctly we could easily add an HR with a click (instead of the three or four necessary in DW) or preferably with a user-defined keyboard shortcut (ALL programs should include this capability). And if there was never unnecessary code added (like P tags in FrontPage), and all properties were editable, then having an HTML source side would be unnecessary for this program.

    — Stephen N. McDonald    Jun 15, 08:05 PM   
Perfect Tools to Design for web? HOW Conference in Chicago