Creating the interactive media product (U4: P4, P7)

Creating the interactive media product (U4: P4, P7)

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

References

Bionic Attack! Poster made on: https://www.postermywall.com/index.php/posterbuilder/copy/7b95be4f3e22fc304d973d6dbb6f847a

Attack of the Bionics posted made on: https://www.postermywall.com/index.php/posterbuilder/copy/610d20df46d6c72bc1997d378f5f39a9

Metal background of website: https://www.pinterest.co.uk/rtaylor2061/nxtgentxtrebried/

Ryan Reynolds image: https://www.vulture.com/2016/11/ryan-reynolds-says-hes-funny-bless-him.html

Carrie Anne-Moss image: https://www.elle.com/uk/life-and-culture/a36092860/carrie-anne-moss-ageism-hollywood/

Keanu Reeves image: https://www.thecut.com/2019/07/keanu-reeves-youre-breathtaking-sign.html

Jennifer Lawrence image: https://www.vulture.com/2015/06/jennifer-lawrence-deserves-20-million.html

Store mock ups: https://placeit.net

The link for my website is: https://ellawise04.wixsite.com/my-site-2 

This screenshot is showing  me creating the different pages of my website, and then ordering them according to my wireframe and sight-map. To do this you drag and drop the different page titles into the order you want.

This is evidence of my first interactive element. This mega movie logo image, also acts as a home button. This button will be pinned to the top of every page of the website and users can interact with it (press/click on it) and they will be taken directly to the home screen in the same window they’re on. 

This screenshot shows me setting up the other interactive feature my website includes. This is the merchandise shop that the brief stated they wanted included in the interactive media product. The merchandise shop is interactive as users can click on the product they want to purchase and it will be added to the cart that you can see in the top right. With the clothing products (t-shirts) users are also able to choose the size they would like to purchase, enhancing the interactivity of this aspect of the website. 

These screenshots show me inserting interactive buttons that lead viewers to MegaMovie’s social media platforms. Each button has the corresponding logo of the social media app and when users interact with it by clicking an app, they are taken to their social media profile on said app.

This image shows the page in which the comic is featured. I dragged in all the pages of the comic, then resized and moved around the pages into order. To read the comic, users will simply scroll to see the rest of the pages.

Here is me adding, then re-sizing one of the components on the ‘About us’ page. The logo was too big when it was first added, so for it to find into the website the way it was planned, I made it smaller.

These screenshots show the formatting of the website on another platform, mobile phone. This shows that the website is still very simple to understand, and is well laid out despite being on a smaller user interface. The second screenshot shows how the navigation of the website is laid out on mobile phone after pressing the navigation button (hamburger icon).

When optimising the content on the website for the smartphone layout, I had to re-order some of the content such as images and test as they became really squashed and out of order when trying to fit onto the smartphone format. This meant I had to size down images, change the size of text and move elements around in order for it to make sense.

This screenshot shows me adding an animation to my text. For this element I chose a simple fade in effect for the text. This means that when users click onto the page, instead of already being there, the text will fade in. I kept the default settings of this animation as the default settings gave the look I wanted already.

File formats

The images on my website are in JPEG file formats. This is because these image files are compressed so therefore load quicker which is ideal for websites as they typically need to be able to load fast. If the images were in another file format such as a PNG, it could compromise the loading time of the website, and loose the interest of viewers.

My final comic that I embedded into the website is in a PDF file format. This file is a high quality file, and can even be downloaded onto the device in which the website is being viewed, and stay a high quality file. This is ideal as the readers will be able to read the comic in high definition on both the website, and offline.

Lastly, The video I included as a trailer for the film Bionic Attack! Was in an MP4 format. This file format is the most appropriate formal for a video as it can be used on multiple platforms, as well as having compressed files resulting in a smaller file size, and therefore a faster loading time on the website.

File formats

The images on my website are in JPEG file formats. This is because these image files are compressed so therefore load quicker which is ideal for websites as they typically need to be able to load fast. If the images were in another file format such as a PNG, it could compromise the loading time of the website, and loose the interest of viewers.

My final comic that I embedded into the website is in a PDF file format. This file is a high quality file, and can even be downloaded onto the device in which the website is being viewed, and stay a high quality file. This is ideal as the readers will be able to read the comic in high definition on both the website, and offline.

Lastly, The video I included as a trailer for the film Bionic Attack! Was in an MP4 format. This file format is the most appropriate formal for a video as it can be used on multiple platforms, as well as having compressed files resulting in a smaller file size, and therefore a faster loading time on the website.

Setting properties

As shown in a  screenshot above, I made sure to name all my pages appropriately, and correspondingly to the content on said page. For example, I made sure that the page which has information on the company and what they do is called ‘About Us’ as it tells viewers about the company.

Furthermore, I decided to display this navigation menu on the top of the screen. I felt this placing was more appropriate as it won’t be taking up as much space as the text simply goes across the screen at the top rather than it taking up a lot more space if it was on the side of the page. This navigation bar could be put on the bottom of the screen, however I thought it would be more appropriate to have it on the top of the screen as that is typically where it is put.

When I previewed and tested my website when it was complete, everything was displayed correctly on the pages. Everything was in the right order and all the elements and components were in the right place. None of the elements got cut off on the side of the screen, and none of them were off centred, or placed wrongly on the screen.

Setting up folders and named files

When making my website I made sure to save all the components and test in correct folders on my laptop in order for them not to get mixed up.

Templates

When creating my website, I didn't use any of the pre-given templates, I just used a blank screen and I was able to freely drag on the elements and photos as I pleased. I felt that none of the templates given felt right for the website so therefore I made it from scratch to make sure that I can give the website the feel and aesthetic I thought fit.

Version Control

To create my website I used Wix which is an auto-save website maker meaning it is harder to show progression throughout the website making process. However, the screenshots provided above document my process throughout creating the website, so therefore hopefully account for the fact that I made the website myself.

Controls

Some controls featured in my website consist of the pause, play and volume button in the video trailer in the Bionic Attack! Movie page of my website. These interactive controls allow users to play, pause and increase/decrease the volume of the material in which they are watching.

Another control is the clickable image which is pinned to the top of every page of the website. This image is the MegaMovie logo, and I linked it the the home page meaning that when users interact with it, it takes them back to the home page of the website.

More clickable images featured in my website are the images which advertise the MegaMovie merchandise on the merchandise page. When interacted with and clicked, these images will open a new page which allow viewers to choose colours and sizes for their products then add them to their bag.

Lastly, another control featured in my website is in the contact us page and is a contact form. With this form, users can interact with it and send inquiries and comments to MegaMovie. Users will put there email, phone number and name in then type out a message with the keyboard on their device and click/press send.