By Louis Lazaris

If you’ve been formally educated in marketing, more than likely you’ve learned about a marketing model called AIDA. AIDA is an acronym that represents the different steps involved in selling a product or service. Very often, the principles of AIDA are applied naturally when a useful product or service is being marketed. Being web designers and app developers, however, our personal involvement on a technical level in our own or client projects may deter our efforts to produce a design that correctly implements AIDA.

I’ve only recently come to learn about the AIDA model myself, and I thought it would be an interesting topic to apply directly to the decisions we make in web design. In this article I’ll provide examples with some explanations showing how web and app developers can effectively implement this model for full benefit.

A = Attention

The first step in successfully marketing a product or service is getting attention, that is, getting potential consumers to notice your product. There are a couple of obvious ways this can be done.

Attention Through Strong Imagery

Web development trends have over the years improved to imitate print methods more closely — and for good reason. Principles in print design have been studied and tested for so many years, and have proven to be successful in so many industries. The use of strong imagery to market a product has always been a powerful way to get a potential customer’s attention.

Apple’s marketing department understands the importance of imagery in getting someone’s attention, and they do this quite effectively on the Apple website, shown below.

The extra-large iPad images give the customer a clear picture of the relative size of this new device. Many readers who have browsed the Apple site before will have seen images of the iPhone or other smaller devices, so when they see the size of the iPad image, they’ll immediately understand that this is a larger device.

Of course, not every product or service requires this type of differentiation in image size, but this is a good example of how images can be powerful tools for grabbing attention.

Another excellent example of strong imagery is shown in the image below from Trendex Home, a company that sells tablecloths, placemats, and related items.

The image of the wine glass and the tablecloths can’t be missed, so it successfully gets the reader’s attention.

Of course, both examples shown above do more than just grab attention, which will be discussed later.

Attention Through Strong Typography

Another well-known method of grabbing attention is the use of large headings, utilizing color and whitespace to maximize their effect.

The Lairdesign home page, shown above, makes effective use of strong typography, using a very curious-sounding phrase to grab the user’s attention. The sentence “…where even the colour of the tea is considered!” expresses something important about the company’s view of design, doing so distinctly and beautifully.

Likewise, the Glenilen Farm site places part of their home page’s focus on the phrase “Why not try our delicious handmade cheesecakes”, which, along with the strong imagery, helps grab the hungry shopper’s attention.

I = Interest

The next step in the AIDA model is keeping the interest of the customer. In the previous section, we saw how aesthetic enhancements can be used to get the customer’s attention. But along with that, the customer needs to know how your product or service will help them. In this case, giving a list of features is not enough; you need to express to your users how those features will benefit them.

Let’s consider again the iPad and Trendex Home websites to show how the imagery conveys important benefits that help to keep the customer’s interest.

Interest Through Practical Benefits

Whatever product you’re advertising will likely be something that helps the consumer in some way. Maybe it helps them save time, cut corners, save money, or provides a service that assists them to overcome menial, repetitive tasks. Whatever the benefit is, it needs to be communicated to the customer so they can see exactly how their life or workflow will be helped.

Despite all the negative reviews and comments that have been made about Apple’s new iPad, the Apple marketing department has successfully marketed their new product to its target audience, which is not a tech-savvy audience, as some have incorrectly assumed.

The iPad image on the right displays the New York Times website as the example, which is perfect for the audience that the iPad is geared towards. Nontech-savvy users who want to use a portable device for daily tasks while commuting will immediately see the benefit of the device, not only because of the landscape/portrait potential but for the size and apparent relative ease of carrying the device.

Trendex Home likewise uses their imagery to demonstrate the practical benefits of one of their products. The spilled wine beads neatly on the tablecloth garment, indicating the high quality material used to manufacture their products. Thus, instead of saying “our products are made with high-quality materials”, they’re saying “here’s how our high-quality products help you”, which equates to features plus benefits, as opposed to features alone.

D = Desire

The next step in the AIDA model is desire, which is a natural extension of interest. After you’ve grabbed a consumer’s attention, and obtained their interest, you need to keep that interest going by promoting your product in such a way that they will begin to grow in their desire for it. This is probably the most difficult of any of the steps in the AIDA model, and can encompass a number of different techniques, but I’ll mention a few here that are geared specifically towards web designers.

Desire Through Content Sliders

JavaScript-driven content switchers and image sliders are extremely popular on home pages nowadays, and for good reason. They’re beautiful, accessible, they degrade gracefully, and they help market your products in a non-obtrusive and tasteful manner.

Aesthetics and accessibility, however, should not be the only reasons for including such a feature. This method of displaying content should also be for the purpose of helping to build desire for your products or services. Again, I’ll refer to the Apple website and their marketing of the iPad. The large images we discussed earlier are part of an image switcher that slowly shows the different ways that the iPad is a benefit to its target audience.

After displaying two iPads with content-heavy websites loaded, the next two images show the ease with which the iPad users can access and read email, along with the ability to view and save family photos.

