Although these are common, standard colors, most people find them limiting and want a greater range of colors, like this:

You can create your own color palettes with custom swatches, save them, share them, and load them into Fireworks whenever you need. I have custom palettes like the color wheels above as well as custom palettes that I have created for projects. When you load a custom palette into the Fireworks Swatches Panel, it will be available for all documents you create or open – you will not need to load it every time you start Fireworks.

Let’s go step-by-step through the process of loading a custom color palette using the color wheels above. You can download the file at the end of this post.

1. Open the Swatches Panel, then open the Options menu (also called the context menu) from the top right corner.

2. Select “Replace Swatches” and browse to the color wheel file or any other saved swatches file. (Fireworks saves color swatches in the .ACT format.) Once you have loaded the color wheel palette, you may need to resize the Swatches Panel to make the full palette visible. (NOTE: If you select “Add Swatches” instead, the custom swatches you load will be appended to the end of the current set.)

3. The new custom color palette will now be available in the Swatches Panel every time you use Fireworks. If you want to return to the standard color cubes, just open the Options menu from the top right of the Swatches Panel, clear the swatches, then select Color Cubes or Continuous Tone.

4. If you open color pickers from the Property Inspector or from the Toolbar, you will see the default Color Cubes, not the new custom color palette.

5. If you want to use your custom color palette from any color picker, then open any color picker and open the Options menu from the arrow in the top right corner.

6. Select “Swatches Panel” from the list, and the next time you open any color picker tool, the custom color palette loaded into your Swatches Panel will be displayed.

7. You can return to the standard default color swatches for the color pickers at any time by opening the Options menu from the top corner of the color picker palette and selecting “Color Cubes” or “Continuous Tone.” This will return the color pickers to the default swatches, but it will not affect the Swatches Panel – this way you can have a custom color palette in the Swatches Panel and have access to the standard swatches in the color pickers.

Download the color wheel custom color palette for Adobe Fireworks

Create Your Own Custom Color Palette

If you want to create your own custom color palette from scratch, then you can select “Clear Swatches” from the Options menu in the top right corner of the Swatches Panel to remove the current set of color swatches.

1. Open a Fireworks file or bitmap image that contains the colors you want to use for your custom color palette.
2. Select the Eyedropper tool from the Tools panel, and choose the number of pixels to sample from the Sample pop-up menu in the Property inspector: 1 pixel, 3×3 Average, or 5×5 Average.
3. Click the Eyedropper tool on the image to sample the desired color.
4. To add a color swatch to the Swatches Panel, click the tip of the eyedropper in the open spaces after the last color swatch in the Swatches Panel.
5. To replace an existing color swatch with a new color, hold down the Shift key and click the eyedropper over the swatch you want to replace in the Swatches Panel.
6. To delete a color swatch, hold down the Control key (Windows) or Command key (Mac OS), and click the eyedropper on the swatch you want to delete from the Swatches Panel. (The remaining color swatches will all shift position to fill the space where the swatch was just deleted.)
7. To save a a custom color palette, select Save Swatches from the Options menu in the top right corner of the Swatches Panel, then choose a filename and directory in which to save the palette.

(NOTE: If you select “Snap To Web Safe” in the Options menu of any color picker, then any non-web safe color you select with the eyedropper tool will be changed to the nearest web safe color.)

Learn more about creating and managing color swatches in the Swatches Panel in the Adobe Fireworks Help documentation.

Today we focus on: Color.

Working with RGB and CMYK

Since Fireworks creates graphics for the screen, it works with RGBA (red-green-blue-alpha channel) colors. However, we are occasionally given CMYK (cyan-magenta-yellow-black) color values from print projects and need to convert them to RGB for screen graphics. Both the Color Mixer and the Color Palette panels offer options to work with colors in different ways.

You can enter and convert colors among RGB (decimal and hexadecimal), CMY or CMYK, HSB (Hue-Saturation-Brightness), HSV (Hue-Saturation-Value), HLS (Hue-Lightness-Saturation), or grayscale (K%). In the Color Mixer panel (Windows > Color Mixer), change the color space in the context menu (located in the upper right corner of the panel.) In the Color Palette panel (Windows > Others > Color Palette) the color space options are in the Selector tab, and you also have the choice to enter values in either byte (0-255) or percent (0-100) values.

Quickly Swap Between Two Alternate Color Palettes

If you have ever needed to show the same design with two different color palettes, the Color Palette panel’s Mixers tab offers the ability to quickly swap between two different palettes of five colors each.

