6 Super Examples Of Flat Design

Written by Run2.
· 4 minute read

Flat web design has become a popular trend for websites and branding in the past couple of years.

With minimalistic web design and modern colour schemes teamed with carefully selected typography, it catches the eye without being distracting or messy. It’s a way you can be creative and step outside the box with how you present your product to potential customers.

A few years ago, businesses were looking towards realism for design inspiration however; the tables have turned to flat. Flat design done well can make a website look crisp and sophisticated, even if the theme is playful.

This website called “Flat Vs Realism” gives a fantastic visual explanation of the main differences between the two, showing us how they have competed for design favouritism.

Some people would argue that Realism wins, some love Flat and others simply appreciate both.

Websites with flat design tend to offer form of escapism and enjoyment, which seems like  the way to go when it comes to products or campaigns, to make them more desirable to buy into.
Many designs are so effortless that it can make people buy the product based on the design only, if it looks trendy and visually appealing.

If you’re not too convinced that it’s the right path for your business website, think again. Whatever sector your business falls into, there are ways you can apply flat design to attract customers, including patterns, textures and other effects.

Flat appears to be the design step up, without it appearing amateur and many businesses are adapting to this.
Here are 6 examples.

We Heart Trees

This flat design uses cartoons for a cute, playful way to catch people’s attention. The website is a tad different because it turns a cause into a game where you can actually create and plant your virtual tree.

At first, it may sound a bit bonkers, but the aim is to raise awareness for people to plant more trees, instead of destroying nature’s beauty and wasting plants which should be seen as a gift from the environment.

This could have been created in a very informative, factual way however, this website was created to be fun so that you want to learn more about the story behind it, plus it could get the younger generation on board.

Once you take the little quiz (similar to ones found on Buzzfeed), it calculates which tree character you are, taking you to a profile page.

For example, my result was “Miley Cypress” and they have other results such as “Honey Yew Yew” and “Snoop Dogwood” (I’m sure you can guess the celebrities they are based off).
Mixing pop culture with trees is a different way to achieve a laugh from your visitors whilst raising awareness for a good cause, therefore this website design gets a thumbs up from me.

Flat Guitars

Flat Guitars is an ongoing illustration project by David Navarro, which shows famous guitars, owned by rock stars throughout the years. This project is used a tribute to the musicians who he loves and it’s a brilliant way to show this. Dave has an aim to add a new guitar each week.

While the website loads, there is a volume knob which turns from zero to eleven, which makes scrolling down to reveal the different guitars much more exciting.

Each guitar has a contracting colour background which makes the design look fresh and it won’t appear dated over time, which exactly what some people think of classic guitars that have been produced and sold since the 60s.

Each illustration has a simple description of which artist made this guitar recognised in the music industry. It shows us how these artists made a guitar famous, just like Jimi Hendrix did with his lefty Fender Stratocaster.

David took the website one step further by allowing the user to zoom in on the guitar so you can actually strum it and hear the sound, which is a feature he believed was mandatory (and I agree).

My personal favourite guitar is Jimmy Page’s double necked Gibson. Personally, I have loved Jimmy Page and many people will have a favourite guitar due to nostalgia. Each mini profile links to the musician’s website and also the guitar manufacturer’s, which offers the choice of more information if you wanted it, instead of cramming tonnes on one page and taking away from the flat design.

The 4 little squares in the bottom right gives an option for you to view the guitars in a grid layout, which is great because it gives the user different ways to view the website.
I don’t really think you need to be a lover of guitars to find this website interesting because the way the guitars have been shown is innovative. Most websites would use realism to show these instruments; exactly how they are when you see them in a shop, however, Flat Guitars has shown a different way to appreciate them without taking away from their beauty.

Every Last Drop

Every Last Drop is another website trying to do good for the world.

In Partnership with Waterwise, their aim is to show how we can be more efficient when it comes to using water.

The design has flat illustrations, turned into a controlled animation every time you scroll through the website.

The narrative shows the life of the character that is getting ready for his day. These are all tasks that we all relate with, such as getting a shower, cooking breakfast and dodging traffic. Throughout the story, it presents us with statistics of how much water we use daily in each task.

