OUGD603 - Unpackaged Brief - Website Development

I did some quick sketches of wireframes that I could use for the site. I wanted a fairly simple site for the content to take centre stage.  I think the more minimal layouts are the more successful ones, like the middle layout. I think this will be the layout that I take forward into my digital development. I also thought here about what pages I could create to get all the information that I needed onto the site. I need to talk about how the store works as well as the store's overarching aim of converting people to a zero waste lifestyle. So I decided to have the following pages: How it works, our philosophy, contact us and about zero waste. Between these pages, you could find all the answers to questions that you might ask about the store. 

I started by trying out my favourite wire frame from my sketches, making a quick wireframe to fill with images and text. I wanted to bring across a tag line to show people that its not that difficult to change your lifestyle, so I went with a repeated phrase of "Zero waste. Zero guilt. Zero fuss." this shows people that they could be better off living a zero waste lifestyle. Additionally I found some royalty free stock images of fresh fruits and vegetables to use in the site, I think that it brings the image of a healthy lifestyle to the site as well as promoting zero waste or goods without packaging. I also took inspiration from the design of the labels across into the text boxes on the site to create a bit of consistency with the brand. However, something still feels lacking in this design so I decided to try a different layout.

Having an image that stretches across rather than 3 separate images looks a lot more professional in my opinion. But I feel that boxing off the text like this makes for a very static design, it doesn't inspire anything with me. 

After looking back at my research for websites, I decided to try something a bit more visual rather than text heavy, having a full bleed image of the vegetables to get the viewers attention. Also, I tried not framing the text here, but now the text feels a little like its floating, it needs more context.   

I took a break from creating the main home page and decided to look at the how it works page instead.  Again, taking inspiration from the chocolate website in my research I used the icons that I made for the guide to explain how you actually shop. I really like how the icons overlap the imagery like this, maybe this could be a theme throughout the site, to have a large image at the top with the main body of the site slightly overlapping it. Also, the use of the off white as the main colour works a lot better, giving it a more organic colour as stark white feels a bit unnatural.

At this point, I asked for feedback with Alec as I was struggling with choosing a layout as well as figuring out the design. He clarified things for me, telling me the enter page should be the full bleed image with information about what the shop actually is rather than what zero waste is. Not having the quote here and putting the title in a frame really helps to ground the text, making it less floaty. I took this design style across to the other pages, condensing the “what is zero waste” page into the philosophy page after Alec suggested that they would include the same information. This makes the information a lot clearer I think to have it all in one place. Also, the information used is a lot more relevant, explaining how the store works as well as the ethos of having ethical reasoning behind everything. I also thought that it would be good to have a blog to promote the use of seasonal vegetables and other services that the store could provide to make it more active within the community.