If the user has stuck around this long, they will be visually informed of the email- and photo-related features, helping to build their desire for the product.

Desire Through Organization of Content

Anyone involved in web development in recent years will likely be familiar with SitePoint and their top-quality articles and books on design and development. Each individual SitePoint book page is an excellent example of content that’s organized with the goal of building desire for the product.

Highlighted above are headings that introduce easy-to-read lists of features, customer testimonials, and SitePoint’s competitive pricing (although I personally find that the pricing is better through Amazon, so in this case their claims for the low price are not necessarily accurate).

Similar to SitePoint’s book page, the WordPress hosting page on WPWebHost presents a clean list of features designed to build desire in the consumer.

A = Action

The final step in the AIDA marketing model is getting the user to take action. This is a step that, due to its importance, has been discussed numerous times here on Smashing Magazine and other design blogs, so I won’t go into great detail.

After getting the user’s attention, arousing their interest, and stimulating their desire for your product, they need to have a clear way to take action. Whether it’s to sign up for your service, purchase your product, or download a trial of your app, the visual enticement to take action should be elegant, beautiful, and convenient.

Any quality CSS Gallery today contains numerous examples of websites with home pages and product pages that utilize effectively-placed call-to-action buttons, so be sure to examine some of the patterns and trends used by top design firms when mapping the action processes that users take.

Action Through CTAs

Bonus: S = Satisfaction

Many people have favored adding a fifth letter to the AIDA acronym: “S” for “Satisfaction”. After a product has been correctly marketed through attention, interest, desire, and action, it is up to the product or service provider to maintain and support their products to keep the customers happy and satisfied long after purchase.

Conclusion

The techniques mentioned above, when isolated, are really nothing new in modern web design. Many experienced designers have implemented many, if not all, of these methods. This discussion has attempted to give purpose to some of the decisions we make in design, demonstrating that design should follow a close examination of content and marketing goals.

Using the AIDA marketing model, you can give purpose and direction to all the design and architectural decisions made in your web design projects.

Further Reading

• AIDA (marketing) on Wikipedia
• Rediscover The 100-Year Old AIDA Formula
• AIDA Formula
• Understanding and Using AIDA

  

By Thursday Bram

There’s no formula for a perfect portfolio. There’s no format that’s guaranteed to land you clients, as long as you follow it. However, there are certain questions that a prospective client has in mind when he’s looking for a web designer. If your portfolio can supply the answers a client wants, you can improve your portfolio’s ability to convince a client and land a new project.

Your portfolio may not be the only way that your clients find you, but it’s likely that most of your clients have at least seen it at some point. In many cases, your portfolio is the first impression you get to make. It is crucial to have a portfolio that is both eye-catching and informative.

1. A Date

While few people will ask just what year you completed a particular project in, a date can be a subtle indicator that answers a lot of questions that a client may have:

• How up to date are your skills?
• How often do you design websites that are worth adding to your clients?
• How long have you really been designing websites?

These aren’t necessarily questions that a prospective client will come out and ask, yet, answering them correctly can make you a client’s first choice. To do so requires choosing sites to include in your samples from your entire career, with a little extra emphasis on more recent sites.

If your portfolio is mostly older pieces, it can be easy to assume that you don’t have much recent experience with web design — which can be a major concern for a client who needs an up-to-date website. In contrast, newer pieces show that you know current web standards and have a good understanding of the technology that a modern website is built on. However, if you’re just starting out, your portfolio will be heavily weighted towards more recent websites. That won’t disqualify you for most projects, but it does make having high quality pieces even more important.

2. Live Websites

When a client sees a website in your portfolio, there’s a good chance that he’ll try to find it online even if you don’t link to it. The ability to click around and see how smoothly the website actually works can be a deciding factor in whether a client wants to work with you. It’s worthwhile to provide the link if you can; unless you’re linking to sites you’ve created for other website designers, you probably don’t need to worry about sending your clients off your website. If they like what they see, they’ll be back.

Providing samples that are live may be difficult in some cases: your portfolio may include some student work or websites you designed as an experiment. A past client may have even had another redesign done since you put together his website. Such situations can be unavoidable, but anything you can do to ensure at least the first few websites in your portfolio are live will help.

3. Tools

Some clients have a toolbox that they rely on for online interactions: perhaps AWeber for for mailing lists or WordPress for blogging. Not seeing a site integrating those tools isn’t a dealbreaker for most clients, but seeing a great design that incorporates the forms and other tools that a client knows he wants may put your name at the top of the list. Unfortunately, there’s no way to predict which tools every prospective client is going to want to see. The best you can do is include a variety of different tools you’ve had the opportunity to work with.

For many web designers, including a description of the tools used in each site is an option when creating your portfolio. Depending on the design of your own portfolio, that description could be a full paragraph or a few phrases. Either way, just mentioning what you incorporated can help your clients understand that you’re comfortable with a variety of tools.

4. Niche

