Day 67 - ShopFresh


So happy to be back creating mockups. This has been a project I've been working on for awhile starting from user research and now I'm finally close to being done.

Today I decided to create the website mockup for ShopFresh's homepage and product page. I followed my colour palette and UI kit to keep my screens consistent. I also kept my colours very fresh and bright so that it works well with the theme of my website. For the homepage, I had the most trouble with the banner. I had to create five different variations until I got to this one. First, I tried it without the highlight background for the text. However, the text got lost with the busy background. Then, I changed the background colour using Photoshop. I tried out white, then orange. The colours didn't look right and I realized it looked best with the busy background. I asked myself: How can the text stand out on such a busy background? I decided to try placing a semi-transparent box behind the text. It worked the best so I stuck with it.

As for the product page, I got my inspiration from Amazon. I wanted to have the same amount of detail that Amazon has on their product pages - enough but not too much or too little.

I'm very happy with this outcome. It's clean, simple and fresh, which was what I was going for. I'm going to try the mobile screen tomorrow and how it goes.