Many people know that Fireworks is a great tool for web design, prototyping and UI design. But what about icon design? Icon design is a very specific skill that overlaps illustration, screen design and, of course, visual design. An icon designer needs to understand lighting, proportions and, most importantly, the context of the icon itself.
The BBC published an interesting article about icon design and skeuomorphism one year ago, titled "What Is Skeuomorphism?" It’s definitely worth reading because it explains why icons often reflect the real world and the thinking behind it.
A few weeks ago, I mentioned some of the best extensions that are currently available for Fireworks. Today, I'll cover some of the best tutorials and articles, as well as many freebies (styles, templates, resource libraries, and so son) that are available for Fireworks. All of them can (and will!) teach you how to use Fireworks in a better, more optimal way.
Again, in order to help you obtain a good overview of everything covered in this article, I've grouped the resources into the following sections: tutorials, articles, assets and freebies, and finally, the conclusion.
Fireworks is an excellent UI design tool; however, Adobe decided to feature-freeze it back in 2013 and (at the same time) did not offer any replacement tool to its users. Nevertheless, since Fireworks runs fine today on the latest Mac OS X and Windows OS, and since it still offers a solid UI-design feature set, many designers continue to use it and rely on it daily.
For those of you who are searching for a similar tool, Sketch 3.0 seems to be a pretty good alternative to Fireworks, but it's still not quite there yet; it's Mac-only, and while its vector tools are very good and it now has artboards, pages, symbols and styles, it lacks a few of the basic features available in Fireworks. (I'll talk more about possible alternatives to Fireworks in Part 2 of this series.)
Fireworks extensions are of two main types: commands and command panels. If you find yourself repeatedly performing a tedious task, you could write a command to automate the process and save yourself a lot of time. Alternatively, if you are missing a particular feature that would improve your workflow, you could write a more complex extension — a command panel — to implement it.
Working with people can be hard. But get it right, and you’ll be able to produce stunning work more smartly and quickly than ever before. With methodologies such as agile and lean influencing how design teams work, some interesting challenges lie ahead. Iterative and collaborative practices vary greatly across work environments and even projects, and they can, and most likely will, bring your time-honed workflow to its knees.
A shared understanding of the tools (and the way you use them) is crucial, then. By sharing assets, constructing files systematically and generating objects using core techniques, the team is freed to focus on crafting concepts and solving problems, rather than fighting unwieldy file structures and obtuse working practices. This shared understanding should underpin everything the team works on, becoming part of an ever-evolving process of refinement and learning.
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.