Common problems and best practices for Minimalism Web Design

Less is the new more! This is why functional minimalism is applied.

Reading Web content is very important to a business when build a website.  Minimalism concept can help when build a web design.

Minimalism is telling us that the less elements on a screen, the more potent the remaining ones become. Minimalism is not merely emptiness or scarcity. It is to design around the content and leave enough secondary elements so that users don’t get confused. Secondary elements will be like navigation bar.

For instance:

Figure 1: More than 4 Elements
 

Figure 2: 4 Elements

As seen above, Figure 1 has more than four elements in a page while Figure 2 has only four. Which of them looks more appealing and easier to navigate? The answer is obvious, it is Figure 2. However, there are some constraints when applying minimalism. Not every website can apply it and below are the common problems and best practices when applying minimalism to your website:

Problems

• Too much content to be display
  Ebay, Lazada has diverse range of product. Hence, complex information need to be display such as product details. Minimalism can be applied by hiding such content until is needed


• Too many ads
  External ads and minimalism do not go well together. If you can’t control what comes from the ad server, the design could be upset by something such as the ad’s color. The ads will disrupt the harmony of the design


• Chilren and young adult sites
  Short attention spans, this makes minimalism come across as boring. Children and young adults would like to learn more. Thus, they are always hungry for more information about the website

Best Practices

• Landing Page Only
  A landing page that leads to a more intricate site. An example landing page web design can be seen below:

Figure 3: Landing Page

• Crisp copy
  Use Hemmingway where words are strong  and easy to be ready by people. Hemmingway is the act of writing, particularly a lengthy blog, article or essay, while consuming moderate to large quantities of content during the process.


• Top-heavy
  Place high level content with ample negative space (white space) at the top of the screen and then increase the content density as the scroll deepens.


• Keep it interesting
  Z-pattern structure on landing pages or business website was increasing, which use icons and visuals and put strategically call-to-action links or buttons following the z-pattern path
  Alternating layouts along with Z-shaped reading pattern can help. Now what is a Z-shaped pattern?, we can see below what is the Z-shaped pattern and an example of the Z- pattern being used in Facebook.

Figure 4: Z-shaped Pattern

Figure 5: Facebook implementing the Z-shaped

• One concept per page
  Each page should only focus on one concept, centered around a single visual for simplicity.


• Start Simple

  Focus what your users care most about and take a look below which is a quck list on what is important and not for a website.

  Quick List:

  Essentials – logo, navigation options, body content, contact information

  Throw-away – social media, footers, widgets

Finally, there are other elements for minimalism to consider which are:

1. Texture
2. Colors
3. Animation
4. Improved Usability

Source: Web Design Book of Trends 2015-2016, by UXPin INc

Replated Link

1. What is Landing Page, why?
2. Marketing Website Versus Facebook Page
3. What is the difference between SEO website and normal website design?
4. Web developer vs Web designer comparison