Food Revival - Website

The brief called for the logo to be demonstrated in place across various settings eg. social media, packaging, website. I looked at the existing website which looks like this (figure 1- 4) : 

fig 1

fig 2

fig 3

fig 4

I thought that the logo that I had designed wouldn't suit the existing website so I redesigned the website a little in the brand colours. I kept the same layout through the most part as there is not much information on the home page, but shuffled some stuff around including the opening screen.

The existing website uses photos as well as a colour scheme of blue, white and grey. As my logo is orange and white, I swapped out the blue for orange - the grey and white contrast well against the orange. As I could not access the photo that is in use on their existing website, I used stock photos for "sharing/serving food", photos that look like they could be taken in the project's cafes that span the UK. In figure 5, I used included the banner that shows viewers the statistics on how much food used and people fed. The photo I used had the same colours as the logo and new colour scheme which I thought would suit the rest of the website, however the logo is lost against the background.

Instead, I decided to use a black and white example photo (fig 6), which would allow the logo to stand out against the background. I adjusted the placement of the logo on this, along with the colours of the banner (fig 7 and 8). On figure 9 I added in the text that is used on the opening page in orange over the black and white picture in the background, and experimented with placement of this through figure 10 - 12.

fig 5

fig 6

fig 7

fig 8

fig 9

fig 10

fig 11

fig 12

fig 13

When I prototyped the website in XD I saw that the text and banner sizes were too large and looked out of place. I readjusted the sizes of the elements and these were the final designs.