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's main function is implied in the name; 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 PagesThis 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.
- Perform a "save as..." , modify the design and repeat
- Duplicate all of the layers, hide the old layers, modify the design on the new layers and repeat.
2. Symbols and StylesSymbols 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
- Stroke type
- Stroke color
- Text font
- Text style
- Text size
- Text other
3. Click to Select, No Need to Organize LayersYes 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.
SummaryPhotoshop 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)