Mojo Motors’ Responsive Redesign With Fireworks: Visual Design Stage

Advertisement

In the previous article1 in this series, I discussed our ideation and initial prototyping process. We covered details on how to use Adobe Fireworks to set up a responsive design wireframe, reusable components, prototypes and ways to share designs.

In this article, we’ll share how we used Adobe Fireworks in our iterative visual design process, along with other useful tips.

Why Adobe Fireworks?

Before diving into details, let’s acknowledge that Fireworks became feature-frozen in May 2013 and that some of the visual results discussed in this article could have been achieved using alternative graphics software, such as Photoshop, Illustrator or Sketch812. But the hard truth is that Fireworks is still used by many designers and offers a unique workflow and integrated feature set, unmatched by any program available. For a good read on why Fireworks is still relevant, I recommend “The Present and Future of Adobe Fireworks3.”

In Search of the Key Design Tool

As discussed in the “Creating Wireframes And Prototypes” section of part 1, our choice of a design tool came down to the following:

  • Speed
    Fireworks proved to be quicker for directly creating and manipulating visual elements on the screen than other tools, like Photoshop and Illustrator. The combination of integrated vector tools and bitmap-editing capabilities in one package, plus pages, states, symbols, styles and extensions, was something unique and worked best for us.
  • File size
    We found that PSD visual design files created in Photoshop for the same screen designs are much larger than those created in Fireworks — sometimes two to five times larger.
  • Team learning curve
    When Gabriel Gross4 (our visual UI designer) joined the team, we had already created a lot of wireframes in Fireworks. He initially considered just translating those wireframes to Photoshop. Because of the amount of work that would have been required, he decided to try Fireworks on a few screens. About a week later, he suggested working directly from the Fireworks PNG wireframe files, instead of recreating the designs from scratch. From this point forward, we’ve been using the wireframe files as the starting point for visual design screens.
  • Workflow and efficiency
    Reusing wireframes as a staring point really helped us get from wireframes to high-fidelity visuals in record time. We were able to take advantage of the efficiencies built into sharing files and iterating on them together. For a detailed look at a similar workflow, check out “Designing Interactive Products With Fireworks5” by Nick Myers of Cooper6 and “iOS Prototyping With Adobe Fireworks and TAP7” by Shlomo Goltz8.

Note: Gabriel was also familiar with Adobe Flash and its various features and quirks. The transition to Fireworks was fairly straightforward — the Properties panel that spans the bottom of the screen, navigation of nested symbols, the symbols library and so on are quite similar in Fireworks and Flash.

Exploring Branding and Style

As discussed in the previous article, the design team decided on a pragmatic approach to creating visual elements. We decided early on in the project that we would only do as much visual layout and style exploration as necessary in graphics applications — the rest would be done through an iterative process in the browser. With this in mind, we ditched any elaborate branding exercise needed just for stakeholder buy-in and opted to create style tiles and a revised logo.

So, What Are Style Tiles?

Style tiles are a design document consisting of fonts, colors and interface elements that communicate the essence of the visual brand of a website or application. They help to communicate a proposed common visual language and can be used to discuss style preferences that meet the goals of the stakeholders or client. Samantha Warren9 explains the workflow pretty well in her article on A List Apart, “Style Tiles and How They Work10,” so I won’t go into deeper detail than this:

Websites are so much more than just usable interfaces: they tell a story…

Style tiles are a flexible starting point that define a style to communicate the web in a way that clients understand. A style tile is more refined than a traditional identity mood board and less detailed than a website mockup or comp. When an interior designer redesigns a room they don’t build multiple options of the designs they’re proposing, they bring color swatches, paint chips, and architectural drawings. Style tiles act as paint chips and color swatches for the interface that we can execute on any device or at any dimension. It’s a truly responsive solution to visual design.

To learn more about style tiles, I recommend also visiting Samantha’s website Style Tiles11.

Mojo Style Tile12
An sample style tile from Mojo Motors’ redesign process. (View large version13)

Typography and Typecast

Most designers would agree that their favorite graphics application does not provide an accurate preview of how text will appear in the browser. With this in mind, we did as much text layout as was needed in graphics applications and then explored the finer typographical details in the browser. There, we could also accurately evaluate the effect of responsive layouts on the type as we moved through breakpoints.

In working with fonts, we faced the same dilemma explained by the Typecast team14:

We discovered that working with system fonts in Fireworks was faster for our designers, but build was slow because our developers had to interpret fonts and classes, resolve inconsistencies and negotiate font compromises with the designers. Plus there was that pesky problem of comp fonts not always resembling site fonts due to the rendering.

And when we moved to designing with web fonts, it was the opposite problem. It was faster for developers because there were fewer negotiations and less guesswork. But designers were wasting valuable project time stepping through a really repetitious process to get the web fonts into their layouts. You know the deal:

Go to URL → Paste copy → Preview → Capture → Import to comp → Resize → Arrange – Repeat40 → Find typos → Pull hair out → Repeat → Show client comp → Get requests to make bigger, smaller, different → Die a little inside → Repeat20

Both approaches had serious drawbacks.

So, to help us compare and narrow down Web fonts for Mojo Motors’ website, we turned to Typecast’s own solution.

Typecast interface15
Exploring typography in Typecast.

Typecast16 is a powerful browser-based design tool that makes it easy to experiment and design with the actual Web fonts that you plan to use on your website. The application lets you design visually and builds standards-compliant HTML and CSS in the background. Each Typecast subscription also comes with access to Web fonts from Typekit, Font Deck and Google, as well as a free Fonts.com account. Other features include the ability to create style guides and to share projects. Typecast is really a game-changer, and I highly recommend considering it as part of your responsive design toolkit.

