Uxpin Web Ui Trends Evolution of Flat Design

Web UI Trends
Present & Future

The Evolution of Flat Design
Web UI Trends
Present & Future
The Evolution of Flat Design
Copyright © 2015 by UXPin Inc.
All rights reserved. No part of this publication may be uploaded or posted

online without the prior written permission of the publisher.
For permission requests, write to the publisher, addressed “Attention:

Permissions Request,” to [email protected].
Index
The Evolution of the Flat Design Revolution 6

Trends and Techniques Popularized by Flat Design 10
Flat Design Pros and Cons 15
Flat Characteristics That Will Prevail 17
Flat Characteristics That Are Fading Away 21
The Intersection of Flat and Material Design 23
Thinking Beyond the Present 25
10 Free Resources and Tools 30
Carrie Cousins has more than 10 years experience in the media
industry, including design, editing, and writing for print and
online publications. Carrie is also a sports fanatic and spends
way too much time planning football and basketball trips and
obsessing over stats.
Follow me on Twitter
Krzysztof is a graphic designer at UXPin. He is also a typogra-

phy enthusiast and a founder of the global Typeseeing Project.
Since 2014, he has been an instructor at the Academy of Fine
Arts in Gdansk, where he teaches his students about design
theory and design software. In his free time, he enjoys playing and
inventing board games. Follow me on Behance
Jerry Cao is a content strategist at UXPin where he gets to put

his overly active imagination to paper every day. In a past life, he
developed content strategies for clients at Brafton and worked in
traditional advertising at DDB San Francisco. In his spare time he
enjoys playing electric guitar, watching foreign horror films, and
expanding his knowledge of random facts.
Follow me on Twitter
All-in-one design
and prototyping tool
UXPin has everything you need to create prototypes that look and
work like the end product. No more switching between a bunch of
tools to take your design from static to interactive. Try for free.
Create the real Keep your team Gather feedback

experience in the loop and act on it
Design life-like prototypes down to Give everyone a truly interactive Test your prototypes with users
the last tiny detail using interactions, experience to help them understand and think through the product to
variables, or states. how the product works. a much greater degree.
The Evolution of the
Flat Design Revolution
Photo credits: Left image- iPhone iOS 6. Manesh Mohan. Creative Commons. Rotated and
cropped from original. Right image- iPhone 6 Apps. Microservios Geek Crew. Creative Commons.
Rotated and cropped from original.
One of the biggest trends of the 2010s is still evolving every day.
Flat design, which really started to gain momentum in 2013 is still
one of the most used – and talked about – techniques in web design.
How has it sustained for so long? What make it continue to draw in

designers and developers to use it? The answer is that is that it is
both simple and intuitive. It works with modern frameworks and
interfaces and finally, because big players in the web design world
have adopted it.
While flat design seemed to almost take the design community over-
night, it has stuck around and evolved more slowly. Early show-
cases of flat design were incredibly flat with a desire to lose all of
the skin of the previous skeumorphic era, but today’s flat design is
starting to include more touches of flair and ornamentation.
Enter “Almost Flat” or “Flat 2.0,” as coined by Ryan Allen.
“Flat 2.0 is an evolution, not a revolution,” Allen wrote. “Where flat

design was a radical departure from the rampant skeuomorphism
of days gone by, flat 2.0 is a playful branch off the flat tree. Flat de-
sign is the Christmas tree, Flat 2.0 is the ornaments and candy canes.
And presents. No tinsel though, that stuff is a mess to clean up.”
You can see the evolution in a number of other places as well. When
Apple adopted flat design for its interfaces starting with iOS 7, the
look was not quite as flat as one might have expected. Before the
release, as flat design and minimalism were seeing a resurgence,
many speculated about the “flatness” the interface would include.
While it was nothing like the previous hardcore skeuomorphic iOS
look, there were hints of shadows and other elements that were
not considered completely flat, as you can see from the comparison
above. That’s where the “almost flat” idea originated.
Most of the flat design being created right now is more in that style.
There are hints of shadows, colors that did not fit the rules of flat
and typography choices that break the ideals of an entirely flat
Web Design Trends Present & Future: The Evolution of Flat Design 8
design. This evolution is why flat design continues to stick with

the web design community: it evolves well and into a number of
different design patterns.
Photo credits: http://hlkagency.com/
Photo credits: http://agencysurvivalkit.com/