It raises the issue on how we can take this for granted, especially once we read the amount of people on the earth go without water daily. Once we realise this, we know we could all take part in this campaign and we feel like we’ve actually learnt something.

The use of flat design here helps us stay interested enough to scroll through. We’re learning and also having fun as the story unfolds.
Once you get to the end, you are shown the option of a video to click. So why stop there? The website persuades you to watch this because the website has boosted the message creatively.
If we were shown a video at the very start with little description, it wouldn’t make us want to explore the issue further. This website has presented us with a problem that needs to be brought to people’s attention, but in a non-dreary way.

The Paint Drop

The Paint Drop is a mobile paint service who can arrive at your location to give you a tailor made service for your interior or exterior design.
Due to the nature of the business, it could have just shown examples of their work and used a realistic design however; they have made it look very alternative and on trend.

Using the flat design mixed with 3D design elements, they have made their truck the main focus to customers, showing them they’ve introduced a different way to do a task that people need expert help with.
Sticking with the basic colours for navigation, it doesn’t clash and makes the website attractive.
The design is fun without being unprofessional. When you scroll down, you are offered different categories of their website to explore.

The use of flat designs and 3D is a step further to complimenting the website, making it more appealing.
Offering a tour of the truck they use adds another interesting element because they are showing that they pride themselves on being different and they want to prove this to their visitors.
All these features make the call to action much easier for the customer due to the information displayed which is teamed excellent design.
At the bottom, the Social Media channels are clearly shown to encourage people to stay in touch with the business. Overall, as a paint service, they have gone above and beyond.

Classic Cars On The Big Screen

Classic Cars is definitely a website for the vehicle fanatic, created by Gazebo supplier, Gazeboshop.

The simple layout is mixed with a choice of only a couple of fonts so that it’s not too messy. Combining the right fonts together is the key to great design. This helps their flat design timeline; which appears similar to Flat Guitars.

Taking you through the years, it shows illustrations of different cars in classic films. It offers a short description with the date the car was released, the country of origin and the total sales.
Again, people who have a passion for vehicles will be interested in this topic however; others can take a look without being bogged down by too much description and terminology they might not understand. If this website began talking about mechanical engineering, many people could be lost.

Instead, they have offered bright illustrations with a short, snappy paragraph, telling you all the information you need to know.

The best thing about this website is how simple it is. The fonts do not take away from the illustrations and it makes you want to scroll down more to see if you recognise any other cars. The website was created specifically to celebrate the Classic Car Show 2014 and I think it’s a great way to advertise an event.

The Cost Of Living In Europe

Oh, finances! This is a subject of many of us loathe to think about, let alone talk about. The cost of living is the subject of many heating debates across Europe.
This website is a great way to understand finances because it breaks down what life is like based on someone having £1,000 in their bank.

It sounds simple, right? Actually, it wants to show you how long it would take to run out if you attempted to make that money stretch across a year. The flat design is bright and the different colours symbolise the living cost in that city with red being high, orange being mid and yellow being low.

The map used is vivid and it’s great that they didn’t just use Google maps.
This way, the choice of map ties into the design better and makes the user stay on for longer. Once clicked on the city of your choice, a side bar is shown with an overview of that city.

Personally, seeing that £1,000 will only last you under 7 days in London is crazy, even if it has been calculated after taking accommodating, utility and travel into consideration. Other than the doom and gloom, it offers you ideas on activities you can do in London and different cities which are for free and it adds a nice touch to the harsh reality of it all.

Once you scroll down, you are offered information about Accommodation/Utility, Food/Drink and others to give you an insight into how far your money gets you.

This is great because even if you don’t live in this city, it can show you in a great way how it would change the way you handle finances. Ultimately, it shows you if a city is realistically affordable for you as an individual. You could use this website as a comparison for travel, too, because if you want to visit somewhere and you’re unsure on your budget, viewing food and drink costs can give you a better idea, instead of arriving and running out of cash.

Hopefully, the might decide to add more capital cities onto the map. This way, it could give students, busy working people and travellers an idea of how they can make their money last longer. This could then lead to better money management which could help many different people who are currently struggling financially.

Overall, this a bright, upbeat take on a topic that can feel like it’s all doom and gloom.