Website Overview

My wireframes were quite simple I took some inspiration from other product pages because they worked quite well and were easy to use. I decided that I wanted to make image of the page the larges item on the page due to it being the main focus. I kept my header and footer the same as they were on my homepage because nothing had to be changed.

Everything on the page had to make the buyer want to continue with their purchase. So I had to make sure that it did the product justice, everything was set out quite nicely on all of my wireframes I think the main problem was where everything was going to be placed on the page. I didn't want the page to be too confusing because this could turn away buyers. I had in mind that I would stick with the same colour theme I had with the homepage, because the red I had chosen is quite an eye catching colour I decided to only use it when I needed  the customer to look at a certain thing on the page.

I wanted to allow the buyer to chose the amount of pens they wanted and the colour of the actual pen. I think incorporating these two options made the page look less clustered with lots of text.  When the buyer clicks on one of the colour options I added a shadow effect to the button, this is so it is clear to the buyer what colour pen they are purchasing, when someone wants to buy something from a website they want to make sure that they are getting what they want so this helps them out.

My 'Add to Bag' button had to be quite eye catching so that the customer could not miss it, so I decided to make it the second largest thing on the page and I also coloured it red for the reason I mentioned before. The five stars were also a red colour to add to this effect.

My phone design had to be slightly different to my computer design, this is because some of the featured that I had added would have not worked on a phone or would be incredibly hard to use. However like the computer product page the header and the footer were kept the same.

The four pictures of the product were instead changed into a swipe to see the next picture system. This allowed my to still make the picture the largest thing on the webpage while still not limiting a phone user to one photo. The text had to be altered as well because it would have been hard to see on a phone screen. The two choice options for the buyer had to be changed to make it more touch friendly, I did this by making the options two drop down boxes that when clicked on would extend down and allow the buyer to pick from the options provided. I thought that both designs worked quite well and were very easy to use, I managed to not limit the phone user a lot when it came to the access of certain things. I also managed to not make either product page design clustered and confusing for the buyer and that was my main goal from the start.