DESIGN REPORT 2018

BY AVOCODE
Table of
Contents
01 INTRODUCTION

03 DESIGN TOOLS

06 DESIGN SYSTEMS

09 VERSIONING

13 PROTOTYPING

16 COLOURS & GRADIENTS

19 ART & STYLE

23 TYPOGRAPHY

27 CONCLUSION

28 THANK YOU
 I think about our yearly design report as a sort of
Matouš Roskovec a signature dish at Avocode. The idea remains
Creative lead at Avocode the same - to help you catch up with design
trends, but the execution differs every year.
The 2018 report is already the fourth in a row with
the third edition of this e-book. So far, over
200 000 people have visited just the design
report webpages, we have received 4 Awwwards
accolades, and the design report e-books have
gained over 40 000 readers.

Such numbers are not easy to beat. Nevertheless,

we’re still determined to bring you something
special, well, this year it’s more like someone
special.

We don’t want to feed more discussions on

whether UI design has gotten flatter or if button
corners have become less rounded. You can
figure that out yourself on Dribbble. For the first
time, the goal of this e-book is not just to offer you
insights powered by data, but also provide
insights based on human experience.

01
 FIRST, LET’S TALK ABOUT
DATA INSIGHTS.

This year we had a significantly larger data pool.

Since Avocode has started supporting five
different formats (Sketch, Adobe XD, Photoshop,
Illustrator, and Figma) we had 6,354,110 (3x more
than the year before) design files uploaded to
Avocode between 1st of January 2018 and 31st of
December 2018 by people from 164 countries.

Thanks to the technology that powers our design

hand-off tool, we were able to anonymously break
these design files apart and count their insides -
things like layers, effects, fonts, etc.

While we have years of experience in the design

field ourselves, offering you our personal insights
would be shortsighted. Instead, we put together a
group of 7 experienced designers. We asked
each one of them about one topic in our design
report to unveil their raw personal experience.

I hope that after reading a bit about the data

patterns we found as well as gaining inspiration
from how other designers work, you won't be just
up to date with 2018 design trends; you will be
ready to define the ones that are coming in 2019.

02
Design
Tools
Adobe XD and Figma have become fierce competitors to Sketch. As Adobe
introduced seamless import of Photoshop and AI files into XD, it admitted that
these tools are not perfect for UI design. All the primary screen design tools
(Sketch, Figma and Adobe XD) attempt to cover more parts of the design
process. As their feature set becomes almost identical, we must be asking, what’s
the future of design tools? How should you choose the right tools for your work
to stay relevant?

TO GET A FRESH PERSPECTIVE ON WHAT’S COMING NEXT,

WE ASKED THE PRODUCT DESIGNER OF WEBFLOW.

Darin Dimitroff
Product Designer at Webflow
darindimitroff.com

03
Design Darin Dimitroff

Tools Designer at Webflow

WHAT DO YOU THINK IS

THE FUTURE OF DESIGN TOOLS?

Let’s start with the present. Currently, I’m using

Webflow, Figma, Dropbox Paper, iA Writer,
Whimsical, GitHub, and VSCode. Not all of them
are design tools specifically, but I do design with
them.

To talk about the future of UI design I think there

are three areas that will make a difference pretty
soon.

I’m rarely hyper confident about my predictions,

Working in production but if I feel certain about something broader, it’s
that designers will start working in production,
right next to engineers. I believe this is the next
big step in the evolution of design tools. It’s a
predictable process that has already happened in
many creative industries: working on the
production artifact (code, in this case) vs crafting a
visual artifact that resembles the real thing.

04
 I’m a huge believer in the browser as a medium
Online, real-time for complex apps. Skeptics have been
and multi-platform pronouncing the web dead for countless
iterations now, but if you look at the actual
landscape, people are predominantly using web
apps in a desktop environment these days and
and they are getting pretty good.

With things like WASM and offloading heavy

computation to the server, we’re actually closer to
unleashing the full potential of the web as a
runtime than ever before. Things like Google’s
Stadia promise streaming immersive AAA games,
think of the same thing about software. This starts
to reduce the effective computational difference
between your phone, tablet, computer, TV,
and fridge.

