2016Web DesignFull Report

AVOCODE

Data analysis based on 1,127,302 Photoshop & Sketch designs.

Introduction

Web Design Tools

Design Components

Design Revisions

Design File Size

Web Fonts

Color Trends

Blend Modes

Layer Effects

Border Radius

Report Summary

Contact Information

Contents:

Index

2

3

5

6

7

8

10 - 11

12

13 - 14

15 - 16

18

19

20

You have probably seen enough reports that inform you about hamburger menus and curly headline typography. This is not one of them.

This study covers the design process from the point when the design is ready to be shown to others to the point when it’s ready to be coded.

We’re striving for an in-depth look at what design files consist of and why is it so. Our hypothesis is that modular, lightweight, and highly iterative design is key to a functional design process.

We believe that newly emerging design tools are defining, if not dictating, new types of workflows, which influence things like design file size or the ease of file sharing, and, therefore, the number of revisions.

This is not anordinary report

Introduction

3

The purpose of this study is to reveal and understand the stable and changing trends in web design based on over 1M Photoshop & Sketch designs.

Since time is the only thing that can really validate a trend, we’re interpreting data that come from Photoshop and Sketch designs as they changed between the end of 2015 and the end of 2016. These designs come from Avocode users - both freelance and corporate.

Though Avocode recently (January 2017) started supporting mobile app development (iOS, Android & React Native), it wasn’t the case in 2016. Therefore all analyzed designs for this report were web related.

In order to render these designs properly in Avocode, we have to track all design layers in detail. This is done completely anonymously by our encrypted rendering engine. After the year ended, we pulled the data from our database, gave them some love and bam - the 2016 Web Design Report was born.

Where do the datacome from?

- Jan Vu Nam (Head of Product Design / Avocode)

“If you believe that novelty drives progress, it only makes sense to quickly adapt to new design tools to make your

design process more efficient.”

One designer with Photoshop and a developer with Photoshop and Sublime editor is no longer enough. These days you need to wireframe & mockup, prototype, design, hand-off, inspect, comment, iterate, prototype some more, inspect some more, code and test… and repeat. Design has become a long and cyclic procedure. The question of design speed was inevitable.

In 2012, Apple honored Sketch app with a design award, which gave it a boost to become a world known (if not the gold standard) tool for digital design. At the time, almost all web designers were working in Photoshop and Illustrator - tools that weren’t built for such a purpose, yet could be used/tweaked to be “good enough.”

In the meantime, the game started to change. Sketch became quite popular in the mobile design community thanks to its easy to use artboards which represent individual screens. While others were sleeping, Sketch kept innovating and adding new features to cover more of the design cycle (e.g. Symbols for faster iteration, Export for hand-off, or Mirror for mockups).

Why are designers quickly adapting to new tools?

Web Design Tools

5

Finally Adobe realized the market shift and started working on Project Comet which turned out to be Adobe Experience Design in 2016. During the past two years the web design market was flooded with new tools like Affinity Designer, UXpin, Figma or Framer.js. This is good news, because with more competition, more innovations are likely to appear.

Photoshop

Photoshop vs. Sketch use forweb design in the past two years

2015 201657%

43%

59%

41%

Sketch

Symbols are perfect for designing (assembling) quickly and for changing the design quickly. Say you have a button style that you’d like to use it across your design. Normally you’d have to copy the original layer to use the same style. For example, changing a color of all buttons would mean going one by one.

What makesSymbols so useful?

Design Components

6

With Symbols you’re creating a box of bricks that you can reuse (insert) and change all at the same time (via the Master Symbol). What sets Symbols apart from other variable design components is their option to apply so-called “Overrides” to change the text and bitmap image content of each Symbol without changing the style. You can even have Symbols nested within Symbols (it’s like Inception).

Each Master Symbol can be added to your Symbols page, which works just like any other page in Sketch. When you share

this page with your developer, they can use it as a style guide to create classes that they will apply all across the website.

All of these amazing features were introduced by Sketch in April 2016. Since then we have seen a 760% growth of their usage. Now every 3rd Sketch artboard (on average) contains a Symbol. Symbols have also spread into other tools like Affinity Designer or Adobe Xd and their popularity and functions are expected to grow steadily in 2017.

With Symbols you’re creating a box of bricks that you can resuse and change

all at the same time.

Share of Sketch designs containing a Symbol

4,4%

Apr. May June July Aug. Sept. Oct. Nov. Dec.

10,0%7,6%

9,9%

25,7% 27,8%31,5%

33,4%

17,3%

2016