Redesigning Mojo Motors’ Logo

As part of the website redesign, our team was also tasked with rethinking the company’s logo. All of the logo explorations were done in Illustrator, which is better suited to this type of work. Using Illustrator made more sense because it enabled us to create and output both CMYK files for print and RGB files for the screen.

Mojo Logo17
The logo redesign combined elements of the old wordmark, a symbol and a new typeface.

Redesigned Mojo Motors business cards18
Mojo Motors’ business cards, before and after.

Setting Up The Workspace For Visual Design

The key to using an existing Fireworks wireframe file for visual design work is to set up the application and the files properly. As discussed in the previous article, we did this up front so that we could take advantage of the application’s pixel-precise layout capabilities and increase our overall efficiency throughout the project.

Let’s quickly cover the basics.

Keyboard Shortcuts

One thing that can speed up the completion of tasks in Fireworks is mastering the keyboard shortcuts. For someone transitioning from another Adobe application, Fireworks provides the option to customize the keyboard shortcuts to closely match those of Photoshop, Illustrator or InDesign — or any variation you may need, for that matter. Our team settled on Photoshop’s shortcuts because they were the most familiar.

Changing these settings in Fireworks is easy. In Windows go to Edit → Keyboard Shortcuts, or on a Mac go to Edit → Fireworks → Keyboard Shortcuts. Then, select “Photoshop” or another shortcut set from the “Current Set” dropdown menu, and click “OK.”

Keyboard shortcut window19
Customizing shortcuts in Fireworks.

To customize further, open the “Keyboard Shortcuts” dialog again:

  1. In the “Commands” field, select a specific Fireworks menu command or tool.
  2. Type a new shortcut combo in the “Press Key” field, and click the “Change” button;
  3. When you are done editing the shortcuts, save the shortcut set as a variant of the set you selected previously (e.g. “My_Custom_Set”).

Now you can work faster using the keyboard shortcuts that you are familiar with!

Grids, Guides, Rulers and Tooltips

The great thing about carefully setting our responsive design grids during the process of creating a wireframe is that all of the grids and guides that we needed were already in place for the visual design process. Below are some of the options that we enabled when setting up our initial files.

Rulers are really handy for orienting yourself visually and are required for working with guides on the screen (in the menu, View → Rulers).

Rulers in Fireworks20
Rulers around the canvas.

We set our visible horizontal and vertical background grids to 10 pixels. Grids and of some their options can be accessed by going to View → Grid → Show Grid/Snap to Grid/Edit Grid… or by going to Edit → Preferences → Guides and Grids.

Guides and Grids Settings window21
The guides and grids settings in “Preferences”.

This setting works well also because it matches the pixel increment (10 pixels) when objects are moved on the screen (for example, when we nudge an element using the Shift + arrow key shortcut). We often toggle this setting on and off as needed when drawing.

Background grid shown on canvas over artwork22
A vertical and horizontal background grid of 10-pixel increments.

We typically add guides to match the responsive grid layers and other objects as needed; guides are then toggled on and off while drawing. Guides in Fireworks are page-specific and don’t automatically appear on all pages unless placed on a master layer.

Here are a few useful tips:

  • Position unlocked guides precisely in Fireworks by clicking on a guide and entering the position directly.
  • Check guide’s spacing by placing your cursor between two guides and holding down the Shift key.
  • If you move a guide while holding down the Shift key, you can also precisely dial in the spacing.

Moving guide with precision23
Position guides accurately by double-clicking a guide.

Guides Spacing Measurement24
Measure guide spacing by pressing Shift between guides.

Guides visual positioning25
Reposition guides visually by holding down Shift while moving a guide.

Guides and their options can be accessed via View → Guides → Show Guides/Lock Guides/Snap to Guides/Clear Guides…. You can also use keyboard shortcuts to speed up these operations.

Note: To do more with guides, I highly recommend the Guides26 panel extension by Eugene Jude, which enables you to create guides from selections, copy and paste guides, etc.

For an in-depth look at grid and guide workflows, check the “Grids Panel27” and the “Guides Panel28” sections in Ashish Bogawat’s article “Optimizing the Design Workflow With Fireworks Extensions29.” (By the way, a similar panel named GuideGuide30 has recently become available for Photoshop users as well.)

Guides panel showing selection tab31
Guides panel extension.

Smart guides are really helpful and enable you to visually align objects on the screen without having to use the Align panel. Turning these on (by going to View → Smart Guides) will allow you to see the precise adjustments to the location or size of an object when performing a free transform operation.

Smart Guide32
Smart guides for visual alignment.

Useful tip: If you find yourself creating a lot of responsive design grids, then you might also want to consider the Insert Grids33 extension by John Dunning4334.

Color Management, Color Picker and Swatches

Unlike the rest of Adobe’s Creative Suite, Fireworks does not require any particular color management settings for you to get started. The application was designed from the ground up for screen design, and it is set to the RGB color space out of the box.

Note: The Color Palette panel, in addition to the RGB, HSV and HLS color spaces, also shows a CMYK option, but it is not recommended for print work.

Smart Guide35
Options in the Color Palette panel.

The popup color picker is quite easy to use and is one of the best ways to specify colors for a user interface. It supports RGB and HEX color selection by default, as well as the more flexible RGBa specification that is supported by all modern browsers. Another useful feature is the one-click color copy feature. (As of the time of writing, Sketch is the only other app that has similar RGBa capabilities. Also worth mentioning is that Adobe has just added color-picker options for fills and strokes in Photoshop CS6 and CC.)

