How many years will web designers use the wrong tools for the job? There are a lot of great softwares from Adobe, but they are designed for certain tasks. Sometimes it’s money, sometimes it lack of knowledge, sometimes it’s fear of the unknown when a work load is reigning down, but it’s important for all of us that design for the web to understand what tools are available, and when to use them.
Are you still using Illustrator, software that should be used to create vector graphics for logo design, animation, and flash?
Are you still using Photoshop, software that is unrivaled and superior in it’s creative abilities of images, but with little to no consciousness of the web environment.
Then you have Fireworks, a software designed to do nothing else but rapid prototype design for the web. Seems pretty logical right?
So many designers not only continue to use the wrong tools, they also lack the knowledge of what tools are available and what they are meant for in the first place. Now, of course, Adobe has done a great job of blending the power of these softwares together for multi-use roles, but I wouldn’t use a paintbrush when I need a roller or vice versa, whether I can MAKE them work for the job or not. Hey, at least Photoshop and Fireworks can swap files all day long with little drama, but Illustrator was so clearly NOT designed for the task of non-flash web design, that it doesn’t even play nicely with these other softwares.
OK, so now you know, but you can’t decide between the best image software in the history of the planet, Photoshop, and the web prototyping genius of Fireworks, is the right choice for you. It’s a tough decision, but let’s look at some details that may demonstrate a clear winner.
1. Multiple Pages (With Master Page)
A Photoshop file consists of a single image with multiple layers. A Fireworks file on the other hand allows multiple pages with multiple layers per page. When working on a multi-page mock-up for a site design, the advantages of having all your assets contained within a single file are enormous. Although having 5 different PSD files may be workable initially, once edits and changes are required, for example changing text in a consistent header or footer, things can soon get messy and time-consuming as changes have to be made across all files. It’s also very nice that each page can be a different size, perfect for the different sizing which is often required between home pages and content pages.
As well as having multiple pages within the Fireworks .png file (the native file format) the powerful Master Page allows you to define consistent template elements which appear across all other pages. This is very powerful for defining a consistent header/footer which appears on each page and only needs to be edited on the Master Page to be updated across the design. A single page can also be detached from the Master Page if there is a unique page requirement.
2. Symbols
Symbols allow you to define an element or group of elements into a single object which can then be used all over your design across all your pages. This symbol can then be edited in a single place and all changes are reflected throughout your document. Imagine a graphic for a bullet icon which is used in many places across the design. To change the colour or shape of the icon within Photoshop may require lengthy manual editing and copying and pasting across multiple files. But with a multi-page Fireworks document using symbols, the change is only required in a single place for all the icons to be changed instantly across the design. This is a very powerful feature enabling design tweaks which may have otherwise been abandoned due to the time and effort involved.
3. Styles
Styles are to Fireworks as a CSS style sheet is to a web page. An items fill, stroke, font and effects can be defined into a style. These styles appear on the styles list and can be applied to other elements in the document. The real power lies in the fact that these styles can be amended and the changed cascading across the multi-page document automatically. Imagine a style of image with a particular border and drop shadow used in many places which you decide would look better with a different border colour and no drop shadow at all. If you have defined this image with your own style a single update will change all instances without all the pain. Like with symbols this can be a huge time saver whilst encouraging design experimentation and consistency.
4. Vector Objects
Fireworks offers the same basic tools as Photoshop for Bitmap editing but also has many extra vector tools. Lots of vector shapes are welcome with many control points for creating stars, polygons and regular shapes. In addition the Autoshapes panel provides a more diverse collection ranging from stick men with moveable bones, to clocks, calendars and title blocks.
My personal favorite or at least the one I have used the most so far, however, is the humble rounded rectangle which has control points for individual corners making a single rounded corner on a rectangle a simple task compared to Photoshop.
I also like the precise pixel control over each of fireworks elements in the Properties toolbar which makes sizing of images and vector objects a breeze to set to required sizes.
5. Libraries
Both symbols, styles and vector shapes can be saved for re-use and collected into useful library resources. In addition Fireworks ships with a common library of useful objects including buttons, browser and application elements for both Mac and Windows look and feel. A number of pre-defined styles are also provided ranging from Chrome and wood styles to more useful line shading and tool-tip styles.
6. Grouping
In more recent versions of Photoshop layer groups have allowed you to virtually group objects together. Though this works well, it requires a certain level of organisation moving individual layers into folders manually. Unfortunately, I have never liked working this way. I like to work quickly as inspiration guides me without having to laboriously put everything into layers and name them. Though the layer group model is still present in Fireworks it allows you to quickly select individual elements and group them together. The necessity to name layers is lessened by the fact they can be directly clicked on as in most vector packages, unlike Photoshop’s right click and ‘guess the layer’ (which didn’t get named!) method.
7. Interactive Gradients
Fireworks’s Interactive gradients are a simple enhancement to what is already available in Photoshop, but the gradient being used has control handles allowing it to be moved and sized within the object. A very simple enhancement but it works well and allows fine control and becomes particularly useful with using rectangular shading styles.
8. Web Layers
The web layer allow you to quickly add hotspot areas and links between the pages in your Fireworks document, or external URLs. Whilst being useful for linking together simple wireframes, it can also be applied to fully designed mockup pages illustrating how a finished site may navigate.
Fireworks’ initial conception was to help designers produce quick web sites with its ability to output html, rollovers and interactivity. All those features are still there and whilst you may not want to use the code it produces for final sites, for outputting your designs as an interactive mockup site, for example, Fireworks does a great job of exporting your images and html.
9. 9-Slice Scaling
This scaling technique can be applied to bitmaps as well as to vector objects. This allows intelligent scaling areas when the image is resized, leaving the remaining areas untouched. This can be applied to dialogues boxes, headers, scroll bars, anything which you would want to scale, but to scale non-uniformally.
10. Small Learning Curve
Lots of things are just the same as in Photoshop – lots of keyboard shortcuts, tools palette – windows, toolbars, panel layouts etc. but it’s more intuitive for users then Photoshop and Illustrator could ever be.
DING DING DING…. The do all staple Photoshop taps out from overwhelming evidence of web prototyping, and Illustrator never showed up to the fight. We have a winner. Happy designing…
