Why Fireworks is better for UI wireframing?Photoshop is a photo editing and graphic design tool and was never developed to cover UI designer needs. So, the simple answer is — the Fireworks software is made for it. Basically, there are two main advantages, but those are crucial:
Pages and StatesMost of the time your project consists of quite a few different screens (pages) and each screen can have different states depending on the situation. In PS, you can use layer comps for this, but since layer comps are never meant to be used this way, they are far from convenience that FW has to offer.
LibrariesIn the wireframing process, you constantly re-use a set of standard interface elements such as boxes, input fields, scroll bars, buttons e.t.c. PS users usually keep a separate file with a set of such bits and pieces, which is not very handy, and there is no way to scale them quickly, which makes wireframing too time-consuming. With FW you don’t need that workaround — it has symbol libraries functionality built-in.
Actually, let’s start from setting one up for you.
Setting up a libraryThere are several ways to start wireframing using FW libraries:
- Use built in Common Library
- Create your own library using your old PS library file
- Use a 3rd party library
- A combination of any of above
Common LibraryFW has some interface elements that you can use “from the box”. Just open your Common Library tab and browse through the folders and see what you can use in your work and may be delete something that you never will. There are some icons, form elements and other stuff. When you drag an item to your document, it goes to the Document Library where you can modify it to suit your needs. Those changes will apply to all items used in the document.
Creating Custom Library itemsIf you already have a set of spare parts that you use in PS — why not to make a FW library from them? Do it once and it will enhance your design process dramatically. Here is how:
- Open your PS file in FW:
- Convert element to symbol:
- Give it a name, set properties, save to an appropriate folder:
- Now you can find it in the Common Library:
- Drag it to your document, double click it and define scale area:
- Go back and scale using simple transform. No distortion!
3rd party librariesYou can use libraries created by your colleagues, downloaded for free or bought online. There are 3 types of such libraries:
- Extensions (example)
In the fist case you just install the extension:
and that’s it, it’s in your Common Library:
- Converted to symbols (example)
You can import symbols from it to your Document Library:
or open it and save symbols to Common Library:
- Not converted to symbols (example)
It’s similar to the one you may used to have in PS and consists of a lot of elements sorted by type using pages or layers. Just convert elements from it to symbols when you insert them to your document.
Working faster and smarterOK, now you have your toolbox right, ready to rock and can just follow your usual wireframing routine in a more effective way thanks to the library symbols. Great, but let’s not forget about some more cool FW features:
StylesThe main difference between FW and PS styles is that FW styles can keep font properties. Treat styles as a part of your Document Library and save all typography stuff there. It will save you a lot of time.
Master pageMost of the time, a lot of your screens (if not all of them) will have something in common, like logo, header, browser frame or mobile phone body e.t.c. Use master page for that kind of things and if, in the end, you decide to change your iPhone body color, browser type or your project will change title — you can save yourself a lot of dull copy-pasting.
Layer sharingIt’s a common case when you should add something to several, but not all screens of your project. FW has the “Share Layer To …” functionality where PS has nothing to offer but wasted time and frustration. Features like this make a huge difference.
InteractivityBring some life to your interface by making your prototype interactive. You can add hot-spots to your clickable areas and link to pages in the project:
or create behaviors and swap images in hot-spots or linked slices:
You can better understand how your project would work when you save it as HTML and click it through.