As interface designers, we’re often required to demonstrate the look and feel (and interactions) of the interfaces we design. We often begin with a series of flat images, and while these may be pixel perfect and show some amazing detail, they lack the context of the user experience.
Without context, it would be difficult for your clients to understand the flow of an app or website in the way you originally planned it. The best way to introduce context is by adding interactivity. By providing an interactive prototype (or interactive mockup), your clients can play around with it to their hearts’ content to get an idea of how the app will work and to test the interactions.
Prototyping In Code Vs. Prototyping In Fireworks
There are many prototyping techniques, and the one you use will depend on your level of technical skill in coding, the speed at which you need to produce the prototype, and the level of visual fidelity needed. Lately, prototyping in the browser has become a popular trend. So, do we still need visual tools such as Photoshop and Fireworks, or can we start right in the browser?
The answer is, it depends! Sometimes prototyping in code is best, and sometimes designing (and prototyping) in the browser is certainly not the answer.
When the prototype needs only simple interactivity, must be created quickly or requires detail and polish in its appearance, then Adobe Fireworks is the perfect tool because you don’t need to know any code to make a live prototype in very little time.
Why not Photoshop? While both Fireworks and Photoshop are excellent design tools (and often compared in UI design), Fireworks can take you one step further and produce a live prototype right from your design.
Fireworks is also very good when you need to create graphics for more complex prototypes that are created in development environments or even in the browser, because it can quickly slice, optimize and export graphic assets and can even help provide the CSS code for layout and text styles.
On the other hand, if you are proficient with code and need to make a prototype with complex interactivity, then prototyping in the browser might be the better option.
*PNG, Pages, Master Pages
PAGES (AND PNG)
Fireworks’ best friend is the PNG file format. Together, they achieve some pretty cool things, such as storing a multi-page document in one Fireworks PNG file (known as a Fw PNG). But I hear you say, “PNG is a flat file format!” While this is generally true, a PNG can also be extended to include various types of meta data. By using this ability to add meta data, Adobe Fireworks can store multiple pages in one PNG file, while maintaining complete editability within Fireworks itself (of vectors, bitmap objects, pages, layers, live filters and so on).
Fireworks also has a master page feature, which is a template for all of the other pages in your prototype. Let’s say that the same toolbar appears on all pages of your app: simply place the toolbar on the master page, and it will appear on every page. This eliminates the need to constantly duplicate elements and can save you many hours. Creating a master page is easy: just right-click on any page in the Pages panel and select “Set as Master Page.”
*SELECT BEHIND TOOL
The Select Behind tool (located in the Tools panel or by pressing
V twice) enables you to select a top-most object, and, with repeated clicking, select each of the elements directly beneath it in turn. This is yet another feature that helps you work more efficiently by not requiring you to awkwardly navigate the Layers panel, searching for an object either by name or tiny thumbnail.
While pages facilitate file management and enable us to easily make interactive prototypes, Fireworks gives us other workflow improvements, too, such as symbols. Symbols originate in Flash and are an easy way to build a library of reusable elements. If UI design has one defining characteristic, it is reusable elements.
*IMAGE MAPS AND HOTSPOTS
Fireworks uses hotspots to generate image map areas. An image map encompasses multiple areas, which are referred to as “hotspots.” Adding a hotspot is as simple as selecting an object on the canvas, right-clicking on it and selecting “Insert Hotspot.” Alternatively, you can use the shortcut
Control/Command + Shift + U, or in the menu go to Edit → Insert → Hotspot. You can also manually add hotspots with the Hotspot tool (found in the Tools panel).*WEB LAYER