Creating the interactive media product (U4: P4, M3, D2)

P4: Create the planned interactive product.

website: https://edentivon3.wixsite.com/megamovie 

references: images used on my website

https://cdn-dfhjh.nitrocdn.com/BzQnABYFnLkAUVnIDRwDtFjmHEaLtdtL/assets/static/optimized/rev-dd281fc/wp-content/uploads/2015/02/barcode-3.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/BBFC_15.svg/800px-BBFC_15.svg.jpg
https://static01.nyt.com/images/2022/04/04/multimedia/15ai-nocode/15ai-nocode-mobileMasterAt3x.jpg
https://media.gq-magazine.co.uk/photos/63ee06e8b1322681bf7aa628/1:1/w_1080,h_1080,c_limit/Keanu-Reeves.jpg.
https://i.pinimg.com/564x/a8/85/da/a885da9662020b62b7108d3c9393e1c8.jpg
https://www.buytshirtsonline.co.uk/images/fruit-of-the-loom-cheap-white-t-shirts-p526-160409_image.jpg
https://production-dam-media.arco.co.uk/cdn/2652200/images/I_2652200_COf_ProdMedium_262202_1.jpg
https://cdn-3.expansion.mx/dims4/default/210a4ab/2147483647/strip/true/crop/682x1024+0+0/resize/1200x1802!/format/webp/quality/90/?url=https%3A%2F%2Fcherry-brightspot.s3.amazonaws.com%2Fb0%2Fd9%2Fde35193d4707b32db2898e1a2349%2Fgettyimages-909925584.jpg
https://www.pinkvilla.com/files/tom_cruise_suit_1.jpg
https://i.pinimg.com/originals/12/cd/cc/12cdcc3e16a8f76205a78cac22745d94.jpg

screenshots showing:

resizing

As you can see in the screenshot below, I have reduced the image size to better fit the website format. I have ensured the image is able to be well presented within the context of the website but not too small as this would make it difficult for audiences to view.

adding interactive elements

In the following screenshots, I have added a variety of interactive elements to better engage audiences by allowing them to interact with content on the website. For instance, in the image below you can see me adding the YouTube trailer which users can interact with by adjusting speed and sound settings as well as pressing pause/ play. This improves user experience and therefore will make the website more popular overall. 

In this image, I am adding a call button so users are able to call for more information about projects.

This screenshot shows the option to log in, these interactive elements allow users to have a more personalised experience on the site by logging in and saving various feature settings to their preference. 

adding animations

Animations have been added to the flame images here to feature a more exciting appearance for the overall page on the site and further engage the young audience. Furthermore, it gives the illusion of flames lighting up which directly correlates to the title and plot of the comic. 

buttons

The following buttons have been added to optimise the user experience. These have made the actions carried out by the button much simpler for audiences, for instance the 'phone' symbol button allows users to easily make a call to the company rather than searching for a number- improving the overall user experience. 

The arrow seen in the phone view image is a button that allows mobile users to return back to the top of the page screen, this makes it easier for audiences to navigate the website.

clickable images/ hover

In this screenshot, I was editing the images which would appear in this section of the website, the image effects allow them to appear still but will transform into a second image using a visual effect that will look exciting for audiences. This hovering element will relate to the genre as it might appear with a sci-fi feel.

different formats- phone

As outlined in the client brief, the interactive media product must be accessible for audiences on multiple platforms so in these screenshots I have set up the mobile layout for the website. This ensures audiences are able to access the site on multiple devices, allowing it to remain easy to use. When testing the site it was difficult and frustrating to use on a smaller device but after adjusting the settings it made for a much more positive user experience.

hyperlinks

The hyperlinks used within the website mostly take audiences to other pages within the site, but some also allow content to be downloaded onto the user's individual device. This feature will improve the overall user experience. 

colour

The primary colours used throughout the website's colour palette are green and black, this helps to reinforce sci-fi genre conventions and allows a level of consistency for the overall interface, making it more professional for users. Furthermore, this screenshot shows me designing the menu bar and the colour of the text which fits well into the overall website design due to colours used.