This one is super old, but I feel like it’s becoming

Hyper-minimal popular again based on chatting with younger
prototyping designers during my Out of Office Hours
sessions. It’s actually my personal favorite way to
prototype just about anything: Markdown
documents.

Just think of your experience through the eyes of

the person on the other end of the screen and
write bullets with the steps they follow. Don’t
focus on the UI, but on the thought process,
people are going through when interacting with
the product. It’s a surprisingly effective way to
reduce the complexity of what you’re working on.

05
Design
Systems
Already in our previous design report, we have predicted that design files would
be getting smarter and more connected. In 2018, we saw a shift towards an even
more modular design that is ready for scale. The vehicle to drive this shift is,
without doubt, a Design System. To help teams build a smart and connected
system design tools have introduced a new way to edit all smart components in
one file: Shared Libraries (Sketch), Linked Symbols (Adobe XD), and a shared
Team Library (Figma).

SO IF YOU CONSIDER BUILDING A DESIGN SYSTEM, READ THE

BEST PRACTICES BY THE HEAD OF DESIGN SYSTEMS AT LYFT.

Linzi Berry
Design System Lead at Lyft
linziberry.com

06
Design Linzi Berry

Systems Design System Lead at Lyft

WHAT ARE THE MOST IMPORTANT THINGS DESIGNERS SHOULD

FOCUS ON WHEN BUILDING A DESIGN SYSTEM?
WHAT SHOULD THEY AVOID?

A design system is an internal product. Like any

product, it’s good to start with understanding of
the real problems your company has that a
system can solve. However, you should also be
open to the possibility that not every company
needs a design system.

Create goals that have a business impact and

then get buy-in with a test project. Many design
systems start as grass-roots efforts, but for them
to gain traction beyond the designer and
engineers who are already on board – leadership
buy-in is a must.

If there is a bug in a system component, that is

priority zero. System components are used
everywhere, and if they break, they break
everywhere. Fix the bugs immediately!

07
Listen to your engineers. If you're fortunate, they
will reach out with feature requests for one of the
system patterns (because their designer changed
it slightly). Get to the root of why it was changed.
Just cause they felt like it? Because they didn’t
know the rules of the pattern? Because of a
legitimate use case? Decide, as a team, if that
new feature is worth supporting. You can do this
by assessing if it still follows the goals of the
pattern or breaks them. Ask the team if they’d be
willing to contribute their new feature back to the
pattern or if it’s something the design system
team should take on. Contributions are the best.

08
Versioning
Sketch, Adobe XD, or Figma haven’t introduced any version control solution yet.
They all have some sort of a version history which is useful as a back-up but
doesn’t really help when multiple designers collaborate on the same project.
Designers don’t really need Git with all its advanced features like rebasing,
however, they do often need to create branches to work on the same file
simultaneously. Figma went around this problem by enabling real-time
collaboration. Sketch users depend on third-party solutions like Plant,
or Abstract and Adobe users are out of luck for now.

TO LEARN THE BEST WAYS OF WORKING ON A DESIGN FILE

WITH OTHER DESIGNERS WE APPROACHED THE SENIOR
UX DESIGNER AT KIWI.COM.

Denis Rojčyk
Senior UX Designer at Kiwi.com
rojcyk.com

09
Versioning Denis Rojčyk
Senior UX Designer at Kiwi.com

HOW DO YOU APPROACH DESIGN VERSION CONTROL AND FILE

MANAGEMENT WHEN WORKING WITH MULTIPLE DESIGNERS?

Our approach to versioning and file management

in our mobile design team at Kiwi.com is quite
simple. We’re using Figma as our primary design
tool. Unfortunately, Figma has a read-only API,
and the ecosystem around it is quite minuscule
when you compare it with Sketch and their plugin
ecosystem. For example, there are plugins which
adjust the component's width based on the length
of the string in it, and this is impossible to do
without write API. So for now, we have to rely on
what Figma has to offer.

Since our app is quite huge, we split it into

