Fast Company
How To Do Nothing In Web Design
By: Marcin Treder, Ryan Thomas Riddle and Jerry Cao
This essay is excerpted from the ebook Interaction Design Best Practices: Mastering the Tangibles by Jerry Cao, Kamil Zieba, and Matt Ellis of UXPin, a UX design platform.
It’s a rookie mistake to confuse minimalism with merely "getting rid of things." Minimalism was an artistic style decades before the Internet even existed, and its core principles still holds true on the web—always design around the content. If you think minimalism is just about white space or carving out grid layouts, then that’s about as much "minimalism" as cutting paper dolls is to surgery.
In this article, we’ll explain some of the finer points to incorporating a minimalist philosophy (not just the aesthetic) into your web UI design. First, we’ll look at which types of companies benefit most from minimalism, then we’ll move on to specific guidelines, and conclude with some useful online resources.
WHO SHOULD USE MINIMALISM
Because minimalism requires going without certain features, it’s most common for agency sites and creative portfolios – it can be trickier to execute for larger businesses due to the inventory of content and the unfortunate reality of departments arguing for different priorities.
For content-heavy sites, minimalism is surprisingly effective. Because minimalism is all about trimming secondary features, the content stands out even more within a disciplined interface.
Ad-heavy sites, however, have the worst trouble because the minimal style may differ drastically from what is coming from an ad server. The ads—while often separate from the main content—can detract from the design and actually prevent users from accessing the content.
The same concept applies to sites with a lot of features. While there are a few out there that succeed with minimalism, such as the popular Two Dots (above), games are a prime example of sites that include too many features for a minimal style design to be effective.
Generally, e-commerce sites tends to be another area where some concepts of minimalist design may be suitable, but an overall minimalist aesthetic is not realistic due to the enormous amount of information needed to describe and actually sell items.
Of course, this depends greatly on the type of ecommerce site. Some clothing retailers (like Over Clothing) can pull off the minimalist look by revealing more information on hover. Remember, however, that this is only possible because it suits the users (street fashion connoisseurs probably appreciate a more avant-garde design) and the content isn’t overly complex (you don’t need multiple tabs for technical specs).
The same design would not work so well for a general ecommerce site like Ebay or Amazon, who require complex information architectures and whose wider audience probably appreciates a more traditional UI design.
Children’s sites should also avoid minimal frameworks in most instances. The simple design is often seen as "boring" for a set of users that wants to be stimulated and usually have shorter attention spans—the nuances of minimalism are lost on the users, who almost thrive in distraction.
Notice, for example, Bob the Builder site is an assault on all the senses: bright colors, auto-playing audio, and an interface that leaves no pixel unused. The effect is overwhelming for adult sensibilities, but certainly makes sense for its younger and more easily-distracted target audience.
However, while minimalism may not work for the overall design for the design of every site, you can still consider a minimalist home page leading to a more involved site. Minimalist design philosophies especially apply to the homepage (save for children’s sites) because you want as clear a visual hierarchy as possible so users can treat the page as more of a "content portal".
Take a look at the site for cybersecurity consultancy Minerva. They take this approach to an extreme since the homepage is stripped down to just a simple value statement, which forces users to click on the "bouncing" arrow on the left side which leads them to a more detailed "About Us" page.
This unraveling effect is especially effective if the primary goal of your site is storytelling, but otherwise you’ll probably want to add at least a few images and calls to actions.
CONTENT FIRST: THE BATTLE CRY OF MINIMALISM
Since the heart of minimalism is emphasizing content, a content-first approach is always useful. As we described in Web Design for the Human Eye, the content-first approach designs around the story. Instead of creating wireframes and prototypes with Lorem Ipsum text, you design with rough content from the beginning and iterate both along a parallel path.
Figure out the goals of each page, then start mapping out the messaging for each site section. Examine the relationships between pages, and once it all makes sense, start actually creating your content (text and images). When you have workable drafts, you can then start wireframing and prototyping around the rough content. The approach gives you a solid foundation of content to sculpt your design around.
Like Squarespace shows, exercise Hemingway-like discipline in your copy, then pair it with captivating images. Of course the amount of copy will determine whether or not the site is minimalist, but starting with content is never a bad idea.
Be realistic with how users browse sites by placing high-level content at the top of the scroll (sparse copy and images), then increasing the density of text and images as the scroll deepens. To prevent visual burnout, try alternating the placement of text and images for a Z-shaped reading pattern.
While this doesn’t fit the popular minimalist aesthetic, remember that minimalism is more of a design philosophy than a single look. It’s just been expressed in such similar ways that we’ve come to expect minimalist sites to be pure white backgrounds with either text-only interfaces or a strict grid layout. As Squarespace elegantly demonstrates, it’s more important that you follow the spirit of minimalism rather than just copying its look.
BEST PRACTICES CHECKLIST
Not all topics in minimalism are abstract and subjective.
We’ve collected several of the most useful "hard and fast" rules for minimalism, and listed them below:
Limit major sections – Group your site content into only a handful of main categories—five or fewer if possible. A simplified grand structure is the cornerstone to simplicity throughout.
Know your necessary elements – Identify the barebone essentials for your site, such as the logo, navigation, body content, contact, etc. Ask yourself if the website can function without it. One tip is to prioritize all content in a master list, and then use only the top five.
… And get rid of everything else – Remove everything that’s not a necessary element from above, which ensures that the optimum focus is placed on only what matters.
Pages have one core concept each – Only one content concept occupies each page to reduce the distraction on that concept. This also applies to sections of a scroll.
Continue reduction during each step of iteration – Adopt a subtractive sculpture mindset and try to remove as much as possible at each step, leaving only what is necessary to move forward.
Start with a basic design – Whether it’s a lo-fi wireframe or a black-and-white design, seeing your design at its bare minimum will help separate the essentials from the extra.
Minimize choices – As dictated by Hick’s Law (described in Interaction Design Best Practices), limit choices for users so that on-screen calls to action only leads to the next logical step. When it comes to basic navigation menus, carefully plan out your information hierarchy so you don’t present 15 top-level navigation items all at once.
Know the limitations of minimalism – Certain elements should be left out of minimalist frameworks: social media icons, links, wordy footers, sitemaps, and list widgets.
If you’d like to learn more about minimalist web design, check out our free e-book Web UI Design for the Human Eye. The book includes 80+ pages of advice explaining how to design for our strongest sense with 30 analyzed examples from Google, Microsoft, Squarespace, and more.