Photo credits: http://www.forestapp.cc/
You can almost see the evolution in the three examples above.
The first (HLK Agency) is distinctly modular and clean. The second
(Agency Survival Kit) includes small hints of shading, shadows, and
even texture with its envelope image. The third (Forest App site)
incorporates completely flat elements with fearless touches of re-
alism (the background photo in particular).
Trends and Techniques Popularized by Flat Design
The roots of flat design can be traced to a number of different in-

fluences. From Swiss or international design to minimalism, flat
design borrows techniques from a number of different styles.
Flat design has spurred some trends of its own as well. Icons with
deep or long shadows, for example, came from the concept of flat
design. The other thing flat design has done for the design commu-
nity is bring back classic concepts to make them new again – min-
imalism is a great example of this practice.
Five techniques that have been tightly connected to flat design princi-
ples and ideals have emerged out of the trend as trends of their own.
1. Long shadows
Most commonly used on smaller UI elements such as buttons,
long shadows are created with a color tone that extends beyond
a graphic illustration inside of a box.
Photo credits: http://www.razvangarofeanu.com/#the-g

The shadow is often wide and positioned at a 45-degree angle
with hard edges that are easy to identify. Applied in moderation,
long shadows add depth and emphasis to otherwise flat elements.
However, as we’ll explain later, this subtrend is starting to fade

a bit in favor of subtler shadows.
2. Bright color palettes

One of the more fun things that has come from flat design is a
re-emergence of color, specifically bright and bold color. Design-
ers are using fun vibrant hues in more ways than ever before.
Photo credits: http://www.bounceblock.com/
In fact, some designers have even created a set of websites of

their own devoted to these visual patterns.
3. Simple typography
Flat typography is not just the use of Helvetica.
Rather, it is the idea of a typeface that is simple and easy to read,

which means commonly sans serif and contains a uniform stroke
width. What’s great about flat typography is that it really brought
the focus on lettering back into the reading experience.
As described in Web UI Design for the Human Eye, typography is

an artform in itself and the purpose for most designers is to cre-
ate something that users can read. Flat typography encourages
designers to think more carefully about any and all type selec-
tions, – in fact, even serif typefaces have evolved with simpler
letterforms becoming the norm.
Photo credits: http://icon-works.com/

4. Ghost buttons
Designed as a transparent, yet clickable, element, ghost buttons
provide a visual interaction cue without obstructing the UI design.
Photo credits: http://www.iuvo.si/
Because a ghost button is essentially an outline, and does not

look like a button at all, it allows the background to still come
into focus. The ghost button first emerged against design patterns
with high-color backgrounds and has since evolved to work with
images and a number of other elements. These simple buttons
often include crisp typography that fits the flat aesthetic, which
works particularly well in minimal design environments.
5. Minimalism
Flat design is innately minimal. After all, when the design isn’t
meant to resemble a real-life counterpart (e.g. a notebook app loo-
king like a notebook), you strip away a lot of extraneous texture.
All that’s left is the content framed by colors, gradients, shadows,

shapes, and other visual subtleties. Flat design, in essence, forces
designers to be more creative by saying less – designing from
the content outward, instead of fitting the content inside of a
photorealistic framework.
Photo credits: http://www.the-neighbourhood.com/
The concept of minimalism isn’t new, but it’s become extremely

popular recently for its clean aesthetic and site performance ben-
efits (such as reduction in page load times). This rebirth started
with flat design and the use of a bright-colored background with
a simple design and evolved into a more simple design surround-
ed by plenty of white space.
Flat Design Pros and Cons
Flat design and all of its evolving features come with pros and cons
that UI designers could debate all day.
As with any UI design trend or technique, it’s important to use flat

design in a way that works with your concept and not against it.
That’s why the evolution and changes to the trend are so significant:
designers are reimagining flat design in the ways that best suit the
content.
Flat design started with the slate-like feel of early Windows Metro
(as seen in their failed Zune player), but designers have realized
that tasteful visual flourishes don’t necessarily distract from content.
Let’s look at a few pros and cons of present-day flat design:
Pros:
• The visually organized interface works well with responsive
frameworks
• Minimalist, simple style is easy to browse for users
• Clean yet vibrant color palette is highly engaging
• Graphic icons are fun and easy to understand
• Bold lines and shapes express a logical, almost architectural feel
• Simple pieces and elements are quick to load
• Typography is designed for readability
Cons:
• Can be challenging to design well
• Some users may struggle with interfaces and what’s clickable (the
lack of texture sometimes weakens the signifiers and affordances
which hint at function)
• Design can be “flat and boring”
• Many sites in this style can look similar
• Personality can be difficult to develop
• More difficult to pair well with complicated content because
flat often lacks the distinct visual hierarchy necessary for large
amounts or complicated content in context
• Style can lack visual hierarchy (considering limited range of tex-
tures)
The best approach to flat design, as with any design philosophy, is

