Flat design inspiration

Ekaterina Novoseltseva
May 24, 2016
User Experience Design
Flat design, Inspiration, minimalist design, Trends, User Experience, UX

Share This Post

Table of Contents

Web design trends change very fast, they come and go! You don’t have time to adapt to the current design trends and you see the new one coming out again. As I work in this industry, I noticed that on average companies change their websites one time per year.
With responsive design growth, flat design is expected to continue to be a dominant design trend throughout 2017.

Before the trend to simplify user interfaces, every inch of the screen needed to be filled up with a design element; for example a gradient. Now the empty background is a design element by itself. White background has become a way to style the web or app and make users focus on important elements. It provides clarity and simplicity throughout the whole web or app.

Flat design is a style that doesn’t have special effects like skeuomorphism design for example, I would say it is an antonym for it. It avoids realistic graphics or three-dimensional effect, bevels, embossing, drop shadows, gradients or artificial textures. Animation is usually avoided in flat design projects and large images are in.
The style is known for it’s minimalistic look, bright but muted colors, bold – often retro typography and simple user interface elements such as buttons or icons.

Flat design has also brought an overall emphasis back to minimalist design, emphasis on white space, color, sharp shapes and lines, and a return to simple and basic typography.

9 ADVANTAGES OF FLAT DESIGN

Simplicity
Clean interface
Engaging color palette
Cost efficient; less resources needed
Ease of Use
Modern appearance
Focus on the content
Efficient responsive design
Fast load times; for example Google’s logo. The company changed its logo to make it more flat;losing the bevels and changed the font. Google found that a cleaner sans-serif font for its logo helped cut the size of the logo file used on sites by more than half. Also it was found that it is easier to read on smaller devices.

It’s very easy to start with flat design, especially when you have thousand of tools and resources readily available. If you want to go for it, go now because trends change faster than you think!
Let’s start with the basics:

KEY ELEMENTS OF FLAT DESIGN

1.BRIGHT & BOLD COLORS

A signature element of flat design is bright, bold colors.
Flat design often uses combinations of three, four, five or more vivid color choices to create a palette, rather than the standard of only one or two dominant colors for most projects.

Flat designs have fantastic color palettes that include both bold & muted tones.

Multicolored panels are common in flat design. Rather than mixing and matching colors throughout the design, each scrolled page or panel uses a different and singular color with black and white for example. The overall effect can be visually appealing and helps create a sense of organization and visual hierarchy.
Monotone color schemes are also popular when it comes to flat design. The color palette often begins with a vibrant hue and uses both tints and tones to create contrast and variety.

When picking a color palette, remember to think about how colors will help users navigate a site. Don’t forget to specify a color for the main actions on your website; buttons such as “Submit,” “Send,” “See More,” etc. They all should be the same color, a vivid one which will provide a strong contrast with the background and catch user’s attention. If your logo or brand has a main color, normally that should be the one used for the main controls. Don’t overuse it though, or you risk make it less important in the user’s eyes.
Color choice is especially important in flat design, because when you’re using flat buttons, these colors will be remembered by your users. About color harmony you can read more here.

2. TYPOGRAPHY

Typography is a huge part of successful flat design. Often typography will become the centerpiece of the design. Therefore, it is a very important element in flat design. Since the interface is minimalistic, you need to use typography to help you create the style and mood you’re looking for. Don’t forget that as flat design focuses on simplicity, typography choice should be clean and simple as well.

Words are essential; they communicate a message, and tell users what to do on your site. Play up the words with interesting and different typography, please no Times or Arial here! Look for typography that works best with your message. Use simple sans serif typefaces that have plenty of variations and weights. Sans serif typefaces are by far the most popular option in flat design schemes. They work well with a variety of backgrounds, especially those which are flat.

It is common in flat design projects to see designers using just one type family for an entire project. Often designers use two to three typefaces for project palettes. Look for a type style that has multiple weight options such as bold, black or light; to give you variety and help create a distinct sense of hierarchy with the single typeface.

As many designers use similar colors and techniques in flat design projects, cool and unexpected typeface can help create an identity for your project and stand out from the crowd.

Type is often black or white, lacking additional embellishment or color. In addition to basic typefaces, the words used should also be kept to a minimum. Language should also be simple and easy to read to stay on point within the minimal style of flat design. And make sure you use white space to breathe.
Many sites are using uppercase text for navigation items and key headlines. It’s also very popular to use white text over either a flat background color or a photographic background.

Typography that you can use for your flat design projects:

BELLOTA

A sans-serif typeface that’s masquerading as a novelty font with small serifs, Bellota is easy to read and ornamental, a tough combination to find. It has a feminine feel and would work well against a high-contrast background.

CAVIAR DREAMS

