Index

Where's the Killer App for Web Design?

What application do you design websites with — Photoshop? Illustrator? Fireworks? We all rely on Fireworks here at A.C.O., but as Jon Hicks points out in his recent article, it's a love/hate relationship. For those willing to invest a little time learning its idiosyncrasies, it's clearly the best tool out there. Unfortunately that doesn't say much for the state of the web design application landscape.

Although many designers are busy defending their respective design app choice in forums and blogs, there seems to be very little dialogue on what we actually want and need from a web design app. Here's a few thoughts:


FROM STATIC TO DYNAMIC

Like most graphic design apps, Fireworks uses the canvas metaphor as the basis for its documents. But we’re not painting pictures here, we’re designing interfaces — scrolling, sliding, zooming interfaces. Scrap the static canvas, and build on the concept of designing dynamic screens.

Screens should facilitate liquid layouts and inline scrolling. They should facilitate fast prototyping of rich interfaces — I shouldn't have to switch from right brain creativity (design) to left brain logic (scripting) to develop an interface idea. Allowing designers to quickly create rich interaction prototypes before coding would smooth out the creative process, allow for instant demos and feedback on ideas and reduce costly mistakes later in production. Today's UIs aren't static — the design app shouldn't be either.


SEPARATE STYLE & CONTENT

The benefits of separating style and content with css and xhtml are clear — so why not do it during the design process too? Instead of wasting time copying and pasting from Powerpoint and Word docs, allow a text box to be linked to an external text file, and automatically populate the design with content.

The text can be edited by anyone — without knowledge or need of the design application itself. It could even be hosted on a CMS, and linked via a URL. It's not too hard to imagine the benefits of all the content being managed online in one place. No more mailing docs back and forth, no more confusion about which is the latest version. From initial writing, through to the final launch, all the content in the same place. Both designers and developers can use the same source of content, and the client/writer can edit it directly via their browser.


MOVE YOUR ASSETS

Anyone involved in the design of a large site knows the difficulty in maintaining consistency across multiple files — changing the header for example requires manually updating every file that uses it. The simple solution? Allow importing of linked external design files — update the linked file and all documents that use it automatically reflect the change. Of course Illustrator already does this, but don’t just stop with a local implementation. Allow this to work across via a web server so multiple designers can work from multiple locations, all sharing the same design assets.


DIVIDE & CONQUER

Although I’m always surprised to see how many people choose Photoshop or Illustrator over Fireworks as their primary tool for web design, they have undeniable advantages in their own areas. Harness their power by allowing the embedding of .psd and .ai files inside the design document and facilitate roundtrip editing of those files in their native applications. I don't think we need a Ps/Ai killer — give me an app that harnesses their strengths, and addresses the specific problems web designers face. One of the biggest issues I have with the Creative Suite, is that with each release, each of its components step more and more on the toes of its counterparts. At this rate we'll have a box of apps that all do exactly the same thing, only even slower and more bug-ridden than they already do.


CONCLUSION

Fireworks combines the best parts of Photoshop and Illustrator — it’s a hybrid that facilitates basic bitmap image editing, illustration and typography with layout across multiple pages. But from where I’m standing, the needs placed on web designers today would be better met with an application that took more cues from the DTP world of Quark and InDesign. A more systematic application that acted as an organizing vessel for the mix of media a web designer deals with, would bring the design process closer to the way a website works. Developed handling of linked artwork and content would enable more efficient workflows and collaboration, and rich interface prototyping would kick-start one of the most challenging areas of web design earlier on in the process.

But frankly, I'm past caring if it comes from the Fireworks team, or even Adobe for that matter. Why, with all the innovations in interface design online, are we left struggling with design software that's not only dragging it's heels, but getting heavier to pull along with each release? Where's the innovation? Granted, new indie apps like Drawit, Acorn and Opacity are showing Adobe up, but they are still essentially drawing/image editing apps. As good as it is to see them, they're not addressing the specific problems encountered whilst designing a website.

Fireworks is only the best because there’s nothing else out there for it to compete with. In an industry seeing the expansion that web design is, Adobe seem to be worryingly blasé in developing the only tool designed for the purpose. Through occasional stints in alpha and beta tests for Fireworks, I've had a chance to chat with engineers and planners, and they seem genuinely passionate about their product, and open to ideas. Yet in spite of this, yearly releases come and go and I'm left with a product that seems to be skirting around the big issue — that whilst the needs of web designers are changing, the design software is not.

I'd love to hear your thoughts &mdash feel free to mail or better yet, get my attention with a tweet by mentioning @jamesbowskill.

Further Reading:

Oct 13 2009

James Bowskill

James Bowskill leads interactive design at A.C.O. in Tokyo, where he has lived since 2001. He also maintains a growing collection of Japanese packaging.

Feel free to follow on Twitter, or get in touch via [email protected].

Top