Why are Photoshop designs changed only 2x and Sketch designs 4.5x on average before they are coded? Well, let’s assume that designs that are changed more are also easier to change. When you look at the history of design versioning, the number of design revisions for Photoshop has hardly changed, while Sketch designs are iterated more and more in time.

It can take a few weeks for consumers to change their perception of web design, while it can take a few months to redesign your website to keep up the pace. Therefore, designers are forced to come up with a system that allows them flexible changes. Changing a color of multiple objects to the same color and keeping their other properties different (like text) takes an uncomparable amount of time in Photoshop and Sketch. This is where Smart Objects lag behind Symbols, and that’s just one example of large scale editing of the design.

If we focus on minor changes - like changing a headline and its typeface - you could say that there is no difference in the revision process. However, to calculate the entire ease of design

Versioning speed might be the future of web design

Design Revisions

7

hand-off, you have to account for the export time, file size, and, therefore, sharing time.

If the sharing of the given file format is too slow, it’s simply not worth it. Consequently, the redesign happens only in code without a design template, which will be reflected in the quality of the final result.

Number of design revisions (on avg.)

2016

2015

Sketch Photoshop

3,402,10

4,502,08

It can take a few weeks for costumers to change their perception of web design,

while it can take a few months to redesign your web design to keep up pace.

“Why am I reading this?” That is a crucial question for you, me, and every modern internet user. Attention has become the modern currency (not only on the web). Therefore designers are stripping away what is distracting and secondary for the user.

Less clutter within the design makes it smaller and easier to share

Design File Size

8

Fewer elements in the design means a smaller design file and easier file sharing. And web designs are in fact getting smaller.

The average Photoshop file has dropped from 24.37 MB (2015) to 8.62 MB (2016) and the average Sketch

artboard size has decreased from 2.99 MB (2015) to 1.97 MB (2016).

The average Photoshop file has dropped from 24.37 MB (2015) to 8.62 MB (2016) and the average Sketch artboard size has decreased from 2.99 MB (2015) to 1.97 MB (2016). To really understand design file size you have to look at what’s inside.

It’s not only designers and developers who are happier about decreasing file size. It’s also the end internet user, since simpler websites, with less bitmap images, load faster and consume less data.

One of the reasons for smaller PS designs is the decline of Smart Objects (from 5.19 to 2.68 per design on avg.) which usually contain bitmap images that inflate the design size. By the way, an average Photoshop file layer stack contains 15% bitmaps and 30% vector shapes., while an average Sketch design layer stack contains 5% bitmaps and 50% vector shapes.

However, it’s not only designers and developers who are happier about decreasing file size. It’s also the end internet user, since simpler websites, with less bitmap images, load faster and consume less data.

Benjamin Bely (Illustrator)

“Tools always have limits if you think about it. When tools evolve,

possibilities evolve too, and design follows.”

Do you hate reading on the web? Most people do. Yet, text layers aren’t going anywhere… Text layers still take up to 31% of Photoshop design layers and 24% of Sketch design layers. Close to 100% of all of the Photoshop and Sketch designs we analyzed contain at least one text layer. And these numbers haven’t really changed for the past two years.

Sans fonts arepopular thanks to their readibility

Web Fonts

10

The modern Internet user has learned to scan a webpage instead of reading it. In order to convey some information to them, the text on page has to be easy to read. That has a lot to do with the way the text is laid out. When we look at the division of fonts among text layers, serif fonts don’t even make it in the top twenty (during the past two years).

Text layers still take up of 31% of Photoshop design layers and 24% of

Sketch design layers.

Though displays are getting better and their contrast is getting closer to a printed page, serif fonts are popular only on a few blogging sites (like Medium) or as a part of dramatic headline typography (e.g. on commercial microsites).

The most popular fonts on digital screens are still sans fonts like Open Sans, Roboto, Lato, Proxima Nova, Sans Francisco, Monserrat and so on. Google Fonts states that Open Sans is nowadays the most popular font on the web. Nevertheless, when we looked at PSD and Sketch 2016 web designs, Roboto led the way. Perhaps this Google-material-design-font will reign the entire web soon.

See next page for a division of fonts among design formats.

Though displays are getting better, serif fonts are popular only on a few blogging sites or as a part of

dramatic headline typography.

Web Fonts

11

Share of designs containing top 7 fonts

Photoshop Sketch

Roboto

Open Sans

Arial

Lato

Helvetica Neue

Proxima Nova

Source Sans Pro

13,08%22,54%

15,77%9,84%

11,99%6,43%

9,20%7,77%

8,95%3,47%

7,06%8,29%

2,85%3,89%

Roboto

Open Sans

Arial

Lato

Helvetica Neue

Proxima Nova

Montserrat

19,01%24,14%

6,26%10,48%

5,32%11,36%

4,12%7,08%

