UI Tips for Beautiful Minimalist Websites
Minimalism is one of the design trends which never fades away but evolves unlike many others that are long-forgotten.
Minimalist websites are ones that lack of many effects, have lean aesthetics, are usable and visually pleasing without many bells and whistles.
Some great examples of websites are Apple, Dropbox and Digital Ocean. What they have in common is the clever use of white space, very simple navigation, clean typography and focus on the content.
When employed correctly, the goal of minimalist web design should be to present content and features in a simple, direct way by providing as little distraction from the core content as possible. This strategy often involves removing content or features that don’t support the primary goals of the interface or its users.
Kate Meyer – The Roots of Minimalism in Web Design
Creating a minimalist website does not mean to have a dull website with some information and lots of white space. Minimalist means to make everything on a web page work for the content without distractions. Minimalist can also be bold, focusing on the content without any tricks and serving the user in the best possible way.
Opt for vibrant brave colour
The trend for big hero images or background video is still strong today although there is a shift in favour of bold colours used in the header area.
A minimalist website can use a vibrant and a bit crazy colour to create an engaging, attention demanding area which is still simple. The colour can be anything suitable for your palette coming from flat and material design colour range.
The above mentioned Digital Ocean website used to have a white minimalist header with some text on the left and an animated light image on the right. A couple of months ago, the header area changed by substituting the white background with bold trendy blue gradient which works directly for the content. The animated explanatory image is still there on the right, the info on the left is pretty much the same. Just by changing the background colour the user is directed to focus on content immediately.
Digital Ocean before
Digital Ocean now
Tips for Using Crazy Color
- Opt for bold hues with deep saturation
- Mix and match bright colour with white or black typography
- Use a single colour as the primary palette, including the background
- Plan “too much colour” with care and mix up a rainbow style colour palette
- Let colour be the only “trick” in the design and keep everything else streamlined
Use a great typeface
Usually, minimal typography is connected with Helvetica typeface or anything that looks like it and it is highly readable sans serif. It doesn’t not have to be the only definition.
Minimal typography can be any solution which focuses on delivering the message in a cleaver, dominant way. You can choose to use vintage, grunge or stacking type to spice up minimalist design.
The typeface has to be chosen very carefully and used right.
Younom uses Euclid Flex typeface from Swiss Typefaces Foundry. The type is beautiful, readable and perfectly suitable for the German brand. It suggests affordable luxury and responds appropriately to the innovative nature of the Younom cosmetics.
Laurent Sutterlity brilliantly combines three typefaces from Google Fonts – Playfair Display, Montserrat and Roboto. While Playfair Display is used to put an accent to his name, the freelance projects finished and years of experience, Montserrat is used for titles. The body copy is laid out with Roboto. Combination of three typefaces is usually tricky but in this example, a great harmony is achieved in a beautiful minimalist and simple website.
Tips for Using Typeface Trends
- Use trendy typography for a specific purpose such as a logo or headline
- Complicated typefaces, such as vintage grunge, often need to be displayed at larger sizes
- Don’t grab a new typeface just because it’s cool; it should match the mood of the project
- Not all trending typefaces will work with minimal, styles that lack long tails, swashes and flourishes are the best options
Organize content with cards
Styling content with cards is one of the biggest trends of the past year. Partially because of the Google Material design, cards are used to organize content in desktop sites as well as in Android-based and Apple apps.
Cards are particularly useful when a beautiful flow and organization is needed. They are found as a working solution for photos, text, videos, music, payment, forms, pricing tables, social sharing, coupons and many more.
Styling and organizing content with cards is not new. It has been used for a long time in online shops. Pinterest also is a great example of using cards.
If we take eBay or similar famous shopping website, we will see that card style works great, as it is a simple visual element which feels unobtrusive, comforting and user has the feeling of control. The actions that user can take when facing cards is simple, there is short (or not at all) learning curve.
Minimalism and cards is a very popular option because it is very simple and just works. Such solution also transfers well on mobile websites and apps, even if the organization is different on desktop and mobile devices.
Ionic.io uses cards for organizing pricing information on their pricing section. The cards are stacked on one another which takes the usual pricing section up a notch and creates an interface which is easy to use.
Here’s a few things to keep in mind when using cards in a responsive design:
- Is the text equally readable on desktop and mobile devices?
- Do shapes work with device aspect ratios?
- How will photos and images look across devices and will they be the same or different?
- Are the clickable and tappable areas the same? (It is recommended to make the entire card a single linked element.)
Minimalism might be considered as restrictive for some designers as there are some rules to be followed so such design is achieved. Not necessarily though.
Minimalism can be enhanced with some vibrant colours or creative, trendy and striking typography and still be simple, effective and aesthetically pleasing.
One of the greatest things of this type of design is that you can add a couple of touches, from flat and material design, to create interfaces that are particularly curious and interesting for the user. Designers make design styles evolve and trends are either enhanced or scrapped.
The bottom line for minimalist web interfaces or for any others is that everything created should be simple, well-organized and treating well the user. Isn’t that just good design?
This article is inspired by Minimalist UI Design Trends 2016