A while ago I’ve started series of posts that should help Photoshop (PS) users to get advantage of Fireworks (FW) features with minimum discomfort of mastering an unfamiliar tool and use PS as a booster for it. Check Intro and Part 1. Setting up. Here is the next one — wireframing. In fact, all the following can be applied to the final graphic design process too, but wireframes are the stuff we usually start with, right?
So, let’s assume that all use cases and stories are sorted out, all paper and whiteboard doodles are done and you are ready to go digital. But first, let me explain why we are going to do it in FW instead of PS.
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 States
Most 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.
In 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 library
There 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
FW 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 items
If 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 libraries
You 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 smarter
OK, 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:
The 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.
Most 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.
It’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.
Bring 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.
More to come
I hope you found this post useful. Next time I’m going to tell you about some DOs and DON’Ts regarding PS and FW compatibility, must-have extensions and more. Stay tuned!
Most recent posts
- Responsive layout tests with Capybara and RSpec
- SQL Joins Visualizer – build SQL JOIN between two tables by using Venn diagrams
- Flexbox as a solution for browser reflow optimization
- Make AngularJS 1.0.7 work with Jasmine 2.0
- Git housekeeping tutorial: clean-up outdated branches in local and remote repositories