Fireworks CS5 Tutorials from Fireworks Zone

June 1st, 2010 Tom Okeefe

fwz_logo

Now that Adobe Creative Suite 5 is out you should already have your copy of Fireworks. If you’re wondering what new features were released in CS5 you can check out some tutorials over at Fireworks Zone. If you haven’t purchased a copy of Fireworks CS5 yet you don’t know what you’re missing. Get on it. Pronto.

A few tutorials you will find at Fireworks Zone are:

Device Central

Device Central provides designers and coders a comprehensive testing facility that approximates how pages and graphics will look on a variety of cell phones with different screen resolutions, color depths, memory constraints, and other performance characteristics.

It simplifies the mobile authoring workflow and allows developers to preview designs and test content on the desktop before loading it on the mobile devices for final testing.

LEARN MORE

Compound Shape Tools

Fireworks CS5 has 4 new Compound Shape vector drawing tools in the Properties panel. See Figure 1, towards the right edge of the property inspector panel: Add/Union, Substract/Punch, Intersect and Crop.

The Compound Shape is non-destructive as you can modify the result path by tweaking the individual paths with the sub-select tool. You can move, also scale, rotate and skew the individual paths that constitute the compound shape.

LEARN MORE

Document Templates

Although Fireworks ships with built-in templates, you can easily create customized templates for your project types and embed symbols and assets so that you always start from the same base to produce consistent work (and save some time.). You can create basic templates for ecommerce sites, mobile/iPhone apps, and even interactive Flash or Catalyst elements.

LEARN MORE

For more Adobe Fireworks Tutorials from Fireworks Zone VISIT HERE

Design Decisions vs. Audience Considerations

May 21st, 2008 Tom Okeefe

I found a pretty good article that some people might find interesting. If you’re good at what you do you may already practice this already but if not then enjoy.

Design Decisions vs. Audience Considerations

Deep down below the layers of interface, CSS, HTML, and XML—down where only the geekiest among us roam—everything comes down to this: it’s all zeroes and ones. On or off. The digital switch.

It goes without saying that clean, CSS-based, standards-compliant code is called for here so users on slow connections, with old browsers, or using screen readers will be able to access your content. Feel free to use Flash and video, as long as you consider alternate means of content delivery. Then test and test and test again.
Though interaction and conversion becomes a bit more complicated at the point the interface meets the visitor, though there are a few more shades of gray, in the end it comes down to the same thing: yes or no.

You will succeed in attracting and engaging your audience…or you won’t. Your audience will visit your site looking for information they want to find or a product they are interested in. If they don’t find it, or if you don’t otherwise engage them, they’ll leave.

We know this, and yet the attraction of designing for ourselves, because we know best, or simply giving the client what he or she wants, after all they are paying, tempt us regularly.

As web designers, we have a unique and thorny task. How do we present the information we most want a visitor to see while simultaneously serving the visitor the content they came for? The two may not be the same, so an awareness of who our audience is as well as why our audience is there should be considered before a single design decision is made.

If you know who your target audience is, you can tailor your site’s look and feel, content, and action areas to appeal to your audience and draw them in. If you know what your site visitors want, you can use that information to mutual benefit. Site visitors will leave having found what they came for, and—if you have done your homework—you will have gotten the response you wanted from them. This may be their contact information. It may be a product purchase. If you are really lucky, the site visitor will sign up to receive email and you will have a chance to forge an ongoing relationship.

We all know that site visitors prefer a site that is easier to use. An optimized site will have more traffic. A site that is cross-browser compatible will carry the same message and branding to everyone who looks at it, without unpleasant and unexpected behavior. Usability, Standards and Content Optimization are, at the end of the day, also audience considerations.

In this article, I’ll discuss the process of deciding or determining who your audience is, the basics of understanding audience motivation and response, the process of making design decisions based on audience considerations, and how to use what you know about your audience to influence behavior.

