While designing a web site it is crucial that the site is attractive, fast-loading, user friendly, focuses on your content and has a high stickiness factor to it (that shows how long the visitor stays on your site). Instead of making very complex designs with less content or bare designs with cluttered content, we recommend that you find the right balance between both.

Software Required

Adobe Fireworks (Macromedia Fireworks prior to version 8) - Please check out the compatible versions listed in the box below. Since this tutorial requires only basic tools of Fireworks, mostly any version should be fine.

Compatible Versions of Fireworks for this Tutorial

Fireworks MX/MX 2004 | Fireworks 8 | Fireworks CS3 | Fireworks CS4
Note: Instructions remain same across all versions listed above, though some visual interface images might differ.

Prerequisite Knowledge

This tutorial teaches you website design ideas using Fireworks and thus assumes you are familiar with some design software, even if you are new to Adobe Fireworks. However be assured that our detailed instructions can be followed by even a total novice.

You Are Here ::: Home >> Free Tutorials >> Fireworks Tutorials >> Web Design Ideas

Give importance to Layout and Navigation

A clean layout and neat navigation that uses a lot of white space enhances your site's look. Try to keep the focus on your content. That is why we recommend using dreamweaver templates for your site - all pages or a group of pages have one basic design and only the content varies - this way even if your site is a little distracting due to necessary effects, your design is noted once (hopefully with a appreciative eye :-) and then the visitor focused on the content automatically. Read our important article on Web Design Tips before you start designing your site.

If you have too many links then you should use drop-down menus or flyouts for your main topics. If you have Fireworks or Dreamweaver then macromedia drop-down menus are one of their most popular in-built "Behaviors". Otherwise you can use our own copy-paste code for drop-down menus in the article SmartWebby Drop-down Menus (This article is part of our Simple DHTML Guide a collection of copy-paste DHTML snippets written especially for designers).

Enhance the Look and Feel of your site

Some design elements greatly enhance the look of your site. We have described some of our favorites below. Most of them require Fireworks (the graphic editor that we recommend), which generates all the HTML and JavaScript code involved, so all you have to do is go ahead and design a fabulous site!

Example 1: This example uses Swap Images, Rollover Buttons, Curves, Vector Shapes, Paste Inside, Drop Shadow. View/Buy complete site using this design: Template 7 - Food

Simple Rollover Buttons & Images

Here, a button or image changes itself on rolling over it (onMouseOver event) and reverts back to the original image on rolling out of the web object (onMouseOut event). Click here to learn how to easily do it using Fireworks.

Rollover Swap Images

Here, a group of web objects [web object - a slice, hotspot, or button] trigger the change in the display of another graphic on rolling over them (onMouseOver event) and reverts back to the original image on rolling out of the web object (onMouseOut event). Click here to learn how to easily do it using Macromedia Fireworks.

Graphic and Photo Effects

You might have notices some cool sites and wondered "how did they do that?". Most "wow" sites use various graphic and photo effects. What you need to become an expert at is, how to use these effects in the correct amount and not over do it. Read our immensely popular Graphic Design Ideas article to learn how to use these effects, and more.

Site Interactivity

Flash is very useful to add interactivity to your site. 95% of the world's browsers have the Flash Player plug-in, so you don't have to think about compatibility as long as your movie can be played by lower versions of the Flash Player. Try having a HTML and Flash Sections "Entry (Splash) Page" if you have a heavy movie to accommodate users on slow connections.

Interactive Applications: To make your web site more sticky you can add a few simple interactive applications like site polls, surveys, a guest book, an event calendar, newsletter sign-up, etc. There are many applications on the net but you need to choose them carefully if you do a lot of online business. You can check out our some of our Flash and ASP/PHP products, that will bring your site to life:

Web Design Ideas

Website design ideas with Fireworks