Functional Minimalism For Web Design – Smashing Magazine

webberoDesign0 Comments


As web design focuses more and more on good user experience, designers need to create the most usable and attractive websites possible. Carefully applied minimalist principles can help designers make attractive and effective websites with fewer elements, simplifying and improving users’ interactions.

In this article, I will discuss some examples of minimalism in web design, things to consider when designing minimalist interfaces, and explain why sometimes “less is more”. If you’d like to get more creative with your own designs, you can download and test Adobe XD1, and get started right away.

Selecting An Effective Color Scheme Link

When designing a new app, it’s often difficult to decide on a color scheme that works well, as there are an infinite number of possible color combinations out there. Read more →2

A Short History Of Minimalist Design Link

Some web designers mistakenly think of minimalism as a primarily aesthetic choice. To avoid the pitfall of focusing only on aesthetics, let’s be clear about the roots of minimalist design.

While it might be a newer trend in web design, the underlying ideas have been around for much longer. When discussing minimalist design, a person might naturally think of traditional Japanese culture. Japanese culture values balance and simplicity. Japanese architecture, interior design, art, and graphic design have long employed minimalist aspects.

3
Fine Wind, Clear Morning4” by Katsushika Hokusai (1830). The emphasis is on simple colors, creating a sense of calm. (View large version5)

As a Western movement, minimalism began early in the 20th century. Influenced by the introduction of modern materials, such as glass and steel, many architects began to employ minimalist designs in their buildings. Ludwig Mies Van der Rohe, the German-American architect, was one of the pioneers of the minimalist movement. He is credited with first applying the phrase “less is more” to architectural design.

6
Barcelona Pavilion, designed by Ludwig Mies van der Rohe7, 1929 (View large version8)

The less-is-more attitude quickly moved from architecture to other arts and industries: interior and industrial design, painting, and music. As a direction of visual design, minimalism became popular in the 1960s, when artists moved toward geometric abstraction in painting and sculpture. The artistic movement found its impression in the artwork associated with the Bauhaus school. One well-known minimalist artist who influenced the movement was Donald Judd, whose artwork is full of simple shapes and color combinations.

In diverse spheres of visual arts, a key principle of minimalism was leaving only the essential part of a feature, in order to focus the recipient’s attention as well as to enhance the overall elegance. As Donald Judd said, “A shape, a volume, a color, a surface is something itself. It shouldn’t be concealed as part of a fairly different whole. The shapes and materials shouldn’t be altered by their context.”

9
In his work, Judd sought autonomy and clarity for the constructed object and the space created by it. (Image credit: Judd Foundation10) (View large version11)

What Is Minimalist Web Design? Link

Today, minimalism has reemerged as a powerful technique in modern web design. It became popular as a reaction to a trend of increasing complexity in web design. (Visual complexity has been shown to affect a user’s perception12 of a website: The more elements a design has, the more complex it will look to the user.) Applied correctly, minimalism can help us focus our designs in order to simplify user tasks. A study conducted by EyeQuant13 suggests that clean design results in lower bounce rate. Minimalism has brought additional benefits to websites, in faster-loading times and better compatibility between screen sizes.

Perhaps one of the most well-known examples of minimalism in web design is Google Search. Google has prioritized simplicity in its interfaces ever since its beta offering in the 1990s. The home page is designed entirely around its central search function. Anything unnecessary to the function, other than branding, was avoided.

14
Even though Google now offers a huge variety of products, its home page has changed very little over 15 years. (View large version15)

Its simplicity might lead one to believe that minimalism is uncomplicated, but under the surface lies far more than just “less is more.” Let’s define characteristics of minimalism.

Only the Essentials Link

A minimalist strategy in web design is one that seeks to simplify interfaces by removing elements and content that do not support user tasks. To create a truly minimalist interface, a designer has to prioritize elements rigorously, showing only those elements of the highest importance and stripping away everything that would distract users from what’s important (such as superfluous decorative elements). Every item in a design, whether an image or copy, should have a purpose; it shouldn’t be included unless it’s necessary to make the message clear. As Joshua Becker mentions in the book The More of Less, “You don’t need more space. You need less stuff.”

