How To Design A Rocket Icon In Adobe Fireworks

    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…

Read Now!

How To Master Fireworks’ CSS Properties Panel And CSS Professionalzr

Today, being a designer is about much more than drawing beautiful interfaces in Photoshop or Fireworks. To properly design a website or application, a UI designer must understand the technology with which their products will be built; therefore, they must have a minimum set of front-end development skills. The World Wide Web is not static…

Read Now!

Designing A Rocket Icon In Adobe Fireworks

Many people know that Fireworks is a great tool for web design1, prototyping2 and UI design3. 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…

Read Now!

Useful Adobe Fireworks Resources: Extensions (Part 1)

Fireworks is an excellent UI design tool; however, Adobe decided to feature-freeze1 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,…

Read Now!

Introduction To Developing Fireworks Extensions (They’re Just JavaScript!)

One of the most powerful features of Adobe Fireworks is that you can extend its functionality. Almost anything you can do through Fireworks’ interface — and even some things that you can’t — can also be achieved by writing a simple JavaScript extension. Fireworks extensions are of two main types: commands and command panels. If…

Read Now!

Collaborating With Adobe Fireworks On Large Design Teams

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 agile1 and lean2 influencing how design teams work, some interesting challenges lie ahead. Iterative and collaborative practices vary greatly across work environments and even projects, and…

Read Now!

Mojo Motors’ Responsive Redesign With Fireworks: Visual Design Stage

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,…

Read Now!

How To Make An Effective Style Guide With Adobe Fireworks

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…

Read Now!

The Present And Future Of Adobe Fireworks

Unless you’ve been on Mars for the last few months, you’ve already heard the news that Adobe is feature-freezing Fireworks1. 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?…

Read Now!

Optimizing The Design Workflow With Fireworks Extensions, Part 3

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 first1 and second2 parts if you’re not already familiar with them. – Ed. We have already covered over a dozen brilliant extensions…

Read Now!

Optimizing The Design Workflow With Fireworks Extensions, Part 2

In my previous article1 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…

Read Now!

iOS Grid System, A Free Extension For Adobe Fireworks

  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…

Read Now!

Create Demo: An Easy Way To Present Adobe Fireworks Design Prototypes

  With its structured approach to organizing assets, Adobe Fireworks can be a pleasure for designing and prototyping. But demonstrating your designs on a wide range of devices can be time-consuming and could even require some degree of coding. The Create Demo extension addresses some of these issues. It automatically converts your Fireworks documents into portable…

Read Now!

iOS Prototyping With Adobe Fireworks And TAP (Part 3)

  In the previous parts of this tutorial (part 1 and part 2), we looked in detail at the building blocks of our design in Fireworks (pages, shared layers, symbols, styles), and we started to make a demo prototype in Fireworks. The demo prototype had six pages, linked together by hotspots, and each hotspot was customized…

Read Now!

iOS Prototyping With TAP And Adobe Fireworks (Part 2)

  In the previous article in this series, “iOS Prototyping With Adobe Fireworks and TAP, Part 1: Laying the Foundation,” I looked in detail at the four major stages that all of our projects at Cooper go through, as well as our approach to Fireworks PNG organization, and the main components of Fireworks (pages, shared layers,…

Read Now!

iOS Prototyping With TAP And Adobe Fireworks (Part 1)

  One of the strengths of Adobe Fireworks lies in its ability to produce basic-level prototypes in HTML format for the purpose of sharing concepts, evaluating them and conducting usability tests. But did you know that you can use Fireworks in combination with other tools to create complex iOS prototypes (for both the iPhone and iPad)…

Read Now!