Lo2 justify the planned interactivity

I have been tasked to build a website for my unit 4 media studies course. I have decided to build a music website that includes my beats, music projects, and information about me and how I became a producer/ artist. 

Introduction:

Within this I plan to include 360 degree pictures of my home studio and embedded Soundcloud links of my music projects. I also plan on including pictures of myself and also videos that show me creating my music. I would also like to make my website look modern by including a looping video within the background, I will be able to film this myself with a DLSR camera or even my iPhone 13 camera. The video will include me making a beat and I will use LEDs in order to add colour to the footage, as I will be filming in the complete dark. 

Images:

I will take the 360 degree pictures myself using the Theta 360 degree camera. I will place it somewhere high and take two or three pictures of my studio equipment that I can then upload and embed onto the 'About me' page on my website. I don't think that I will be able to edit these photos as they are 360 degrees and cant be uploaded into photoshop. Plus, I am also thinking off adding a portrait photo of me onto the same page. I will shoot this with a friend at night while outside of Savoy or the college. I want the image to be dark so that it will fit the colour scheme of the website, I would like to shoot the photo infront of places that have neon or LED lights. This is so I can add some colour to the black background that I am planning on having. After this I will upload the image to photoshop, while there I will edit the colours delete any unwanted elements that may be cluttering the photo. Making the image look cleaner and putting more focus on me in the foreground. 

The image before I decided to edit the colour and file size. 

The image after editing the image colour and file size, and using the magic eraser tool in order to delete the bin and tree in the background. (Note: You ca still slightly see the tree against the building, it was way to difficult to delete every branch without ruing the colours of the wall. So I decided to only delete the bottom of the tree which was just behind me.)

Before adding this image to my website I needed to optimize and edit it so that it wouldn't take up a lot of memory space, which would have caused it to take a longer time to load and make it annoying for the users accessing my website. Firstly, I edited the image to make myself stand out from the background. I did this by duplicating it and then making the image on top black and white. I then used the eraser tool to delete the black and white version f myself, allow the coloured version to be seen. Furthermore, using the magic eraser tool I delete a few background objects such as a bin and a tree which cluttered up the screen and made it seem unprofessional. After all of this I exported the image as a PNG so I could work on lowering the file size. To begin this objective I uploaded the image to photoshop and started to edit the width and length of the image to make it as small as possible. Plus, I then changed the image from a PNG, to a JPEG which lower the file size even lower from 1.6MB to 260KB. However just to make sure, I then lowered the quality of the product until it reached a perfect placement of good quality, and low file size which would allow me to finally upload the image.

To include the 360degree images of my workspace within my website, I needed to take a picture with the Theta 360 camera in my room, and then upload that onto its website. Then I embed its link and added it to my website similar to how I added my beats. Which means it wont take up as too much memory space as its uploaded on another website. 

Before editing on photoshop, the picture was 1.6MB. This is far too large for a image file and when uploaded to my website it will take a longer time to load. 

After editing the photo in the app it is then 263.1KB which is a perfect size for an image on a website . Having done this I will have speed up the transmission of content in my website 

Interactive elements:

I included interactive elements in my website as I wanted to share with the user how I became a producer/ artist and how I have improved over the years since I began. I embed videos that I created, showing the user how I create beats and songs on FL studio. Plus, I want my website to be used as a place in which users can use to obtain Production, mixing, mastering, and FL studio skills. Other than the videos I have also embed links to YouTubers who helped me improve my skills in hopes that users can watch them and access the information that they show within their videos. In the 'All beats' page I have added interactive elements such as embed SoundCloud links which include all the beats I have uploaded to that account. Along with this, I have added a button on the home page that users can press which sends them directly to this webpage. I have added this so that users have the ability to access the main content of the website as soon as they enter it, as I want them to obtain interest for a long time. 

Image Log:

Fonts:

On my wireframe I stated that the font would be bold and easy to understand. This was for accessibility reasons, as I wanted dyslexic and autistic users to be able to read the information similar to other users. Also I have used Black or white writing, while also using Purple to highlight certain words. This was to stick with the colour pallet of the website and to also ensure colour blind users are able to read the information due to the high contrast between the background and foreground. 

Conclusion:

In my final design I will meet the users' needs by making the website fully accessible and engaging s soon as they open it. This will be achieved by implementing interactive elements like buttons that send the users to another page and videos that show users how to start making similar products as me. I have made all the information and videos on the website accessible to a wide range of users by using contrasted bold text embed alt text within images, and subtitles included in videos. This will make the user experience enjoyable and interesting; gaining attention from most users which will make them use the website for a longer period of time.