5,30%5,89%

13,18%5,15%

12,58%17,74%

2015 2016

In 2016, white color appeared in 55% of all Sketch designs (+23% growth since 2015), and in 25% of PS designs (-20% decline since 2015). Also the shades of grey have grown by 2% in Photoshop and dropped by almost 4% in Sketch. The amount of black color was quite similar in both design formats for the past two years (around 6%).

If you look at the data from the other side, 45% of Sketch designs and 75% Photoshop designs don’t contain a single white layer. That means that 45% of Sketch designers and 75% of Photoshop designers had to change the canvas background that is white by default.

So, why are Photoshop designers behaving so differently than Sketch designers when it comes to color? We can offer two explanations: • Sketch designers are designing with attention to contrast

and readability, since it’s easier to distinguish dark elements on a light background.

A mystery behind dark PSDs and pale Sketch designs

Color Trends

12

• The default UI color of the given tool has an unconscious impact on the designers mind and might impact what the final design looks like. (Btw Affinity Designer just announced a big update headlining with light UI. Do you dare to guess the impact of this?)

Share of designs containing a given color

Sketch Photoshop

2016

2015

white

grey

black

32,63%45,73%

15,56%6,71%

7,67%6,86%

white

grey

55,5%

black

25,4%

11,98%8,83%

6,29%6,91%

In general, the usage of blending modes has dropped by 21% per design among Photoshop designs, and by 3.5% among Sketch designs between 2015 and 2016.

Blending mode is a feature that allows you to blend together the original color of one layer with another layer that is applied on top of it. Based on the blending mode you choose, the color pixels are multiplied, have higher contrast between each other, and so on.

There are also blending modes that are not typically used for finding a new color. For example, Pass Through blend mode (Photoshop) is used for flattening a layer group and Normal blend mode (Sketch) is pre-set on any new layer by default. Nevertheless, even these blends have been decreasing: In 2016, 98% of Sketch designs contained the Normal blend mode (2% less than in 2015) and 93% of Photoshop designs contained a

Are designersfinally starting to give up on their guilty pleasure?

Blend Modes

13

Pass Through blending mode (4% less than in 2015).

If you look at the numbers (see next page) you’ll find out that, generally, Sketch files have about 3 times less blending modes. The reason is quite simple: the color of vector shapes (which are more favored in Sketch than in Photoshop - see section Design File Size) is easily changed without using a blending mode. On the other hand, the color of bitmaps (more popular among Photoshop designs) require blending modes to be easily darken, lighten, and so on.

Blending modes are one of the things that is powerful for a designer and painful for a developer. While clicking on a blending mode in Photoshop is easy, manually recreating them in CSS is tricky and sometimes close to impossible. It’s good news for all developers that designs are getting more simple and the number of blending modes keeps dropping.

Blending modes are one of the things that is powerful for a designer and

painful for a developer.

Blend Modes

14

Multiply

Overlay

Screen

Soft light

Darken

Luminosity

Lighten

22,63%

Color

13,27%

6,99%3,00%

6,33%6,00%

4,37%1,77%

2,83%3,52%

2,99%2,74%

1,51%1,19%

2,13%1,27%

2015 2016

Share of all Photoshop designswith a given blending mode

Multiply

Overlay

Screen

Soft Light

Darken

Luminosity

Lighten

Color

2015 2016

6,66%4,00%

0,74%1,13%

0,07%0,24%

0,82%1,15%

0,63%0,36%

0,23%0,51%

0,52%0,54%

0,24%0,30%

Share of all Sketch designswith a given blending mode

Puff! Was it magic? Probably not. It seems that flat designs have really been a hit in 2016. Most layer effects (like shadows, gradients, and patterns) add a sense of depth and every layer makes the design more complicated (which, in turn, adds a few lines of CSS code).

While Stroke and Drop Shadow still remain the most popular layer effects, all design layer effects dropped by more than half in both Photoshop and Sketch between 2015 and the end of 2016 (see next page for details). For example: while 41% of all PS designs contained Drop Shadow in 2015, it was 17% in 2016 (that’s a 58% decrease). The same goes for Patterns - over a 60% decrease for PS designs, almost a 30% drop for Sketch designs.

Where did more than half of the layer effects go?

Layer Effects

15

However the most striking is the decrease of Gradients. Gradients has been a big topic since 2014 - starting with image overlays and then moving to everything from a background to icons. In 2016, the Gradient Fill effect has appeared only in 8.4% of Photoshop designs (in compare to 35% in 2015 - that’s almost a 76% decrease) and in 10.7% of Sketch designs (compared to 20.6% in 2015 - that’s a 48% decrease). Perhaps this signifies an end to one trend and a start to another...

