Design Practice 2: Website Development

This is a gif to show how the enter screen would flash.

 Example of how the rollover text colour would work

Once on the page it stays highlighted to remind the user what page they are on. There is the opportunity for the user to tag the photo that they took with there name and location so they become the official photographer on it. There is a little box that appears to aid them and show how the tagging works using the pink icon. The images are shown in black and white to keep the website neutral and less busy as well as keeping with the scheme of the branding identity.

When scrolled down the navigation bar stays fixed and is at opacity for easy flicking between pages. When the image is hovered over it shows the colour in it's full colour. The background is also faded out using an opacity so the focus is on the Lightbox.

 When clicked upon it brings up a Lightbox which appears as if a person is holding to photos. Using the arrows on the hands the user flicks between photos and the hands move passing the photo to the left and taking one from right and vice versus. 

When they click on the shared button the opacity background stays and brings them to this screen. It gives 5 options for different networking sites for them to share there image. This is an example of the Facebook option where the photo is pictured on the left that they are choosing to share. The status box gives a pre written message stating the exhibition and the location for online promotion.

When hovered over the dark room image as suggested in the paragraph of text the image turns pink. When clicked on it changes the page to allow the user to select and tick the images that wish to have prints off.

When scrolled down it instructs them in how to finish the process of ordering prints.

When they click on the print button this box appears with the same opacity background as before. It shows the photos they have selected in full colour with 4 different options in the way they view them. Then they have the option of the size and amount of copies which can be altered on every photo (the thicker border indicating which photo they are on). It shows a breakdown of the cost also before going on to complete there details.