The Website: The Characters Prototype

The Webpage Photoshop Prototype

Here are a selection of designs I have thought of for the character page on the website. The designs below will show the basic layout designs as I wanted to focus on this before incorporating the use of color.

After sketching the designs on to paper I planned them out using Photoshop. Through the process I was thinking about what information the users would be interested in after the first two designs I thought the users may want to know how the characters evolved so I included the timeline element and places for text to describe the creative process.

I spoke to few people, of varying ages, which design they preferred. The discussion covered use of images versus text, usability, the information presented and coding difficulty of particular elements. We weighed the pros and cons then reached a decision. So here are the designs: -

Design 1

The first design I came up with is very simple. I have shown three characters as the rest would be self-explanatory, all 5 would be in the same layout. The images are placed next to each piece of text laid out in an alternating fashion as they go down the page. The images will be clickable and bring up a large version of the image with 'Lightbox'. 

Design 2

This design is a bit more advanced, the small squares on the left represent the images of each character. When one of these images is clicked the respective image for that character will appear in the larger box and the text will show the back-story for that antagonist. The main image can be clicked to show the image larger with 'Lightbox'.

Design 3

The approach for this design is different than the first 2. The 4 images along the top will be of each stage of the character, like a timeline. The text will give the back-story about the character and bit about the creating process. The 5 images along the bottom are links for each of the characters to change the timeline to each respective antagonist.

Design 4

This design has a vertical second navigation bar, each name is a link. The 4 images are a timeline of the creation stages, from sketch to a developed digital painting. The back-story and technical side are separated to allow for more information. The images, like on the other designs, will be clickable and produce a larger image with 'Lightbox'.

Design 5 

Similar to the 4th design but this design has a horizontal second navigation bar. The 4 images are a timeline of the creation stages. This layout does mean the text is clearer. Of course, 'Lightbox' will also be used.

Design 6 - The Final

I spoke to a few people about the designs and they all preferred the 4th design. Although we did discuss how certain people may not be interested in the creative process so it would be better to have that as a separate link on the page. This allows for more room to showcase the main image and the character's back-story. I definitely wanted to put in the creative process as there will be people that would find this interesting, especially gaming enthusiasts. The four images on the bottom left hand side will be small, perhaps cropped, images from the antagonist's timeline to give the user a taster. The images will be clickable and bring up a 'Lightbox' of the whole timeline with text about the process.

Thanks for reading. X