Hierarchical Flowchart

Flutterby's Flowchart

Click on image to enlarge

Flash Introduction

I've created a flash presentation for Flutterby's Introduction page. The file was created using Adobe Flash CS3 and exported as a SWF file. I also exported the file as an .avi movie file to view it using Windows Media Player. Here's the final video.

Adding interactivity through a Flash contest

To make the page more interactive, I created a flash contest where the customers have to drag their mouse over a masked image and guess the real image behind the mask.

Interactive Contest

This process requires some basic scripting which I learned recently from Multimedia Programming class.

ActionScript used

Adding background image to add variety

Having the same layout or GUI for all pages can be slightly boring. As a user myself, i want varities. To differentiate between the main page to other linked pages, I've created a background image. The background image will also help to avoid a linear look. By changing the GUI for some pages, users will feel less bored.

I personally like the stripy background image from Cupcake Fun.



Here are some try outs

A design that symbolizes Rythm (repitition) and Balance (Symmetrical)

This is a Contrast design.

I finally decided to go with a slightly softer design.

This design is a combination of Rythm and Unity. It's repititive, but it blends with the content.

Main page layout

I sketched the layout for my main page so that I can better understand what I wanna do and how I want it to look like. My main objective is to link all the pages smoothly and connect the page to each other. So I decided to make full use of the Main page (the index page) by adding brief information of each page. Confused?

Let's take a look at my sketches first before I explain further.

A Rough Sketch

Main Page Layout

As illustrated in the Main Page Layout above, all the content on the main page is a brief description of other pages. To read further, users will have to click 'more info' which will be linked to the right page. For instance, the caption 'New in Town' explains new updates briefly. By clicking 'More Info', the page will jump to 'What's New?' section.

Current progress : I'm 60% done with my website.

Attractions

E-Coupons
One of the ways to make users return to my page is through giving promotions regularly. The current promotion I created is E-Coupon. The coupon gives discounts to users in order to celebrate Flutterby's 3rd Anniversary. Users will have to print the E-coupon and present it during their visit to our store.


A few surveys have been done before I created the coupon. The best reference I got was from Thrifty.com



New Flavours
Another attraction would be new cupcake flavours. From time to time, Flutterby Cupcakes will add new cupcake flavours in order to increase customer's excitement.

Recipe Of The Month!
New recipies are also added to ensure customers return.

Events
The latest news and events are updated regularly. Current events are:

1. Chrismast Fiesta
2. IKEA's New Opening
3. Flutterby's Anniversary

Tips
Tips on baking and baking equipments are also provided to engage customers attention

That's all so far :D

Creating Named Anchor Point

Named Anchor is created to make the navigation easier for users when there's a loooooooong list of stuff. This is to help users jump to the desired section easily and quickly. Although my list isn't that long, It's a good way to experiment with Dreamweaver CS3's features.

Creating an anchor point:
1. At the top of the page, I listed down the titles of each section. Eg : Measurement, Conversion.
2. Then I created an anchor point at each heading section and named it accordingly. Eg: a1, a2.
3. Then I hyperlinked the titles at the top (Measurement/Conversion) to the anchored point (a1/a2)


Tadaaaaaa! Named Anchor is done! :D I also added a link that says 'Back to top' and linked it to the top of the page.

For more info, here's a tutorial from Youtube.

Named anchor can also be done to link to another document. Just link the file as usual, and add a # sign followed by the anchor name. Eg: filename.html#A1.