20 websites that use minimalism beautifully

[Rss Bot 1]

'Less is more' is a principle that today's online designers are increasingly coming to appreciate. Minimalism benefits websites in the shape of faster loading times and better compatibility between screen sizes. What's more, a simple UI design is attuned to mobile browsing, without harming the desktop experience.

The minimalist philosophy centres on the idea that you must design around the content. In web terms, the designer starts with rough content, then builds just enough interface for users to identify their goal and navigate to it easily.

• Web design inspiration: 28 outstanding examples of CSS

The minimalist aesthetic is the visual representation of that philosophy. Minimalism uses a lot of white – or at least uniformly coloured – space. But don't confuse uncluttered with boring. You must choose your layouts with care, otherwise your restricted palette of design elements will come across as dull instead of elegant.

Below, we've collected our favourite minimalist sites to inspire you to do more by doing less.

01. Why we Explore

Visitors drag across the page to discover more information

Created by Swiss interaction designer Nicolas Lanthemann, Why We Explore is a blog about space that follows an interesting format. Although the topic is vast, the information is given plenty of space to breathe; each new theme being announced as the viewer scrolls horizontally across the page.

02. Tinker

The UI for this watch retail site is stripped back to basics

Tinker is a watch brand with a simple concept: customers can choose the face size, strap colour and metal, in any combination. No unnecessary features or detailing. The UI for the company's site makes the concept clear; users can easily select their ideal combination from the limited options available. No fuss.

03. iPad mini 4

Apple is no stranger to minimalist design

Apple is no stranger to minimalism. The webpage for the iPad mini 4 uses lots of literal whitespace to draw attention to the product's sleek design. The clear top bar, also featuring an abundance of space, helps the user to navigate.

04. ETQ

The products have space to shine on the ETQ site

The lack of borders around the product pictures on footwear brand ETQ's site frees up a lot of space for a more casual visual flow. The corners are occupied with the essential interface functions, leaving the majority of the screen for the product.

05. Callens

Minimalism suits luxury brands

Minimalism creates an air of elegance and sophistication that lends itself to certain industries. This makes it the preferred choice for fashion websites and those selling luxury items, such as Italian brand Callens.

06. Derwent & Tamar Chambers

Here minimalism creates a feeling of authority

The elegance of minimalism also suggests professionalism, as barrister collective Derwent & Tamar Chambers demonstrates on its website.

07. The Outpost

Typography is the standout feature on this homepage

Beirut-based magazine The Outpost's site features dramatic typography: an integral part of minimalism. With a limited set of elements to work with, the designer must take full advantage of each one – and since words are almost always one of those elements, attention-grabbing typography is a useful tool.

08. Leen Heyne

The jeweller directs the viewer's eye on its website

Beside its jewellery, Leen Heyne's monochrome logo and company name are the only significant visual elements on its homepage. The surrounding expanse of whitespace makes it a safe bet the user's eyes will go back and forth between the two.

09. Velvet Hammer

This site is minimalist, but still full of character

Music management firm Velvet Hammer's site demonstrates the value of composition in minimalism. The two dominating visuals are poised symmetrically, all four corners are occupied, the entire scene is framed by a thick black border, and thin lines bisect the vertical and horizontal halves. At the centre of the screen – though not the composition – is the brand name.

10. We Ain't Plastic

Contrast creates interest here

Contrast is another useful visual tactic for keeping minimalist designs interesting. German UX engineer Roland Lösslein's website We Ain't Plastic sets up a stark contrast in size between the central image and the text and icons above.

11. Carlo Barberis

There's little more than a hero image on each page of this site

Italian jewellers Carlo Barberis take advantage of the high-end attributes of minimalism, with little more than a hero image on each screen.

12. Mikiya Kobayashi

Mikiya Kobayashi's designs are intricate, but his site is not

Few nations know minimalism better than the Japanese. Product designer Mikiya Kobayashi's site features only his brand name and a call to action asking the user to scroll, placing the focus on the intricacies of the products.

13. Nua Bikes

Nua Bikes balances the elements on its homepage

Nua Bikes' site is deceptively minimalist, because there are actually a lot of elements on the screen. However, by condensing the text and maximising the whitespace, the firm is able to draw attention to its product, the bike.

14. Elite

Navigation is pared back to the absolute basics here

Modelling agency Elite takes minimalist navigation to its extreme, with the focus on only two main pathways, and all the others tucked away in a hamburger menu.

15. Château d'Yquem

Content is compartmentalised on this winemaker's site

Winemaker Château d'Yquem combines minimalism and compartmentalisation in its site. Each compartment follows the minimalist philosophy with only a few elements revolving around a single concept. When combined, the compartments' size and location on the screen create a visual hierarchy.

16. Sendamessage.to

This site has one clear purpose

Amusing, if possibly inane, Sendamessage.to lets people customise messages to friends with a hand gesture. The barren black background adds power to the main image and the bold white letters of the text.

17. Maaemo

Atmospheric video sets the scene

The website for double-Michelin-starred Norwegian restaurant Maaemo uses minimalism to create a sense of class. The visual treatment is perfect for storytelling, as the site demonstrates with HD photos of dishes being created.

18. Ava

Converse with AI Ava

This black-and-white colour scheme and conformity of typography of this promotional site for sci-fi thriller Ex Machina keep the focus on the text – an interactive conversation with the film's star, the AI robot Ava.

19. Symbolset

A colour-changing background livens up this minimalist site

Icon font vendor Symbolset attracts attention to the interactive area in the middle of its site by minimising the competing elements and adding a brightly coloured, ever-changing background.

20. NTN

All eyes are drawn to the clock face on this watch retailer's minimal website

Watch brand NTN uses the abundant whitespace and reduced number of elements that the minimalist style is known for. All the focus is on the central clock, which makes it clear what the brand is known for.

Like this? Read these!

• 8 minimal UI designs and why they work
• Web design inspiration: 28 outstanding examples of CSS
• Choose a website builder: top tools

View the full article