Specify the colors for palette #1 in the five swatches in the first column and the colors for palette #2 in the second column. The adjacent color swatches will be swapped when you switch color palettes. To switch between the two color palettes, select the palette you want to use then click on the swap palettes button.

Fireworks will search for each corresponding color in the other set and replace it with the color in the selected set. This only works for vector objects (strokes and fills) and text objects (strokes and fills) – it will not replace colors in bitmaps.

Sharing Color Swatches with Flash, Photoshop, and Illustrator

Need to share color palettes with designers and developers using Flash, Photoshop, and Illustrator? Fireworks supports Adobe Color Table (.ACT) files for exchanging color swatches among the programs. To save a .ACT file from Fireworks, go the context menu (upper right corner) in the Swatches panel and select “Save Swatches…” to export the current set of swatches.

To import color swatches from a .ACT file, select the “Add Swatches…” option from the context menu in the Swatches panel and browse to the file. When the file is opened, the color swatches will be added to the current swatch set. If you want to see only the color swatches in the .ACT file, select the “Clear Swatches” option before you “Add Swatches…” To restore the default color swatches, clear the swatches again then select the “Color Cubes” or “Continuous Tone” option.

In the upcoming posts in this series we’ll look at more Fireworks features involving marquees, fills and strokes, styles, blend modes, file optimization, panels, and customizing your workspace.

One of the most challenging design elements to represent is text, because different browsers, different operating systems, and even different monitors will render the text differently. Most operating systems offer sub-pixel text rendering on LCD monitors to improve the legibility of text, but most graphics programs do not have text settings to simulate this appearance. They offer anti-aliasing options, which is also a method to improve the legibility of text rendered as pixels, but it is not the same as sub-pixel rendering.

If you take a screenshot of text on an LCD monitor and zoom in very close, you’ll see faint shadows or glows of blue and red, and what appears to be black text at normal magnification has elements of purple and brown when magnified.

Learn more about sub-pixel rendering at Wikipedia >

Giving text the appearance of being rendered at the sub-pixel level can be easily accomplished in Adobe Fireworks with the use of a custom style. Download the style file below and place a copy into the Styles folder. On a Windows XP computer, the Styles folder is located at:

C:\Documents and Settings\<USERNAME>\Application Data\Adobe\Fireworks CS4\Styles

On a Mac with OSX, the Styles folder is located at:

/Users/USERNAME/Library/Application Support/Adobe/Fireworks CS4/Styles

I’m not sure where this folder is located in Vista or Windows 7, so please look for the Fireworks application settings folder and for the Styles within it.

A few things to keep in mind when using this custom style:

1. These styles were created to work on black (or dark grey) text on a white background or white text on a dark background; colored text or backgrounds will not look as good.
2. Sub-pixel rendering looks best for smaller font sizes (10-14 pt),
3. Do not use this style for fonts 16 points or larger – the Crisp Anti-Alias style usually looks more accurate,
4. This custom style can make very small fonts (under 9 pt) look blurry,
5. This custom style tends to look better for san serif fonts but can be used for any font,
6. Apply this style to text with “No Anti-Alias”, because it looks bad when combined with anti-aliased settings.

To use this style, simply type your text, select the text object(s), open the Style Panel, choose “ClearType Text” from the drop-down selector, then apply the custom style. (Note: this style will not work correctly on text in a symbol or component symbol when the symbol is selected – the text object needs to be selected directly to apply this style correctly.)

UPDATE: There are four styles in this set to simulate black text on white or grey background and white text on black or grey background. Colored text or backgrounds may still not appear accurately simulated, but you can try to use the white text styles for light colors and black text styles for dark colors.

Download ClearType Custom Style for Fireworks

Export CSS and Images Part 1: Creating the page structure and placing key content elements.

Export CSS and Images Part 2: Using HTML component symbols and slices

Export CSS and Images Part 3: Inserting placeholders for dynamic content

I’ll also be presenting a session on using Fireworks for wireframing and prototyping and conducting two “Bring Your Own Laptop” labs on exporting CSS and Images from Fireworks CS4 at Adobe MAX 2009 in Los Angeles. If you’re attending, look me up.

Here’s a great tutorial on drawing flowers using the Star autoshape, and here’s another for creating flames using the wave gradient and a few curves filters. Here’s what I drew using these tutorials:

Flower drawn with Adobe Fireworks Autoshape

Flames drawn with Adobe Fireworks

