Final Website

The final version of my website achieves everything I want it to form design to functionality.

The only issues I have with it is that as the page is size responsive, the parallax effect doesn't respond to the changes in page size. This would cause an issue when viewing it on a tablet or phone screen.

It would mean that I would have to have a site just suitable for smaller, mobile devices and only use the parallax effect on the larger screen.

This is an example of the timing of the scroll and writing coming in on a smaller screen, it isn't in sync.

Creating the website

As I intended to create a parallax effect to the website I decided to create it in Edge Animate after failing to get my head around writing/using HTML frameworks.
Edge Animate lets me keyframe in the movement of various objects and time it to the scroll of the webpage.

By linking the document to the Edge Commons page it used the JavaScript and codes already written to give the desired effect to my webpage.

This is an example of how I linked up to the Edge Commons and implemented the codes to allow my page to do the actions I needed.

Website tutorials from the edge commons site taught me a lot of what I needed to know.

Adobe Edge Animate video

I used Adobe Edge Animate to create a simple product demonstration that shows the viewer the simple steps

-buy the product
-decorate it
-photograph it
-share it

By using keyframes I was able to animate the transformation from it being a plain column,

Website creation

I have been refreshing my skills with basic HTML and CSS as well as looking into website frameworks and tutorials available. I would like to create a parallax style of website to make it easy to navigate and fit the viewers needs.

I have also been looking at using Adobe Edge Reflow to create the style of the website with ease as well as creating an animation on Adobe Edge to demonstrate the product.

During my research into parallax websites I am attempting to learn how jQuery is used to hopefully make my website as functional and interesting as possible.

Column designs

I decorated the column to represent the way different people might choose to design theirs.

The columns would be very unique and individual to each person, so I designed a variety to show what the gallery could look like.

 Some people could decorate theirs to show where they're from, this would give the Southbank useful information on where tourism is coming from.









People may choose to focus on the 'Long Live Southbank' project and saving the Undercroft. This would be a good way to raise more awareness and allow the audience to show their support.

Creating the content

After receiving the 3D printed model I began to think about what the content would be for the website and gallery.

I took promo style photographs to show the product and the concept, by using a 50mm lens I achieved blurred, out of focus backgrounds which means the viewers eye and focus is kept on the product and pens.

I also used a graffiti style artwork to represent the urban and art nature to it.

The photos are a way of showing the intension of the website, the audience decorate and then share their creations.

These photographs can be used for banners on the website and even posters/adverts. The style will fit well into the website to keep the product feeling coherent and become almost a brand identity that the audience can associate with.

3D printed the column

As the 3D printing cost £8 per column I will look at other ways to produce the photographs to go into the online gallery. I could either texture the column in maya with the designs or use the model I have and create a variety of skin like outside designs to put around it and photograph.

Website designs

This was the first draft of the website, it follows the colours used on the Southbank Centres own website but I feel it does not fit the style of the product so I will be making a separate website for it with its own branding.















This is the design style for the website, I want it to be a vertical scrolling webpage with parallax scrolling. Different sections will have separate uses, one for the gallery, another for about the product and so on.

3D Printing

After emailing and visiting the technician who deals with 3D printing at the University I have created and sent him a .stl file of the column I wish to have prototyped.

There was a slight issue with some of the vertex being off in the first export, but since then I went back and fixed the shape. The job will cost £8 and will have a honeycomb type of inside to make it cheaper and lighter.