Color Box Picker36
Fireworks’s color picker.

To bring in the color palette from our exploration, we saved an RGB .ASE file in Illustrator and imported it into Fireworks with the help of the Swatches panel. Once imported, the color scheme became immediately available in the color picker.

ASE swatch import export37
Export the .ASE swatch file from illustrator and import it into Fireworks.

The Color Palette panel is a great alternative to using the Swatches panel or color picker to specify colors. The panel is broken down into “Selector,” “Mixer” and “Blender” tabs.

Color Palette38
The ‘Color Palette’ panel.

  • “Selector” tab
    This allows you to choose between different color models and select colors using an Adobe-like color picker, instead of the default color cubes swatches. The available options include HSV, HSL, CMYK and RGB39; for most of our redesign work, we used the RGB model.
  • “Mixer” tab
    This is great for recoloring artwork and creating color tints. We relied on this greatly for stretching the range of our color palette. To try two different palettes in your document, follow these steps:
    1. Click “Palette1” on the left of the panel to set the base colors for the first palette.
    2. Click “Palette2” on the right side of the panel, and then select the base colors for the second palette.
    3. To switch back and forth between the two palettes, select the palette to recolor with and then click the “Replace Color” icon.
  • “Blender” tab
    Here, you can create a color gradation series, which is really handy for exploring gradients. All you have to do is this:
    1. Fill the color boxes at the bottom of the panel to select the beginning and ending colors.
    2. Use the “Steps” slider to select the number of steps in the series.
  • Exporting
    Exporting any palette out of this panel requires saving it as an .ACT40 swatch file, which can be shared with other Fireworks or Photoshop users. Unfortunately, Illustrator cannot open this swatch file format. To share with Illustrator, consider exporting an .ASE41 file via the Swatches panel, which will work across all Adobe products.

Note: The most recent versions of Fireworks (CS5, CS5.1, CS6) all natively support both .ACT and .ASE swatch formats. Earlier versions of Fireworks (CS4 and older) support only .ACT.

Setting Up The Document For High-Resolution Displays

Another decision we had to make before starting the visual design process was how to set up our files for high pixel-density (or “Retina”) displays. We could approach this in a few ways:

  1. Start with standard-resolution files and scale up for Retina graphics. We opted for this because we were starting from standard-resolution wireframes.
  2. Start with high-resolution files and scale down for non-Retina graphics.

Both conversion methods should be quite seamless and yield the same results. Objects in Fireworks are created as vector shapes by default, and any effects applied will also scale (assuming, of course, that you have not created any shapes using filled selections, which were popular in Photoshop prior to the more robust shape layer option available today). All text objects in Fireworks will scale without problems, too.

Working With Raster Images (Bitmaps)

Any bitmap images can be replaced with a higher-resolution versions. The key is to always start with high-resolution images where needed and scale down. Below are a few other options to consider:

  • Image symbols
    An alternative to replacing your images (and one I highly recommend) is to turn your high-resolution images into symbols (Modify → Symbol → Convert to Symbol, or F8) and scale down their placed instances in the layout. Once you turn a raster image into a symbol, you can scale it down to any size and then back up to the original size as many times as you’d like without any loss in quality. If you choose this method, you won’t have to replace your images!
  • Linked images
    An option I discovered recently is to link images. This requires installing the free Linked Images42 extension by John Dunning4334. With this option, your layouts will be refreshed with the high-resolution images upon being scaled up (the images are stored in a folder outside of the Fireworks file). For a detailed overview of this method, please check the “Linked Images44” section of “Fireworks Extensions for a Better Design Workflow, Part 26045.”

Note: For layout purposes, we used the first option to set image symbols of cars as placeholders. The final car images are generated dynamically on the server and rendered on the live website. We won’t cover this production process in this article.

Hint: A good read on Retina graphics is “Retinafy Your Websites and Apps46” by Thomas Fuchs.

Live (Pre)View: Bringing Wireframes To Life

Live View, Skala Preview and Xscope

Just as when we were creating the wireframes, we frequently had to check how the mockups looked and scaled on real devices, such as the iPhone and iPad.

For quick previews while designing, we turned again to the LiveView47 app (check out my previous article48 for details on our process). Alternatives to LiveView are Skala Preview49 and Xscope50, which provide similar functionality but integrate better with Photoshop. Skala Preview is also compatible with Android devices.

Bringing Wireframes to Life

Once the file was set up, the next step was to add pixel precision to the interface and content. This is also when we applied brand elements such as color, typography, iconography and the logo from our style tiles. Putting the pages for each breakpoint in one working file made it easier to transpose screen elements between mobile, tablet and desktop layouts (see part 1 of this series for details on pages, states and symbols in Fireworks).

Favorite Fireworks Features During The Visual Design Stage

In this next part, we’ll cover some Fireworks features, tools and workflows that really came in handy during the visual design stage.

Properties Panel (Property Inspector Panel)

A lot of great features in Fireworks make creating screen graphics fast and efficient, but the single most powerful UI feature for us was the contextual direct editing of objects, available via the Properties panel (also called the Property Inspector (or PI) panel). This powerful panel changes contextually based on the type of object selected on the canvas.

The Properties panel is normally found at the bottom of the screen when a document is first opened in Fireworks. It allows you to manage all attributes, such as fills, strokes, gradients, patterns, textures, size, position, scale, opacity, blend modes, live filters, text properties, masks (and masks properties), symbols and much more, for any selected object or group of objects.

