Product Page Designs

We had to design product pages for our website (both desktop and mobile). I wanted to carry on my 'style' of a funny and simplistic page with the same colour theme. I started with typing out the descriptions which I'd add into a Google doc. This helped me organise how how space I'd need for certain things. I started with the desktop version last week, including using some sketches. Below, you can see what it looks like so far.

I still have small bits of tweaking to do, but it's mostly finished. I've also added some hover states to the desktop version, over the buttons like 'go to gallery' and 'buy', etc.

I added a 'go to gallery' option, rather than extra images, because I didn't want to crowd the page. If I have time I'd like to design this gallery page, too, but I'll work with what I need so far.




I also started editing the mobile version this week, but I've struggled a little with the size of the contents and certain things being big enough for touch. I feel like it looks too 'blocky' so far, so I will make the layout less stressed. i also have changed the footer as I realised the small print was unreadable and almost impossible to touch. I will continue tweaking as the day goes on and update.

Update:

I've changed the footer, again, but I prefer this layout. I've also tweaked the font size and give more room for the 'Buy' button. I'm happier with this outcome, because it flows a lot better and looks a lot nicer with my theme.