3 Reasons to Use Fireworks Instead of Photoshop for Web Design

It's pretty much established that web designers use Photoshop to mock up their design concepts, but why is that we're all drawn to Photoshop? After all, it is an application that has never been specifically marketed as a user interface or web design solution, surely there is something else out there that is more suitable? Well, yes there is, and it's called Fireworks (you probably have it installed but have never used it). As a former Photoshop user who has switched to Fireworks around about a year ago I'm going to try and encourage all the designers out there who are searching for something better to try Fireworks.

Photoshop. Where photographs are concerned Photoshop is way ahead of it's competitors and evidence of this is seen every time you pick up a mainstream magazine or see a billboard advertisement. It is also great for artwork as well as for rendering draw-dropping special effects. However, when it comes to positioning user interface elements on a page or rapid prototyping you can start to see it's short comings. Never fear, because according to Adobe :

"Fireworks® CS5 software enables you to create expressive, highly optimised graphics for the web or virtually any device — from smart phones to kiosks to embedded displays. Produce websites, user interfaces, and rich prototypes that are editable in both vector and bitmap modes."

So, here are my top 3 reasons for why you should considering using Fireworks over Photoshop for web design and user interface work.

1. Fireworks Has Pages

This one seems so obvious, and just goes to show that if Photoshop was serious about web design it would realise that websites consist of pages! It's probably self explanatory but I'll explain how pages work by giving you a real world example. This is the situation: You've been asked to design the user interface for an online store, you've researched, brainstormed and sketched ideas for the homepage. You've then opened up Photoshop and brought your vision for the homepage to life! It's a masterpiece and the client loved it at first sight. Now understandably the client wants to see what the page looks like when you perform a search or click on a product, not to mention the checkout process and what happens when a user logs in? (the list goes on). There are two widely used techniques to enable photoshop to simulate different pages.

1. Perform a "save as..." , modify the design and repeat
2. Duplicate all of the layers, hide the old layers, modify the design on the new layers and repeat.

Neither solution here is ideal, let's face it. You're either going to be switching back and forth between up to 10 different PSD files (perhaps more on larger projects) or you will end up with a huge file size and a maze of layers to navigate. But as bad as that is, neither of those things are the main issue here. The biggest problem arises when the client says "Oh wait! on second thought - put that menu at the top, change the background and make my logo at least 78% bigger!" Now each individual page has to be updated separately; something that any web designer currently using Photoshop will know to be a huge headache. The Solution: Fireworks makes updates like this a breeze! All you need to do is use the pages function. Pages work exactly like pages in a desktop publishing application do (think Adobe InDesign and also imagine designing a magazine in photoshop!) each page is essentially it's own document within the larger document, complete with separate layers, the ability to resize the canvas (as dynamic websites rarely have consistently sized pages these days) as well as having "master" pages that can apply consistent styles to multiple pages within the document. Having all of your pages are in one document makes it incredibly easy to switch between pages and make updates. In addition to this, cutting and pasting items in place by default and making changes across multiple pages only takes a few clicks! You can put elements such as headers, menus and logos into master pages too and you only need to make changes once to the master page to see it reflected on all pages assigned to that master page; a real time saver. Pages tie in nicely with reason number 2:

2. Symbols and Styles

Symbols and styles work as team alongside pages. Continuing with the same problem: making mass amends to an online store website with multiple pages for the homepage, search results, product detail, and checkout process etc, let me explain how symbols and styles can be a life saver. Let's start with symbols. If you've used Adobe Flash before you'll be familiar with symbols, if not they're basically graphics, buttons or animations that live in the documents "Library" and can be dropped into pages at any time. If you were to make a change to a symbol in the library it will reflect on all instances of the symbol within your website concept. A perfect example is an "Add to Cart" button, which might be used on the homepage, search results page, categories page and product detail page many many times. With Fireworks if you realise that the text isn't quite aligned properly or you've taken a disliking to that little shopping cart icon all you have to do is double click into an instance of the button, make the relevant changes and you'll see all of the other buttons on the page updating in real time! Styles have a similar concept to symbols, but the best way to explain them is to compare them to styles that we should all (hopefully) be familiar with, Cascading Style Sheets or CSS. In the same way that when you code a website you use an external stylesheet to define how big headers are, how much line spacing paragraphs have, what color links are etc. styles in Fireworks let you build a library of styles that control:

• Fill type
• Fill color
• Effects
• Stroke type
• Stroke color
• Text font
• Text style
• Text size
• Text other

So when your client asks you to 'make all of the text bigger',' use Verdana, I hear that's good for the web', and 'stick a drop shadow on everything you can'. you can perfrom those strange requests within a few seconds! Now, number 3, almost definitely my favourite thing about Fireworks:

3. Click to Select, No Need to Organize Layers

Yes that's right, you heard me correctly. It really doesn't matter what you choose to call your layers or if you've grouped them perfectly. Nobody really minds with Fireworks! How is that possible you're wondering? Just like in Adobe Illustrator if you want to select an object, you can click it and it's your's for the taking (you don't need to find it's name in a seemingly never ending list of layers) and then to top that off you can also shift/cmd + click another object on the page.. and move them both around, resize them both, edit them both at the same time and so on. And if you're wondering why selecting two or more items and editing them with ease is a big deal then you've clearly never used Photoshop extensively for web or user interface design.

Note: of course nobody is going to stop you naming your layers straight away, if you're not ready to let go yet. That functionality is there in Fireworks too, to help you phase this life long habit out.

Summary

Photoshop is an extremely powerful application by anyone's standards, and its particularly good for websites making heavy use of textures or rich imagery, but for rapid prototyping of websites and applications that doesn't make you want to tear your eyes out when you're sat at your desk for hours on end, say hello to Fireworks! There are obviously far more than 3 reasons in Fireworks' favor for web design, a few that almost made the list are:

• Fireworks opens and saves to Photoshop PSD files.
• Fireworks is vector.
• Fireworks is bitmap.
• Fireworks loves pixels
(no more semi-micro-milli-pixels when drawing icons).
• Fireworks is great at optimizing files.
• Fireworks has a properties window (define pixel values for objects easily).
• Fireworks has a "Commands" menu (960.gs supply a fireworks command for creating grids without opening a template file)

What are your thoughts on the debate?

Let us know in the comments about your experiences with Fireworks and Photoshop, do you love Photoshop? Or perhaps you've been using Fireworks since day one?