READ MORE AT DIGITAL WEB MAGAZINE

We know this, and yet the attraction of designing for ourselves, because we know best, or simply giving the client what he or she wants, after all they are paying, tempt us regularly.

The thing is this. If you’re a good designer you should know that Design shouldn’t be all about you. It should be about the the “Audience”. Unless I am the target audience what I like shouldn’t matter. If my objective is to direct a user on a web site where they should be clicking and what important information they should be reading first and to funnel them through certain CTA’s the U.I design and visual design should work together to make that happen. I’ve seen some really nice visual designed sites that fail. Hey but at least they might of received a fancy shiny award. :)

Another thing to keep in mind is after you have all the right visual and U.I. that you think will work best for your audience, you will still need strong content. It’s not so much about having fresh and up-to-date content its about the “RIGHT” content. Working with Marketing to nail down the correct content path is a must. Example. If you’re selling a product the key would be to show the user “WHY” it’s a good product and then show the “BENEFIT” of using the product. Then have a clear CTA (Call to Action) with the correct wording that will encourage a user to click. You don’t know how many product sites I’ve been to that I just scratch my head trying to figure out what they are selling and then I just leave. You almost have to treat your HP as your elevator pitch. You only have a few seconds to grab someone’s attention so do your best.

What ever you do just use Fireworks. HAHA It’s the best for Wireframes and Visual design. Trust me you’ll thank me later.

Enjoy!

The new My Card, My Work Blog Theme

March 22nd, 2008 Tom Okeefe

As you may of noticed I decided to changed the look of the blog. I had my good friend Rob Larsen from Drunkenfist.com develop the theme.

I hope you like the new look.

–Tom

A New Site I Made is Live and I Have (nearly) Achieved CSS Nirvana
I recently did CSS/HTML and WordPress theming for Tom’s My Card. My Work. blog. Normally, I would get all that excited about a WordPress theme, since I’ve done several, but this one had a lot going for it from a CSS perspective. I’m actually really excited about it.

What’s so special about this one, you ask?

Well, for starters, there’s only one style sheet (1!) and in that one style sheet there’s a total of 0 (zero) rules included for a specific browser. It’s true. Actually, as the last step before I published it out to his server I deleted the lines in my template to pull in an IE6 or IE7 sheet. They were empty  Across everything else? It just works. No hacks. No weird code. No nothing. Just one style sheet that works in pretty much every major (and minor) browser. I mean it, too- I tested the home page* in Browsercam and it only really fails on browsers that I don’t care about at all- IE5.2 on the Mac, Netscape 4.78, IE5.0 and IE5.5, etc….”

Read more about the CSS technique that Rob used.

A Three Column CSS Layout Using Just an Unordered List

December 3rd, 2007 Tom Okeefe

Rob is at it again… showing people how its done….

“With CSS you can make practically any element do whatever you need it to do, so don’t always assume you need to wrap things in a DIV* to make a layout work.”

Some background- I’m working with a new guy who is not so savvy to modern HTML/CSS layout techniques and today, while talking to him about some potential techniques he might use for an upcoming site, I remarked – “With CSS you can make practically any element do whatever you need it to do, so don’t always assume you need to wrap things in a DIV* to make a layout work.” The point related to the dangers of DIV-itis and my desire** to pare down markup to its absolute (meaningful) minimum. But it also illustrates a basic idea that, once fully understood, opens up all sorts of options for problem-solving.

Scalable CSS Buttons Using PNG and Background Colors

June 1st, 2007 Tom Okeefe

There has been a lot of talk about CSS buttons lately. Very understandable, since there are a lot of web applications being developed today that could benefit from slick looking buttons without loss in accessibility. Before jumping on the train myself, I just want to emphasize that you should not use this technique to replace real form buttons unless you know what you are doing. That said, the script I am providing to this article can create the same stylish buttons out of boring input buttons as well as plain anchors.
read moreÂ