optimization/ load times

The various elements found within my website help boost optimization overall and therefore give the website a very quick load time to ensure audiences with a short attention span are kept engaged throughout their user experience. The audience being targeted are primarily young so ensuring load times are kept to a minimum is crucial to the overall success. 

File formats

The images used on within my website where all saved as JPEG file types as this helps compress the file so it is easier to upload to the website. Furthermore, it stores the file as a high-quality image so it will appear better to audiences and help improve the professional image of the company. 
The comic appeared as a JPEG on the website as this was the best-looking file type to present for audiences to read the comic. However, the downloadable version of the comic is a pdf file as this file type retains the file format making it easy for the audience to read in the correct order.  

Version control

I was not able to save a variety of website versions to track my overall progress as the website creator I used was WIX which operates on an autosave system. The benefit of having several versions would be to track the progress of the site and have a variety of options to go back to if the current website crashes/ fails for whatever reason. Although I did not have this option, the autosave function allowed me to ensure the website would not disappear during creation and if my laptop died during the creation phase I would be able to restore it to the final version saved.

Set properties

The set properties of the website refer to the clickable text in the menu bar, this text helps navigate users through the website in an efficient way. This menu bar can be viewed accessed from the top of every page, with a highlighting feature that changes the text colour to show users which page they're currently viewing. Interestingly, the primarily young target audience will benefit from this as it helps guide them through the site easily and ensures they don't lose their page. The navigation is made simple for the audience and therefore promotes the overall interactive product's positive reputation. The client insisted upon a user-friendly site, by providing these simple navigation features it helps us reach this goal and obtain a loyal consumer base.

Controls 

Significantly, I incorporated a variety of control elements to help create a more interactive experience for users. For instance, a phone button was included to allow audiences to easily identify the function and carry out the action without needing to spend time searching for this information (phone number). Additionally, a download button was developed to enable site users to download the comic onto their individual black box devices for later/ offline viewing. This will help keep audiences engaged for an extended period as they read our comic when convenient for them, the download button also might offer a personal touch. Furthermore, video elements of the website offer pause, play, and volume-adjusting settings that users will find enjoyable as they are further in control and therefore appreciate the site.

Files

Here you can see I've organised all my screenshots in a file so they can be easily found for use. The file is clearly labelled 'screenshots' to easily identify it. 

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

video of website in use: laptop

D2: Demonstrate optimisation techniques across the interactive media product.

video of website in use: phone

The optimization of the MegaMovie website has been added to improve the overall user experience. One element which has been included for optimization is the download button within the comic book page of the site, this allow viewers to read the comic offline at their own convenience. This will improve their loyalty to the media company as they are able to be constantly consuming content produce by MegaMovie. Additionally, the website has included a menu bar at the top of each page on the website with highlighted text to indicate the current page, this will ensure users can easily and efficiently navigate their way through the website- boosting the reputation for the interface. Interestingly, the black backgrounds with contrasting green text allows the content of the website easily visible and legible for audiences and therefore will help boost engagement for the site. The load times of the website across platforms is very fast which ensures a quick response time, reducing the potential of users getting bored or frustrated. Finally, the website is consistent and accessible across two platforms (mobile and laptop) so audiences are better able to reach the site and use it from anywhere at anytime. The benefits of the mobile website version are the call and social media functions which often work more efficiently on this device, generating a high quality experience for users.

Another optimisation element incorporated into the website was the social media icons linked to actual social media pages at the bottom of all pages. This will benefit the audience users as this acts as a shortcut for them in getting to the social media page, furthering the companies following as a result.

This screenshot displays the optimisation of the website, the user is able to navigate through the website by using the menu lines in the top right corner of the page, this enables a simple user experience. The interactive button increases optimisation by allowing the website easy to use for the young target audience who might find it difficult to find their way through the content on the site, the labelled menu pages help in this way.

Finally, the merch shop acts as a form of optimisation as customers can purchase merchandise within the same website instead of having to find a separate page for the items. This is all clickable and purchasable within one space on the site and therefore helps mega movie sell more items due to convenience.