Property Inspector51
In these three sample screenshots, you can see how the Properties panel adapts to the type of object selected. (View large version52)

Once you understand how the Properties panel works, quickly inspecting and changing the properties of all types of objects with pixel-level precision become really easy. You might also find that making changes is a lot faster than in any other graphics application (including Sketch!).

Gradients

Creating gradients is quite simple and intuitive. Adjusting and changing the fill type can be easily done at any time. Fireworks also offers 12 gradient types out of the box. And the dither option reduces banding when images are exported.

Gradient Selector53

Side note: Starting with CS6, Adobe added some similar features to Photoshop, including the ability to add fills and strokes to shape layers as an alternative to live filters such as gradient overlay effects. Unfortunately, you can’t change the fill type as easily once you have committed to a gradient or any other type. Changing the fill type requires selecting the shape layer with the Path Selection tool, which will reveal your options in the options bar (in CS6) or in the Properties panel (in CC), at which point you can make your changes.

Textures

In addition to applying fills to vector objects in Fireworks, you can add textures to any fill type or stroke. Being able to apply textures to strokes is really useful for simulating CSS border-image effects, which is now supported by most modern browsers. Other features include being able to use your own texture files and specifying the opacity level.

Textures Menu54
Apply textures with (again!) the mighty Properties panel.

If you plan on using textures a lot, the free Texture Panel extension by Matt Curtis55 is a good addition to Fireworks. For details on this extension, check out Matt’s article, “Using the Texture Panel in Adobe Fireworks56.”

Texture Panel57
Texture Panel extension.

Fireworks Live Filters and Photoshop Live Effects

Fireworks comes with most of the important non-destructive effects that you will need to bring screen designs to life, and it includes some familiar Photoshop live effects as options. I typically opt for Fireworks’ native filters before considering the Photoshop ones.

Fireworks’s live filters can be applied to any type of object (vector, bitmap, symbol, etc.) non-destructively, and the stacking order of applied live filters may be changed simply by dragging and dropping. Another key feature is the ability to apply multiple filters of the same type to a single object.

Fireworks Live Filters58
Fireworks’ live filters in the Properties panel.

I find the native filters to be quite adequate for most tasks, and I need to switch to Photoshop only for complex compositing, correcting photo colors and creating textures.

Blend Modes

Blend modes in Fireworks are similar to Photoshop’s and Illustrator’s. For a long time, Fireworks was the only Adobe application that allowed you to apply blend modes to multiple selected objects (or layers) at once. (Similar features were introduced to Photoshop in CS6. Illustrator requires the opacity option to be edited in the Appearance or Transparency panel.)

Blend Modes59
Blend Modes may be modified in the Layers panel (top screenshot) and in the Properties panel (bottom screenshot).

Pasting Attributes

Copying and pasting attributes (using the simple Control/Command + C and Control/Command + Alt + Shift + V shortcuts) between objects is an awesome feature and a huge timesaver, one we often leveraged during the process of going from wireframes to visual comps. Unlike copying and pasting layer styles in Photoshop, Fireworks transfers all attributes — including font type, font size, fill type, stroke type, applied live filters and so on — from one selected object to another.

Pasting attributes can even be done selectively (see the “Paste Selective Attributes” section of “Fireworks Extensions for a Better Design Workflow, Part 26045”), which makes the feature even more powerful.

Styles and the Styles Panel

While being able to copy and paste attributes is very useful, using Fireworks’ styles is a lot more efficient and an essential part of creating visual mockups.

Styles in Fireworks are analogous to CSS in Web design. They can be quickly applied to objects on the screen to mock up variations or can be used to apply a final style guide for brand consistency. Whenever a style definition changes, all objects that have the same style are updated automatically.

Styles Panel large61
Apply styles via the Styles panel from the built-in library.

Styles Menu in Property Inspector62
Apply styles via the Properties panel.

Style can be created and managed in both the Styles panel and the Properties panel. As a bonus, Fireworks ships with a large library of premade styles that can be applied very quickly to any mockup. You can also easily create, edit and reuse your own styles.

Rounded Rectangles

Creating (and modifying) rounded rectangles is very easy, and Fireworks is the most flexible here of the three Adobe applications typically used for screen design (the other two being Photoshop and Illustrator). Create one by modifying the roundness of a rectangle shape (i.e. the border-radius of each corner) directly in the Properties panel or by inserting a rounded rectangle auto shape.

Rounded rectangles63
You can control the roundness of a rectangle’s corners in one of two ways. (View large version64)

My preference is to use the Properties panel because you can specify the roundness in percentages or pixels. But modifying the roundness at any time is easy either way. You can also modify individual corners of a rounded rectangle. When you’re using the Rounded Rectangle auto shape, the roundness can be also controlled with the Auto Shape Properties panel.

(Photoshop CC just added an option to apply rounding to individual corners of a rectangle or to a rounded rectangle shape layer via the Properties panel. This is a welcome change and a great alternative to adding rounded corners as an appearance effect in Illustrator.)

Multi-Border Rectangle Auto Shape

The Multi-Border Rectangle65 auto shape is an extension by John Dunning that makes it easy to mock up CSS-style borders on vector rectangles. You can specify a different border width and color for each of the four borders of a rectangle, just as you do with CSS for each border of an HTML element. This extension proved very useful during our visual design process.

Multi-border autoshape66
We used the Multi-Border Rectangle auto shape to add top and bottom borders to rectangles.

Path Panel