At the same time, be sure that you aren’t making your users’ primary tasks more difficult by removing or hiding content that they need. The idea is to make the message more clear, not more hidden. Thus, design around the content, and leave just enough visible elements (such as primary navigation) so that users don’t get confused.

Negative Space Link

It should be no surprise that the most common element in minimalism is no element at all. Negative (or white) space is the most important feature of minimalism and gives it much of its power. Negative space is just the empty space between visual elements. More empty space means more emphasis on existing elements. In Japanese culture, it’s known as the ma principle16: treating the space between objects as a means to emphasize the value of those objects.

While negative space is often called white space, it doesn’t have to be white. Some websites use full-color backgrounds to energize a blank canvas.

17
The primary design element that most people associate with minimalism is negative space. (Image credit: Bouguessa18) (View large version19)

Visual Characteristics Link

In a minimalist design, every detail has significance. What you choose to leave in is vital:

  • Flat texture
    Minimalist interfaces often use flat textures, icons and graphic elements. Flat interfaces don’t make use of any of the obvious highlights, shadows, gradients or other textures that would make UI elements look glossy or 3D.
20
A minimal visual hierarchy accentuated by touches of flat UI elements is quite common on modern websites. (Image credit: F-Secure21) (View large version22)
  • Vivid photography and illustration
    Images are the most prominent form of artwork in minimalist design; they enable an entire world of emotional connection and set an atmosphere. But a photo or illustration has to follow the principles of minimalism. A wrong image (such as a busy photograph full of distracting elements) would negate the benefits of the surrounding minimalist interface and ruin the integrity of the layout.
23
All of the characteristics of minimalism should be present in images. (Image credit: Ada Blackjack24) (View large version25)
  • Limited color scheme
    Color has great potential in web design because it’s able to set both informative and emotional connections26 between the product and the user. Color can add visual interest or direct attention without needing any additional design elements or actual graphics. Designers aiming for minimalism tend to squeeze the maximum from just a few selected colors, and it’s not that rare to use just a single color (a monochrome color scheme).
27
With less visual information, a color palette will be more noticeable and will heighten the impact on the user. (Image credit: Mixd28) (View large version29)
  • Dramatic typography
    In addition to color, typography is a core visual element. Bold typography brings immediate focus to the words and content, while helping to craft a much larger intriguing visual.
30
Use typography to convey meaning and create visual interest. (Image credit: The Outpost31) (View large version32)
  • Contrast
    Because the goal of minimalist design is ease of use and efficiency, high-contrast copy or graphic elements might be a good choice. High contrast can direct the user’s attention to important elements and make text more readable33.
34
Many minimalist designs use only one bold color as an accent, highlighting the most important elements of the page. (Image credit: We Ain’t Plastic35) (View large version36)

Best Practices Link

Because a minimalist design demands the same level of clarity and functionality as a “normal” design, but with fewer elements, it can be a challenge for designers to create.

Have a Single Focal Point Per Screen Link

The minimalist philosophy centers on the idea of designing around the content: Content is king, and the visual layout salutes the king. The aim is to make the message clearer not just by stripping away distractions, but also by keeping focus on what’s important. Because minimalism involves stripping away elements that are unnecessary, a strong focal area is important.

37
Follow the rule of “one concept per page,” and design each page or screen to focus on only one concept, centered on a single visual. (Image credit: Bureau Tonic38) (View large version39)

Set Great Expectations With the Top Area of the Screen Link

What is visible on the page without requiring any action40 is what will encourage users to explore the website. To make sure that people do that, you need to provide content that keeps them interested. Thus, place high-level content with ample negative space at the top of the screen, and then increase the content density as the scroll deepens.

41
Apple’s home page above the fold (View large version42)

Write Crisp Copy Link