If you’re known for designing websites for a certain niche, your clients are more likely to be members of that niche. That means that they want to see work in your portfolio that applies to them — something that they can point to and say ‘I want that, but in blue.’ While there are both benefits and drawbacks to creating websites for just one niche is that it simplifies how you choose which examples of your past work you include in your portfolio.

Of course, many web designers are generalists. If that’s your situation, making a point of offering some variety in your portfolio is good: you might want to include a website focused on selling a product, a blog and a couple of other options so that prospective clients can see just how well-rounded you are. It’s a marketing decision, no matter which way you go.

5. Style

Many clients start the website development process with a certain style in mind. They’ve likely seen a few websites online that have a general appearance that they’d like to follow. While a client may not be able describe the style they want, he’s likely to look for similar samples in web design portfolios. If you have a variety of styles, you have a better chance of matching the aesthetic a potential client is looking for.

Alternatively, if you have developed a personal style, you can win over more of the clients that are hoping to create similar sites. You won’t get clients looking for other styles, but you also won’t have to match a variety of different styles. Deciding between these two approaches — and therefore the site designs you should include in your portfolio — comes down to a question of the type of sites you want to work on in the future.

6. Specific Skills

Are you particularly good at developing a front end? Can you write PHP in half the time it takes other web developers? A prospective client will want to know your skill set to make sure you’re the best fit for his project. Offering a clear way to tell what techniques and technologies you used in each of your website designs can make sure a client gets what he’s looking for, especially since it’s not always easy to tell just where you’ve personally excelled in a particular design.

Offering a brief description along with each website you include in your portfolio is the easiest approach, especially if you’re already planning on including information like the date and tools used. The following information may be a good fit:

• The ways you’ve used your skills to speed up production
• The ways your skills make a website stand out
• The technologies you’re particularly proficient with

7. Context

More than a few portfolios are just a series of images. If you can provide some context to your prospective customers, it’s easier to convince them that you’re offering the right web design services for them. That can mean something as simple as adding a short description about the sites you’ve included in your portfolio.

Here are a couple of questions that can be used to create a short paragraph about any site in your portfolio:

• What was the client’s goal for the new site?
• Where there any special challenges (custom technology, small budget, etc.) in this project?
• How was this project received?

8. Responses

For many prospective clients, having an idea of how your work was received by past clients can be a particularly useful factor in choosing whether you’re the best designer for their job. While describing the client’s reaction to a project you’ve included in your portfolio helps, a little more information comes in handy if you have it. A testimonial, for instance, can be very effective, especially when you can pair it with the design that elicited that reaction.

Another useful way to demonstrate reactions to your design is to include any awards a new design won or any press it received. The press can be easier to find: depending on your client and how recently the project was completed, you may be able to find some comments on the new design that you can link to. Don’t overlook blogs or even company newsletters — such reviews are more likely to come from someone who actually has to use the site. You can even help to create some of that press yourself by taking steps like submitting your work for awards or at one of the numerous critique sites out there.

9. A Well-Designed Portfolio

In a way, your portfolio is just as much an example of your abilities as a web designer as the work it showcases. A client doesn’t necessarily expect Flash and fancy designs in a portfolio, but he will expect to see at least an attractive layout that shows off your work to an advantage. After all, the time a web designer will put into winning over a new client often has a direct relationship to the amount of time he’ll put into that client’s projects.

Don’t forget the technical details when creating your portfolio, either. Both little details, like making sure every link works, and big details, like having your own domain name, may seem like they wouldn’t matter much to a prospective client, but their absence can do a lot to put your name at the bottom of the list.

10. Your Best Work

When a client looks at your portfolio, he’s likely thinking two things: First, the website designs you’re showcasing are your best work. Second, he’ll get work on that level when he works with you. The two ideas may seem to contradict each other, but, in the end, every client wants your highest level of work. That means careful selection is in order to ensure that you can both impress a prospective client and you can live up to the promises your portfolio makes.

It’s not always possible to put your best work in your portfolio, unfortunately. A website design may be under an NDA or a client may simply ask you not to use a particular project in your portfolio. But even if you have to go out and create a new website of your own or take on a charity project, it’s important to have excellent work in your portfolio.

About the author

Thursday Bram is a full-time freelancer who has been working on her own for more than seven years. She writes about the business side of freelancing and maintains her own website at ThursdayBram.com.

  

By Cameron Chapman

Proper use of image compression can make a huge difference in the appearance and size of your website image files. But compression is an often-misunderstood topic, partly because there’s a real lack of understanding on what the different types of compression are good for. If you don’t understand which type of compression to use for different types of images, you’ll likely end up with one of two results: either images that don’t look as good as they could, or image file sizes that are way larger than they need to be.

Below is everything you need to know about image compression in relation to web design. We’ve covered the differences between lossless and “lossy” compression, the different file types and the compression techniques they use, and guidelines for which file formats work best for different kinds of images.

1. “Lossless” vs. “Lossy” Compression

