What is the Perfect Web Design Application?

As designers we spend huge portions of our days staring into screens, looking at the same buttons and dialogs and essentially repeating the same processes over and over again, so hopefully it's not unjustified to sometimes question the tools of our trade that essentially become our lives when we're in front of our computers.

GIMP, Inkscape, and Pixelmator, the list goes on. Some people even omit design applications out of the process all together, and although that might be fine if you're good at CSS prototyping I find it hard to believe you can be as creative with pure CSS as with a design tool in your workflow. All methods have their good points and bad points but none of them really hit the spot, none of them are that beautiful, intuitive, powerful, and even fun to use tool we could really do with in our workflow. Web designers need something that does for our industry what InDesign did for print when it overtook Quark Xpress and what Coda and Espresso have done for Mac coders (good riddance Dreamweaver) This is of course a personal opinion post, and some of you may already be thinking Photoshop is the ideal tool, I discussed some of the points that makes Fireworks better for web design than Photoshop in an earlier post. But this time I want to look at the larger picture for a moment, give my arguments for why neither application is the ideal solution and pitch ideas for what the perfect design app could be.

Why Photoshop isn't the answer

It's easy to see why Photoshop is the number 1 tool for web design at the moment, and it's certainly not it's ease of use and affordability, no the reason is simply it's popularity. Photoshop is so popular that it has practically become a verb in the English dictionary ie. "To photoshop". It's immense popularity of course means that it's making tons of cash for Adobe who can then in turn, invest that cash in the app, and develop additional, high-powered features to implement. That's the way business works and developing the app acts as marketing for Photoshop, so Adobe releases their (almost annual) update to the package and predictably sales boost. Rinse, repeat. It's a cycle that's been going on for over 20 years. Where's the problem in that? In terms of business strategy nothing, it's the ideal situation, but it can sometimes feel like Adobe never steps back and thinks okay what do our users actually need in their workflow? I'm pretty sure not many people were saying they needed 3D features in Photoshop before CS5 came out, were they? I think it's more likely people were having simple requests such as improved reliability and speed. Despite those reasons though, Photoshop is lacking many features needed for web design - it's purpose is as a photo editing application not a design tool, things like multiple pages, dynamic styles and libraries of reusable items are somehow absent from Photoshop in favor of marketing features for photographers like Vanishing Point, Content Aware Fill and Puppet Warp, So, this isn't a dig at Photoshop exactly, which is an incredibly powerful application, it's just clearly not an app designed for web design.

Why Fireworks isn't the answer

Fireworks is the one tool in Adobe's Creative Suite that is actually marketed as a UI and web design application, it's my personal preference at the moment but unfortunately as far being a web design application goes it wouldn't be my first choice if there were alternatives. It's interface is old-fashioned and clunky, it's bitmap editing abilities run a little short of Photoshop's and although it doesn't crash nearly as much Photoshop, it still does have it's fair share of quirky bugs. It's also passed hands over the years from Macromedia when Adobe acquired the company, this shows in the user interface and workflow, for example that color picker is a relic from Macromedia's glory days, is it actually difficult to update the color picker or do Adobe think former Macromedia users will be furious if they touch it?

Why Illustrator isn't the answer

Pure and simply because it's a vector-based application, I for one am looking forward to CSS3 popularity and widespread SVG support for a resolution independent web but we can't just throw away our bitmap editing abilities yet and switching back and forth from Illustrator and Photoshop isn't really ideal for a seamless workflow. Illustrator suffers from the same problems as Photoshop, it's an almost perfect vector drawing application, but it is what it is, it's not a web design app.

What is the answer?

I believe that the answer is a combination of all the best features in these apps, a unified version of all of the Creative Suite  in a single app if you will, except with all the stuff designers don't need or care about cut out and then sprinkled with some innovation, and an intuitive workflow. The way a lot of photographers work was completely changed by the release of Apple Aperture and Adobe Lightroom - it seems odd that both companies released their software at about the same time, I can't comment on who had the idea first but as a casual photographer myself, it completely did away with using Photoshop for processing my shoots after the release of Aperture, and the way my workflow improved was nothing short of incredible. It seems so obvious now but for years I didn't even question the way I worked, I assumed post-processing photos was supposed to take hours of frustration and hair pulling. So an innovative workflow is a must, it should be created with modern web designers and their workflow in mind, here are some key features that would be refreshing to see to see in a web design app:

The Canvas Should Have Screen Real-Estate Priority

Why can we see gradients, strokes, swatches, color sliders, masks etc. when we aren't even using those features? and even worse why can we see grayed out windows when something is inactive instead of it hiding itself and showing more of the canvas? the canvas should be our top priority.

Cataloging Features for Reusable Design Resources

Kind of like Adobe Bridge except with better implementation, interface and speed, it would be great to be able to build a library of resources split up into categories, from brushes to stock photos, all easy to access and drop into any design.

Decent Presets

The person who designed the default Adobe patterns, gradients and symbols needs to be shot. Just imagine opening up a design application and finding a plethora of usable styles, basic shapes, icons and buttons.

CSS Functionality

Why not implement a feature that mimics a browser rendering engine, so you can apply a 'CSS Drop Shadow' and get the options that are available in CSS, with realistic rendering and maybe an option displaying the exact CSS property for easy copy and paste into projects. This shouldn't be confused with WYSIWYG HTML applications like Dreamweaver and Flux, I mean realistic CSS effects within a Photoshop-like environment to help us plan what needs to be images and what can be CSS in the final coded design.

Pages and Interaction

This is something that Fireworks already implements to a certain degree, but is an essential feature to have in a design mockup application, this feature enables you to create multiple pages within a single design file, with master pages etc. and interactive buttons that link to different pages within the design (with hover and active states) so that you can navigate through the site as if it were in a browser, exporting to PDF would be a handy feature too for sharing your concepts with clients in way that enables them to click through it (no more explaining the different between Jpegs and websites).

Adobe Integration

This is a necessity, a new application in the market would need to play nice with Adobe (atleast initially *evil laugh*), export to PSD is the most obvious feature required, but the ability to open files interchangeably between applications and an "Edit in external editor..." would be great for jumping into Photoshop just for certain operations.

Beautiful User Interface

It needs to be pretty to look at because we web designers love judging books by their covers (well, I do anyway) but not just for the initial sale, a pretty, easy to use interface will make our days more pleasant and us more productive.

Slicing and CSS Export That Works

I never use these features personally, they remind me of the Dreamweaver age as it were, with table layouts and image maps but if they are going to be in a application they could at least export code you wouldn't be ashamed to upload, with up to date standards and a level of intelligence that can spot repeating patterns and dynamic text etc. and generate them correctly.

Lightweight and Stable

This one is self explanatory but nothing is more frustrating in a web designers day than when Photoshop unexpectedly crashes. No matter how recently they saved, it just shouldn't happen. Also, the less bloat in the app the better, just because hard drives have huge capacities now and SSD memory is super speedy it doesn't mean an app should be 500MB and need a splash screen to keep you entertained while it starts up.

Conclusion

Today, the best web design tool you can use is the Adobe Creative Suite - whether it be Photoshop, Fireworks, Illustrator or a combination of them all, there's simply nothing else that comes even close at the moment. However I see this as an open market, of course nobody wants to be competing with the almighty Photoshop, that's fair enough as it would take years and years of playing catching up. But in actual fact a web design application would be hitting a niche that Photoshop only covers at the moment by default. I'd love to hear what everybody's thoughts on this, has anybody else ever thought the same thing? and it's a long shot but is anyone secretly developing the app described above?