10 examples of white space design websites you’ll want to copy
White space design is a great way to grab a user’s attention, drive home a message and give an elegant user experience. Here are 10 examples you’ll want to copy
When it comes to creating a minimalist website, it goes without saying that less is more. That is the mantra of the minimalist philosophy that has taken the world by storm. Whether it’s being conscious and intentional about the purchases you make or simply limiting your color palette, minimalism has many different aspects to it.
When it comes to web design, minimal usually means the smart and elegant use of white space. White space design is that — it’s design which makes use of negative space, or empty space. In this post, Justinmind will go over what white space is and provide you with 10 inspiring examples that will make you want to get designing.
What is white space?
White space design is characterized by what is not there. When it comes to websites which make generous use of white space design, often what is most noticeable is the simplicity of the design.
Don’t fall into the trap of thinking that white space design means that everything is white. Far from it, white space design can make use of any color, albeit sparingly. To put it simply, white space design is design that is stripped back and an exercise in economy of expression.
Distraction free and without noise, white space design allows designers to create something which is approachable, elegant and, on the surface of it, effortless.
Despite the seeming simplicity of white space design, creating something that looks simple is rarely a simple endeavor. White space is deceptive and at times the most complicated to get correct.
Striking a balance between intentional simplicity and design that looks like something is missing is a task that takes time, practice and skill.
When to use white space in your designs
Not every design will call for white space. But using white space in your design can have an impact on the:
- Typography
- Iconography
- Imagery
- Composition
- Text columns
- Margins
Mark Boulton distinguishes between two different types of white space: micro and macro.
Macro white space in pink, micro white space in green
Micro white space is the space found between smaller elements such as:
- Links
- Lists
- Icons
- Buttons
- Lines of text
Think about a newspaper, the space found between the lines of copy can be described as the micro white space.
Macro is the opposite and deals with the white space between larger elements (which themselves can comprise micro white space).
Why use white space in your design?
When deployed properly, white space can give your design a sense of balance. The white space found between your lines of copy can improve legibility and offer your user a better experience consuming the content found on your website.
There are other benefits to using white space:
- White space can increase comprehension
- Highlight and isolate important UI elements, such as CTAs
- Can create a tidier, more friendly design
To understand the full potential and power of white space, take a look at Mads Soegaard’s comprehensive article in Interaction Design Foundation.
10 inspiring white space design examples
Bear Creek Distillery
Bold imagery combined with bold copy make Bear Creek Distillery stand out from other producers of spirits. The sparsity in the design allows Bear Creek to highlight what they do best: distil. By using as few distractions as possible, that idea is powerfully conveyed to visitors of the website.
Squarespace
Squarespace uses very few UI elements on their homepage but in spite of these limitations, the user has everything they need to understand what Squarespace is all about.
The search bar function allows the user to find their own custom domain. The cool copy and repetition of the word make enforces Squarespace as a brand for creators and doers.
The black call to action button stands out against the use of muted colors and there’s no credit card required to get your trial started — easy!
Progressive Punctuation
Who knew there was a punctuation mark to convey irony? Or a SarcMark? Progressive Punctuation is an online showcase of unused punctuation marks that could drastically improve our online communication.
Their smart use of negative space is necessary in order to convey the message of each of the non-standard punctuation marks.
Apple
Can anyone really write about white space design without mentioning Apple? While they’re not pioneers of white space, Apple sure do know how to confidently and properly use it in order to garner attention, sales and impact.
Apple’s products are an art in and of themselves and by using white space, the visitor only has one focus at any given time. No distractions here.
Tinker
Tinker lets you build your own custom watch, choosing from a range of colors, styles and finishes.
To highlight the custom nature of their offering, Tinker uses a large and clear image of separate watch parts. Just like Apple, Tinker doesn’t want your focus anywhere else — no call to actions, sparse but informative copy and the price. It’s all you need. The watch speaks for itself.
The Pisacco Chronicle
The Pisacco Chronicle is an online magazine that focuses on food, cinema and art. A few of our favorite things.
Interestingly, Pisacco uses a polaroid-style slide show of the different feature pieces with a colorful photography.
The unorthodox position of the title and navigation links is made all the more curious because there are so few competing elements on the page. Had there been more text then this convention may not have worked as well.
Without any needless distractions and a limited color palette, Pisacco Chronicle manages to grab the user’s attention for the right reasons.
Seedlip
Another distillery, this time for non-alcoholic drinks. A rather new concept can be difficult for people to get their head around; using white space design, Seedlip expresses their USP clearly and concisely with one simple line of copy.
More is less with this design and the beautiful photography is given center stage as the user scrolls down the page to discover more about these non-alcoholic spirits.
To reinforce the idea of quality and sophistication, all the user sees when they first enter this page is the baroque-style logo, copy which highlights the luxury nature of the Seedlip and intentional white space. Cheers!
Pocket Penguins
Penguin are known for their book covers. Bold colors with bold text. Pocket Penguins continues this theme perfectly, and in a similar vein to Seedlip, the users’ focus is immediately on the books which the company is known for.
sweetgreen
Using white space intelligently with bright photography is a great way to grab a user’s attention, especially if you wish to highlight your product.
If you have ever binged Netflix’s Chef’s Table, you’ll be familiar with bread and mozzarella fanatic, Nancy Silverton. Sweetgreen has collaborated with the chef to bring you her beautiful, tasty salads.
Food needs to be enticing and beautifully presented for people to want to eat it — even more so when it comes to buying online. Sweetgreen achieves that with their photographs, direct copy and easy to navigate design.
Jomor Design
Using white space well can really help you drive a message home by only giving the user one thing to focus on.
When a user goes to Amazon, they’re hit with multiple images at once and lots of distractions, which is what you might expect from an online retailer that needs to make a ton of money.
With Jomor Design, however, it’s all about driving one, solid message home at every turn. As a design agency, Jomor manages to express their passion and commitment through their brilliant use of unconventional copy: I wanna help you kick ass.
This statement wouldn’t be as eye watching if it were competing with images and other copy. Because there are so few UI elements on the page, your eyes go right to the message and it sticks with you.
Conclusion
When deployed intelligently and intentionally, white space can elevate your designs to a place of elegance and sophistication. Whether you want to highlight a message, convey simplicity or remove unnecessary distractions from your design then using white space can help you achieve those aims.