Many people feel that they should only use image formats that use lossless compression. While lossless compression is superior for many kinds of images, it’s not necessary for many others. Basically, lossless image compression means all the data from the original file is preserved. Lossy compression, on the other hand, removes some data from the original file and saves the image with a reduced file size. It’s up to you, as the designer, to tell it how much data to disregard by setting the image compression rate.

Lossless Compression

There are a few different methods for lossless compression. There’s run-length encoding (used for BMP files), which takes runs of data (consecutive data elements with identical values) and stores them in a single data value and count. It’s best suited for simple graphics files, where there are long runs of identical data elements.

DEFLATE is another lossless data compression method used for PNG images. It uses a combination of the LZ77 algorithm and Huffman coding. In addition to being used for PNG images, it’s also used in ZIP and gzip compression.

Lempel-Ziv-Welch (LZW) compression is a lossless compression algorithm that performs a limited analysis of data. It’s used in GIF and some TIFF file formats.

Lossy Compression

There are a number of lossy compression methods, some of which can be combined with lossless methods to create even smaller file sizes. One method is reducing the image’s color space to the most common colors within the image. This is often used in GIF and sometimes in PNG images to result in smaller file sizes. When used on the right types of images and combined with dithering, it can result in images nearly identical to the originals.

Transform encoding is the type of encoding used for JPEG images. In images, transform coding averages out the color in small blocks of the image using a discrete cosine transform (DCT) to create an image that has far fewer colors than the original.

Chroma subsampling is another type of lossy compression that takes into account that the human eye perceives changes in brightness more sharply than changes of color, and takes advantage of it by dropping or averaging some chroma (color) information while maintaining luma (brightness) information. It’s commonly used in video encoding schemes and in JPEG images.

2. Different File Types

For the purposes of this article, we’re only going to focus on three file types, those most commonly found in web design: PNG, JPEG, and GIF. While there are other image formats out there that take advantage of compression (TIFF, PCX, TGA, etc.), you’re unlikely to run across them in any kind of digital design work.

GIF

GIF stands for Graphics Interchange Format, and is a bitmap image format introduced in 1987 by CompuServe. It supports up to 8 bits per pixel, meaning that an image can have up to 256 distinct RGB colors. One of the biggest advantages to the GIF format is that it allows for animated images, something neither of the other formats mentioned here allow.

JPEG

JPEG (Joint Photographic Experts Group) is an image format that uses lossy compression to create smaller file sizes. One of JPEG’s big advantages is that it allows the designer to fine-tune the amount of compression used. This results in better image quality when used correctly while also resulting in the smallest reasonable file size. Because JPEG uses lossy compression, images saved in this format are prone to “artifacting,” where you can see pixelization and strange halos around certain sections of an image. These are most common in areas of an image where there’s a sharp contrast between colors. Generally, the more contrast in an image, the higher quality the image needs to be saved at to result in a decent-looking final image.

PNG

PNG (Portable Network Graphics) is another bitmapped image format that uses lossless data compression and was created to replace the GIF image format. The PNG format was largely unsupported by Internet Explorer for a long time, making it less commonly used than GIF and JPEG formats, though it’s now supported properly by every major browser. PNG files support palette-based color (either 24-bit RGB or 32-bit RGBA), greyscale, RGBA and RGB color spaces. One of PNG’s biggest advantages is that it supports a number of transparency options, including alpha channel transparency.

3. Choosing a File Format

Each of the file formats specified above are appropriate for different types of images. Choosing the proper format results in higher quality images and smaller file sizes. Choosing the wrong format means your images won’t be as high-quality as they could be and that their file sizes will likely be larger than necessary.

For simple graphics like logos or line drawings, GIF formats often work best. Because of GIF’s limited color palette, graphics with gradients or subtle color shifts often end up posterized. While this can be overcome to some extent by using dithering, it’s often better to use a different file format.

For photos or images with gradients where GIF is inappropriate, the JPEG format may be best suited. JPEG works great for photos with subtle shifts in color and without any sharp contrasts. In areas with a sharp contrast, it’s more likely there will be artifacts (a multi-colored halo around the area). Adjusting the compression level of your JPEGs before saving them can often result in a much higher quality image while maintaining a smaller file size.

For images with high contrast, especially photos, or illustrations with lots of gradients or contrast, the PNG format is often best. It’s also the best option for transparent images, especially those that need partial transparency. PNG files are often larger than JPEGs, though it depends on the exact image. PNG files are also lossless, meaning all the original quality of the image remains in tact.

Here’s an overview of which file types work best for each type of image:

GIF

• If animation is required.
• Line drawings and simple graphics.

JPEG

• Photos, especially without high contrast.
• Screenshots, especially of movies, games, or similar content.

PNG

• Line art, illustrations.
• Photos with high contrast.
• Transparency, especially alpha channel transparency.
• Application screenshots or other detailed diagrams.

And here’s an overview of which formats to avoid for each type of image:

GIF

• Images with gradients.
• Photos.

JPEG

• Images with high contrast.
• Detailed images, especially diagrams.
• Simple graphics (the file sizes are larger).

PNG

