Last Updated:

10 Rules of Flat Design

"Bold, flat and beautiful" is the new slogan of web design. Recently, flat interfaces are gaining popularity. Companies like Microsoft and Google are contributing heavily to this trend: Windows 8 and material design, respectively.

Today, most new websites start from this concept when developing a design. So, what is flat website design? Let's look at a few important aspects.

Place! Lots of space!

Your website should be spacious. You don't have to fill it with a lot of components. For example, make the navigation menu large and simple.

Look at the sitepoint.com navigation bar. It looks simple, elegant and attractive. You can be sure that users will like this solution.

If you are creating a blog, the articles should be well separated from each other. This also applies to online stores, where the correct placement of products is very important.

Bold text and background colors

By combining bold colors for text and background, you can make your content stand out from other web pages.

Choosing combinations with more than 5 colors can confuse the audience. Free web tools like Adobe Color CC can help you choose a good color combination. Search for the keyword "flat" and you'll get a number of flat color combinations.

Look at the flat ui colors that flatuicolors.com offers. This can be a great starting point for you.

Panoramic images and video backgrounds

Using a big, beautiful background is a good way to make your website more appealing. Video backgrounds have become very popular lately. Large companies like PayPal use video backgrounds on their landing pages.

However, you should be careful when using video backgrounds. They should not cause your web page to slow down. You should always have a backup image in case video playback is not possible.

As an example, the page PayPal:

Using non-thematic video clips and images as backgrounds can reduce page performance.

Clear fonts

Using clear fonts is one of the most important factors in creating a transparent and beautiful design. The text on your website should be readable and accessible. Apple.com is the benchmark.

Use fonts that are freely available, for example, on Google Fonts. You should also be able to choose the size well, too large or small text can reduce the quality of the design of your web page.

Web icon fonts

Sometimes it is better to depict a message using symbols. Icons are actively used nowadays, as they are easy to work with and they have a huge number of advantages.

By using icons instead of text in some places, you can make your site more attractive and understandable. It is also recommended not to use sprite images, because, unlike icon web fonts, they cannot be changed using CSS, and they also look bad on Retina displays.

"No" to shadows and gradients

Gone are the days of using CSS shadows and gradients to make web components more realistic.

Bold and attractive logo

The logo should correspond to the design of the site. Sometimes, by using the wrong logo, you can influence the overall design of the site. Try to make a simple but effective logo that will complement the design of the site. Also try to use a maximum of two colors in the logo. It is good if these colors are found in the color scheme of the web page itself.

The logo scotch.io as an example:

Transparent layers

It is best to use RGBA. For example, if the navigation bar is locked at the top of the page, use RGBA to create a glossy effect.

Apple uses the transparency of the navigation bar.

Parallax effect

The parallax effect is one of the most popular web development effects. Web pages like Twitter's profile page, Apple product pages, and many others use this effect to create a beautiful design.

You can easily create a parallax effect on your website using GumbyFramework's Parallax Component.

Intuitive UI

Try to make the components of the web page as simple and understandable as possible. Look for analogues in the real world. For example, switches instead of radio buttons can improve the overall design.

Look at the sets of buttons and switches provided by FlatUI.

Inference

I hope that the above 10 steps of creating an attractive flat design will help you when developing a UI. You should also remember that simple, clean and intuitive design will always be popular.