By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
Custom Code
Web Design
Web Development

The Coffee Corner

A sample custom build for a coffee shop. It is designed primarily as an informational brochure site but could be expanded to include an online shop.

Case Study
The Coffee Corner is a hypothetical coffee shop that has been in business for three years, they required a full site build to tell the story of their business and to attract more business.


To build an informational brochure site with an interesting timeline function to tell the story of the brand. We wanted to create a homely website that reflected the tone of a well established and well trusted brand.


The result is a trendy site with some custom animations. We emphasised the use of large images and clear descriptions. The design is minimal but contains some unique features. It was built to allow for the future addition of an online shop.



We chose ‘ Great Vibes’ as one of the title fonts as the hand written effect gives it a personal touch and local feeling. ‘Oswald’ was our second header font as it has a vintage trusted aesthetic in line with the brand's logo. It works as a strong visual to support the more artistic 'Great Vibes'. The body text is ‘Nunito Sans’ which is a clear informative font that allows users to read the information with ease.

Colour Palette

We wanted the colour palette to have warmth and sophistication. The deep yellow tone worked beautifully with the velvety forest green we choose as the strong background colour. Our design team wanted to create the impression of an old train station, a bustling atmosphere with historic interiors.



We developed a fixed navbar for easy access to the full array of pages.

Full width hero section

The landing page features a full-width image of the coffee shop, with their logo front and centre.

Illustrated backgrounds

The site features repeating golden coffee-themed illustrated backgrounds that add to the aesthetic and warm tones.

Clear information sections

We varied the section design between green and gold text backgrounds with the supporting images positioned on alternating sides.

Large CTA

Obviously the main CTA of a coffee house website, is to visit the coffee shop, but we also included a CTA for staff near the bottom of the landing page, which features a full-width image of a barrista and a text banner overlay.

Newsletter Sign-Up Functionality

We included a newsletter sign-up form just above the footer.

Story Page

The businesses branding is human and cosy, so for the about page, we focused fully on telling the story of the coffee shop and particularly the story of its two founders.

Video header and timeline animation


The design is responsive and functional across a variety of devices. The video header and timeline function are visible on mobile and tablet. The online shop is also planned to be fully functional on mobile devices to allow for users to purchase items on the go and without the need for a desktop.

Interactions & Animations

Full width video header

The "Our Story" page makes use of a video header to great effect. The falling coffee beans engage the user and forces them to re-engage with the content.

Animated Timeline

We developed a really nice animated timeline to tell the story of the coffee shop from the perspective of the two owners. As the user scrolls the timeline animates and the line changes colour to indicate where on the timeline the user is. The dates also move down the page as the page is scrolled. This design was perfectly executed and will definitely be used in other projects.

Video header & timeline animation
Previous Project
Next Project
You're all caught up.
There are no more recent projects
That's everything.
There are no more projects.

Need a


Let's talk.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.