Fireworks has an easy to use and robust set of vector-editing tools, with many of the same features found in Illustrator. Most of the tools can be accessed from the Path panel (and a few are in the “Modify” menu). In CS6, some of the basic path tools were added to the Properties panel, for easy access.

Note: There is a more recent version of the Path panel67 (with many additions and improvements) than the one that ships with Fireworks CS6. (In case you’re wondering, Aaron Beall68 is the talented developer responsible for the latest versions of the Path panel in Fireworks, including the one in CS6.)

Path Panel69
The ‘Path’ panel.

Importing From and Exporting to Illustrator

Fireworks handles .AI files very well, and we used it whenever we had to work with vector art created in Illustrator or in Illustrator-compatible applications. As part of the importing process, you are even presented with a “Vector File Options” window, giving you the option to select a specific Illustrator artboard to import.

We especially took advantage of this workflow with our company’s logo and illustrations throughout the website. Our freelance illustrator worked in Illustrator and imported directly into our Fireworks layouts. For smaller artwork, you could also copy a single object or group of objects in Illustrator and then paste them directly in Fireworks.

Illustrator Import to Fireworks70
The illustration for Mojo Motors’ “Tour” page was created in Illustrator and then imported into Fireworks, with all vectors perfectly preserved and editable. (View large version71)

Exporting vector objects to Illustrator for further refinement is as easy as selecting the object (or group of objects) in Fireworks, then going to Edit → Copy as Vectors, and then pasting the vector objects in Illustrator. (Simply copying and pasting objects would put bitmap objects in Illustrator, instead of vectors, so always go to Edit → Copy as Vectors, instead of Edit → Copy.)

To export large artwork in Fireworks, save the entire file as an .AI file and then open that .AI file in Illustrator.

Note: In Illustrator CC, Adobe removed the importing and exporting options described above. If you are using Illustrator CC, you might need to save your files as “Illustrator v. CS6” to take advantage of all of these capabilities, or work in Illustrator CS6 or lower, which supports all of these options out of the box.

Importing From and Exporting to Photoshop

Importing and exporting with Photoshop is a breeze with Fireworks — Fireworks can save to .PSD and also open .PSD files. In both cases, layers and naming conventions will be preserved.

The results will vary according to the options you’ve set during the importing or exporting process and how much editability you would like to retain. My suggestion is to experiment a little to see which settings work best for your purpose.

Photoshop import and open.72
The Photoshop importing and file-opening dialogs in Fireworks.

Note: As of the time of writing, Photoshop importing and exporting still works well in Photoshop CC and CS6.

Align Panel

If you intend to create pixel-precise layouts, then you cannot do without the Align panel. With it, you can align multiple objects to each other or relative to the canvas. (Adobe Illustrator has a similar feature, and it was just introduced to Photoshop CS6 as well, although its functionality is not as robust.)

Two useful features that are unique to the Align panel in Fireworks are the “Match Size” and “Space Evenly” options.

Align Panel73
The ‘Align’ panel.

  • Match size
    This option lets you match the size of the selected object to the height or width (or both — but usually the longer dimension) of another object.
  • Space evenly
    This is different than distribution, enabling you to align objects a fixed distance apart.

The Align panel is invaluable. The only option that I wish Fireworks had adopted from Illustrator is the alignment object reference, which enables you to pick the object to align your selection to.

Symbols

During the visual design process, we continued to look for opportunities to modularize interface components by creating reusable symbols. In some cases, we simply applied visual styles to existing wireframe symbols.

Styled component symbols are very efficient and reduced the time we took to create alternate layouts and iterations. For details on creating symbols, read the section “Creating Reusable Modular Elements” in part 1 of this series74.

9-Slice Scaling

The 9-Slice Scaling tool is original to Fireworks and was adopted later by Flash and recently by Illustrator. With it, you can scale objects without distorting protected areas. A popular use of the tool is to protect rounded corners in a symbol when scaled.

9-Slice Guides (UI button)75
Use the 9-Slice guides to preserve rounded corners in a button.

The 9-Slice Scaling tool works on symbols and on both vector and bitmap objects, making it extremely versatile.

Single-Layer Editing

This feature is really geared to designers who are coming to Fireworks from Photoshop and who are used to selecting layers before working on them. I personally prefer the default auto layer selection method in Fireworks because it is faster, especially in files with a ton of layers.

Single layer editing mode76
The single-layer editing option in the Layers panel menu.

Conclusion

I was really torn about whether this article would still be relevant in light of the announcement that Fireworks has been feature-frozen77. However, as I explored all of the alternative ways to make one’s workflow efficient, I realized that Fireworks is still powerful and will continue to be the best option until Adobe unveils its replacement or until another competitor supports all of its features, including integration with other Adobe products, as Fireworks currently provides. (In my opinion, Photoshop and Illustrator have recently gained some sorely needed features that make the process of designing for screens more efficient, but they’re not there yet.)

Mojo Motors Dashboard78

Mojo Motors mobile web screens79

Mojo Motors tour screen on iPad tablet80
Screenshots of Mojo Motors’ website after the redesign (Click each image for a larger version).

Alternatives?

Are there alternatives to Fireworks? Of course.

For example, for teams comfortable stepping outside of the Adobe world, the Mac-only Sketch812 is a great replacement, and I hope to see it integrate more of the time-saving features offered by Fireworks. Read about some of the benefits of using Sketch for UI design in the following articles:

Sketch doesn’t totally replace Fireworks, but it’s getting pretty close in my opinion. (Craig Erskine, who uses both Sketch and Fireworks, has shared his thoughts84 on the matter.)

