Create the interactive media product(U4: P4, P7, M3)

 Create the interactive media product(U4: P4, P7, M3)

Learning Outcome 3 (U4): Be able to create a planned interactive media product  

Generate content and create the interactive media product, optimising it for use on a number of platforms to meet the clients’ needs

P4: Create the planned interactive product 

Website- https://paigeroth8.wixsite.com/my-site

Optimisation

When optimising my website I needed to make sure that users have the best high-quality and fast experience no matter what platform they are using the website on, whether that be a laptop, phone, tablet etc. This is very important that all users experiences are the same on each device they use as this allows for our website be consistent and maintain the same standard on different platforms for users. By providing users with a speedy high quality web browsing experience, they will be more likely to purchase things on the website like merchandise and as a result, they might share the website to their friends and family furthermore, increasing the amount of users browsing the Megamovie website.

File formats

I used mainly JPEGs when creating my website. This is because JPEGs are good for web images meaning any JPEG images on my website can load quickly with high resolution but a low compression rate. The benefit of this is that users will be able to see all the images on the website instantanously and they will be of a high quality. Furthermore, making the user experience more positive as users can see when browsing the high quality images suggesting that this is a high quality website and when users have a good experience on the website, they might be more inclined to buy things on the website e.g. merch, tickets etc. and also share the website to their friends furthermore, reaching a wider audience.

P7 (U9): Integrate the scripted character with the story line to create the final product 

Website Screenshots

These are screenshots I took when making my website and it shows the process of uploading images, animating certain images, and expanding images to the size I want.

This is a screenshot of how I animated an image. I firstly click on the image that I want to animate then I click on the animation icon that takes me to a folder of different types of animations to add to the image. I then select one so that when users open this section of the website, the image appears in a cool way. Therefore, making the website fun for users when browsing when the images load in. 

This is a screenshot of the folder of photos I have got from my computer and have uploaded to Wix to use on the website.

This is a screenshot showing how I'm expanding the image I am using on the website. I expand the image by click on the corners of the image and drag with my cursor which expands the image. Once I'm happy then I leave the image and I can move it to where ever I want on the website. 

This is a screenshot of how I uploaded images to the website. I click on the upload from computer button which takes me to my files on my computer where I then can select the photo I want, and once selected it goes into the folder on Wix. Additionally, I then can drag the image onto the screen and place it where I want on the website.

  

This is Mobile version of the website which I created in order to meet the brief because it states that the website must be developed to be viewed on multiple devices. 

This is a folder I created where I put everything I needed to create my website in e.g. images, wireframes, etc. This made creating my website easy as I was organised and had everything that I needed in one place.

This is me embedding the first page of the comic onto the website.

This is a website template I used to help me make my website. This template had a good layout and it enabled me to know where to lay out things on my website, and I could also edit this template when making my website in order to fit my needs better. Therefore, it was customisable to what I want.

Setting properties

On the website, I made sure that I correctly named all the sections on the navigation bar so that users can easily click on the about us section for example, and then read about who Megamovie are.

Controls and clickable images

We had various controls on our website. We did this to provide enjoyment and convenience for our users. For example, we have a control for the pre-order merchandise form in which users can select the quantity they want of the merch they are pre-ordering and submit it by clicking the submit button.

In terms of clickable images, we had a slideshow where users could click on the sides of the images shown of the cast of Bionic Attack and also the characters of the comic, and once you click on the image it takes you to the next image in the slideshow. This type of format is entertaining for users as they can interact with the screen to change the slideshow to a new image which is engaging and they can look at the images at their own pace.

Forms

On the website, I included a contact us form so users can ask us a question and we can reply to them. This is good because users can find out the answers to any questions they have.

Version control

To make my website on WIX which is a auto-saving website creator, means showing my website developing is hard. Therefore, I have many screenshots collected as evidence of me making the website at different points to prove I am the creator of the website.

M3: Create a graphical user interface combining media elements with user interactivity 

In this screen recording, I have shown the GUI users get when using the website and I have shown the interactive elements of the website and how to navigate the website easily throughout the different sections. Additionally, I have followed the brief and have made sure that the website will be suitable for my target audience and in the screen recording we can see this.

Optimisation and WIMP Interface