to focus less on the aesthetic and more on why you’re designing.
After all, every design philosophy and language is only a means to
the end of helping users better accomplish their goals.
Flat Characteristics That Will Prevail
Flat design survives as a trend because it includes a number of el-

ements with great universal appeal.
The “sweet spot” in the evolution of flat design is somewhere be-

tween the original trend and the skeumorphic ideals that were
abandoned. The flat (or more appropriately almost flat) techniques
that will endure are about two-thirds purely flat and one-third skeu-
omorphic.
1. Iconography
Flat design helped icons get the respect they deserve. Since the
page is more stripped down, designers must really focus on per-
fecting the details of these often-small elements.
Photo credits: http://stashflaticons.com/

Now that users are becoming more accustomed to more intricate

icons, expect them to hang around. Icons are also being used in
ways that are larger and give them more focus as an art element
and not just something for users to click on.
2. Typography
As described in Typography Trends Present & Future, the focus
on beautiful typography, custom typefaces, and lettering with
purpose continues to grow.
Photo credits: http://www.skewedicons.com/
With other trends such as hero headers, oversized typography

or type-only websites, the influence of flat is easy to see in many
of the type selections designers are making.
3. Minimal style
Minimalism might be one of the most over-used design catch-
phrases of recent years.
But it certainly has it’s merits: simple, easy-on-the-eyes designs

are a top choice for landing pages because their style is captivat-
ing and usable.
Photo credits: http://www.micelistudios.com/
From a practical standpoint, minimal designs also adapt well

to responsive breakpoints thanks to the sparsity of on-screen
elements.
4. One design, one font

The use of single type families emerges as another branch from
the simple typography ideas of flat design.
While type is simple and readable, this concept removes some of

the focus from the design of lettering to the surrounding design
and words themselves (logos, however, may be presented in a
separate font to reflect the brand identity).
Photo credits: http://huncwot.com/ via awwwards
5. Color use
Bright color is still popular, just applied differently.
Photo credits: http://wearec2.com/#/
Rather than filling a flat-style website with color, the preferred

option has shifted to using color as an accent tool. As explained
in Interaction Design Best Practices, this also pairs well with min-
imal concepts that include a lot of white space or sites that use
large images as a focal point.
Flat Characteristics That Are Fading Away
Other elements of flat design are starting to burn out almost as

quickly as they came into the limelight.
Most of these elements include fun design features but are difficult
to employ in a user-friendly way. When done well, each of these
techniques can result in a brilliantly designed and highly usable site,
but more often these elements seemed to fall flat or felt overused
and under-functional.
1. Huge color palettes: Flat design gave designers a new freedom

and challenge in the allowance to use massive color palettes.
Fun for a while, the end result was a little bit of color chaos,
and most flat-style concepts are returning to traditional color
palettes that contain only a handful of hues.
2. Long shadows: Fun for a while, long shadows are beginning to

disappear almost as quickly as they became a trend. Designers
are still using shadows, but are opting for a more subtler, softer
aesthetic.
3. Lack of emphasis: One of the flaws of flat design is that it best

worked on simple designs because of the lack of emphasis on
any element over another. This problem has been realized and
the “ 2/3 flat, 1/3 skeuomoprhic” concepts are an effort at correct-
ing this lack of visual hierarchy.
4. Elimination of all design “tricks”: Flat purists have no room to

talk about simple shadows or ornamentation of any kind. The
majority of designers though are more flexible in using subtle
design tricks – shadows, simple gradients and other hints of
realism – to create visually distinct experiences.
5. Super-thin typefaces: Some of the early type in flat design out-

lines was actually difficult to read – in fact, there was an entire
argument surrounding the choice of Helvetica Neue when Apple
went flat. Super-thin or ultra-light typefaces are less popular,
while medium-width strokes are more popular thanks to im-
proved legibility and readability.
The Intersection of Flat and Material Design
So how does flat design mesh with the material design concepts that
are emerging as a serious trend? The two are actually quite related.
Google’s Material Design is rooted in three design virtues: visual