“I do think my visual identity would be drastically different if I wasn’t using Photoshop to create my illustrations. After all, the only reason I use Photoshop over Illustrator is because I found the gradient tool in PS way easier to use! If I didn’t have a choice and had to use Adobe Illustrator, I would probably find myself using a lot less gradients.”

- Maxime Bourgeois

However the most striking is the decrease of Gradients.

Layer Effects

16

Drop-shadow

Stroke

Gradient-fill

Inner-shadow

Pattern

Blur

2015 2016

Share of all Sketch designscontaining top 6 layer effects

58,81%25,12%

48,1727,82%

20,69%10,69%

10,42%5,26%

12,33%8,68%

10,42%3,27%

Drop-shadow

Stroke

Gradient-fill

Inner-shadow

Pattern

Bevel-emboss

2015 2016

Share of all Photoshop designscontaining top 6 layer effects

40,97%17,04

38,20%14,73%

34,90%8,42%

13,02%5,84%

1,59%0,91%

7,392,74%

- Murat Mutlu (Co-Founder / Marvel)

“I think that new tools going mainstream drive new behaviours. Sketch has introduced this new wave of what feels like ‘design technicians’, going a lot further with design files than we did with Photoshop.”

What kind of design report would this be if we didn’t remind you of some general design standards? Let’s have a look why 83.8% (Sketch) and 86.9% (Photoshop) of all shapes with an adjustable border radius have rounded edges and why these 2016 numbers remained quite similar to the year before.

When you put rounded shapes beside each other, they feel whole, stand out, and lead your focus in the center of them. When you do the same thing with edgy, rectangular shapes (which align with the screen border) you are creating a sense of grid and the elements become harder to distiguish - they all feel similar.

Curvy and rounded shapes feel natural and real (they are found in nature) and pointy, edgy shapes feel artificial and new. When you are aiming for a modern or a techy website, just throw in more squared shapes.

Now, what general edgy shapes can you think of when you think about a website? Well, all bars and background rectangles need to completely fit into rectangular screens, right? So there is no reason to give them rounded corners, is there?

Why are rounded shapes so popular?

Border Radius

18

And why there are so many rounded shapes? Simply because they stand out, draw more attention and make you want to touch/click them. With the rise of the mobile-first approach, the “Do I want to touch this?” has become extremely important.

Rounded

Share of all shapes with a roundedand edgy border radius

Edgy Rounded Edgy

2015 201586,9

13,1

83,8

16,2

2016 201692,1

7,9

84,0

16,0

2016 was a very fruitful year when it comes to the emergence of new design, prototyping, and inspecting tools. With more tools on the market, designers are learning to try, test, and switch from one tool to another in order to find the most suitable one.

The ease and speed of iterations becomes the key factor in efficient web design development. Let’s sum up the most interesting numbers: While PSDs are generally revised two times per design, the number of revisions in Sketch keeps growing (at the end of 2016 at 4,5 on avg.). Perhaps Symbols are to thank.

To keep up the pace with the new lightweight (mostly vector based) design formats, Photoshop designers are using half the layer effects and half the Smart Objects compared to the previous year. This resulted in 3x smaller PSD files on average.

We believe that, all design trends like minimal, flat or modular design will grow in popularity, since they prefer:a. solid colors, subtle gradients and vector illustrations to deep

shadows and heavy imagery,b. easily changable and replacable components to sturdy

design blocks.

How designers worked in 2016?

Report Summary

19

Aleksandar Savic Arzu Sendag Barbora Togel

Benjamin Bely Maldo Malacek Maxime Bourgeois

Steve Orchosky Turgay Mutlay Zhivko Terziivanov

Big thanks for theillustrations goes to

Avocode is a fully-featured tool for your design-to-code workflow. 10,000+ designers and developers are using it to share and inspect Photoshop & Sketch designs to build web and mobile apps as beautiful as they were designed.

Avocode stands out among its competitors thanks to its robust rendering engine that gives you real access to design layers to measure, export, and slice a selection of layers.

Avocode is backed by 500 Startups, Kima Ventures, Teec Angel, Wisemont Capital, Jeremy Yap, and Sachin Dev Duggal. It is headquatered in Prague, Czech Republic.

This study wasconducted byAvocode

Contact Information

20

Research Directors

Matous RoskovecContent Strategist

Filip GresArt Director

Martin DurisHead of Marketing

Tomas RychlikHead of Technology

Feel free to ask us anything at team@avocode.com.

Need help with design hand-off?Join companies like Salesforce or Spotify which are already using Avocode to

easily share and inspect Photoshop and Sketch designs.

Get a special 30 days free trial

No credit card required.