• Photos with low contrast (file sizes are larger).

4. Image Compression in Print Design

While the bulk of this article has focused on image compression in web design, it’s worth mentioning the effect compression can have in print design. For the most part, lossy image compression should be completely avoided in print design. Print graphics are much less forgiving of artifacting and low image quality than are on-screen graphics. Where a JPEG saved at medium quality might look just fine on your monitor, when printed out, even on an inkjet printer, the loss in quality is noticeable (as is the artifacting).

For print design, using file types with lossless compression is preferable. TIFF (Tagged Image File Format) is often the preferred file format if compression is necessary, as it gives options for a number of lossless compression methods (including LZW mentioned above). Then again, depending on the image and where it will be printed, it’s often better to use a file type with no compression (such as an original application file). Talk to your printer about which they prefer.

Further Resources

• When and How to Use Internet Image Formats
  A great overview of file formats with examples.
• Image compression
  Wikipedia’s take on image compression.
• An Introduction to Image Compression
  The beginning of a multi-part series on image compression with tons of technical information.
• JPEG Image Compression FAQ, Part 1/2
  An excellent series of questions-and-answers about the JPEG format, including information about compression.

About the author

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing . She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

  

An often overlooked member of the Adobe Creative Suite is Adobe Fireworks. This application software can be used to create vectors, design application interfaces, digital artwork, and create rapid prototypes of websites. Adobe Fireworks can also generate PDF’s, export CSS based layouts, and a variety of other features. However, Adobe Fireworks resources are not easy to find. Resources are scattered among many different websites, blogs, and forums. Since the resources are far and few, some designers forget about all the features and abandon using the software all together.

In this article, renew your love for Adobe Fireworks! Check out the 200+ (mostly) free Adobe Fireworks resources that are gathered and categorized for easy reference. Please remember: since many designers have made these resources free for others, take the time to check out the license agreements before using any resources for personal and/or commercial projects.

1. Common Libraries, Patterns, and Rich Symbols

Common Libraries

Libraries are a great way to enhance the assets of Adobe Fireworks. Collections of symbols and objects save time when creating design elements.

Arrows

Browser Cursors

Stencils

Cursors

Shields

Patterns

A wonderful way to add a final touch or create interest in a design is by using a pattern. Check out some great pattern resources for Adobe Fireworks.

Kaliber Patterns

Free Fireworks Patterns

Flames 1

Free Patterns (158)

Checker Patterns

Carbon Pattern

Free Patterns

Wood Pattern Package

Micro Patterns

Rich Symbols

Rich graphic symbols can be scaled and given attributes with scripts, which saves a lot of time when creating interfaces, websites, or design elements.

A reusable page icon

Paper Grams

iPhone GUI as Rich Symbols for Fireworks

2. Styles

Styles are a great way to apply predefined attributes to an object or text (but not to bitmap objects).

Borders

Metal Pack 1

150 Fireworks Styles (Gradient Effects)

Electronics

15 Grunge Colors Styles

Fireworks Styles Pack 2

Fire and Flames

131 Ultimate Web 2.0 Styles

NN_Style_03

Styles Pack 1-3

Drawings

15 FIREWORKS CS4 TEXT STYLES PACK 1

Web 2.0 Styles 1

Fireworks Styles Pack 1

Overkill Set 1

Stroke Styles for Fireworks MX, Series 1

Fireworks Styles Pack 6

48 Ultimate Web 2.0 Styles

Chrome Gradient Styles

The CMX Dash Pack

MST Styles

Style Pack 1

Text Styles Pack

Gradients, Blue Light, Charcoal, Chrome, etc. (No Preview Image)

3. Auto Shapes

According to help.Adobe.com, auto shapes are a great tool which “simplify the creation and editing process of common visual elements.” They’re also a great time saver.

Smart Resize

Basic Pack 2

Background Rectangle Auto Shape

Pinwheel Auto Shape

Crescent Auto Shape

Ribbon

Revolve Path Auto Shape

Auto Shapes with Styles

Sunburst, Effect Light Source, Geometry Guides, and Grid

Annotation Auto Shape

Sunburst

Enhanced Rectangle Auto Shapes

Simple Orb Smart Shape

Puzzle Auto Shape

Adjustments Panel

4. Commands, Scripts, and Panels

Commands

Essentially, commands are shortcuts for automating repetitive tasks. Find out how the following commands can reduce the time of your next design process.

Copy Merge

Harmonia Color Schemer

Canvas Squeezer

Copy Paste WHXY

Watermark 1.0

Color Palette 1.25

Smart Punch

Box Templates 1.0

Demo Current Document 1.0

Calculator

Snap Objects 1.0

Mac Button

Smart Knife

Rounded Bitmap Corners

Copy Merged

Spiral

Objects, Pattern and Texture, and Text Commands

Chrono 1.0

Level Horizon

Batch Import 1.0

Interpolation Panel

Utility Set One

Brush, Document, and Effects Commands

Flash Slide Show 1.12

Campus Tools

