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 doing the 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.
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:
- 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
- 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.
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.
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:
- Improved Usability
Source: Web Design Book of Trends 2015-2016, by UXPin INc
Thumbnail: Designed by Freepik
- What is Landing Page, why?
- Marketing Website Versus Facebook Page
- What is the difference between SEO website and normal website design?
- Web developer vs Web designer comparison