In their book The Elements of Style, Strunk and White advise, “Omit needless words.” This is true for minimalism. Edit your copy to include only the bare minimum needed to adequately explain your message.

43
Get rid of all unnecessary words, and communicate as succinctly as you can. (Image credit: BFF44) (View large version45)

Simplify (But Don’t Hide) the Navigation Link

While simplicity and minimalism aren’t the same, minimalism should be simple. One thing that simplifies the user’s experience is being able to accomplish tasks easily and without distraction. The biggest contributing factor to this kind of simplicity is intuitive navigation46. But navigation in a minimalist interface presents a significant challenge: In an attempt to remove all unnecessary elements and streamline the content, designers often hide some or all of the navigation. A menu icon that expands to a full list of items remains a popular design choice, especially in minimal web design and mobile UIs. This often results in lower discoverability47 of navigation items. Take this website’s hidden navigation:

48
Quite often, simple-looking, minimal UIs carry hidden complexity. In this case, the primary navigation options are hidden by default. (Image credit: Brian Hoff49) (View large version50)

Compare that to this website’s permanently visible navigation:

51
In most cases, permanently visible navigation works better for users. (Image credit: Nerds52) (View large version53)

Remember that easy navigation is always one of the top goals of web design. If you design minimalist websites, ensure that visitors can find what they need easily.

Incorporate Functional Animation Link

Like any other element, animation should follow the principles of minimalism: subtle and only what is essential. Good UI animation has a purpose54: It is meaningful and functional. For example, you could use animation to save screen space (revealing hidden details on hover). The animation in the example below adds a level of discoverability, making an otherwise mundane task feel a bit more fun.

55
Animation makes interaction with a website more dynamic. (Image credit: UI Movement56)

Use Minimalism for Landing Pages and Portfolios Link

While the minimalist philosophy behind content-driven design applies to every website, a minimalist aesthetic might not always be appropriate. Minimalism is well suited to portfolio websites and landing pages, like in examples below, which have fairly simple goals and relatively little content.

57
The portfolio of Marie Laurent58 is a typical example of what many designers would call a minimalist website. (View large version59)
60
(Image credit: Ramotion61) (View large version62)

At the same time, applying minimalism effectively to a more complex website can be much more difficult. A lack of elements can be harmful to a content-rich website (low information density forces the user to scroll more for content). A better option might be to create a minimalist landing page that leads to more detailed pages.

Conclusion Link

Minimalist websites simplify interfaces by removing unnecessary elements and paring down content that does not support user tasks. What makes such websites inspiring is the combination of usability and great aesthetics: An easily navigable, beautiful website is a powerful vehicle of communication.

Resources And Tools Link

  • Adobe Color CC63
    These minimalist color palettes deviate from the standard black on white.
  • Color Contrast Checker64,” WebAIM
    Enter your background and foreground colors to calculate the ratio of contrast, to create the most accessible color combination.

This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process65, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app.
You can check out more inspiring projects created with Adobe XD on Behance66, and also sign up for the Adobe experience design newsletter67 to stay updated and informed.