Add Web Guides, Group, Mask, Modify, 3D Rotate, Rename, and Paths Commands

Duplicate, Offset, Rotate

Save Paths as Actionscript

Super Nudge 1.0.3

Batch Complete Alert

Extrude Paths

Shape Shifter Set 1

Scripts

Fireworks to XAML Exporter

iPhone Application Prototype

Panel

Gradient Panel

5. Automation and Effects

Automation

A simple way to save time is through the use of Adobe Fireworks automating tasks. Check out a few examples of some true saving auto tasks.

FW CS4 Workspace Manager

Auto Vector Mask

Effects

Effects (or Live Filters) are a great way to enhance vector objects, text, and bitmaps. Check out some fantastic ways to add effects to your designs.

Oldie Effect

Metallic Gold Effect

Old Paper Effect

String of Pearls

Twist and Fade

6. Templates

Save valuable time with predesigned templates ranging from websites to iPhone prototypes.

Fireworks Toolkit for Creating iPhone Mockups

Free Template #4 – Travel Site

Adobe Fireworks Template for Android by UNITid

FotoGallery 1

FotoGallery 2

Prebuilt CSS Templates in Fireworks CS4

Free Template #3 – Restaurant Website

Web Studio

Super Guides 1.0

Blueprint – Sample Web Template

Template #5 – Writing Website

Fireworks 975PX Grid Systems (6col and 12col)

Free Template #6 – Business Website

Free Website Template 7

Free Template #2 – Funky Website

Free Website Template 1

Emote Template

Free Website Template 8

Prototyping for the iPhone

7. Textures

Adding custom textures to fills and strokes gives artwork a “more organic look” and adds depth to your design.

20 Fireworks Seamless Texture Pack 1

FTG Textures

Wood Textures (61)

MB Texture Pack 1

Metal Textures (28)

50 Pack

Smoke (registration required)

Cracked Paint

Brick Textures (65)

InkySmoke (registration required)

Pave Textures (203)

Fabric Patterns 0003 (registration required)

Fractal

Cracked Earth 0010 (registration required)

Welcome Mat

Splatter Round 0039 (registration required)

Horizontal Lines

Various 0224 (registration required)

Zoom Starburst

Rock Rough 008 (registration required)

Further Texture Resources

BittBox has “Free Texture Tuesdays”

Free Macromedia Textures (379)

CG Textures

Mayang

880 Odd Textures

Textures from FireworksGuru Forums Gallery (must register)

8. Objects and Vector Objects

A “shape defined by a path” is a vector object. One can edit vector objects and use them in a variety of design applications. Some resources are Adobe Fireworks .jpg files labeled “Objects.”

The Complete (Almost) Vectorized Webding Catalog

Shiny Shapes

Web 2.0 Navigation

Box

More Buttons

Glossy Country Flag Buttons

Firefox Using Fireworks

CMX Black Line Master Graphics 3

Hourglass

Fireworks Vector Pack by Pete

Valentine’s Day Heart

Shiny Basic Icons

Project Icon Set

Vector Goodies

Bitmap Buttons

12 Free Quality Logos

iPhone Hardware Translated into Vectors

2Experts Icon Set

Free RSS Buttons

Badget Fireworks

Adobe Fireworks Logos

Adobe Fireworks Tutorials

40+ Striking Adobe Fireworks Tutorials

FireTuts

23 Amazing Tutorials for Adobe Fireworks

20 Useful Fireworks Tutorials for Designers

Top 20 YouTube Adobe Fireworks Video Tutorials

Tutorials at Layers Magazine

Maa Graphics Fireworks Tutorials

200+ Must Know Adobe Fireworks Tutorials for Designers

20 Tutorials for Professional Effects in Fireworks

ITM Design

Basic Fireworks

Qrayg Fireworks Tutorials

TW Design Fireworks Tutorials

Community MX Fireworks Tutorials

Imajine Fireworks Tutorials?

Fireworks Zone

Entheos Adobe Fireworks Tutorials

Joe DaSilva Blog

In Conclusion

Adobe Fireworks is a great tool for designers which deserves more attention and definitely more resources. If you’re new to Fireworks, give the software a try and discover the power of this forgotten resource. On the other hand, if you haven’t launched Fireworks in some time, what are you waiting for? There’s a nice big box of Fireworks (resources) just waiting to light up your desktop!

Excellent Overall Resources

Adobe Fireworks Exchange
A super resource of Fireworks source files, tutorials, and resources.

Senocular
Great resource for Fireworks Source Files, Extensions, and Tutorials.

John Dunning
A super collection of Fireworks commands, auto shapes, and resources.

FW Extensions
Adobe Fireworks Plugins Directory.

CommunityMX
Fireworks articles, tutorials, and extensions.

FWKit
Fireworks extensions, styles, and templates.

Aaron Beall
Fireworks commands, panels, auto shapes, and concepts.

Phireworx
Various Adobe Fireworks tools.

Heathrowe
Auto Shapes, Commands, Automate, and other resources.