This super-round typeface is both modern and simple. The letters are distinct and are readable at a variety of sizes. The stroke is thin and requires a background with a lot of contrast for optimum readability.

FLEX DISPLAY

Apple started a debate in the design community about the use of a very thin typeface in its iOS 7 release. Flex Display includes a very thin stroke and has practical application as a large or oversized typeface in a high contrast situation. Personally, I love it!

LATO

Lato is a simple typeface that works well at a variety of sizes and includes weights from ultra light to ultra bold. The typeface is quite popular among designers working on flat design projects. This is not the typeface to select if you want your type to look different from the mainstream.

TELEGRAFICO

Another typeface, with a wide stroke that works well with plenty of space. The look is modern with a wide stance and sharp edges.

MONTSERRAT

Monserrat is a great choice for flat design because it has its geometric simplicity and a rounded light-hearted feeling.

PRIMARY SANS

I love primary sans, it reinforces simplicity and sets good mood.

DENSE

It is also one of my favourites – Dense. Lack of complexity and at the same time has its own style.

BARIOL

Bariol is another friendly font with very rounded terminals.

DECO NEUE

Another modern font, Deco Neue – It is a great choice for a cool project.

CANTER

Canter is another very good option for your flat design project. Modern and simple.

JUNCTION

Junction is a very nice option for the flat design. Retains clarity and simplicity.

ALLER

Aller – another awesome font. It connects the letters without making it difficult to read and enhances the dynamic of any sentence.

GNUOLANE

Gnuolane is a good choice for the serious topic.

3. VECTOR ILLUSTRATIONS, ICONS & LARGE ELEMENTS

Make your elements large and by adding some simple vector style illustrations you can emphasise the flat nature of your site. Check out The Noun Project for some great flat style icons and illustrations. Don’t forget that flat icons are all about simplicity, less details, the better!

40 SOCIAL MEDIA FLAT ICONS – this comprehensive social media icon set has almost every popular network and website included in a beautiful icon set that uses both a flat style and long shadow design.

FLAT FILE ICONS – every designer who builds a site that includes downloadable files needs a set of file icons. Here you can find most popular file options: upload, download, settings and charts. Or you can change out the center icons for your custom options.

FLAT ICONS FREEBIE – flat icons with rounded edges are some of the less used icons. The kit includes nine icons for common elements, such as weather, mail and a calendar.

ICONSHOCK FLAT ICONS – this might be the largest set of flat icons out there. With 3,600 icons in three size options, this kit has an icon for almost everything. It includes basic elements, file types, shapes, and common items.

6 FREE FLAT UI DESIGN KITS

User interface kits are a great way to get started with a flat design project. It saves you a lot of time if you don’t need to design the project from scratch. It allows you to create highly professional designs. You can find from awesome mobile friendly frameworks to cool icons.

Let’s start with free UI kits:

FEATHERWEIGHT UI – featherweight UI is a simple kit that includes sharp elements, menus, a photo scroll, map, simple icons and scroll widgets. The kit is not large, but it has an elegant style and plays up the more retro color theme, perfect for a flat design project.

ERSTE UI KIT – this simple UI kit has basic elements, such as social login buttons, menus and a media player. You can find colors specifically for flat design project.

FLAT UI KIT – this free kit from Designmodo includes hundreds of elements, including buttons, icons, color swatches and menu items.

FLAT UI KIT BY RIKI TANOE – Riki Tanone’s kit has a chart, media player, task wheel and counter. This is a great starter tool for imagining how to combine simpler UI parts into more complex items.

METRO UI KIT – the Metro UI kit is a colorful kit with blocks and simple typography. The kit includes a calendar, stats, chart, icons, menus and search elements.

MONOTONE FLAT UI KIT – a lot of designers use bright colors for their flat design, monotone color palettes are equally represent the trend. And This UI kit by Sebastiaan Scheer includes a few simple elements and great graduations of color.

5 FLAT UI DESIGN WORDPRESS THEMES

Creating a great flat design website does not have to be developed from scratch. WordPress theme designers offer quite a few great paid and free themes available for download. What’s nice about using a pre-packaged theme is that you can get your design and site almost immediately. Quality themes have a clean, clear and consistent look.

CURRENT – current is perfectly flat in every aspect of the design and is designed for a new product.

TETRIS – tetris uses simple block-styles and cards for a simple site design. The look is great for sites with great images or visuals.

HEMINGWAY – hemingway is a clean and modern theme, perfect one for bloggers.

OPTIMIZER – optimizer is one of my favourite one! Very easy to use and it looks very cool!

MOESIA – moesia is a very good business theme to build your presence on the Internet. You can choose from eleven predefined blocks and build the homepage that best suits your company. Each of the homepage blocks can have a parallax background image and its own set of colors. Moesia also features a selection of Google Fonts, two types of layouts for the blog page, cool animations and effects, a parallax header and much more.