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.
Challenge
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.
Solution
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.
Design
Typography
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.
Features
Navigation
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.
responsivity
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.