They interviewed many members of Generation Y (also known as Millenials, people who have been born since 1980) and studied their influence on shopping and retail in America.

This complex generation can best be reached through a deep understanding of what makes them tick. In their ground- breaking book, they explore the psychological and social underpinnings of what Gen Yers want, why they buy, and how to best engage them. Gen BuY outlines practical suggestions for marketers on how to harness this group’s incredible buying power – and arms consumers with a better understanding of what triggers their own shopping and buying.

Check it out here – it is one of my rare forays into visual design and coding.

The clever folks over at Teehan + Lax, a user experience consultancy based in Toronto, Canada, decided to gamble with $50,000 dollars of their own money to test a theory: companies that invest in customer experience design will have better revenue, greater customer satisfaction, and therefore perform better in the stock market. They selected 10 companies that are known for the use of experience design on their sites and held their stocks for 365 days, then they looked at the value of their UEX portfolio relative to the broader market indices. Their portfolio did very well:

“In the 365 days we owned our stocks the value of the portfolio increased 39.37%. This outperformed the major indexes (NASDAQ 18.09%, S+P 9.47%, NASDAQ 100 26.81%, NYSE 14.67%).”

Designing for the customer experience is not just for the good of the customer, it is also for the good of the company. Designing great customer experiences definitely has measurable value.

http://www.uxmag.com/strategy/327/investing-in-ux

• Capture attention (e.g., animated banner ads)
• Provide feedback after user actions (e.g., mouseover and on-click states)
• Provide deeper levels of information and facilitate understanding (e.g., infographics that illustrate complex data, such as planetary orbits)

Unfortunately, too much of this animation and motion is gratuitous and does not serve to enhance the user experience, and in many cases it actually distracts the site visitor. Usability professionals often encounter test participants who use their hands (or even sticky notes) to cover parts of the monitor where animated banner ads appear, because the ads attract their attention and distract from the content they are trying to read.

The animated GIF for banner ads that annoyed us for years before declining are being replaced by slicker Flash ads with embedded audio and video, elaborate animation, and even interactivity. Additionally, web sites and applications are using more motion and multimedia to add value to content and attract attention. In some cases the result is a sensory cacophony that overwhelms visitors and reduces the quality of the user experience.

Is animation bad? Should motion and multimedia be avoided? No, but we do need to consider when, where, and why we choose to use it. Animating a logo or image or infographic simply because we can is gratuitous. There should be value and improvement to the user experience, and the animation should support and enhance the content and goals of the site. Here are some basic principles for effective motion graphics and animation:

1. Remember: motion attracts attention. Using too much animation and motion on a single page results in competition for attention and often frustrates visitors. If you choose to use motion to draw attention, give the visitor control and the ability to stop the motion if it distracts them from their goal.
2. Animated graphics are only better than static graphics when they make it easier to understand complex information by being more visually explicit.
3. The content and format of a graphic should closely correspond to the content and format of the concepts and information to be conveyed (also known as the Congruence Principle.) For example, it is more difficult to understand the variations in the stock market looking at tabular numeric data than by looking at diagrams of value over time. Animation adds the ability to include changes in time and space in a more visually explicit way.
4. To be effective, animations need to be correctly understood by the viewer (also known as the Apprehension Principle.) Animations are often too complex or move too fast to be accurately processed and understood by visitors. Make the animation interactive, and give visitors the ability to pause, rewind, restart, and even control the speed or flow of the animation so that they can better focus their attention and thinking on the important and more complex portions.
5. Avoid clutter and unnecessary complexity. Provide enough information and visual cues to help the visitor understand, but do not include extraneous information or design elements that may confuse or distract.
6. Be organized and focused before starting to create the animation or motion graphics. Write a script, create storyboards, and have a plan to convey the information in a concise and focused way, otherwise you may wander away from the goal and include unnecessary information and/or steps.
7. Use the animation to tell a story. A coherent narrative helps visitors better understand the information in a meaningful context.
8. Support animations and motion graphics with corresponding text. Do not assume that the animations are sufficiently explicit to understand without supporting information. If you are using audio to support the animation, give the visitor the ability to control playback and volume.
9. Consider using visual metaphors to help visitors better understand complex information and concepts and to reduce ambiguity.
10. Avoid design myopia. You already understand the information and concepts, therefore your animation and motion graphics design will make sense to you. Show the animation to other people, test it with your target audience, and evaluate whether or not they understand it correctly. What seems obvious to you may be less so to others.