Matt Stow
Fireworks tutorials and resources.

FireworksGuru Forum –> Gallery
Templates, PNG’s, icons, textures, patterns (must register first).

UltraWeaver
Over 277 Fireworks Resources.

Fireworks Designer

IDUX

Further Reading

40 High Quality Adobe Fireworks Tutorials, Resources, & PNG Files

70+ Adobe Fireworks Resources – Is there a future for Fireworks?

Adobe Fireworks Tutorials and Downloads – Best of –

The Ultimate Round-Up of Fireworks Tutorials and Resources

75 Powerful Adobe Fireworks Extensions

About the Author

Melissa Scroggins is a freelance graphic designer at PeachPoPs. She loves designing icons, creating vector illustrations, and playing survival horror video games. Follow her design adventures on Twitter.

  

By Louis Lazaris

The web form has been one of the most discussed elements in web design for more than ten years now. We can’t help it. Call-to-action functionality often leads users to a form; purchases are made using forms; users register or subscribe using forms — the uses for forms are endless.

While it is fairly easy to slap together a form in HTML, it’s not as easy to code, style, and design your form in a manner that makes it usable and accessible to the majority of users. Since forms play such a large role in website conversions and success rates, the tips below, as well as the resources provided at the end of this article, should prove valuable for developers creating and coding web forms.

Two-Column vs. One

This decision will generally depend on the content of the form, but it’s often preferable to avoid a two-column layout if the form is fairly simple.

Below is a good example of a simple form that places each label above its related form element.

What are the benefits to this type of form layout, as opposed to a two-column form? First, the form labels have plenty of space to allow for future changes to the text inside them. A two-column form could be limited in this regard, and might require the entire form to be restructured if changes are made. Another benefit is that the form is not as cluttered looking, having plenty of whitespace in the label areas, so it’s easy to read and easy to associate the labels with the fields. Additionally, the background color given to each label/field pairing makes the form more visually inviting.

By contrast, look at the two-column form below:

Especially because of the left-aligned text and lack of color, this form doesn’t have the same clean, visual effect as the previous example. In fact, the vertical space between the labels and the fields is somewhat distracting, giving the sense of multiple entities, when in fact a simple form like this should visually be presented as one grouped entity.

It’s not impossible, however to achieve a clean, organized look with a two-column layout, as shown by the example below from Chapters Indigo Books:

So, although there are no definite rules for the general layout of your form, effective guidelines include avoiding a two-column layout for simple forms, and aligning the text labels right if a two-column layout is used.

Use Inline Form Validation

Recently Luke Wroblewski wrote about the effectiveness of inline form validation on A List Apart. To quote directly from that article:

Our participants were faster, more successful, less error-prone, and more satisfied when they used the forms with inline validation.

jQuery Inline Form Validation, Because Validation is a Mess is a step-by-step tutorial describing how to use jQuery to add inline validation to a lengthy form.

Really Easy Field Validation

Dexagogo provides a simple script that can be used to add inline validation to your forms. The demo example is not the prettiest, but of course it can be customized to suit your needs. The script uses Scriptaculous for the fade-in effect.

Group Related Fields

With a lengthy form, you’ll be limited as to what you can do to improve its usability, but grouping related fields together to divide the form into manageable visual components will make the form a little less intimidating. Thus, the form will be perceived to be easier to fill out, even though it will probably take about the same amount of time as a form that has no grouping of fields.

To group related fields, use <fieldset> and the optional <legend> element, as shown in the code below:

<form id="form" action="register.php" method="post">

	<fieldset>
		<legend>Basic Info</legend>
		<div>
		<label for="name">Name:</label>
		<input type="text" name="name" id="name" />
		</div>
		<label for="password">Password:</label>
		<input type="text" name="password" id="password" />
		<div>
		<label for="password-confirm">Confirm Password:</label>
		<input type="text" name="password-confirm" id="password-confirm" />
		</div>
	</fieldset>

	<fieldset>
		<legend>Address</legend>
		<label for="address">Address:</label>
		<input type="text" name="address" id="address" />

		<label for="address2">Address (cont'd):</label>
		<input type="text" name="address2" id="address2" />

		<label for="zip">Zip/Postal:</label>
		<input type="text" name="zip" id="zip" />

		<label for="city">City:</label>
		<input type="text" name="city" id="city" />

		<label for="country">Country:</label>
		<input type="text" name="country" id="country" />

	</fieldset>

</form>

The <fieldset> element by default has a border, which can be changed, and is often removed in a CSS reset. Below is an example of a single form that is divided into two sections using <fieldset> and <legend> elements:

Cosmicsoda Registration Form

Unfortunately, the display of the border on the <fieldset> is not the same across all browsers, so it is usually best to disable the border in your stylesheet and create a custom border by some other means. This will also affect the look of the <legend> element, so it’s rare to see the use of these two elements nowadays. But the <fieldset> can still be used to group elements, and custom borders and headings can be included to provide the same basic effect. The <fieldset> and <legend> elements also have the added benefit of contributing to a form’s accessibility.

Clearly Indicate Required Fields

It’s common to indicate required fields by means of the asterisk symbol (*) in a different color than the rest of the text, so the required indicator stands out. Although most sites nowadays include this indicator, some still fail to use it properly.

The explanatory text that describes the purpose of the asterisk should be placed immediately above the form that is to be filled out, so the users see it before they begin filling it out. Some sites have used the asterisk character somewhat like a footnote indicator, placing the description of the asterisk below the form. The example below from the Elderluxe contact page demonstrates this poor placement of the the text that explains the meaning of the asterisk:

Elderluxe Contact Form

The example above has two problems: the asterisks are the same color as the rest of the text, and the explanation of the asterisk is near the bottom of the form. In many instances, asterisks alone would be enough, without any explanation, but if your target audience is not as computer-savvy, you will likely want to include at the top of the form a brief description of what the asterisk means.

The example below from Office Depot’s registration page demonstrates a properly-placed asterisk description:

Office Depot Registration Form

Although the example form above does have problems (left aligned text, small type, little use of whitespace), it clearly indicates required fields and explains the meaning of the asterisk before the user begins filling it out. This is especially important in this example, since the first three fields are not required, thus the user can safely skip them.

Fancier Checkboxes, Radio Buttons, and Select Elements

Forms can look awfully dull, especially since the styling of <select> elements, checkboxes, and radio buttons is limited in most browsers, and it is impossible to use CSS alone to style those elements to look exactly the same in every browser. Fortunately, there are a number of JavaScript library plugins and code that allow developers to include fancier, cross-browser form elements that degrade gracefully.

jQuery Checkbox allows you to insert custom checkboxes and radio buttons into your forms. I don’t particularly care for the look of the radio buttons in this case (they look nothing like radio buttons), but it’s one option to consider.

jQuery Image Combobox is a fully skinnable image-based replacement for the browser’s usually-ugly <select> element.

Giva Labs mcDropdown jQuery Plug-in is an intuitive, keyboard-accessible, easy-to-implement replacement for a typical <select> element that allows for nested data.

Display a Hint When a Field Gets Focus

Complex forms with many different fields can be easier for the user to fill out if some help text is given. Of course, you don’t want to overwhelm the user with one or more paragraphs of text above the form explaining what the fields are for.

As a simple alternative, you can write some JavaScript (or use a customizable plugin) that will display a custom tooltip-style message to explain form elements that might be confusing, or that require a certain type of input (for example, a username that only allows letters or numbers and must have at least 6 characters).

jQuery Input Floating Hint Box is a simple plugin that displays a fully-customizable floating hint when a field gets focus.

DHTML Goodies Form Field Tooltip is another variation of the form field helper text that displays the helper text based on what is entered in the form field’s title attribute.

Be Generous with Whitespace

As mentioned earlier, forms can look ugly and cluttered if the elements in the form are not displayed in a clean, usable manner. We generally think of the use of whitespace in our overall site design, but the same principle can be applied within a form, even down to the smallest details.

You can improve a form’s design by adding appropriate amounts of space around field elements, giving the elements themselves a larger and more usable size, and also allowing plenty of space inside text fields by using padding in your CSS. For example, try typing some text into the two fields below.

With just a small difference in size and padding, the second input field has a more usable feel. When multiple text fields appear in the same form, this can make quite a difference in how the overall experience is perceived, even though technically it might not make a whole lot of difference as far as how long it takes the user to fill it out.

It also helps to allow text fields to have plenty of visible characters. A name field especially should have plenty of space to allow for longer names. Overflow of characters will start pushing the text out of view, so it’s best to have enough space to accommodate longer names so that the user can more easily spot mistakes. The example field below demonstrates how a longer name would be cut off.

A text field that is similar in size to the ones in the previous example would be more appropriate and would allow for longer input to be entered without the risk of cutting anything off. The same principle would apply to a search box that may potentially receive long queries as input.

Make Your Forms Accessible

The topic of accessible forms could easily encompass an entire article and much more, but here are just a few tips to ensure your forms are more accessible and usable to a diverse audience.

• Use the title attribute for inputs, to assist those using screen readers
• If a label doesn’t wrap around the field it is associated with, use a for attribute that matches the accompanying field’s id
• Set a tab order using the tabindex attribute on each element
• For the tab order, increment the tab numbers by large amounts (e.g. “10, 20, 30…” instead of “1, 2, 3…”), to allow for later additions that don’t require rewriting all the tab indexes
• For radio buttons and checkboxes, put the label after the associated element so screen readers read the item first and the word “checkbox” or “radio button” second
• Use the <optgroup> tag to group <select> items
• Use the accesskey attribute on form elements, to allow keyboard access

Further Reading

• Creating Accessible Forms
• Beautiful Forms – Design, Style, & make it work with PHP & Ajax
• HTML Forms and Input on W3Schools
• 25 Web Form Optimization Tips
• Accessible Forms
• Web Form Design: Modern Solutions and Creative Ideas