This article is the second in a series devoted to the understanding of minimalism in web design. If you’re interested in the origins of the movement, read The Roots of Minimalism in Web Design.
A minimalist web-design strategy is one that seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks.
In order to reduce a website to only its most necessary elements, designers must accept a cascade of consequences that impact both the user interface (UI) and the content of the site. Many of the visual-design characteristics commonly associated with minimalism are choices that serve the core strategy of minimalism particularly well, and so have been adopted along with minimalism in most instances.
Web design, like language, is defined by the way people use it. The word ‘minimalism’ is thrown around a lot, yet it’s hard to pinpoint exactly what features define a minimalist web design. To more clearly define what constitutes a minimalist design in practice, we analyzed the design characteristics of a sample of 112 minimalist websites. Sites were selected for the study if they were either identified by an outside web-design expert as minimalist, or were included in an online gallery for inspirational minimalist sites.
Remember that just because a design technique is popular doesn’t necessarily mean that it always supports user needs and optimizes profitability or other business objectives. In this study, we analyzed sites that are known to employ minimalist design, not sites that are known to be highly profitable. As discussed further below, our other research suggests that while some of these design ideas can support business goals, others can hurt your profitability.
Defining Characteristics of Minimalism
So what features were present in most of these designs? We included a feature among the defining characteristics of minimalism if it was present in at least three quarters (75%) of the websites that we analyzed.
Flat Patterns and Textures
Used in 96% of sampled interfaces (but often ineffectively)
Over the past few years, there has been an overwhelming shift in the design community away from skeuomorphism, towards purely digital representations of things without physical metaphors. Flat interfaces don’t make use of any of the obvious highlights, shadows, gradients, or other textures that make UI elements look glossy or three-dimensional.
Some designers believe that the flat-design trend grew out of the popularity of minimalist UI design (Müller, 2014). The two trends are extremely compatible; removing gratuitous shadows, gradients, and textures falls in line with minimalism’s primary goal of eliminating the unnecessary. In our sample, 96% of the minimalist sites were flat.
The two tend to co-occur so frequently that the phrase ‘flat design’ is often (misleadingly) used interchangeably with ‘minimalist design.’ The trends are similar, but not the same. Flat design generally refers to the textures, icons, or graphics in an interface. Minimalist design applies to the larger or overarching content, feature, and layout strategies. An interface may be flat without being minimalist.
As we’ve discussed in other articles, flat designs often fail to communicate to users which elements are selectable or clickable. We believe that a better approach is a compromise between flat and skeuomorphic—a mostly flat design, but with clickable elements that users can recognize easily.
Considering that flat design is the design idea most likely to be used incorrectly and degrade the user experience, it’s unfortunate that it’s the most prevalent of the main characteristics of minimalist web design.
Limited or Monochromatic Color Palette
Used in 95% of sampled interfaces
In most minimalist interfaces, color is used strategically to create visual interest or direct attention without adding any additional design elements or actual graphics. With less visual information vying for a user’s attention, color palettes are more noticeable and will be more influential in a site’s impact.
Minimalist color palettes are a movement away from the clashing, loud colors of the web design popular in the 2000s. Subdued color schemes are intended to avoid upstaging the content—which, in the case of images, can still be brightly colored.
Many minimalist designs are either monochromatic, or use only one bold color as an accent, and use it to—sparingly—highlight the most important elements of the site. These accented elements are usually clickable.
When assessing the use of color in the sample websites, we looked at background colors, logos, navigational elements, iconography, and typography, but did not consider content images (like photographs) as part of the color palette.
Almost half of the websites sampled (49%, 55 websites) used a monochromatic color palette. Almost as many websites used one or two accent colors in an otherwise monochromatic color palette (46%, 52 websites). Of those 55 monochromatic sites, 51 sites were grayscale-–they used exclusively white, black, and gray shades.
The popularity of this particular characteristic is an improvement in the sense that it’s moving interfaces away from the loud, clashing color schemes that used to dominate the web. However, there are some considerations to keep in mind when applying a limited color palette:
- Make sure your color scheme uses enough contrast to be legible to people with limited vision or color blindness.
- Use accent colors intentionally and consistently to highlight very important information or primary actions.
Restricted Features and Elements
Used in 87% of sampled interfaces
Designers who adopt a minimalist design strategy must consider each element in their interfaces and eliminate any that are not required to support the core functionality or message of the website. An ‘element’ in this context could be any individual unit of the interface: including but not limited to:
- menu items
- links
- images
- graphics
- lines
- captions
- textures (like gradients)
- colors
- fonts
- icons
It’s difficult to assess whether an interface includes ‘unnecessary’ elements without directly asking the sites’ designers what they left out, and without knowing the target users and tasks. To make this characteristic measurable, we focused on assessing whether or not the interface contained graphic elements that did not serve any obvious purpose. In our sample, 87% of minimalist sites avoided gratuitous graphic elements.
The more stuff there is in a user interface, the more stuff users need to process. A favorite mantra of minimalist designers is, “subtract it till it breaks,” which really means, “unless the absence of an element would be serious problem, get rid of it.”
This is where designers can get distracted by the pursuit of a clean, modern, minimalist interface—and end up cutting out useful content. Adhering to a rigidly utilitarian approach can produce streamlined designs by eliminating distracting features and content. Just make sure you aren’t making your users’ primary tasks more difficult by removing or hiding content they need.
It’s hard to understand a cluttered design or a system overflowing with extraneous features. But it’s even harder to understand a design that doesn’t provide sufficient scaffolding to explain its features or structure.
Maximized Negative Space
Used in 84% of sampled interfaces
Removing or excluding elements from a web page necessarily leaves empty space. Negative space (also called white space) is the name given to the empty areas of an interface.
Negative space has been called “practically synonymous with” and “the backbone of” minimalist interfaces. Many minimalist designers use it as a tool to try to direct users’ attention and allow them to digest content more easily.
Considering these strong assertions of negative space as the defining characteristic of minimalism, it’s surprising that only 84% of the sample sites used substantial amounts of negative space in their designs.
Appropriate use of negative space can help draw attention to important content. When deciding how to lay out negative space in your designs, be sure to consider the following questions.
- How will adding or removing negative space impact the communicated hierarchy of the page?
- How will the negative space impact what content is displayed at the top of the page? The page fold still matters: users will scroll if they have a reason to, but they pay more attention to the content at the top of the page.
- How will the negative space impact the interaction cost: will users need to work harder to get to the information that they need?
- How will the negative space need to change at varying resolutions?
Dramatic Use of Typography
Used in 75% of sampled interfaces
Like color, bold or large typography becomes another tool for communicating meaning when there are few elements on the page. Effectively exploiting interesting typography can help compensate for having fewer elements like photos and graphics, and can make a minimalist design feel more visually engaging. Variations in font size, weight, and style become crucial in helping users understand the hierarchy and relative importance of text. Of the 112 sampled minimalist sites, 75% used typography to convey meaning or create visual interest.
Using images for text may allow you to use custom fonts, but it will add to page load time, will require extra considerations for scaling at different resolutions, and can cause accessibility issues. Using web fonts is a better solution, but bear in mind that web fonts can have detrimental performance effects as well. Remember, drawing attention to bold typography is only useful when that text communicates meaningful information.
Beware of going overboard on the fancy typography: users can ignore overformatted text if it looks too much like advertising. There’s a delicate balance between meaningfully bold typography and distracting typography. A great designer will come down on the right side of this balance, but if your designers are less skilled in employing advanced typography it’s safer to err on the side of caution.
Related Trends
Some designers also include the following characteristics as minimalist. Based on our research however, these seem to be design trends that often co-occur with minimalism, but are not actually defining characteristics—they occurred in fewer than 75% of the sites that we analyzed.
Large Background Images or Videos
Used in 57% of sampled interfaces
The presence of a large background image or background videos (enabled by HTML5) is one of the most debated characteristics of minimalist Web design.
From a theoretical perspective, a large background image certainly seems contradictory to the core minimalist spirit of reducing non-critical elements. Despite this, large background images and videos are popular in minimalist designs—we found that 57% of our sample included them.
Depending on the context and the designer’s priorities, an argument can be made for the ability of large background images/videos to create an impact on users’ perception of brand. When a background image is used for a carefully considered, strategic reason, sticking to minimalist-design strategies can help restrain other page elements from competing or clashing with the background. Additionally, some designers may hope that loud background images will keep otherwise minimalist designs from being too boring or stark.
If you choose to use a background photo or video with your minimalist design, keep the following points in mind:
- Make sure the images or videos you choose serve a real purpose or help people understand the site — otherwise they’ll just distract your users from your actual content.
- Make sure the text is both legible and readable if you want people to understand it. Remember, legibility is the extent to which users can distinguish individual letters. Readability is how well they can process words, phrases, and scan the text. If you’re using a carousel or video, you need to test every possible background — every image or frame of the video, and at a variety of screen resolutions.
- Be aware of how big images and videos impact performance. Make sure you’re taking an adaptive approach so your mobile users aren’t waiting for a desktop-sized retina photograph to load over their network data connection.
- Don’t autoplay videos. Many users are frustrated by videos that play automatically without their consent, especially if those videos have audio.
- Avoid creating Harry-Potter-painting-style videos of people slowly moving around in the background. You don’t want to distract your users and creep them out.
Grid Layouts
Used in 43% of sampled interfaces
In our sample, we found that 43% of the interfaces used grid layouts to organize content. While this percentage indicates it is a popular design pattern among minimalist designers, it seems that grid layouts are certainly not ubiquitous in their designs.
When grid layouts are used in minimalist UI designs, it’s generally for two reasons:
- Grids are an effective method of organizing homogenous content on the page linearly without adding any visual elements; and
- Grids are particularly helpful when designing a responsive website — another trend that is separate from minimalism but often co-occurs with minimalism.
Circular Graphic Elements
Used in 16% of sampled interfaces
Some design experts have suggested that circular and rounded graphic elements could be a component of minimalism, but we found only 16% of our sample used them. They seem to be more of a fad.
Hidden Global Navigation
Used in 13% of sampled interfaces
Many websites currently use severely reduced global navigation elements in their desktop presentations, such as the now infamous hamburger menu. This can sometimes be the result of an incomplete mobile-first design strategy that fails to consider the needs and extra screen space available to desktop users, but it can also result from overzealous minimalism. Hiding infrequently accessed items might make sense for your goals, but make sure you aren’t hiding tools or links that are critical to the tasks you want your users to perform. Be particularly cautious if your site has large amounts of content or categories.
Commonly Occurring Characteristics of Minimalist Interfaces
Our analysis of 112 websites revealed the following defining characteristics for a minimalist website:
- Flat rather than skeuomorphic patterns and textures
- Use of a limited or monochromatic color palette
- Strictly limited features and graphic elements
- Maximized negative space
- Dramatic use of typography to communicate hierarchy or create visual interest
Some of these characteristics are used almost ubiquitously in minimalism, and some occur slightly less frequently in minimalist interfaces; however, all of the defining characteristics were present in at least 75% of the minimalist sites that we analyzed.
In our research, we also identified several related trends that were present in less than 75% of the sampled sites.
- Large background images or videos
- Grid layout
- Circular graphic elements
- Hidden global navigation
Conclusion
2000s interface design was predominantly cluttered and overwhelming. For years, we’ve been advising against this kind of “maximalism”. Feature bloat and gratuitous content is always bad for users.
In theory, minimalism should move us away from maximalism, and result in streamlined content and more efficient user task flows. In practice however, we’ve seen minimalism mutate into a superficial visual trend as designers copy popular minimalist characteristics without seriously considering if they support their own site goals.
Just as flat design is a reaction to skeuomorphism, minimalism is a reaction to maximalism. In both cases, we strongly advise a balanced approach. A minimalist design strategy can be a powerful tool, but only when it’s framed by the needs of your users — minimalism for minimalism’s sake alone doesn’t help users.