People behave differently under different circumstances and have different needs and goals at different times. Although it may be convenient to think of John Q. Persona as “the guy who abandons his shopping cart ten times before committing to the purchase,” this is not necessarily the way he behaves all the time.

Nearly all web site visitors will change their online behavior based on their current goals. Sometimes we have extra time to surf, and sometimes we are in rush and need to get in and get out efficiently. Sometimes we need to search extensively (e.g., I want a good suspense novel), and sometimes we already know what we are looking for and where (e.g., I want the latest Anne Rice book.) But rarely do we do the same thing every time.

Personas should be representative of actual site visitors, and that means that they will have a range of goals and behaviors. Some behaviors may be more common than others, but they will exhibit a variety of behaviors over time. Yes, John Q. Persona may be more likely to abandon shopping carts than other personas, but perhaps he only does that when comparison shopping for himself. His behavior may be different when he shops for gifts for others, or maybe his behavior changes when he browses from home versus browsing from his office during lunch.

To get the most out of personas, we should separate the personalities (i.e., the personas) from the actual behaviors. Create personas to learn about who site visitors are demographically, what motivates them, how they react to options or designs, and what content or experiences are important to them. Create experience flows to describe the most common behaviors that are observed or desired for the site (e.g., gift shopping vs. product research.) Then play mix-and-match with the personas and the experience flows: which experience flows are most likely for each persona, then rank order them. For example, John Q. Persona may exhibit more cart abandonment behavior than any other persona, but he may also be interested in comparison shopping, product research, and interactive merchandising displays.

Personas are meant to be realistic representations of actual site visitors, so it is important to remember that real visitors behave differently at different times and under different circumstances, therefore personas should also exhibit tendencies, preferences, and ranges of behavior.

Nomenclature, terminology, labels. What we call things and the names we use are very important, and deciding upon the “perfect label” can often be more difficult than we anticipate. As information designers and architects we are tasked with not only organizing information, but also often with naming it.

Sometimes the exercise is quite straightforward: developing a product catalog for an online toy store may be more an exercise in deciding whether building blocks are categorized as “puzzles” or ” learning toys” than in naming them “building blocks.” In either case, the label for the toy seems obvious. After all, we would not change the name from “building blocks” to “plastic construction units.”

But sometimes the nomenclature exercise is not as easy or straightforward. Sometimes we struggle with what to call something, especially when we are trying to decide upon a site’s navigation and interaction terminology, headers, subheaders, text links, and buttons. For example, should we call a section “Online Learning Center”, “Training Services”, or “Guides and Documentation”? Although each of these options conveys a similar type of content, each creates slightly different expectations about what information will be presented, the format of the information, and the extent and form of the interactions possible.

The labels and terms we use are very important, because they assist, guide, and inform visitors to our site (or users of our applications) and help them work efficiently and accurately. Poor nomenclature:

• is ambiguous, incomplete, or even erroneous.
• causes confusion.
• causes frustration.
• increases abandonment.
• decreases credibility and trust.

Good nomenclature should go unnoticed, because site visitors do not have to stop and think, “What does this mean?”, “Where will this take me?”, or “What is going to happen?”, because it is immediately obvious and meaningful to them. There are a few practices we can put in place to help us develop better labels and more useful (and usable!) nomenclature:

1. Use active language (e.g., “See the Ford Model T Specifications”) and avoid passive language (e.g., “More about the Ford Model T may be found here.”)
2. Use familiar terms that are meaningful to the target audience, and try to avoid internal, (company or product specific) terminology (e.g., “Mental Health” rather than “Psychopathology” on a community health web site.)
3. Use directive language that sets accurate expectations for the reader about what will happen and what will be presented when they follow the link or press the button (e.g., “Download the Update” communicates that the download will begin right away, whereas “Get the Update Here” is somewhat vague and may either start the download or take the visitor to another page.)
4. Be concise. Long labels are more likely to introduce ambiguity, and there is almost always limited screen real estate to work with. Tooltips that show up on mouseover are a nice way to include additional, explanatory information if necessary. Also, eliminate any unnecessary words, for example, use “Read the full article” instead of “Click here to read the full article.” There is no need to write “Click here to…” as long as the link looks like a link to the visitor. If it does not look like a link, then make it look like one – do not fix it by adding “Click here.”
5. Be consistent. The terminology, tone and voice, and grammatical structure should be parallel across the navigation system. If you are using active verbs in the navigation, then all of the navigation options should include them (e.g., “Search for Music”, “Listen to Music”, “Share Music”, and “Buy Music.”)