cues should be grounded in reality, basic design theory prevails in
visuals and all motion should have meaning. These ideas are quite
similar to the ideas behind flat design with two major differences:
greater focus on motion and animation and layering of design ele-
ments, making material design very much like Flat 2.0.
Photo credit: Google Material Design Principles
It’s easy to argue that flat and material design are incredibly sim-
ilar or vastly different (some of the roots lie in the Apple versus
Android debate.)
What we do know is both concepts share similar visual traits – col-

or, shapes and overall structure. Some of the difference (especially
Material Design’s paper-like layering) lies in the root of the concepts.
Material design is documented and focused, while flat design has
evolved almost onto itself. There’s no doubt, however, that flat de-
sign certainly influences Material Design when you consider the
bold images, crisp edges, and vibrant look and feel common to both
methods.
Material design, if anything, takes a more practical stance than

traditional flat design. By allowing for element layering along the
Z-axis, it retains the visual maturity of flat design while being just
skeuomorphic enough to communicate affordances to the user.
If you’re interested in a free material design UI kit, check out our free
Android Lollipop UI Kit which includes 45 elements for PSD & Sketch.
Thinking Beyond the Present
Where does flat go from here?
Early flat design concepts fit almost into a very distinct box that
was clearly identifiable and lacked many characteristics of other
trends or design concepts. But that’s changing rapidly as designers
are mixing flat concepts with other trendy interfaces and design
languages.
Photo credit: http://www.makershape.com/en/
Photo credit: http://onedesigncompany.com/

Some of the most beautiful examples of flat design work within the
scope of websites that use parallax scrolling to help users navigate
from idea to idea one “screen” at a time.
Canal TP does a great job of mixing concepts in an almost flat aes-

thetic that uses simple features such as type and color with anima-
tion and parallax scrolling. This mix of design tactics helps remove
some of the over-simplicity out of flat design to make it more prac-
tical and usable for sites with more complex content.
http://www.canaltp.fr/
Flat design won’t die, it will just become more advanced as new
animations and interactions help it adapt to content-heavy sites.
We know that content-first design is gaining traction (as it rightfully
should), and flat design is the perfect canvas for its expression.
http://www.papertelevision.com/
UI tools and elements are the strongest single element to come out
of flat design. It’s all about usability.
Every button, click or tap needs a purpose and a clear visual cue so
that users will act (and interact) with a website. More importantly,
UI tools and elements need an almost universal visual, so that a
user knows what to do regardless of device or page. These minute
design elements will become even more streamlined in look and
feel as designers refine flat design’s icon aesthetic.
Just look at the emergence of the hamburger icon for collapsible

navigation - whether you agree with its use or not, there’s no doubt
that the simple set of lines now lives as a familiar symbol for across-
the-board submenu interaction.
Flat and material design will rise in popularity together. It is near

impossible to not pair flat design with what could become the guide-
book for interaction and usability standards, especially when you

consider the traction gained by both design philosophies.
http://www.emilianobarri.com/
Flat will also continue to evolve to incorporate more images.
Many of the flat or almost flat sites hitting the web today include pho-
tos, something very few early flat sites featured. Flat-style colors and
typography paired with great images reflect hints of a flat aesthetic
that is comfortable with itself – it doesn’t need to replace photos with
clever icons purely for the sake of looking creatively modern.
For example, the almost flat style for Emiliano Barri, above, uses
depth and images for the main visual in concert with flat elements,
navigation and typography. The result is a visual hybrid that is sim-

ple, modern, and very usable.
As designer Wells Riley suggests, remember to always look at your

design through the lens of usefulness and usability. Aesthetics are just
another tool in design, whose real purpose is solving user problems.
When you consider the spirit behind flat design (visual simplicity)
and skeuomorphism (visual familiarity), you find that both concepts
can certainly co-exist. The tricky part, as current years and the
future will certainly prove, is finding the perfect balance between
the two.
10 Free Resources and Tools
1. Flat UI Colors: All the hues and color codes you need to create
a flat-style color palette.
2. “The Ultimate Guide to Flat Design” from Webdesigner Depot:

This collection of UI kits, icons, tools, fonts, WordPress themes
and more will help you create a web design with flat concepts
in a snap.
3. Flat Design 2.0: See if you can spot the subtle differences be-
tween a design that is purely flat and one of the more evolved
flat patterns. Then think about each style and which one you
use more often.
4. Flat Design Website Inspiration from Awwwards: New sites
are being added daily using flat design concepts; the gallery
shows the emergence of almost flat as well.
5. Flat UI Typography: A fun combination of typefaces and usage

