Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Designing UI with Fireworks

Monday, November 18th, 2013 by Servage

Last year, in 2012, we witnessed the rising trend of responsive website design in various niches. This trend will continue to rise; and so, we need proficient designing tools, such as Adobe Fireworks, to make highly interactive UX designs, via planning and prototyping. In this post, I illustrate some decent approaches to responsive designing, using Fireworks. The focus here is on user experiences and interaction designing aspects.

Grid layout

In responsive design, grid layout is important. The web designer must still consider content prior to designs. Once content is developed and placed, you get a better idea about the placement of designs. With responsive web designing, content elements like text, images, and videos are always in a fluid state and vary from device to device.

Fortunately, Fireworks has a great set of tools to deal with responsiveness of content, once you have an idea about the dimensions of the images, placement of text and videos. You can easily create prototypes in Fireworks for different devices, using add-ons and extensions like SAP. Layer management in Fireworks is also far easier, as you just need to make clicks or drag the mouse cursor to select objects, without going back and forth with layer panels, as is the case with Photoshop. Thus, preparing various grids like a desktop grid, a tablet grid and a smartphone grid is a quick process when compared to other design software.

Fireworks also allow us to make use of Gridset and Gridpark to create grid files for your images, that are entered into HTML. You can make desired breakpoints in Fireworks without a hitch. If you are smart designer, you can make three breakpoints, such as a 12 column grid for the desktop, and another 12 column grid for tablets, while adding a six column grid for smartphones. You don’t have to change the dimensions of modules. Instead, you just place modules side-by-side for desktop and tablets, while above and below for smartphones.

Direct Benefits of Fireworks

Beyond the benefits of grid formation and layout preparations in Fireworks, there is further usefulness for responsive designing. Fireworks is a vector tool, in contrast to the others and their bitmap features. This enables us to make low and high fidelity wireframes and UI designs for hand gesture gadgets, by making clickable prototypes. Thus, you find all the essential capabilities for creating responsive designs for different devices and different operating modes without having to switch between different software and tools.

Another direct benefit is its built-in symbol libraries that reduces your work for the graphic part. The most obvious benefit is its file format. The PNG file format is five times lighter than PSD, and you can easily view PNG in any image viewer or browser without demanding an export for JPEG or GIF. Therefore, your team can work on the same PNG file after approval from the clients or other team members. From the perspective of the responsive web designer, the Pages and State features are highly beneficial for creating multiple screen layouts without creating separate files.

As stated above, the Pages functionality allows you to make different breakpoints of the same page rapidly, as you can switch between breakpoints quickly. The State panel allows you to make document interaction, attached with each different breakpoint. Adobe software offers an additional advantage, as you can create groups of components in a re-usable format, by converting them into a symbol, as we can do in Flash and Fireworks. This way you have modules for reusable components to use them again and again. You can covert many objects into a single symbol, just by selecting them and apply the Convert to Symbol command.

References & More Reading

Mojo Motors Responsive Redesign With Fireworks: UX And Interaction Design
Responsive Web Design

Designing UI with Fireworks, 3.5 out of 5 based on 4 ratings
Categories: Software & Webapps, Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.