OUGD603: Brief 9 - Coffee Culture II // Website Further Research

I've looked at the website for Caffe Cimo – a french coffee brewing company.

Offering a modern and responsive layout, which adapts the content to fit the size of the screen, Caffe Cimo also use full width images, which add a great deal of personality to the page. Warm images, with the main focus being the coffee and the model – who is enjoying the coffee, as you can see from the smile on her far. This adds an inviting tone to the page. 

A nice little detail added (you'll have to visit the website to see it, link above) is steam rising out of the coffee mug in the centre of the page. Adding some dynamic to an otherwise static page. The steam also adds to the arm inviting aspect of the page.

A set of line iconography has been used to illustration the different subsections of the page. Which runs consistently throughout the website.

As part of the responsive nature of the website, the navigation collapses when the screen gets below a certain width – for mobile devices, to save space.

How the navigation looks on a large screen, and at full width. 

The navigation on a smaller screen, collapsed into a hamburger menu, which then expands to show the full navigation when needed. 

I've also looked at the website for The Monocle Café in London. 

The website works as a one page scroller system, having all of the content on one page – also using parallax imagery to add a dynamic to the page, a flowing motion and a sense of layers and depth. 

You can see the parallax in action in the screenshot above, the content, the menu, scrolls up and overs the image, whilst it remains static on the background. 

The content for the menu is very image dominated, allowing the photography to speak for the products – the price coming as a conditional after thought. 

Something I haven't seen before is a dynamic horizontal scrolling mechanic. When the page reaches this stage vertically, it then engages a horizontal scroll – displaying images of the cafe. 

The images above display the horizontal scrolling. This is an interesting dynamic which isn't often used. It adds an extra dimension to the website. As the website consists of one vertical page, the horizontal dynamic breaks up the page.