At the other end of the spectrum, I am quite excited about applications such as Macaw85, which are embracing a more modern approach to designing for screens with a native desktop application. I recently supported Macaw’s Kickstarter effort and am currently trying out the product with my early-bird license. (The product will launch sometime in March or April 2014.)

Another noteworthy project is Evolve UI, a somewhat secret yet exciting initiative by Tribaloid86 and one that could shake up our workflow in the next few years. Evolve UI is being developed by Alan Musselman, who worked as Fireworks’ project manager for quite some time, and it is currently in alpha development87.

Awards

Last but not least, I’d like to mention that Mojo Motors’ redesigned website received quite a few awards after it launched — namely, the Web Marketing Association’s WebAward for 201388, the Interactive Media Award for 201389 and the Automotive Website Awards’ Rising Star award for 201490. I feel very proud of the work we did on this project. Fireworks was invaluable to our team, minimizing the production work and freeing us to focus on designing a good product for our users.

Note

All of the screenshots of Mojo Motors’ website are from the initial launch state at the end of 2012. Some of the screenshots in this article might not match the current website because pages are frequently optimized according to analytics, user testing and performance.

Mojo Error Page91
The 404 page.

Further Reading

Should you want to explore more of Fireworks’ features and options, these resources might be helpful:

What’s Next?

We’ve planned this case study of Mojo Motors to span three articles. Part 1104 covered the UX and interaction design stage. Part 2 has covered the visual design stage. Part 3 (currently on the drafting board) will discuss how our team translated the visual design to the front-end iterative development cycle. Stay tuned!

(mb, al, il)

