My Design Process and Software

June 21, 2010

I’ve had the conversation many times about which application I use for web design. For me, it’s not a simple choice between two, it has more to do with the type of project I’m creating.

Fireworks as a Starting Point

In my case, creating the basic layout is usually at least 100 times faster in Fireworks than Photoshop. It’s also easier to maintain everything over the span of a project. Why? Fireworks, to me, is a whole lot more flexible and scaleable because vector shapes are at the core. Photoshop, though it has things like “Smart Objects” is, for all intents and purposes, an app that focuses on pixels. (Obviously pixels are the end point for everything you do in web design. But once a pixel is rendered, it’s not scaleable, whereas vectors are lines and shapes that you can stretch and scale after they’ve been created.)

Textures and Pixel-level Adjustments

When an object should be something other than flat, I get my basic level textures from Fireworks. But, if there’s a need to do something a bit more grungy or distorted I go straight to Photoshop. From there I can create more advanced textures and bring them over to the rest of my layout.

As many of you who have been reading my stuff for a long time know, I don’t use brushes very often. If I were to use them, I’d use Photoshop much more often than I do. But any time I have to go in and add extreme texturing it’s one of the last steps in the process.

Vector Drawing

If I have anything that needs to be done at near photo resolution that isn’t a photo, I draw it out in Fireworks. It’s so easy to build icons, objects with depth, anything vector-ish in Fireworks. Photoshop, to me, isn’t the right tool for that type of work.

Traditionally, if there’s something “realistic” to design it falls into the territory of Illustrator. In the world of print that’s definitely still the case, and it really should be. But for the web, unless I’m doing something very intricate, Fireworks just seems to mesh with my workflow better than Illustrator.

Photos

This part is a no-brainer. I use Photoshop for anything that even remotely deals with photos. Fireworks, though it can crop and export photos just isn’t the best tool for the job, neither is Illustrator.

There are a lot of tools in Photoshop that just can’t be replaced either. The clone brush, the lasso tool, you know, standard photo editing stuff. But that’s what Photoshop is meant to do… edit photos.

Bringing it All Together

I also use Fireworks as the way to build my layout, because it is vector based and very, very flexible. Rasterizing things makes them static. You can’t stretch a rasterized image without noticeable effects. By keeping everything in Fireworks I avoid that hassle, including the pixel-perfect images from Photoshop within that.

I use Fireworks the way I would use inDesign in a larger print project. It’s not made for the scale of projects you could do with inDesign, but for a single web page it’s a nice fit. (inDesign isn’t a very good tool for the web at all, in my opinion. Though it’s lovely if you’re doing anything for print.)

The Verdict

Here’s where things get funny… If I had to choose only one application it would be Photoshop. Why? Because I’m also a photographer and my design style plays off of that inspiration. While I can hobble my way through designing a website in Photoshop, I can’t really do much at all with photos in Fireworks. (I don’t mention that because Fireworks should attempt to edit photos… it’s not at all the right tool for that.)

But if I’m asked which I actually like using to design websites, the answer is always a resounding “Fireworks.” In my opinion, it’s the best fit for web design… when we talk about web design as an isolated process. For me, the answer isn’t a one or the other answer, it’s an inclusion of all the available tools for their intended purposes.

Share on Twitter | Share on Facebook | Bookmark on Delicious |