Final of Test Site

I then added the contents of the Links page and added the animation. I also added 

one button on the Hemdroid link, that if pressed, it will show the popup for the link.

I then added the same button test function to the Interior Design button, so

when pressed it shows the pop out gallery of my images and sketches. 

Finally I added the content, animation, and test button to the About page.

I feel this theme and layout captures my design concept, style and approach.

I struggled to find a balance between "busy" and less is more approach, however,

I feel this carries the theme and the concept of my initial design idea. 

Final Test Page

Portfolio Buttons and Sound

I then added the effects to the buttons in the Portfolio section by doing the same 

as I did with the the navigation text. When I came to thinking of sound effects, 

I was a little apprehensive as to the sound making the page seem childish 

or tacky. I have always been a huge fan of Juno Reactor, and was inspired

by their use of typography on their album art in this project. It would only be 

fitting then that as I was designing this site I was listening to one of their songs

that fitted this theme. I used the sound file in the design after editing it in

Audacity. I feel it suits the mood and feel of the site. 

Portfolio Navigation

Navigation and layout applied

I applied the static layout to the navigation to get a feel for it.

I then also went back to using the glow effect to highlight the light streams

and add some animation to the design. 

I got the effect of the distortion on the buttons by using the "smudge" tool

in a small scale from right to left and then left to right over the text. I then did 

it the opposite way across a copy of the text and then did a third copy of the 

distorted wording at random. I then imported them into Flash and by moving

them over each other and changing the opacity was able to get the desired effect.

navigation buttons with animation

Rather than having the page feel like a straightforward "Left to Right" movement

I chose this as my home page as it adds a break in the layout and gives the feel

that the landscape moves into and out of the page. This also gives a nice style

to the navigation layout. Instead of having the home page at the front, I had it in 

the middle left to add to the movement of the background. The user moves off

left to my links page and then over right, past the home to the rest.

I then worked on the rest of the layout of my page in a static sense in Photoshop.

Once I had the idea of how I wanted it to look, I arranged the pages together

as I had decided, for what each one would be used for.

I then used the same font to create the navigation aspects for each section.

Panaramic navigation 2

I blended the images in Photoshop, using the clone stamp tool and blur tool.

I also added a copy of the end image as a mirror view to stop the movie clip

moving off the stage. This extended the image at its ends and I used the clone

stamp to change the end images so they didn't look the same but kept 

the light streams consistent.

I then added a glow to see what this effect would give to the image. 

Navigation 2 and lights

I also changed the bounce in order to get a better effect between frames and

pages. I then added the typography for the buttons from Photoshop using the

Adams Font which worked well.

Button Navigation

Panaramic navigation

I decided on the idea of a panoramic view. I hadn't taken any panoramic 

shots when I did my photography so I stuck some photos together in Photoshop.

I then added some buttons and tried it as a background using tweening in flash. 

I wanted the webpage to take the user from page to page by moving along 

the street. The problem was the image didn't blend together and the bounce

on the tween in Flash moved the image right off the stage.

Panaramic Navigation