In this post we'll walk you through a few examples of impressive coffee websites that are using slick / modern designs.
What do we mean by "modern" website design?
Basically we mean website's that make use of fairly minimalist elements, lots of white space, and easily scannable spaced apart content.
There's a lot of different types of websites and website design elements that can fall under the umbrella of modern website design, but the general principal is to create a balance between providing content or information to the end user without overwhelming them.
In this post we'll review a few examples in detail that illustrate how modern website design principals can be applied to a coffee website.
Example 1: Muldoon's Coffee
Website: Muldoon's Coffee
URL: https://shop.muldoonscoffee.com/
Muldoon's is a coffee supplier located in Mississauga, Ontario and they ship their cofeee and coffee equipment to customers nation wide. They roast their own coffee, currently providing over 20 different blends.
Muldoon's coffee is a fantastic example of a coffee website that leverages a relatively modern design, keeping different elements far apar and using a healthy amount of white space.
For instance their shopping page is built using a clean white background and the images of the coffee and other products are high resolution with a transparent background:
Also worth noticing is the fact that their product pages contain critical information like pricing and and product descriptions, but the detail isn't too overwhelming.
While some detailed product information is available, the product pages are laid out in a way where you have to gradually scroll down to digest the additional info.
To illustrate, here's the top half of the Billy Bee honey they're selling:
The price, quantity, and image are all obvious and there is a brief product description but not much more than that.
As we scroll down the page we find more information about the brand, the product, and potentially the reviews (if there are any):
While Muldoon's his hardly the flashiest website or one we would typically associate with "modern" website design it does actually conform to many of the best practices employed when designing modern websites.
The information is delivered gradually, making the user experience less overwhelming.
The elements of the website (images, navigation, product descriptions etc..) are all bordered by a large amount of white space, making the website more calming and less confusing.
The website is intended to convince you to buy and to facilitate that process, so the use of modern design elements here is important so as not to interefer with customers taking actions to make add items to their cart and make purchases.
Example 2: NOC Coffee
Website: NOC Coffee Co
A great example of modern website design can be found in NOC Coffee.
NOC coffee has locations in Hong Kong and Bangkok and also appears to retail coffee products through their website.
They use not only slick imagery but also a video background of a cafe on the homepage, but also place the navigation front and center against a lot of white space.
Hovering over each link in the menu changes the background video making interaction design elements supportive of the overall brand story they are trying to tell.
This is a particularly great illustration of modern web design incorporating imagery / video to support the brand.
Aside from making things clear and simple one core feature of modern website design is to leverage the website to promote the brand strategy of the cafe or coffee retailer.
As you'll find on the shop page, the design elements extend to product imagery that is also of very high quality and presented in an almost clinical format:
It's also very instructive to note their typography, as seen on the product page for one of their filtered roasts, is very specific and unique:
The website uses Adobe's DIN14 font, which is not only distinctive but fits well with the overal "minimalist" aesthetic the rest of the website employs.
Overall the website ties to together the packaging, the photos, the navigation and finally the typography to all operate in service of the same underlying objective: to communicate the sleek and minimalist nature of the brand and the product.
Integrating website elements so they serve a common purpose is, more than anything, the most critical component when we think about modern design.
Example 3: PACT Coffee
Website: PACT Coffee
URL: https://www.pactcoffee.com/
PACT Coffee is one of the UK's largest independant coffee roasters. Their main focus in on specialty coffee and look to source their coffee through direct trade and sustainable farming practices.
Their homepage provides an amazing example of modern design in action, particularly in the way they structure their content to call out key benefits and calls to action.
The simplicity of their messaging makes it easy and fast for a potential customer to understand how to navigate the website and there's no area of the homepage or larger website that is saturated with too much text or confusing information.
The homepage actually contains a great deal of information (calls to action, value proposition, mission, trust signals and reviews etc..) but structures the content in such a way as it never confuses or overwhelms.
Similarly, their shopping page also provides a lot of information (and functionality in the form of filters and product catregories) without feeling unintuitive:
As you can see from the above screenshot the shopping page contains a lot of information:
- Product categories (bags, pods)
- Filters for roast types.
- Filters for tasting notes.
- Product photos.
- Product features (tasting notes, price, roast type etc..)
- Call to action to sign up for a subscription.
It balances the need to display all this information with the requirement to keep the content simple to read and visually compelling.
They make strategic use of different font typs and sizes, along with different colours. By making use of these elements and keeping a consistent visual language (where all buttons, links, and content that communicate the same thing are designed the same way) they are able to include a lot of valuable information while still keeping with a simple overall look and feel.
These are just a few examples of websites employing more of a modern design, but the trend towards many of these principals and best practices is expected to continue.
Specifically, the notion that the website's design should mirror the branding of the coffee shop. The use of white space (or any design strategy) to make interacting with the website as obvious and simple as possible.
The use of imagery and videos in a way where they are integrated into the functionality of the messaging of the business.
Inspiring coffee websites that make use of these modern design principals will only be more easily found as time goes on.
