Slab - Website Development

We both had the idea of the website being fairly simple and to the point, with the looks of something that was high fashion, or luxurious at least. The best way I thought would be to have a very large image to get the tone across straight away. I choose the spoon image, however It didn't really communicate anything.

The website should:

• Advertise the website
• Tell you where the store is
• Link to social media 
• Show you what the store sells

It shouldn't:

• Sell products through the website

I looked on Awwwards for some inspiration, I really liked the way the product pages on this where laid out, they celebrated the product by giving it the a large piece of screen real estate. It allowed the wine bottle to be the centre of attention, but also it drove you to the information on the side. I liked how this flowed.

However, It didn't really work the same for Slab, I think the wine website worked best because of the two heavily contrasting images. 

I came across this inspiration, it's very elegant, it captures your curiosity through the use of negative space between the images. The imagery is powerful and that helps with the fact, as well as being colourful. It doesn't matter that the rest of the website is grey and black. The colour of the Images really balances it well.

Full - Or - Bar

I preferred the bigger image, but I didn't think having the menu on the image would be best for navigation.

I wanted to create my own take on this, but something that would be more applicable. I wanted to show all the different elements of Slab, but the impact of loading the webpage, you should immediately get the concept or at least what the shop does.

I thought having the products on a slideshow might be a good idea, however It doesn't sell what Slab is if this was the home page. It needs an explanation since it's not just a Ice lolly website. Having chocolate as the main elements is a lot easier to explain over Ice lollies.

I thought this might work better as a page for the mobile side, I wasn't too sure about how the hamburger would work at this point. However I had ideas for it having items on it such as location finder.

Then It would turn into an X when you've open it up. I just couldn't figure a way to make this look the part.

To add to the ice lollies, I thought it'd be a nice idea to have the ice lolly pop-up when you hover it to show that you have selected it, just like the mac tool bar. Just to add a sense of interactivity to it.

-------

I thought it'd be nice to have an element like the Laduree website, having the ice lollies or chocolate bars following the webpage down as you scrolled to show a selection without really showing what they are exactly but you know there's more than one. This could be a page possibly.

I decided to go with the full page screen and make it a parallax website, this made most sense since then at-least It would allow me to show of the imagery taken while still getting enough information across to show what the concept it. 

----

Mocked up.

The website uses large impact imagery to show off and celebrate the hand crafted products of Slab. Although the website doesn’t function as a place to purchase the products, it does allow the user to get the full Slab experience, on their laptop or on their phone due to the responsive webpage.