separate domains (Search, Booking, Manage My
Bookings and platform). We think of the domains
as team projects and therefore keep them in
different Figma project folders. Every feature or a
smaller project under a domain is then
represented as a separate file. We usually keep
all the versions in the respective files, and we
label the different pages as 1.0, 1.1 (Ready), 1.2
(WIP), etc.

10
 We would love to use the Figma’s version
snapshots, but since only editors can see them
and not viewers (our developers), we don’t use
them at all.

The most atomic components, like inputs, buttons,

switches, and other atomic controllers, are
maintained in one shared “Core library”. Then we
have domain-specific libraries which are using the
core library, and which have more complex
components in it. This differentiation gives us
better control over the publishing process as well
as it improves our ability to maintain the whole
thing.

I don’t think versioning is that important with

smaller teams in an agile environment. But as the
product and the team grows, the need to have a
versioning system rises quite a bit — especially
when designers are ahead of the development
team and they start exploring possibilities and
different approaches.

Generally, I think that versioning for design files

hasn’t been solved yet. While there are already
some solutions for it (mainly for Sketch, i.e.,
Abstract), they are still far from ideal.

11
They just copy the flow of code versioning (Git),
but I don’t believe that it works for design,
especially when you have to deal with conflicts. It
is just broken at that point. For example, in code
when there is a conflict, you can see both of the
changes in one file, and you can work around
them or solve them. However, in the current
design tool setup, you either have to choose one
or the other, and if you want to keep both, you
need to copy stuff over which leads to losing the
changes history and it is making the version
control a little bit meaningless.

Solving conflicted commits is quite easy when all

you have to deal with is text. But there are just too
many variables in visual design, and it would
require some next level thinking. So I think the
market is just waiting for some player to solve it
correctly.

12
Prototyping
Prototyping has become integrated into design tools. Sketch has finally
introduced a built-in prototyping feature. Adobe XD allowed seamless import of
PS and AI files. Both of these product updates made prototyping in third-party
tools obsolete and has replaced the entire prototyping functionality of inVision’s
Craft plugin. Adobe XD became the first UI design tool to introduce voice-
prototyping and made others realize that users don’t interact with screens only by
touching or clicking. Adobe XD has also pioneered high-fidelity prototyping with
the auto-animate feature.

ARE YOU NOT SURE HOW TO TEST AND PROTOTYPE YOUR

IDEA? NATHAN RILEY, A JURY MEMBER ON THE FWA,
HAS A FEW TIPS FOR YOU.

Nathan Riley
Design Director
at Green Chameleon.
nrly.co

13
Prototyping Nathan Riley
Design Director & Co-Founder at Green Chameleon.
Jury member on the FWA

HOW DO YOU APPROACH PROTOTYPING

AND WHICH TOOLS DO YOU USE?

I’ve only really used Sketch and XD so far, but

What do you think about from my experience, the ease of use is seriously
the prototyping features impressive, in XD, for example, I went from not
coming to design tools? having used the software to create a working
prototype in just a few hours. There is still a long
way to go in terms of bridging the gap from fully
fledged design tools and prototyping tools
(coming from a Photoshop dinosaur that still likes
to use a lot of textures and image treatments) but
in terms of getting quickfire prototypes with nice
animations together, I’m enjoying where these
tools are taking things.

As soon as you have an idea that needs

At what stage should validation. This could be just a simple feature or a
you start prototyping? full-blown project but the earlier you can establish
if an idea works in practice the better and will only
save time later down the line.

14
 The type of prototyping I usually do is a
Walk us through your combination of visual and functional; by this I
process of prototyping mean I generally work on more bespoke, creative
and testing an idea. web projects that require a lot of custom
interactions and layouts. When prototyping for
this kind of work I generally jump straight into
After Effects to quickly prototype visual effects
and interactions to explore the creative
application, this saves a lot of time when moving
into the dev stage as we’ve already ruled any
concepts that don’t work, and we can get the
timings and more delicate details tuned. On larger
scale projects I’ll combine these visual prototypes
with working flows, using tools such as Adobe XD
to test out broader scale functionality.

