{"id":13309,"date":"2016-03-21T19:55:23","date_gmt":"2016-03-22T03:55:23","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=13309"},"modified":"2024-09-02T22:47:01","modified_gmt":"2024-09-03T05:47:01","slug":"3-ways-to-sculpt-your-web-interface-with-minimalist-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/3-ways-to-sculpt-your-web-interface-with-minimalist-design\/","title":{"rendered":"Minimalist UI: 3 Ways to Sculpt Your Web Interface With Minimalist Design"},"content":{"rendered":"

Design isn\u2019t just about what you put in it \u2014 it\u2019s also about what you leave out. <\/span><\/p>\n

White space (or \u201cnegative space,\u201d or \u201cempty space\u201d) can be just as important to defining visual hierarchy as the actual elements involved. <\/span><\/p>\n

In this article, we\u2019ll talk about three techniques for using absence to strengthen substance: use grouping for comprehension, combine white space and contrast, and vary white space for navigation menus. <\/span><\/p>\n

1. Use Grouping for Comprehension<\/span><\/h2>\n

The footer design of<\/span> Lever<\/span><\/a> is a perfect example of using white space to create groups of content. All footer links are split up into vertical columns aligned side-by-side.<\/span><\/p>\n

\"image00\"<\/p>\n

Source:<\/span> Lever<\/span><\/a><\/p>\n

Let\u2019s look at each individual column. Notice that the vertical spacing between each link in the footer (like Navigation and Features) is identical. The contrast from the white text, however, forces us to first look at the header before perusing any links.<\/span><\/p>\n

The most interesting point here is the white space is found both vertically and horizontally. The horizontal space is much greater than vertical space found between the links.<\/span><\/p>\n

The spacing combined with contrast draws our attention to the white links while preserving our understanding that all the links are related. No \u201cFooter\u201d label or any other effects are necessary, allowing us to maintain the minimalist design.<\/span><\/p>\n

\"image02\"<\/p>\n

Source:<\/span> Lever<\/span><\/a><\/p>\n

As dictated by the<\/span> Uniform Connectedness principle<\/span><\/a>, elements that are closer together appear related.<\/span><\/p>\n

Lever is a responsive website and when you resize the layout, these footer columns all drop vertically. When viewing the smaller responsive layout, the design adapts by creating more vertical space between the footer columns. As a result, the user can still see where one list ends and another begins.<\/span><\/p>\n

2. Combine White Space and Contrast<\/span><\/h2>\n

Another similar effect is visible in the footer area of<\/span> Geckoboard’s website<\/span><\/a>. It uses 3 link columns, but instead of giving headers more contrast, only the important links (like Product, Benefits, and Pricing) stand out in clear white text.<\/span><\/p>\n

\"image03\"<\/p>\n

Source:<\/span> Geckoboard<\/span><\/a><\/p>\n

Negative space in the footer is both compositional and textual. The footer itself is quite large but the link text is spaced both horizontally and vertically. As a result, the generous space allows each link to almost feel like an individual block of text.<\/span><\/p>\n

The link text style also uses all-caps with a bit of letter-spacing added via CSS. All this extra space between columns, links, and individual letters creates a spacious feeling. Contrast defines higher-level text and extra space conveys the relationship between groups of links.<\/span><\/p>\n

Remember that white space is universal and footers are not the only areas which can benefit. Headers, sidebars, and even in-page content can use white space and high\/low contrast to build contextual relationships.<\/span><\/p>\n

To learn more about leaving strong visual impressions, Check out the first volume of the free guide\u00a0<\/span>Web UI Design for the Human Eye<\/span><\/a>\u00a0.<\/span><\/p>\n

3. Vary White Space in Navigation Menus<\/span><\/h2>\n

Almost all websites require some form of primary and secondary navigation unless they\u2019re only single-page designs. In fact, as you can see in this<\/span> excellent gallery<\/span><\/a>, many single-page layouts still use some form of stripped-down navigation \u2014 whether it\u2019s a simple top-level horizontal menu or a hamburger menu.<\/span><\/p>\n

As described in the <\/span>Web Design Trends 2016<\/span><\/a> ebook, the white space found in a navigation can vary wildly. It\u2019s all based on content density and how many links must fit into a single navigation. Many of the examples shown earlier are just simple landing pages with a few links. The less content on the landing page, the more creative control you can exercise in the navigation layout \u2014 for example, designing navigation links as either large typography blocks or cramming them into a corner.<\/span><\/p>\n

But when structuring a more complicated web UI, you\u2019ll need a stricter plan of attack. Take for example<\/span> Microsoft’s homepage<\/span><\/a>, which supports links for all of their products. As we all know, the design of Microsoft\u2019s site must account for its enormous breadth of products ranging from tablets to Xbox consoles and games. It\u2019s a very delicate balancing act.<\/span><\/p>\n

\"image01\"<\/p>\n

Source:<\/span> Microsoft<\/span><\/a><\/p>\n

Their navigation menu features a series of links with dropdown menus. Each dropdown list uses a flyout secondary menu with tertiary product links. Needless to say, Microsoft\u2019s website has a lot of content.<\/span><\/p>\n

The great part about their navigation is the exquisite use of white space. All of the links in their dropdown behave like block-level elements with plenty of padding. Visitors can hover anywhere over the link area and it will become clickable. By following<\/span> Fitts\u2019 Law<\/span><\/a> in creating large targets for navigation links, the design makes navigating the site smooth and easy.<\/span><\/p>\n

Readability tends to increase when adding more space between text, so err on the side of extra space when you place dozens of links together in the same menu. In this case, generous white space helps to offset the decision paralysis effects of too many interface objects as described by<\/span> Hick\u2019s Law<\/span><\/a>.<\/span><\/p>\n

What\u2019s even more interesting is that Microsoft includes a few other smaller menus further down the page. These are much simpler with just a few links and related icons, but they\u2019re still a way to get visitors digging deeper into the site.<\/p>\n

\"image04\"<\/p>\n

Source:<\/span> Microsoft<\/span><\/p>\n

\"image05\"<\/p>\n

Source:<\/span> Microsoft<\/span><\/p>\n

When designing a navigation menu, always think about<\/span> content density<\/span><\/a>. How much content needs to be available in this portion of the website? The answer will offer a glimpse into some of your options for navigation design, and thus how much white space must be available.<\/span><\/p>\n

Here\u2019s some tips for styling nav menus:<\/span><\/p>\n