Footnotes

  1. 1 http://www.smashingmagazine.com/2013/08/26/mojo-motors-responsive-redesign-with-adobe-fireworks-part-1/
  2. 2 http://www.bohemiancoding.com/sketch/
  3. 3 http://www.smashingmagazine.com/2013/12/19/present-future-adobe-fireworks/
  4. 4 http://www.linkedin.com/in/gabejgross
  5. 5 http://www.adobe.com/devnet/fireworks/articles/cooper_interactive.html
  6. 6 http://www.cooper.com/
  7. 7 http://www.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/
  8. 8 http://www.smashingmagazine.com/author/shlomo-goltz/
  9. 9 http://samanthatoy.com
  10. 10 http://alistapart.com/article/style-tiles-and-how-they-work
  11. 11 http://www.styletil.es
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Mojo_Style_Tile_lg-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Mojo_Style_Tile_lg-opt.jpg
  14. 14 http://typecast.com/about
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Typecast_lg1_A-opt.png
  16. 16 http://typecast.com
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/03/mojoLogo_B-opt.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/03/mojo_business_cards_B_lg-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/03/keyboard_shortcuts_AA-opt.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/03/fw-rulers-mac_lg-opt.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/03/bkg_grid_window_B_lg-opt.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/03/bkg_grids-opt.png
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/03/guidemove_precision-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Guides_measure_small-opt.png
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Guides_move_sm_cropped-opt.png
  26. 26 http://www.adobe.com/devnet/fireworks/articles/guides_panel.html
  27. 27 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#grids
  28. 28 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/#guides
  29. 29 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  30. 30 http://www.smashingmagazine.com/2012/01/03/guideguide-free-plugin-for-dealing-with-grids-in-photoshop/
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Guides_panel_blur-opt.jpg
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/03/smart_guides-opt.png
  33. 33 http://johndunning.com/fireworks/about/Grids
  34. 34 https://twitter.com/fwextensions
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2014/03/color-modes-lg-opt.png
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2014/03/colorbox_picker-opt.jpg
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2014/03/ASE_swatch_lg1-opt.png
  38. 38 http://media.smashingmagazine.com/wp-content/uploads/2014/03/color_palette_B_lg-opt.jpg
  39. 39 https://en.wikipedia.org/wiki/List_of_color_spaces_and_their_uses
  40. 40 http://www.adobe.com/devnet-apps/photoshop/fileformatashtml/#50577411_pgfId-1070626
  41. 41 http://www.selapa.net/swatches/colors/fileformats.php#adobe_ase
  42. 42 http://johndunning.com/fireworks/about/LinkedImages
  43. 43 https://twitter.com/fwextensions
  44. 44 http://www.smashingmagazine.com/2013/09/20/fireworks-extensions-for-better-workflow-part-2/#linkedimages
  45. 45 http://www.smashingmagazine.com/2013/09/20/fireworks-extensions-for-better-workflow-part-2/
  46. 46 http://retinafy.me
  47. 47 http://www.zambetti.com/projects/liveview/
  48. 48 http://www.smashingmagazine.com/2013/08/26/mojo-motors-responsive-redesign-with-adobe-fireworks-part-1/
  49. 49 http://bjango.com/mac/skalapreview/
  50. 50 http://xscopeapp.com
  51. 51 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Property_inspector_context_lg-opt.png
  52. 52 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Property_inspector_context_lg-opt.png
  53. 53 http://www.smashingmagazine.com/wp-content/uploads/2014/03/gradients_panel_lg-opt.png
  54. 54 http://www.smashingmagazine.com/wp-content/uploads/2014/03/textures_menu_A_lg-opt.png
  55. 55 http://www.smashingmagazine.com/author/matt-curtis/?rel=author
  56. 56 http://www.smashingmagazine.com/2012/11/14/texture-panel-adobe-fireworks/
  57. 57 http://www.smashingmagazine.com/wp-content/uploads/2014/03/texture_panel_A-opt.png
  58. 58 http://www.smashingmagazine.com/wp-content/uploads/2014/03/filters_applied_lg-opt.png
  59. 59 http://www.smashingmagazine.com/wp-content/uploads/2014/03/blendmodes-opt.png
  60. 60 http://www.smashingmagazine.com/2013/09/20/fireworks-extensions-for-better-workflow-part-2/
  61. 61 http://www.smashingmagazine.com/wp-content/uploads/2014/03/styles_button_panel_lg_A-opt.png
  62. 62 http://www.smashingmagazine.com/wp-content/uploads/2014/03/styles_menu_A-opt.png
  63. 63 http://www.smashingmagazine.com/wp-content/uploads/2014/03/rounded-rectangles-lg-opt.png
  64. 64 http://www.smashingmagazine.com/wp-content/uploads/2014/03/rounded-rectangles-lg-opt.png
  65. 65 http://johndunning.com/fireworks/about/MultiBorderRect
  66. 66 http://www.smashingmagazine.com/wp-content/uploads/2014/03/multi-border_autoshape_lg-opt.png
  67. 67 http://fireworks.abeall.com/extensions/panels/Path/
  68. 68 http://fireworks.abeall.com
  69. 69 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Path_panel_A-opt.png
  70. 70 http://www.smashingmagazine.com/wp-content/uploads/2014/03/illustrator_import_lg-opt.png
  71. 71 http://www.smashingmagazine.com/wp-content/uploads/2014/03/illustrator_import_lg-opt.png
  72. 72 http://www.smashingmagazine.com/wp-content/uploads/2014/03/photoshop-import-and-open_lg-opt.png
  73. 73 http://www.smashingmagazine.com/wp-content/uploads/2014/03/align_panel-opt.png
  74. 74 http://www.smashingmagazine.com/2013/08/26/mojo-motors-responsive-redesign-with-adobe-fireworks-part-1/
  75. 75 http://www.smashingmagazine.com/wp-content/uploads/2014/03/9-Slice_Guides_lg-opt.png
  76. 76 http://www.smashingmagazine.com/wp-content/uploads/2014/03/SingleLayer_editing_A-opt.png
  77. 77 http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html
  78. 78 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Mojo_desktop_B_lg-opt.jpg
  79. 79 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Mojo_iPhone-5C_B_lg-opt.jpg
  80. 80 http://www.smashingmagazine.com/wp-content/uploads/2014/03/tablet_B_lg-opt.jpg
  81. 81 http://www.bohemiancoding.com/sketch/
  82. 82 http://medium.com/design-ux/c59ff242715d
  83. 83 http://medium.com/design-ux/25545f6cb161
  84. 84 http://dribbble.com/shots/1434819/
  85. 85 http://macaw.co
  86. 86 http://tribaloid.com
  87. 87 https://groups.google.com/forum/#!forum/underdog-discussions
  88. 88 http://www.webaward.org/winner.asp?eid=19327#.UxnW9dzWJ7G
  89. 89 http://www.interactivemediaawards.com/winners/certificate.asp?param=283891&cat=1
  90. 90 http://www.automotivewebsiteawards.com/20140124-mojo-motors-named-a-rising-star-at-2014-awas/
  91. 91 http://www.smashingmagazine.com/wp-content/uploads/2014/03/Mojo_errorPage_B_lg-opt.png
  92. 92 http://www.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/
  93. 93 http://www.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/
  94. 94 http://www.smashingmagazine.com/2012/10/12/adobe-fireworks-enterprise/
  95. 95 http://www.smashingmagazine.com/2010/09/17/the-power-of-adobe-fireworks-what-can-you-achieve-with-it/
  96. 96 http://firetuts.com/adobe-fireworks-siri-icon/
  97. 97 http://firetuts.com/sprite-animation-using-adobe-fireworks-and-axure/
  98. 98 http://www.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/
  99. 99 http://www.smashingmagazine.com/2013/01/25/ios-prototyping-adobe-fireworks-tap-part2/
  100. 100 http://www.smashingmagazine.com/2013/02/15/ios-prototyping-adobe-fireworks-tap-part3/
  101. 101 http://www.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/
  102. 102 http://www.smashingmagazine.com/2013/09/20/fireworks-extensions-for-better-workflow-part-2/
  103. 103 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/
  104. 104 http://www.smashingmagazine.com/2013/08/26/mojo-motors-responsive-redesign-with-adobe-fireworks-part-1/

↑ Back to topShare on Twitter

Olawale is a User Experience Designer and Digital Strategist with over 12 years experience leading, designing and developing standards based digital, web and mobile interactive products. Head of UX at Mojo Motors in 2012. Currently Director of User Experience at Amplify Learning (a part of Amplify Education Inc.). He is very passionate about mobile and multi-channel content consumption. In his recent stint at agency HUGE, he served as the User Experience Lead for Comcast mobile work.