PICK ONE OR TWO FAVORITE PROJECTS YOU DID

IN THE PAST TO ILLUSTRATE YOUR POINT.

The Epicurrence site features a lot of custom

Epicurrence interaction design, the header area alone uses a
number of techniques such as parallax layers
combined with a displacement map, both of which
took a lot of prototyping whilst working alongside
the developer on the project.

Asaro is another of my favorite projects that I’ve

Asaro worked on, again this site has a ton of custom
interactions many of which were heavily
prototyped in AE before moving into dev.

15
Colours
& Gradients
It may surprise you, but the top popular colors in UI designs have always been
pretty boring - it’s a palette of shades of grey. Yup, all the backgrounds, texts,
and whitespaces tend to be very monochrome. The good news is, however, that
all the greyness has been disrupted. While the previous year, the top 25 colors
from all design file formats in Avocode were grey, in 2018 there were three bright
colors (orange, blue, red) among the top 15!

HOW TO CHOOSE THE RIGHT PALETTE IN 2019? LET’S HEAR IT

FROM ONE OF THE TOP FOLLOWED DESIGNERS ON DRIBBBLE.

Mike / Creative Mints

Graphic Designer
creativemints.com

16
Colours Mike / Creative Mints

& Gradients Graphic Designer

WHAT’S YOUR PROCESS OF DEFINING A COLOR PALETTE?

HOW DO YOU VALIDATE SUCH DESIGN DECISION?

There is no single method to address color

selection, each case or project is unique. If you
stick to one pattern for all occasions it’s very likely
that your entire portfolio will end up looking
somewhat similar and you’ll considerably limit
your creativity.

17
 Try to get rid of color "favorites”.
Here are the main
rules of my color work Don’t let trends influence you. You
can take them into consideration of
course but don’t let some articles
e.g. “The best color of 2017" or
"Color trends in 2020" affect your
work. It’s better to build work with a
particular project objective in mind
rather than basing it on a Medium
article.

Remember, with color (as with

anything else) less is more.

Build on client's requests,

listen more than you speak.

Be open to new colors and color

mixes, always expand your horizons.
Even better - attend museums and
modern art exhibitions whilst limiting
the influence of digital trends
(something you see on Behance,
Pinterest, or Dribbble) because they
are similarly vulnerable to hype.

18
Art & Style
Designers continued getting rid of unnecessary design elements in 2018. We
believe that they drew their inspiration from postmodernists movements that put
the visual side above the functional. With unorthodox style experiments and less
focus on polishing each element, there was, in turn, less layer work (in fact, 15%
fewer layers and 23% fewer layer effects than the year before). You might be
asking; "Well, artistic experiments are nice, but what about design consistency at
my company? How can I stay creative and take a step away from what is defined
by general design guidelines?"

TO UNDERSTAND HOW CHALLENGING THIS CAN BE, WE ASKED

THE BRAND DESIGNER AT INDEED (A COMPANY WITH 200
DESIGNERS IN-HOUSE).

František Kusovsky
Brand Designer at Indeed
dribbble.com/blackyeti

19
Art & Style František Kusovsky
Brand Designer at Indeed

HOW DO YOU BALANCE PLATFORM-SPECIFIC GUIDELINES

AND INDIVIDUAL EXPRESSION IN YOUR DESIGNS?

To me, platform-specific guidelines should be a

flexible design language that helps me to create a
clear user experience that carries the vision we
set for our brand. It’s not just a UI kit - there is
more, from the processes to definitions of how we
work with the brand, motion, UX, the tone of voice
or how we approach accessibility. The list can be
pretty long.

Moving at a fast pace is not only easier in the

online environment, in comparison to the offline
world, but also much more required. Constant
design evolution is challenging, and we can hit the
limitations of guidelines very quickly. Therefore
the guidelines need to evolve consistently as well.

You’re probably asking - with all the guidance,

how can I stay creative? In my opinion, guidelines,
that are heavily based on the visual side, are
quickly going to become limiting.

