Best Web design application

PhotoshopHas high-fidelity design capabilities and image editing, but the type rendering isn’t true-to-browser and it’s lacking in layout capabilities. Each new release feels more bloated and directionless than the last.

Illustrator is great for drawing and working with vectors, but the type and image rendering aren’t true-to-browser and it’s ill suited for anything but the simplest layouts.

InDesign is capable of high-fidelity layouts and has advanced type styling features with stylesheets, but it’s primarily a print application and lacks the language and feel for screen-based designs.

Fireworks showed promise back in the hands of Macromedia, but it has taken a backseat under Adobe. It’s primarily a screen-based design app and is great for prototyping and image optimization, but it lacks true-to-browser type rendering, is flakey performance-wise, and feels neglected among the flagship Adobe products.

Dreamweaver is a hybrid WYSIWYG text editor with true-to-browser type and layout rendering, but it lacks flexible visual design capabilities, image editing, and typographic control.

Browsers are obviously the baseline for type and layout rendering as they are the platforms we’re designing for; but the design production is then transferred to hand coding in text editors. Hand coding isn’t the problem here; it’s the prospect of laying out a page without design production tools that’s difficult for many (myself included).

In recent years, a few indie image editing apps have hit the scene, including Pixelmator and Acorn. These apps, and others like them, are impressive achievements, and a good alternative for certain tasks like image editing. Unfortunately, they aren’t sophisticated enough to compete with the applications above when it comes to web design and layout. And that’s OK—I don’t believe they want to compete in this space; I only mention them for the purpose of discussion.

A wishlist

So what does an app that’s made for web design look like? What are the native and common attributes that keep popping up with every page we design? This is a start for the considerations I find myself making on nearly every design I work on.

Per document grids

Different designs require different grids. Currently, in an app like Photoshop, you are only able to set global grid settings. Meaning, if you want to use different grids for your documents, you need to change these settings each time. Many people I know (myself included) get around this by just drawing out a grid on a separate layer and placing it above all the other layers. The disadvantage of this is not being able to use any sort of snap-to-grid and alignment functions built into the program. Everything either needs to be eyeballed or placed mathematically through a measurement palette. Having this reside at the document level would allow a design’s grid to travel with it and stay intact for repeat uses (especially important when working as part of a team and sharing documents).