Project 2 - Production Development

I began by creating a thumbnail layout for the main interface of the online gallery. To do this I had to re size and crop the photos by using a clipping mask on illustrator, and positioned them into a grid layout.

I then print screened the Debenhams website and removed all the content except the main layout, so that I could superimpose my online gallery.

I then added a text box which introduced the gallery, and made sure that the Henry Holland for Debenhams logo was featured so that the user knew which brand was being showcased. I then wrote a small description of the collection that would inspire users to look through the photos. I experimented with the background colour of the feature but decided to keep it black as this made the photographs stand out the most.

I wasn't happy with how the feature looked, and it took me ages to figure out why. But by adding a opacity layer over the text box, it instantly started to look a lot better.

I then created my lightbox image view. By taking the interface that I had already created, I added an slightly opaque shape over the top to blend out the background, but not completely, as I still wanted the user to be able to see behind. I then added the photo in the centre, and added a border that made the image the main focus.

I then made it look like an editorial, and at the side included the description of the garments worn in the photograph and the prices. These would be made links so that the user could find out further information or potentially purchase. I also made the lightbox interactive by adding buttons to go back and forth through the gallery, with smaller buttons at the bottom that shows at what point you are through the photo collection.