In this article we present a few web design ideas and concepts that we hope would help you build a better website, or if you are not a web designer then increase your understanding about web design.

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.
Don't have Fireworks? Even if you use photoshop for website design you are sure to benefit from this article, read on!

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.

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

The idea behind Website Design

A web designer's ultimate aim for a website's design is to achieve a balance between its attractiveness (targeted look-and-feel with necessary design effects), load time considerations (optimizing design elements for website size) and user friendliness (easy-to-use navigation and well laid-out easily readable content) - without entirely compromising on either of them. Between the extremes of making bare designs with cluttered content and hard-to-navigate complex designs, a professional web designer needs to learn to expertly create a web design that is impressive, cohesive, well laid out, fast-loading and easy to use. On the programming front, no compromise must be made in creating a well coded and error free website that ensures a uniform user experience - web standards compliant (valid XHTML/CSS), accessible and cross browser compatible.

CSS Website Design Guide: Learn how to easily design a professional website using Adobe Fireworks and then build it into a CSS website using Adobe Dreamweaver. Create step-by-step the cool CSS website shown above.

Clean Consistent Layout and Navigation

Give importance to your website's layout and navigation. A clean consistent layout that uses a lot of white space with neat navigation will enhance your site. 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 sections otherwise your visitor can get overwhelmed. If you have Fireworks or Dreamweaver then macromedia drop-down menus are one of their most popular in-built "Behaviors".

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

Effects Enhance your site's Look and Feel

Some design elements greatly enhance the look and user experience of your web 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!

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 Fireworks.

Simple CSS Effects

Use CSS Styles to enhance your site's look, accessibility and reduce file size. Another main advantage CSS has is reusability. The single most important skill you can learn today to become a quality web designer is CSS programming! Even if you are not an expert at CSS you can learn to use the following simple CSS Effects to enhance your website:

Cool Text Effects using CSS Styles: Text Links Rollover, Text Case Setting, Text Spacing, Line-through Effect
Bullets in HTML or Deamweaver: Using CSS Styles with bullets (shapes, decimal, roman-numerals, images, etc.)
Links without Underline: Use CSS Styles to display links without the appearance of the underline.

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. We recommend the use of simple, muted effects that don't irritate the eye.

Check out the following popular photo and graphic design effects with detailed tutorials:

Read our immensely popular Graphic Design Ideas article for more.

Wow your users with Interactivity

Websites with interactive applications that work to greatly enhance a website's user experience are the in thing today. You can use either AJAX or Flash (two most popular modes of interactivity on the web) for this or a combination of both (like used in Google Analytics).

AJAX (asynchronous JavaScript and XML), is basically creation of applications that interact with the server without leaving the displayed browser page. This drastically reducing bandwidth usage and load time. Sections of pages can also be reloaded individually.

Flash is very useful to add great looking yet small sized 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. Animation capabilities combined with interactivity makes Flash cool. Try having both AJAX/HTML and Flash versions of the application to accommodate non-flash browsers.

Interactive Web Applications: To make your web site sticky you can add a few simple interactive web 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 products, that will bring your site to life:

Web Design Ideas

Website design ideas with Fireworks