(ms, yk, vf, al, il)

  1. 1 https://adobe.ly/2yqoh86
  2. 2 https://www.smashingmagazine.com/2017/01/underestimated-power-color-mobile-app-design/
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2017/09/13-Functional-Minimalism-For-Web-Design-large-opt.jpg
  4. 4 https://en.wikipedia.org/wiki/Fine_Wind,_Clear_Morning
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/09/13-Functional-Minimalism-For-Web-Design-large-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/09/10-Functional-Minimalism-For-Web-Design-large-opt.jpg
  7. 7 https://en.wikipedia.org/wiki/Ludwig_Mies_van_der_Rohe
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/09/10-Functional-Minimalism-For-Web-Design-large-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/09/14-Functional-Minimalism-For-Web-Design-large-opt.jpg
  10. 10 http://juddfoundation.org/artist/art/
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/09/14-Functional-Minimalism-For-Web-Design-large-opt.jpg
  12. 12 http://static.googleusercontent.com/media/research.google.com/en/us/pubs/archive/38315.pdf
  13. 13 https://www.fastcodesign.com/90144106/stop-cluttering-up-your-website-study-suggests-its-bad-for-business
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/09/16-Functional-Minimalism-For-Web-Design-large-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/09/16-Functional-Minimalism-For-Web-Design-large-opt.png
  16. 16 https://wawaza.com/pages/when-less-is-more-the-concept-of-japanese-ma.html
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/09/01-Functional-Minimalism-For-Web-Design-large-opt.png
  18. 18 https://bouguessa.com/
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/09/01-Functional-Minimalism-For-Web-Design-large-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/09/06-Functional-Minimalism-For-Web-Design-large-opt.png
  21. 21 https://www.f-secure.com/en/welcome
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/09/06-Functional-Minimalism-For-Web-Design-large-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/09/05-Functional-Minimalism-For-Web-Design-large-opt.png
  24. 24 https://adablackjackgoods.com/
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/09/05-Functional-Minimalism-For-Web-Design-large-opt.png
  26. 26 https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4383146/
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/09/02-Functional-Minimalism-For-Web-Design-large-opt.png
  28. 28 http://www.mixd.co.uk
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/09/02-Functional-Minimalism-For-Web-Design-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/09/15-Functional-Minimalism-For-Web-Design-large-opt.png
  31. 31 http://www.the-outpost.com
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/09/15-Functional-Minimalism-For-Web-Design-large-opt.png
  33. 33 https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/09/04-Functional-Minimalism-For-Web-Design-large-opt.png
  35. 35 http://weaintplastic.com/
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/09/04-Functional-Minimalism-For-Web-Design-large-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/09/12-Functional-Minimalism-For-Web-Design-large-opt.jpg
  38. 38 http://www.bureautonic.com/en/
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/09/12-Functional-Minimalism-For-Web-Design-large-opt.jpg
  40. 40 https://www.nngroup.com/articles/scrolling-and-attention/
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/09/07-Functional-Minimalism-For-Web-Design-large-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/09/07-Functional-Minimalism-For-Web-Design-large-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/09/18-Functional-Minimalism-For-Web-Design-large-opt.png
  44. 44 https://bff.co/
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/09/18-Functional-Minimalism-For-Web-Design-large-opt.png
  46. 46 https://www.smashingmagazine.com/2017/05/basic-patterns-mobile-navigation/
  47. 47 https://www.nngroup.com/articles/hamburger-menus/
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/09/08-Functional-Minimalism-For-Web-Design-large-opt.gif
  49. 49 http://brianhoffdesign.com/#/work/foundr-mag
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/09/08-Functional-Minimalism-For-Web-Design-large-opt.gif
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/09/19-Functional-Minimalism-For-Web-Design-large-opt.jpg
  52. 52 https://nerds.company/
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/09/19-Functional-Minimalism-For-Web-Design-large-opt.jpg
  54. 54 https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/09/03-Functional-Minimalism-For-Web-Design-800w-opt.gif
  56. 56 https://uimovement.com
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/09/17-Functional-Minimalism-For-Web-Design-large-opt.png
  58. 58 http://marielaurent.fr/
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/09/17-Functional-Minimalism-For-Web-Design-large-opt.png
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/09/09-Functional-Minimalism-For-Web-Design-large-opt.jpg
  61. 61 http://ramotion.com
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2017/09/09-Functional-Minimalism-For-Web-Design-large-opt.jpg
  63. 63 https://color.adobe.com/explore/
  64. 64 http://webaim.org/resources/contrastchecker/
  65. 65 https://adobe.ly/2yqoh86
  66. 66 https://www.behance.net/galleries/adobe/5/Experience-Design-%28Beta%29https://www.behance.net/galleries/adobe/5/Experience-Design-%28Beta%29
  67. 67 https://adobe.ly/2yKueO8

↑ Back to top

Tweet itShare on Facebook



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *