Every thing you need to know about designing your website from start to finish… - Stage 2 (Part 3)

Flash Animations

Flash animations give your website the “wow” factor. Flash animations are created using a program called Macromedia Flash and can be used for websites, online presentations, games, movies, cartoons, interactive CD’s and more. Flash animations are an easy way to add motion, sound and interactivity to any online or multimedia platform.

An example of a flash animation is the intro for the site www.froufroudesigns.com.au Before beginning a flash animation it’s always good to have a story board planned out. This helps you (or your designer) plan the animation and get a clear idea of how it will work before you even open the program.  Drawing a story board also eliminates wasting time animating sequences that may not work out in the end. Story boards don’t have to be complex… they can be as simple as thumbnail sketches. Pictured below in Fig. 1. is an example of my story board for the intro of www.froufroudesigns.com.au Also note that if you are going to have an intro animation, make sure you have a visible “skip intro” button to avoid annoying any returning customers.

Fig 1. Thumbnail sketches

Be aware, although flash animations look really good - there are pros and cons to using flash in your website.

Pros

• Gives your website the “wow”factor
• Adds an extra dimension to your website by using motion and sound
• Enables more interaction between visitors and your site
• Builds amazing rollover, navigation, menu and image effects

Cons

• A person viewing your website will need to have a flash player installed on their computer or they won’t be able to view the animation. (This is becoming less of issue as most computers now come with a flash player automatically installed)
• Flash is time consuming and costs more money to create
• Complex roll overs, menus and site animations can become time-consuming to update which increases maintenance bills
• Flash files are bigger in file size which can make your site loading time longer

Depending on the purpose of your site,  the amount of flash used will vary. This brings us to the next section - Efficiency vs Bells & Whistles.

Efficiency and Bells and Whistles

Bells & Whistles can make your website look fancy and like it cost a million bucks! Things like Flash animations and menus, images for text (instead of plain html text), cool java script functions, etc. look and interact really cool - but unless you have a million bucks to spend on your site they can eat up your start up and maintenance budget very quickly.

The amount of Bells & Whistles on your site should be determined by three things:

1. Purpose of the website
   What is the purpose of the website? To sell products online, launch a fashion collection, showcase services, etc.
2. Type of content on the website
   What content are you going to be publishing on your site? Is it mainly text, images, videos, a combination or completely different?
3. Frequency of updates
   How often will your site need to be updated? Daily, weekly, monthly, quarterly, annually? Who will be updating the site – you or your designer?

After careful consideration of all these points you can decide how much Bells & Whistles your site can handle before it becomes inefficient. 

For example, a fashion house that launches one range biannually and does not sell online can afford to have a heavily animated site as it will only be updated twice a year. Now imagine the same fashion house with three 100 piece collections that launch 4 times a year. The collection is also available for purchase online. A heavily animated site would be time consuming to update and would cost the company thousands in maintenance costs - therefore would not be efficient. It would benefit the fashion house more to have an animated section or banner in the site and leave the navigation and body of the site HTML.

Just because a website is lacking in Bells & Whistles doesn’t mean it can’t look good. A good website needs to have a happy balance between Efficiency vs Bells & Whistles. A website that looks really good but is difficult and time-consuming to update and manage will end up costing you unnecessary time,  customers and money in the future. Always make sure your website is designed to suit the purpose it is there for to begin with.

Preparing Designs for/in Photoshop

Adobe Photoshop (or Macromedia Fireworks for those that prefer) is the final program you will need to prepare all your designs in before you set up your website in HTML. Your concept designs may already be in Photoshop depending on what program you initially designed them in. (I prefer to design my concepts in Illustrator because I feel I have more freedom and can prepare multiple layouts/designs quicker than in Photoshop.) If you are like me and design your concepts in Illustrator or Freehand there are some things to remember before transferring your designs to Photoshop…

• Photoshop is a pixel based program and Illustrator and Freehand are vector based. You need to make sure all artwork is pixel perfect. For example if you have a button which is 105.5 pixels wide you would need to change the width to 105 pixels before putting it in Photoshop.
• Work out your grid, column and margin widths/ heights to pixel perfect dimensions. This means if you have a overall width of 750 pixels and need 7 columns that would make them 107.14 pixels each. But you cannot have “decimal pixels” on the web so you would need to adjust your site width to 749 pixels to have even columns of 107 pixels wide.
• Make sure any type that will be used in images is retyped in Photoshop as the type will appear clearer. If you just copy and paste type from illustrator or freehand it will appear slightly blurred.

Once you have a final, pixel perfect and accurate design prepared in Photoshop you are now ready to move to the Construction Stage! We will begin this stage in next months article.

Til next month,
Jill McMahon