Advertising
  1. 1

    One of the other alternatives, is *coding* the designs, rather than creating full layouts in fireworks/photoshop etc. – this, of course, relies on the designer/s knowing how to code fairly well.

    It’s a pretty good job, but there’s some ropey breakpoints on some of the pages – one example, tour. I’ll admit, I’m resizing my browser, but around the region of 800px wide to around 1000px, there’s some issues.

    Another fairly large issue with the site in general, is the fact that it makes 86 http requests! – consider aggregating all the css and js into single file requests, this should dramatically improve mobile performance.

    0
    • 2

      I’m the developer at our agency. I’ve found myself building extremely quick mockups and prototypes of layouts during meetings. I’ve gotten so good at this, by the time we’re done discussing a project, I can show the designers some of the ideas brought to life.

      They’ve started building their layouts based on these prototypes. It’s not the most ideal approach, but since they’re more classically trained, it’s easier for them to work this way.

      1
      • 3

        I hear you Corey, been there, done that numerous times, way back to the crazy days of “match the photoshop document pixel perfect.”

        In more recent times, I’ve worked alongside designers to prototype as they design elements, working with a framework rather than producing entire layouts in photoshop/illustrator/fireworks. This also allowed us to throw framework prototype code to the programmers before the final aspects of the design were finalised. In short, we were all working together at the same time, with regular discussions.

        I’m now in a position where I both design and develop and so tend to create prototypes directly in code – static layouts. There’s pro’s and con’s to this, but generally, the pro’s outweigh the con’s fairly substantially.

        One of the biggest benefits is allowing the end client to interact with prototype designs, as they are in code.

        0
    • 4

      This may be faster initially, however, if you are working in an agency setting and have clients that you build sites for, you are taking a fairly large risk by jumping into coding and not showing them a mockup first. I’ve seen so many responsive sites that look incredibly boring because they use the exact same formula and they are all flat looking because no one knows how to design nicely textured sites for responsive layouts. Company portfolios are made up of sites that look exactly the same with a logo and color tweak. No one actually THINKS about the design anymore, only about if it will function on a phone or not. This is not web “design”. Nor is it good marketing. Marketing departments/specialists are usually overlooked in the development of websites, from what I’ve noticed. Everyone seems to think as long as there is an h1 and a few h2′s on the page you’re good to go.
      Everyone needs to be involved in a web development process before a piece of code is written or a pixel is pushed. Pencil and paper.

      1
    • 5

      Olawale Oladunni

      March 25, 2014 5:33 am

      @Mathew Thanks for the comments. Agreed that coding is certainly an alternative and one that we also employed. Note that while the article presents the visual process as separate, we actually did not create complete static comps of the entire site before implementing in code but instead created enough visuals to allow iteration in the browser.

      On the layout bugs and HTTP request suggestions, I will pass this on to the Dev team at Mojo.

      0
  2. 6

    Fantastic effort on the Mojo Motors project. Is it me, or does Fireworks limit the aesthetic diversity of websites? Many of the sites designed with FW this minimalist, vector quality to them. I feel as though Fireworks is a great wireframing/protyping tool, while Photoshop excels at art/design direction. Could you comfortably produce something like this (https://www.behance.net/gallery/Diageo/14603795) with Fireworks? Or would there be a lot of back and forth between PS and FW?

    0
    • 7

      I agree and disagree. The site like you used as an example can be made in FW and mosy who use FW use it with PS for photo manipulation but FW has a great bitmap editor too.

      I do agree how ever a lot of FW site look rather wireframe-ish but I think that is the designers fault and not so much the softwares downfall.

      0
    • 8

      Olawale Oladunni

      March 25, 2014 4:57 am

      @Adam – Fireworks can easily be used to create the types of heavily art directed non-transactional sites you linked to in your comments effortlessly. The need to go back and forth between FW and PS will depend on the designers expertise in FW and the design needs for photo manipulation. Also remember that Mojo is a commerce centric responsive web site which has a lot of heavy lifting to do. If you need examples of what is possible with Fireworks, research the works of renowned designers like Andy Clarke (http://stuffandnonsense.co.uk), Jon Hicks (http://www.hicksdesign.co.uk) and screens for Creative Suite by the Adobe team.

      The choice of style and design always comes down to the purpose of the website, user experience, performance and brand design principles. In our case, we were designing for a complex transactional site that does a lot of intense processing of third party vehicle data and non-curated car images from varying sources that we don’t control.

      A part of our design principles is to defer to content as this is the main reason users come to the site. For this reason the design choices were centered around making things like the car photos, car price and price drops which are the main driver of traffic on any automotive classified or market place site very easy to find. Also because we took a mobile first approach to the project we were able to pair down visual elements to the essential that work across devices/platforms while keeping content access consistent. For reference sites within the auto classified vertical you can visit auto trader.com or edmunds.com which are some of the most heavily trafficked despite the non-heavily art directed aesthetic.

      0
  3. 9

    Great tutorial. I appreciate any content contributed to Smashing Magazine, but there’s way too many contributors still suckling on After Effect’s teet. We developers can’t keep holding on to the past, we need to embrace progression and future technologies.

    0
  4. 10

    I love FW and use it daily. A lot of folks complain about newly written articles about FW even though it’s been continued. The simple fact is that Fireworks is the one that got the workflow down right for screen production. Anyone looking to produce and or help give feedback on new tools should know the awesomeness they’ve been missing with FW and request some of those features be in new tools.

    0
  5. 11

    Nice article.

    Regarding Fireworks, great tool, I use it for all my projects on daily basis.
    Check out some work that has been produced by Fireworks (vector capabilities are great in this tool)
    http://dribbble.com/search?q=fireworks

    Hope we’ll see a worthy successor soon :)

    0
  6. 12

    This is not a post! It’s a book! Very well done :)

    0
  7. 13

    Fireworks is definitely the best tool for doing website layouts. It’s SOOO much easier to learn and use than Photoshop. PS is for photo manipulation and editing, FW is just perfect for webdesign.

    It’s a shame that Adobe stopped development for this great tool. Really sad about that.

    0
  8. 14

    abhimanyu naikare

    April 3, 2014 2:12 pm

    Very nice i have similar works but in illustrator check my portfolio on behance : abhimanyunaikare

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top