LO4: Conduct testing on the finished interactive media product

About Me

Portfolio

Blog

Contact

Homepage

I set about my testing by opening each page on Safari and test each feature on the page. This involves scrolling and pressing each individual button on the page. I made sure that my website looked the same in full screen as it does in half screen. I did as this cause me a problem in the past. I looked over my code making sure no spaces were there when not needed and the code is presented nicely and clearly. For my portfolio page I made every image fully shows each image clearly and the carousel action works for every image link. This taking the majority of my testing time. With all this testing I made sure every button was exactly the same in terms of actions.

LO3: Demonstrate optimisation techniques across the interactive media product

To organise my files I used a naming system. This system means for example if I had an image I wanted on my Urban Photography page I would name the image Urban photography 1. I would also use a number system to order the photos within a certain category. Usually the numbers mean what section of the website the certain photo is on in terms of the grid. 1-4 being the 4 main photos and the last remaining photos being called 5-12. I have organised all my photos into a separate folder called photos in my website folder. In my website folder the HTML files for each website page. This allows me to open the specific website I want. In this folder there are edited images with the right dimensions to fit on the page. The files my photos are JPEG this means that the files are small. This means I can transfer the photos easily between folders.

Optimising Techniques  

TEXT
The text I added in my website was a sans serif font called Helvetica. This is very readable and clear for the users to read. I increased the size so my text was readable, however not so big that it takes up most the screen.

FILE COMPRESSION 
The size of the website determines how fast the website loads. The bigger the website is the slower it goes and the worst the user experience is. To make my website run better I tried to reduce the amount of code with making the website seem simpler as the more complex the website is the less responsive is.

LOSSY COMPRESSION
Lossy compression reduces the image size and quality to make the overall product smoother and faster. Lossy compresses the image into a smaller size. This reduces the quality that the image has but however looks not different to the user. This compression was very apparent for my portfolio page this because of the amount of images on each portfolio page. This allows me to click on buttons to different pages quicker and easier.

CSS FILES
The css code is code on my website for all the visual content on the website. To minimise the CSS files to make the website run better I minimised the file size in Adobe Photoshop. I changed the file size to a smaller setting to make the files smaller. This also to make them fit my website.

IMAGES 
I added Metadata to my images as a form of copyright. This copyright shows the user that the photos on this website are mine. This adds my name and the location of the photos. This protects my photos from people using my photos in any way. I knew about this technique by other media units I have done. I had to do this as people can click on one of my photos and screenshot the picture.

CLEANER DATABASE
To clear the database I deleted all the images I decide not to use on my website. I needed a lot of images so I stored a lot of images to put in the website. Some of these photos weren't used because they weren't the right size or the right angle. However I kept the image in my folder as I kept them just in case I wanted them again for another page. Getting rid of all these images that I wouldn't use on the website makes the website faster and a better experience for the user.

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

A feature of interactivity on my website is the user of my link in my blog page. In my blog page I added the link my photography account. Unfortunately social media is blocked on colleges Mac. After I knew this fact I decided to add the link on a interactive hover with the mouse. This makes the user interact with my website to see my blog on my Instagram account. This blog is a way of promoting myself by using visual media elements that help me promote my photography. This shows a connection to another source on the internet branching out to other forms of viewers such as Instagram users.

This image here is one of my completed pages I have used a black and white housestyle. I used this layout as it is very common with other photographers portfolios. A photographer called Nico Goodden has this style of layout where there is an navigation bar and his name in big letters. The colours I used for my name were red and black. These two colours I think compliment each other and stands out on the page. I also created a grid design that showed my categories clearly. The categories were presents like tiles. These tiles have a photo in them which shows the category visually. Also I added a footer that tells the viewer that the website is created and owned by myself. I think the square tile design is an user friendly design that interreges the user into picking each category.

Image



On these pages there are all my photos that are in this category. This folder has a around 12 photos in there. These photos are aligned in a grid. All photos are shaped the same, with the same width and length. To do this, whilst editing them in photoshop I changed the length and width of the canvas that the photos would be on so the photos on the website would be the same size. My photos being the same length and width shows a level of professionality I my website, the layout being neat. My grid was spit into 4 main big photos and 8 smaller photos. I chose my 4 favourite photos to feature on top of my website. I liked that my gallery had a highlight system on it and a interactive carousel where you click on an image the image because extremely large with the others being smaller and selectable. This allows the user to interact with the website more and choose which photo they want to see at any given time.

LO3:Create the planned interactive product

LO2: Justify the planned interactivity and range of media content to meet a client brief

Interactive Images And Videos
  In my created website I included a gallery where the user can interact with by clicking on the image to make the image go full screen and the user can select which image they want to see quicker by using the carousel. Also on my Blog webpage I created a link where the user will click on the image and the webpage with my photography Instagram account this gives more exposure to my photography account. The images on the portfolio page will be universal buttons that takes people to the specific category quickly and easily.

Connecting To My Audience 
As a way of interacting with my audience I linked my Instagram in my blog page. On Instagram I can interact with users as the account is public and I can comment with these users and talk more using direct messages. I can post on these account to keep users up to date with my work.

Easy To Navigate
I made the website easy to navigate I created a navigation bar that highlighted when the user hovers over the large bar which is easy to see. This hover feature also changed the colour of these buttons.

Accessibility 
My website allows the user to use the tool that magnifies the whole webpage making it easier for users who are visually impaired. This can zoom in into my images and over parts of my website.

LO2: Explain the legal and ethical issues relating to product ideas

Legal 

•    Make sure my photos are copyrighted, this is so my photos cannot be stolen by other people. This will be done 
• I need to make sure all other work is credited. If their work is not credited they could sue for part of the revenue made from the website.
• Another legal issue is data protection. If any models in the photos do not want their details on my website I cannot show their details any where in the website then they can take me to court. This means their data must be stored safely in a secure location.

Ethical

• Make sure the subjects aren't race or sex one sided. This could cause offence to the viewer.
• Make sure any libel is not involved including political events. To avoid this I have to check every photo that will be on the website. 

LO2: Produce a plan for the creation of the interactive media product from the generated ideas

Wireframes

Asset List

Risk Assessment

Testplan 

Production Plan

Colour Schemes

Folder Structure

Page Content List