際際滷

際際滷Share a Scribd company logo

2017 full-design-report-by-avocode

J
Janr Vu

The document provides a summary of design trends in 2017 based on an analysis of over 2 million design files uploaded to Avocode between January and December 2017. Some key findings include: - Design files are getting smaller as designers adopt practices like modular design, granular components, and removing unnecessary elements. Average layer counts and effects are down. - Sketch has overtaken Photoshop as the most popular design tool, partly due to Sketch files being much smaller in size. Vector formats like Sketch and SVG are also replacing raster formats like PNG and JPEG for exported assets. - Designers are increasingly adopting development practices like responsive design, version control, and design systems to facilitate collaboration and iteration. Interconnectivity

1 of 13
Download to read offline
2017 full-design-report-by-avocode
Contents Introduction Designers are adopting development practices Designers are cutting out unnecessary parts Design file size matters. And its going down Copywriters, we got good news Report Summary Conntact Information 3 4 6 7 10 11 12
The 2016 Design Trend Report which announced the dramatic shift from Photoshop to Sketch turned out to be quite popular. The website, which won Awwwards - Site of the Day, was seen by 140,000 people only in 2017 and 19,000 folks have downloaded our PDF report. Encouraged and extremely grateful to the design community, were putting before your eyes the 2017 Design Trend Report. Just like the years before, this study is mapping out consistent, changing and emerging trends that can be observed during the very final part of the design process - the design hand-off. Our hypothesis for the 2017 year (modular, lightweight, and highly iterative design is key to a functional design process) turned out to be quite correct. Design size still keeps dropping, design tools are getting smarter, and due to the rising speed of versioning, designers are cutting out unnecessary objects. Where do the data come from? Between 1st of January 2017 and 31st of December 2017 designers from 164 countries uploaded 2,024,815 (almost twice as much as the year before) of Adobe Photoshop and Sketch designs to Avocode. This amount of data provided us an in-depth look at how design size, versioning, layer count, layer effects and other significant factors have changed throughout the years. Introduction 3.
Designers are adopting development practices that you dont need to store everything duplicated in each state of the design comes, of course, from web development. The trend of accepting practices and workflows from developers is evident also in other departments. Responsivity While developers came up with flexbox to make responsivity development easier, designers are now invited to use Smart Guides in Sketch or the Repeat Grid and responsive layouts in Adobe XD. Dependencies You might have heard about NPM software registry, right? Well, at the end of 2017, Sketch listed 426 Plugins and Adobe introduced Add-ons marketplace for Photoshop and other creative tools. Adobe XD has also introduced integrations with third party tools. Version control You surely know about GitLab, especially if youre building one product with multiple people. Since designers too need to know which version is final, Folio, Abstract, Kactus, and Plant have launched a self- standing design version control tools to address this issue. Systems Just like pre-coded UI kits or libraries of ready-made code components, designers Interconnectivity Remember the time when developers used only HTML tags for styling websites? Or perhaps the time when they used in-line CSS styling inside the HTML document? Luckily, those times are far gone, and most developers either link CSS style sheets from the HTML document or if they code in React (or other view frameworks), they use even more granular structure. In other words, developers have adopted UI- kits (styled HTML components) for easier and even faster development. Lately, designers have started to adopt these practices as well. First,artboardshavereplaceddesigningon one rigid canvas. Then you may remember linked smart objects in Photoshop PSB files. But it was the introduction of Sketch Symbols that changed the game. The idea Designs are getting more interconnected and granular. Only in 2017, Sketch files got 32% smaller while there were 25% more artboards per design on average. Also, the use of Symbols grew by 25%, so now every second artboard on average contains a Symbol. 4.
are all about Design Systems. There are already some public solutions, but we expect this trend to unfold in 2018 really. I honestly believe that the closer you bring designers and developers together, the faster you can progress in your projects. -Vu Hoang Anh (CEO @Avocode) 5.
Designers are cutting out unnecessary parts Evidently, its not about adding more whitespace but focusing more on shipping fast. From what we have observed, designs that have smaller layer count are Surprisingly this trend is not strictly speaking aesthetic, but practical. The puristic and minimal design, which was at its peak around 2015, is still popular. While companies like Dropbox, Intercom, Typeform have recently start to play with more abstract illustrations, popping colors and add more illustrations, asymmetry, patchwork, the design file layer structure is actually still getting more simple. In fact, average layer count has dropped by 46% for per Adobe Photoshop design and by 32% per Sketch design. Also, the number of layer effects per design dropped by 13% (Photoshop) and 28% (Sketch). iterated more often (i.e., have more design versions). Apparently, designers still pay more attention to whats important to the user than to fancy decorations. 6.
Design file size matters. And its going down order).Wetoohaveseenaprevalentgrowth of Sketch app usage (2017: 62% Sketch designs vs. 38% Photoshop designs). We could argue, that lightweight and small file output of tools like Sketch, XD, or Figma is and important factor in their adoption by designers. Shift in the design toolset Its not that big of a surprise that the decrease of layers has a direct impact on design file size. Whats more interesting, however, is the giant difference of design file size when it comes to design format. Unlike Photoshop, Sketch is a vector based design tool and therefore can keep your files much smaller. Raster file formats (like PSD) store data related to each layer (even vector shapes) as bitmaps and therefore need to keep data for each pixel, whereas vector-based formats (like Sketch) store most of the data as a geometric description and maintain the information related to pixels only for bitmap layers. According to UX tools 2017 survey, the 5 most popular interface design tools on the market are Sketch, Photoshop, Adobe Illustrator, Adobe XD, and Figma (in that 7. Sketch files are up to 7.7x smaller than Photoshop files. Plus average Photoshop file contains 27 bitmap layers, while an average Sketch file only 10.
Last year when we spotted the growing use of Sketch, we decided to encourage this trend by building the first ever Photoshop to Sketch Design Converter. The demand for transferring from Photoshop to Sketch is indeed huge. Just in 5 months, since we released the converter beta version, we converted 52,236 PSD files (for companies like Tesla, Atlassian or Microsoft - see other reactions on the next page). Since Adobe XD has introduced a free plan in May 2018, we expect to see a 8. decline of Photoshop users (especially those who were using the tool only for screen design) and rapid growth of XD user adoption. Since Adobe XD is now the first stable screen design tool that offers a free plan as well as macOS & Windows desktop app, we will definitely see a decline in Sketch app user adoption growth if not a decrease of the current Sketch user base. Shift in image export With the higher awareness of file size, both designers and developers appreciate lightweight image assets that scale easily and are prepared for high-resolution screens. In fact, the web loading time matters now more than ever. For example, Behance 2018 Design Trend Research found out that: An estimated 47% of users browsing the internet expect a website to load within 2 seconds or less. Additionally, this article by Watb says that: PNGs increase in HTTP requests and thus a slow down the site. SVGs are not only smaller in filesize, but the XML can be embedded inline to your HTML, eliminating HTTP requests and speeding up your site. While PNG is still the most exported image asset format (66.84% of all assets exported from Avocode in 2017), SVGs have replaced JPEG as the second most exported format with 19.18% of all assets exported from Avocode in 2017. Additionally, 98% of Avocode users use automatic image optimization of PNG, JPEG, and SVG images. For example the open-source PNG image optimization were using has saved up to 60% of file size per each exported asset, and the SVG image optimization has saved up to 80% of file size per each exported asset. The average input Photoshop design was 36.76MB large and the Sketch output 4.76MB large. We realized that our service could not only save designers hours on recreating designs, but we can also save them 32MB per design files.
It is so easy and serves a very important purpose. Aeron Ridgeway Best Buy As UI designers we were using Photoshop but gradually switched to Sketch. The converter helped us a lot during the switch. Xiu Xuan Xie Alibaba Cloud I needed to do a quick conversion, and with your tool, I found what I was looking for, I was pleasantly surprised. So amazing! Yolanda Rubio Fernandez Zara I am pretty happy with the result of the testing file I ran yesterday. I will definitely recommend to our team to start using this service. Wenny Lo Salesforce Avocode PSD to Sketch Design Converter saves 32MB per file on average
Copywriters, we got good news! short attention span of web users. The growth of text layers (see the chart below) signifies that designers got more confident that people are willing to read again. Unfortunately, we are unable It seems that 2017 was full of stories. While the total layer count decreased, text layers were actually going up (probably at the expense of bitmaps and shapes). For many years text has been pushed away, especially because of the to count the number of characters to determine if sentences and text blocks are getting indeed longer, but judging from the rise of text layer count, we deduce that design in 2017 has gotten surely more explanatory than it used to be. Typography as a trend is also one thing we definitely should not leave out. While every word still needs to be carefully selected to fit into your design story, some text characters have become design symbols on their own. But in 2017 the amount of PSD text layer per design grew by 25%, and the amount of Sketch text layer per design grew by 10%. 10.
Report Summary After going through tons of data from 2,024,815 designs, were excited to say that designers and developers are coming closer together. However, we believe both parties still have a lot to learn from each other. The two most significant continuous trends were: 1. The sophistication of smart design tools Design tools respond to developers impact on designers, represented with version control and design systems in 2017. We expect that design tools will keep getting smarter - for example, in 2018 hope to see an option to mark design object (layer group or a Symbol) semantics such as button or inputs. 2. The apparent appeal of lightweight files Sketch has dominated the screen design market by providing a lightweight vector-based format. We have seen that converting from PSD to Sketch can save up to 8 the file size. We expect that Figma and Adobe XD will steal some of Sketch and Photoshop users in 2018, especially because they are not only lightweight and vector-based but also cross-platform. 11. Weve also mapped out two most significant short-term shifts in design trends: 1. The lack of unimportant elements in designs We were excited to welcome this trends. Getting rid of unimportant layers and layer effects help designers focus more on functionality and UX which is something we all benefit from. 2. Highly scalable and lightweight image assets Image formats and image optimization play a key part in todays design which needs to be both incredibly scalable but also load fast without discriminating users with slower internet connection. With the rise of interactive design we expect more and more design parts being represented in code and less and less in bitmaps in 2018.
Big thanks for the illustrations goes to This study was conducted by Avocode Avocode is a fully-featured tool for your design-to-code workflow. 10,000+ designers and developers are using it to directly import, share and inspect Sketch, Adobe XD, Photoshop, & Figma designs designs on any OS to build web and mobile apps faster. Avocode stands out among its competitors thanks to its robust Monroe rendering engine that gives users real access to design layers. Avocode is backed by 500 Startups, Kima Ventures, Teec Angel, Wisemont Capital, and Jeremy Yap. It is headquartered in Prague, Czech Republic. Contact Information Research Directors Feel free to ask us anything at team@avocode.comMatou邸 Roskovec Creative Lead Martin Duri邸 Head of Marketing Tom叩邸 Rychl鱈k Head of Technology Lina Leusenko Stefano Marra Janis Andzans Adam Mihalov Diana Stoyanova Nugraha Jati Utama 12.
Hand-off designs to developers without preparing assets Join 10 000+ designers and developers who hand-off and inspect Sketch, Figma, and Adobe XD files with Avocode and finish web, iOS, Android and React Native projects faster. TRY AVOCODE FOR FREE

More Related Content

2017 full-design-report-by-avocode

  • 2. Contents Introduction Designers are adopting development practices Designers are cutting out unnecessary parts Design file size matters. And its going down Copywriters, we got good news Report Summary Conntact Information 3 4 6 7 10 11 12
  • 3. The 2016 Design Trend Report which announced the dramatic shift from Photoshop to Sketch turned out to be quite popular. The website, which won Awwwards - Site of the Day, was seen by 140,000 people only in 2017 and 19,000 folks have downloaded our PDF report. Encouraged and extremely grateful to the design community, were putting before your eyes the 2017 Design Trend Report. Just like the years before, this study is mapping out consistent, changing and emerging trends that can be observed during the very final part of the design process - the design hand-off. Our hypothesis for the 2017 year (modular, lightweight, and highly iterative design is key to a functional design process) turned out to be quite correct. Design size still keeps dropping, design tools are getting smarter, and due to the rising speed of versioning, designers are cutting out unnecessary objects. Where do the data come from? Between 1st of January 2017 and 31st of December 2017 designers from 164 countries uploaded 2,024,815 (almost twice as much as the year before) of Adobe Photoshop and Sketch designs to Avocode. This amount of data provided us an in-depth look at how design size, versioning, layer count, layer effects and other significant factors have changed throughout the years. Introduction 3.
  • 4. Designers are adopting development practices that you dont need to store everything duplicated in each state of the design comes, of course, from web development. The trend of accepting practices and workflows from developers is evident also in other departments. Responsivity While developers came up with flexbox to make responsivity development easier, designers are now invited to use Smart Guides in Sketch or the Repeat Grid and responsive layouts in Adobe XD. Dependencies You might have heard about NPM software registry, right? Well, at the end of 2017, Sketch listed 426 Plugins and Adobe introduced Add-ons marketplace for Photoshop and other creative tools. Adobe XD has also introduced integrations with third party tools. Version control You surely know about GitLab, especially if youre building one product with multiple people. Since designers too need to know which version is final, Folio, Abstract, Kactus, and Plant have launched a self- standing design version control tools to address this issue. Systems Just like pre-coded UI kits or libraries of ready-made code components, designers Interconnectivity Remember the time when developers used only HTML tags for styling websites? Or perhaps the time when they used in-line CSS styling inside the HTML document? Luckily, those times are far gone, and most developers either link CSS style sheets from the HTML document or if they code in React (or other view frameworks), they use even more granular structure. In other words, developers have adopted UI- kits (styled HTML components) for easier and even faster development. Lately, designers have started to adopt these practices as well. First,artboardshavereplaceddesigningon one rigid canvas. Then you may remember linked smart objects in Photoshop PSB files. But it was the introduction of Sketch Symbols that changed the game. The idea Designs are getting more interconnected and granular. Only in 2017, Sketch files got 32% smaller while there were 25% more artboards per design on average. Also, the use of Symbols grew by 25%, so now every second artboard on average contains a Symbol. 4.
  • 5. are all about Design Systems. There are already some public solutions, but we expect this trend to unfold in 2018 really. I honestly believe that the closer you bring designers and developers together, the faster you can progress in your projects. -Vu Hoang Anh (CEO @Avocode) 5.
  • 6. Designers are cutting out unnecessary parts Evidently, its not about adding more whitespace but focusing more on shipping fast. From what we have observed, designs that have smaller layer count are Surprisingly this trend is not strictly speaking aesthetic, but practical. The puristic and minimal design, which was at its peak around 2015, is still popular. While companies like Dropbox, Intercom, Typeform have recently start to play with more abstract illustrations, popping colors and add more illustrations, asymmetry, patchwork, the design file layer structure is actually still getting more simple. In fact, average layer count has dropped by 46% for per Adobe Photoshop design and by 32% per Sketch design. Also, the number of layer effects per design dropped by 13% (Photoshop) and 28% (Sketch). iterated more often (i.e., have more design versions). Apparently, designers still pay more attention to whats important to the user than to fancy decorations. 6.
  • 7. Design file size matters. And its going down order).Wetoohaveseenaprevalentgrowth of Sketch app usage (2017: 62% Sketch designs vs. 38% Photoshop designs). We could argue, that lightweight and small file output of tools like Sketch, XD, or Figma is and important factor in their adoption by designers. Shift in the design toolset Its not that big of a surprise that the decrease of layers has a direct impact on design file size. Whats more interesting, however, is the giant difference of design file size when it comes to design format. Unlike Photoshop, Sketch is a vector based design tool and therefore can keep your files much smaller. Raster file formats (like PSD) store data related to each layer (even vector shapes) as bitmaps and therefore need to keep data for each pixel, whereas vector-based formats (like Sketch) store most of the data as a geometric description and maintain the information related to pixels only for bitmap layers. According to UX tools 2017 survey, the 5 most popular interface design tools on the market are Sketch, Photoshop, Adobe Illustrator, Adobe XD, and Figma (in that 7. Sketch files are up to 7.7x smaller than Photoshop files. Plus average Photoshop file contains 27 bitmap layers, while an average Sketch file only 10.
  • 8. Last year when we spotted the growing use of Sketch, we decided to encourage this trend by building the first ever Photoshop to Sketch Design Converter. The demand for transferring from Photoshop to Sketch is indeed huge. Just in 5 months, since we released the converter beta version, we converted 52,236 PSD files (for companies like Tesla, Atlassian or Microsoft - see other reactions on the next page). Since Adobe XD has introduced a free plan in May 2018, we expect to see a 8. decline of Photoshop users (especially those who were using the tool only for screen design) and rapid growth of XD user adoption. Since Adobe XD is now the first stable screen design tool that offers a free plan as well as macOS & Windows desktop app, we will definitely see a decline in Sketch app user adoption growth if not a decrease of the current Sketch user base. Shift in image export With the higher awareness of file size, both designers and developers appreciate lightweight image assets that scale easily and are prepared for high-resolution screens. In fact, the web loading time matters now more than ever. For example, Behance 2018 Design Trend Research found out that: An estimated 47% of users browsing the internet expect a website to load within 2 seconds or less. Additionally, this article by Watb says that: PNGs increase in HTTP requests and thus a slow down the site. SVGs are not only smaller in filesize, but the XML can be embedded inline to your HTML, eliminating HTTP requests and speeding up your site. While PNG is still the most exported image asset format (66.84% of all assets exported from Avocode in 2017), SVGs have replaced JPEG as the second most exported format with 19.18% of all assets exported from Avocode in 2017. Additionally, 98% of Avocode users use automatic image optimization of PNG, JPEG, and SVG images. For example the open-source PNG image optimization were using has saved up to 60% of file size per each exported asset, and the SVG image optimization has saved up to 80% of file size per each exported asset. The average input Photoshop design was 36.76MB large and the Sketch output 4.76MB large. We realized that our service could not only save designers hours on recreating designs, but we can also save them 32MB per design files.
  • 9. It is so easy and serves a very important purpose. Aeron Ridgeway Best Buy As UI designers we were using Photoshop but gradually switched to Sketch. The converter helped us a lot during the switch. Xiu Xuan Xie Alibaba Cloud I needed to do a quick conversion, and with your tool, I found what I was looking for, I was pleasantly surprised. So amazing! Yolanda Rubio Fernandez Zara I am pretty happy with the result of the testing file I ran yesterday. I will definitely recommend to our team to start using this service. Wenny Lo Salesforce Avocode PSD to Sketch Design Converter saves 32MB per file on average
  • 10. Copywriters, we got good news! short attention span of web users. The growth of text layers (see the chart below) signifies that designers got more confident that people are willing to read again. Unfortunately, we are unable It seems that 2017 was full of stories. While the total layer count decreased, text layers were actually going up (probably at the expense of bitmaps and shapes). For many years text has been pushed away, especially because of the to count the number of characters to determine if sentences and text blocks are getting indeed longer, but judging from the rise of text layer count, we deduce that design in 2017 has gotten surely more explanatory than it used to be. Typography as a trend is also one thing we definitely should not leave out. While every word still needs to be carefully selected to fit into your design story, some text characters have become design symbols on their own. But in 2017 the amount of PSD text layer per design grew by 25%, and the amount of Sketch text layer per design grew by 10%. 10.
  • 11. Report Summary After going through tons of data from 2,024,815 designs, were excited to say that designers and developers are coming closer together. However, we believe both parties still have a lot to learn from each other. The two most significant continuous trends were: 1. The sophistication of smart design tools Design tools respond to developers impact on designers, represented with version control and design systems in 2017. We expect that design tools will keep getting smarter - for example, in 2018 hope to see an option to mark design object (layer group or a Symbol) semantics such as button or inputs. 2. The apparent appeal of lightweight files Sketch has dominated the screen design market by providing a lightweight vector-based format. We have seen that converting from PSD to Sketch can save up to 8 the file size. We expect that Figma and Adobe XD will steal some of Sketch and Photoshop users in 2018, especially because they are not only lightweight and vector-based but also cross-platform. 11. Weve also mapped out two most significant short-term shifts in design trends: 1. The lack of unimportant elements in designs We were excited to welcome this trends. Getting rid of unimportant layers and layer effects help designers focus more on functionality and UX which is something we all benefit from. 2. Highly scalable and lightweight image assets Image formats and image optimization play a key part in todays design which needs to be both incredibly scalable but also load fast without discriminating users with slower internet connection. With the rise of interactive design we expect more and more design parts being represented in code and less and less in bitmaps in 2018.
  • 12. Big thanks for the illustrations goes to This study was conducted by Avocode Avocode is a fully-featured tool for your design-to-code workflow. 10,000+ designers and developers are using it to directly import, share and inspect Sketch, Adobe XD, Photoshop, & Figma designs designs on any OS to build web and mobile apps faster. Avocode stands out among its competitors thanks to its robust Monroe rendering engine that gives users real access to design layers. Avocode is backed by 500 Startups, Kima Ventures, Teec Angel, Wisemont Capital, and Jeremy Yap. It is headquartered in Prague, Czech Republic. Contact Information Research Directors Feel free to ask us anything at team@avocode.comMatou邸 Roskovec Creative Lead Martin Duri邸 Head of Marketing Tom叩邸 Rychl鱈k Head of Technology Lina Leusenko Stefano Marra Janis Andzans Adam Mihalov Diana Stoyanova Nugraha Jati Utama 12.
  • 13. Hand-off designs to developers without preparing assets Join 10 000+ designers and developers who hand-off and inspect Sketch, Figma, and Adobe XD files with Avocode and finish web, iOS, Android and React Native projects faster. TRY AVOCODE FOR FREE