to help you see how a font will look before using it in a flat de-
sign scheme. (Phrases in the examples are cards from the UX
Drinking Game.)
6. Google Material Design Guide: Get the ins and outs of the con-
cept and design language that the web giant is implementing
across its brands in Google’s “living document.”
7. “The History of Flat Design: How Efficiency and Minimalism

Turned the Digital World Flat” by The Next Web: Concepts
of the design aesthetic have fairly deep roots that go beyond
website design.
8. Create a Long Shadow Tutorial: There’s no need to buy an icon

pack; most designers can build a long shadow icon in just a few
minutes using these tips.
9. 50 Flat Icon Sets: Whether you download the sets for use or
just inspiration, Digital Synopsis created a roundup of 50 sets
that are free to use or peruse.
10. 25 Flat Device Mockups: Flat can be fun to use in other ways
to, these mockups are a nice way to showcase an app or site
design with an unexpected design flair.
Your whole
team together
Bring your team together in the collaborative design platform
and start building the best experiences today. From first ideas
and mockups to prototypes and hand-off – stay connected
and ship products faster. Manage your design process in
context and in one place.
Title
Section Lorem
Lorem Lorem
Lorem Lorem
Lorem Lorem
Tab Tab Tab Tab

Uxpin Web Ui Trends Evolution of Flat Design

Uploaded by

Copyright:

Available Formats

Uxpin Web Ui Trends Evolution of Flat Design

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Uxpin Web Ui Trends Evolution of Flat Design

Uploaded by

Copyright:

Available Formats

Web UI Trends

Present & Future

All rights reserved. No part of this publication may be uploaded or posted

For permission requests, write to the publisher, addressed “Attention:

The Evolution of the Flat Design Revolution 6

Krzysztof is a graphic designer at UXPin. He is also a typogra-

Jerry Cao is a content strategist at UXPin where he gets to put

Create the real Keep your team Gather feedback

How has it sustained for so long? What make it continue to draw in

Enter “Almost Flat” or “Flat 2.0,” as coined by Ryan Allen.

“Flat 2.0 is an evolution, not a revolution,” Allen wrote. “Where flat

design. This evolution is why flat design continues to stick with

Photo credits: http://hlkagency.com/

Photo credits: http://agencysurvivalkit.com/

Photo credits: http://www.forestapp.cc/

Trends and Techniques Popularized by Flat Design

The roots of flat design can be traced to a number of different in-

Photo credits: http://www.razvangarofeanu.com/#the-g

However, as we’ll explain later, this subtrend is starting to fade

2. Bright color palettes

Photo credits: http://www.bounceblock.com/

In fact, some designers have even created a set of websites of

Rather, it is the idea of a typeface that is simple and easy to read,

As described in Web UI Design for the Human Eye, typography is

Photo credits: http://icon-works.com/

Photo credits: http://www.iuvo.si/

Because a ghost button is essentially an outline, and does not

All that’s left is the content framed by colors, gradients, shadows,

Photo credits: http://www.the-neighbourhood.com/

The concept of minimalism isn’t new, but it’s become extremely

Flat Design Pros and Cons

As with any UI design trend or technique, it’s important to use flat

Let’s look at a few pros and cons of present-day flat design:

The best approach to flat design, as with any design philosophy, is

Flat Characteristics That Will Prevail

Flat design survives as a trend because it includes a number of el-

The “sweet spot” in the evolution of flat design is somewhere be-

Photo credits: http://stashflaticons.com/

Now that users are becoming more accustomed to more intricate

Photo credits: http://www.skewedicons.com/

With other trends such as hero headers, oversized typography

But it certainly has it’s merits: simple, easy-on-the-eyes designs

Photo credits: http://www.micelistudios.com/

From a practical standpoint, minimal designs also adapt well

4. One design, one font

While type is simple and readable, this concept removes some of

Photo credits: http://huncwot.com/ via awwwards

Photo credits: http://wearec2.com/#/

Rather than filling a flat-style website with color, the preferred

Flat Characteristics That Are Fading Away

Other elements of flat design are starting to burn out almost as

1. Huge color palettes: Flat design gave designers a new freedom

2. Long shadows: Fun for a while, long shadows are beginning to

3. Lack of emphasis: One of the flaws of flat design is that it best

4. Elimination of all design “tricks”: Flat purists have no room to

5. Super-thin typefaces: Some of the early type in flat design out-

The Intersection of Flat and Material Design

Google’s Material Design is rooted in three design virtues: visual

Photo credit: Google Material Design Principles

What we do know is both concepts share similar visual traits – col-

The Evolution of the Flat Design Revolution 6