Bigger. Better. More intricate details. These days, flat design has progressed into something a little less… flat.
In an on-point description of the newest iteration, Ryan Allen calls it “Flat Design 2.0.” His article for Dapper Gentlemen lays out what flat design was before, what it is now, and even sheds some light on why.
Flat design remains a popular technique today because its simplicity aids responsive design — but over the last few years has undergone some refreshing changes.
As you can see in Ryan Allen’s fantastic illustration above, the most notable change between the original flat and flat 2.0 is the additional details. Highlights, gradient shadows, dropshadows, elements with more values. Flat design is no longer an antithesis of everything skeuomorphic.
Many of the original features, however, remained unchanged. Flat 2.0 still retains its minimalistic simplicity, though slightly less so. Its bright and fun use of color is still prominent. And its unadorned typography aimed at legibility is still seen.
But instead of talking about the differences, we’ll go ahead and show you. If you’d like to learn the techniques behind 9 other modern design trends (complete with 165 hand-picked examples), check out the free e-book Web Design Book of Trends 2015-2016.
With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.Create a Website
Cybeer Bar is a great place to start: they stay true to the basic, simplistic style of flat design, but take it to an extreme with an intense layer of detail. The wood panel of the bar says it all — only two colors and clearly distinct, almost blocky shapes, but with meticulous application for elaborate detail.
Christmas with Joy
Christmas with Joy uses flat design illustrations to showcase cutesy versions of popular Christmas characters around the world. Notice the smooth shapes and distinct shading.
The sketches on the Dropbox Guidelines site flirt with realism, but are still simple enough to be considered flat, especially when joined with the bright blues and reds, and the simple typography.
The 450 GSM site could still be considered as original flat design, if not for the slight shadow beneath the bird. Fun fact: this site was actually built with the Startup Design Framework, which makes it easy to create beautiful sites quickly.
The bright blue background, stylistic icons, and unobtrusive typography make Intercom a poster site for flat design. Notice the rounded edges on the icons, buttons, and boxes.
Agency Survival Kit
While the minimalism and pastel red are typical of original flat, the texture of the book and mild shadows make Agency Survival Kit part of the 2.0 movement.
Despite the flashy font at the top, the color choices, rounded edges, and oversimplified icons are all classic flat elements.
Looking closely at the product pictures, you’ll notice a shadow effect over a pastel-colored background, adding flat elements to the site for this Scandinavian ceramist, whose work is already characteristic of flat design to begin with.
Paye Ton Caps
The graphics for this French online game are pure flat 2.0, with their homely style and obtuse shading.
CSS Conference EU
The traditional flat color palette combines with some ornate details to make the CSS Conference EU site a representation of modern flat design.
Using layers, the site for the Take It app combines real photography with the flat style. Notice the city background done in the typical flat style.
Google Santa Tracker
Flat design works well with Christmas themes, it appears. Google Santa Tracker proves that flat design isn’t always minimal — not only is the screen busy with individual elements, the constant animation of the snow and background vehicles make this a page that’s entertaining to watch. Notice the blurred out tree in the foreground to give a 3D effect, especially with the parallax scroll.
For Better Coffee
While lacking shading elements, the multitude of details and clear distinctions between colors allow this creative scrolling site to be classified as flat design 2.0.
The official site for the Dots games made a wise choice with flat design 2.0, as the style enhances its joyful gaming atmosphere and facilitates the site’s fun web animations.
The serif font and heavy texture, while not pure flat elements, give Quotes Magazine a more refined feel to enhance the bright colors and catchy visuals.
Who Is This F*cking Bear?
Who Is This F*cking Bear combines the conventional elements of flat design (rounded edges, basic shapes) with dreary colors (accented by the occasional orange flourish) and a high level of detail (take a close look at the bear’s fur).
Stash Flat Icons
A site done in flat design to promote flat design icons, Stash Flat Icons showcase bright colors and plain typography, not to mention the character style of icons in flat 2.0.
Not every flat site needs to have cartoons or goofy humor. This intellectual property law firm uses pastel colors, a minimalist design, and an easy-to-read font to demonstrate their professionalism but also their warmth.
Liberio is another textbook flat design site, from the bright colors, to the modest font (except for the company name), to the smooth and overly simplified image of a tablet.
The warm colors and cartoonish style really complement the fun vibes of this scroll-animated site for a kite-flying festival.
Leaning more towards the old-fashioned interpretation of flat design, Team Treehouse shows off the increased detailing of 2.0 in its modern icons.
You may not usually see financial sites adopt such a light-hearted style, but both SCEATT’s casual tone and marketing as an easy-to-use app make flat an appropriate choice.
As with SCEATT above, Evolve Wealth sets itself apart from other financial companies with the warm atmosphere and humor of flat design.
Another site that combines photography and graphics, the two images on Black Tomato’s home page play off each other — the contrast of a gorgeous, HD photo and heavily stylized, cartoonish graphics accent the best points of both.
The graphic on the bottom of Lander’s page demonstrates the modern take on flat design. While retaining the blocky style, the level of detail is stepped up, as is evident by the etchings on the pad, the glare off the photos, and the shading on the crumbled paper.
The new flat design is a welcome new style, bringing more options to what designers can do, without sacrificing the delightful characteristics that made flat design popular to begin with. We look forward to seeing how flat evolves in the future.
For a more in-depth analysis of modern web design techniques — including the most dominant traits, how to implement them, online designing resources, and 165 hand-picked examples — check out the free ebook Web Design Book of Trends 2015-2016.