In the previous article 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.
I started with style guides like any other obsessive-compulsive designer: with the desire to make it simple to maintain and grow a design. Plus, knowing which component to use in a given situation is nice, too, right? Since making this a regular practice, I’ve found it’s been like having a nice combination of a CSS class and a pattern library all in one.
One of the first questions, understandably, is why use Fireworks for a style guide? Well, for me, it’s mostly because of symbols and styles. Sure, you could use similar things in Photoshop, but I find Fireworks’ implementation to be smarter.
Unless you’ve been on Mars for the last few months, you’ve already heard the news that Adobe is feature-freezing Fireworks. And Adobe is not offering a replacement tool for Fireworks users (at least, not for now.) What does this mean for you if you use (and rely on) Fireworks to design user interfaces and screens? What are your options?
In this article, we’ll take a close look at Adobe Fireworks, explaining why it is a unique and powerful design tool, how we can continue to use it effectively, and what our alternatives are for the future.
This article is the third part of an article series about improving your design workflow in Adobe Fireworks with some of the best extensions currently available. You may want to check out the first and second parts if you're not already familiar with them. – Ed.
We have already covered over a dozen brilliant extensions to add to your Fireworks arsenal, just the tip of the iceberg. With all-around great guys such as John Dunning, Aaron Beall, Matt Stow and Linus Lim continuing to support the app (an app that Adobe has finally decided it has had enough of), the power of Fireworks continues to make the lives of designers all over the world easier and more productive.
In my previous article on Smashing Magazine, I discussed seven excellent extensions that could fundamentally change your Web design workflow in Adobe Fireworks. The extensions expand Fireworks’ capabilities by adding valuable functionality that could make a huge impact on your overall productivity as a designer.
I have to admit, though, that at the time, I was able only to scratch the surface of what’s possible with Fireworks, so I’d like to add to the list six more extensions. As functionality, they are a bit more “niche” than the extensions in the previous set, but no less valuable in any sense.
Thanks to strong mobile Web adoption worldwide, we have seen the launch of even more responsive designs in 2012 and 2013. Most of these have been in the publishing category, but lately we are starting to see complex transactional websites, such as Currys UK, take a brave step into this new world.
For very well thought out reasons, Mojo Motors (a startup created in 2010 to provide shoppers with a better way to buy used cars) also just launched the first responsive website in the automotive market space.
I’ll come right out and say it. I think the grid is the unsung hero of a good design. It gives structure and lets the design fall perfectly into place on the canvas. With a grid, adapting and building something new into your design is easy. Think of it like a house’s foundation.
With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along. Today, we’ll share iOS Grid System, which I’ve been using when designing apps in Adobe Fireworks.