20
The visual part can be very different for different
communication topics. Just look at other
industries like fashion. Some brand, like Moncler,
do a great job at creatively connecting different
dots (be it a specific product, a seasonal
collection, or taking into account the location of a
store) into a cohesive experience of products and
branding.

Guidelines shouldn’t limit your visual creativity,

but help you to build information structure,
respect accessibility principles and speed up the
process of reusing design elements in different
contexts. My point is, that if you overkill it and
define too many different styles and elements but
don’t think about their use cases while defining
them, you’re supporting inconsistent design.
When designers in your team don’t know how to
use the pre-defined elements, it’s very likely they
won’t use them correctly or not at all.

There is a tremendous opportunity to define

guidelines with flexibility, openness and
consistent team education in mind, so we better
react to those challenging conditions while using
them. But what does that mean?

21
 You have to put in a lot of effort into your team’s
constant education. Use the guideline as the
vehicle for this education rather the book of rules.
When there are more design teams in your
company, don’t be afraid to make the guidelines
team-specific. At this scale, a global company
guideline would be too complicated for designers
to navigate in. Narrow it down for every team and
include only the things they really need.

Team-specific guidelines don’t mean that the teams

are supposed to do things differently but are
digestible enough, so they will be used “in action”.

This is another way how guidelines can liberate

your innovation instead of limit it. When you’re
designing at scale, having a guideline makes
sense. Just don’t forget to question it and look
behind it.

22
Typography
For many years there wasn’t much variety in font files on the web. In most cases,
designers would go for a free Google Font. However, something changed in
2018. Four-times more unique fonts appeared among design files in Avocode in
comparison to the year before. 2018 was about diversity in typography. Small
type foundries have started to offer their custom typefaces ready for the web in
the WOFF and WOFF2 formats and the big ones, like Font Squirrel, even
introduced web font generators. This is great news! There are no more excuses
for choosing a unique font.

TO FIGURE OUT HOW TO DEFINE A TYPOGRAPHIC STYLE WE

APPROACHED A GRAPHIC DESIGNER FROM THE WORLD-
RENOWNED STUDIO NAJBRT.

Michal Dolejš
Graphic Designer at Najbrt
michaeldolejs.com

23
Typography Michal Dolejš
Graphic Designer at Studio Najbrt

WHAT CRITERIA DO YOU FOLLOW WHEN DEFINING A

TYPOGRAPHIC STYLE FOR A PRODUCT OR EXPERIENCE?

If we don’t count recent trends in web design,

user interfaces or graphic design as a whole,
typography has always been Achilles heel of
every designer. It doesn’t really matter if you are a
skilled product designer trying to make the best
new dashboard product or junior graphic
designer who is just starting out, in today’s see of
products and websites that look the same,
designers need to revisit the essential rules that
were created in the middle of the 20th Century,
where the legibility of the message in an
attractive package was the most important factor.

These basic principles could be found in books

like Vignelli Canon by Massimo Vignelli or An
essay on Typography by Eric Gill. They are still
relevant even today when being messy is more
trendy. These books will show you the basics of
typography, but mainly give you confidence and
understanding of what makes sense and what
doesn’t. Correctly set typography with precisely
defined styles, sizes, colors, and contrasts are the
simplest things every designer can do to start a
project.
24
Don’t be afraid to experiment. Act like the website
is a poster or blank piece of paper and try
different versions of text styles that work well
within the content you have. This approach
doesn’t work everywhere, but sometimes it’s okay
not to follow the rules, especially if your visual
identity is playful from the start. Try to keep things
classy with serif typefaces which are more
readable for longer texts. Or get rid of the thrills
and use any of the sans serifs and let the content
speak for itself. It’s up to you. When possible, use
colors that are contrasting enough, so the
message doesn’t blend within the background.
You can always check it with any Web Content
Accessibility Guidelines tools like the Contrast
app for macOS, so people with visual impairment
aren’t left behind.

There is still a lot to be done in terms of

typography on the web. Recent updates like
variable typefaces and other Open Type features
are great, but both the tools and mindsets of the
designers could still progress more. And even
though the tools like Sketch and Figma are the
best apps we had for quite some time, I still think
that typography is the one feature that is still very
underdeveloped in any of them.

