Final Website

slab.sunderland.ac.uk/~bf92ao/winewebsite/

This is my final website, if viewing in internet explorer, compatability view may be needed

Typography banner animation

This banner was created using flash combined with action script so that it produced the random letter scrolling. The text originally started as dynamic text and was converted into a movie clip so that i could add in the script to produce the random letter scrolling effect.

This banner was inspired very much by the matrix style scrolling text that falls down the page as i liked the effect of this and thought that it would work well as an animated banner.

slab.sunderland.ac.uk/~bf92ao/test5

Animated Headers

This header was produced using flash combined with actionscript to make the snow effect in the background. The action-script randomized the process of creating small and large circles (snowflakes) and slowly varied how they fell in the stage. Once they reached the bottom, the process would then repeat in an endless loop.

Once the animation was completed, i added some text in a new layer and under laid it so that the snow would fall over the text giving an overall better finish.

slab.sunderland.ac.uk/~bf92ao/test4/

Navigation Research

This navigation bar uses a simple rollover effect that when the cursor places over it, a gradient effect occurs causing a change in colour to give a clear visual representation of where the cursor is and which link is being selected.

This navigation bar uses a simple filled area in which text is overlaid using a contrasting colour to make the links stand out more. These links are made more appealing by the simple use of a small strip of colour at the top which is unique to each link so you can tell the difference between each link. Furthermore, there is also a nice effect underneath each of the link headings using smaller text in a faded colour to give a brief indication of what the page is about and what you can expect to find there.

This navigation bar combines several elements such as images, headings and sub-headings. The idea of combining a simple image with the text gives a simplistic feel to the navigation section thus making it clear and easy to use.

Looking closely at the original images, they are made using a clear white background to make each part clean and crisp giving the whole effect a more professional feel. As before, they use the same idea of using smaller text underneath the main text to give an indication of what you will find on the page and what the page is about. Furthermore, they use a rollover image that changes to a tab-styled finish which is filled with a darkish neutral colour giving a contrast between the link and the background making the link you are hovering over stand out and "pop out" from the rest of the links.

This navigation bar looks very appealing and is VERY eye-catching as you are drawn to this section immediately when the page begins to load. This is achieved by using vibrant colours which contrast with each other giving the indication that each section of the website has its own unique colour scheme thus making them easier to identify.

The links are separated between the sub-links by applying a embossed effect to the background of the heading so that it sinks into the background making it darker thus giving the impression it looks more like a title that an actual link.
Therefore, the sub-links look more like the main links between the pages as they are kept quite simple using a white font colour on the vibrant background making them clear and crisp.

I like the fact that this banner uses a combination of these effects as well as using a computer generated image at the bottom of the navigation section to further make it more eye-catching and appealing as the image uses very similar colours to  those used in each of the sections in the navigation such as the green, blue and the orange.

This navigation bar aligns each of the links vertically up the page instead of using the more traditional horizontal alignment used on most websites. This effect works well here as the links are very simple rollover images with the background slightly dimming when hovered over. I think anything else other than text in this style of navigation bar would look too clustered and unprofessional giving the impression that the website wasn't well thought out at all.

The navigation bar is made even more professional looking by using similar colours used on the page giving the impression that a specific colour scheme is applied to the website.

This navigation bar you can clearly tell was made using Flash and action-script as it animates by slowly moving out and sliding across before sliding back to the right when you are not hovering over the selected link. I like this effect as it makes the site less formal thus making it more appealing to younger audiences.

I like the fact they haven't used any text in each of the links but instead, used a series of white image silhouettes giving associations made with each image and each page. This combined with a series of colours in a spectrum makes the silhouettes stand out from the background this making them more eye-catching and easy to look at.

This effect is very useful as it doesn't require much space usage as the links slide out and back taking up less space as they would really only require a think strip no more than
10-15 pixels wide and the length would be decided depending on how many pages i had on my website.

Concept Header and Footer Designs

Concept Design 1

This design was made using a 1000x250 PX canvas combined with a canvas colour of #FF6600 which is a very vibrant and colourful orange to give a contrasting feel to the web page to make certain aspects of the page stand out amongst the rest and to also make the page more eye-catching.
In an attempt to give the page a professional feel to it, i decided to keep the same canvas colour as before to keep a corporate style that would be consistent throughout all of the pages if i were to use this page as a template to create others from it.

On both the header and footer i decided to use the sans-serif font Arial Narrow as this made the headings and text stand out thus making them easier to read and interpret as they contrast with the chosen background colour.

http://slab.sunderland.ac.uk/~bf92ao/test1/

 

Concept Design 2

This header and footer design was made using the same dimensions as my first header and footer design above with the exception of the canvas colour which was made to be transparent as i was using an image in the background. The image used in the background of this design was created using the paint brush tool in Adobe Fireworks and was exported as a PNG to use in the background.

The image was cut off so that the rest of the image could be used within the navigation bar also so it looks like one image that gives the indication of a smooth flow.

With this design, i decided not to include a footer design as in my opinion if i created one with the same design idea i had used with the header, it would distract the user away from the rest of the page so instead i left it blank with just simple text in an attempt to keep the user drawn towards the header design i made.

http://slab.sunderland.ac.uk/~bf92ao/test2/

 

Concept Design 3

I made this header using Adobe Flash using a combination of image, text and animation in the form of action-scripting. This was then exported as a SWF file and then imported into the document so that the animation would play and loop when the page loads.

With the footer, as it has quite a small area to work with, i decided not to animate this but instead keep within the theme i had chosen and import and edit a series of images with combination of the pen tool and line/fill effects to create a simple and eye-catching footer.

http://slab.sunderland.ac.uk/~bf92ao/test3/