25
 For example, print-based tools like InDesign or
Illustrator have everything that a graphic designer
would want but sadly aren’t very connected and
lightweight in the way digital design has
developed. So the more we push the technology
to adapt some of the playfulness and principles of
the graphic design, the better.

There is still a lot to be done in terms of

typography on the web. Recent updates like
variable typefaces and other Open Type features
are great, but both the tools and mindsets of the
designers could still progress more.

Even though the tools like Sketch and Figma are the
best apps we had for quite some time, I still think
that typography is the one feature that is still very
underdeveloped in any of them.

In the end, try to make sure to cover all the needs

you, and most importantly the client might have.
We as designers have a responsibility to make
things better for people around us. Let’s guide the
ones who might not feel all the little details that
we as designers like to argue about and rant all
day long.

26
Conclusion
2018 was special for us at Avocode. For the first
time, we had data not just from Sketch and
Photoshop, but also Adobe XD, Illustrator and
Figma design files. While the distribution of
formats in Avocode was not even, we hope that
this analysis of 6M design files across the design
landscape of 164 countries has helped you
understand where the whole market is going. For
example, why are the top 3 UI design tools
covering more parts of the design process, or why
design systems will become the source of truth
for business scaling.

If you learned something new or simply felt inspired,

we’ll be happy if you share your feedback on Twitter.
Just tag @avocode and let us know how we can
make next year’s report even better.

As much as we love data, we know that design is

a creative craft and your aesthetic decisions are
often more “felt” than data-driven. We hope that
you enjoyed the art pieces on our web and that
the personal experiences in this e-book offered
you some insights to draw from.

27
Thank you
Please give a round of applause (or a shout out
on social media) to the incredibly talented artists
and experienced designers who celebrated
creativity and shared valuable insights with us
in this report.

EXPERTS IN THE FIELD

Darin Dimitroff Magdalena Kozlicka
Product Designer / Webflow behance.net/magdalenakozlicka

Linzi Berry Janis Andzans

Design System Lead at Lyft janisandzans.lv

Denis Rojčyk Ben Tobias

Senior UX Designer dribbble.com/thisisben
at Kiwi.com

Nathan Riley Ilona Rybak

Design Director at Green dribbble.com/rybaki
Chameleon

Mike / Creative Mints Sofia Salazar

Graphic Designer sofisalazar.com

František Kusovsky Diana Stoyanova

Brand Designer at Indeed, dianaxstoyanova.dribbble.com
ex-Intercom

Michal Dolejš Maxime Bourgeouis

Graphic Designer maximebourgeois.com
at Studio Najbrt
28
JOIN 10,000 DESIGNERS WHO ARE USING AVOCODE
TO SAVE TIME ON DESIGN HAND-OFF AND FILE VERSIONING

Just import your Sketch, Adobe XD,

Figma, Photoshop, or Illustrator files to
Avocode and invite your developer. Start
a free trial and if you enjoy using it, enter
design-report-2018 promocode in the
checkout to get a 20% discount.

Hand-off Get all Sync

any design assets unlimited
file dev-ready versions

TRY AVOCODE FOR FREE

Avocode has become an integral part of my work.

Having access to any design, anywhere in the
world along with a fast and powerful tool for the job
– it made my life so much easier. Quality that
deserves respect.

Maxim Goleshev
AODM
An overview of 2018 design trends based on data from 6 million designs.

If you’d like to learn from other design and development professionals check out
our series The Grit at avocode.com/blog and follow @avocode on Twitter.

Written by: Matouš Roskovec, František Kusovský, Denis Rojčyk, Linzi Berry,
Mike, Michal Dolejš, Darin Dimitroff, and Nathan Riley.

Edited by: Matouš Roskovec and Maks Karpovich.

Design: Jan Vu Nam and Thomas Habr

© 2019 Avocode Inc.

Please do not share this e-book as a whole without our consent. When you’d like to
write about it, quote particular sections, please give @Avocode appropriate credit and link.