Avocode, кто не знает это одна из лучших программ для максимально удобного извлечения графики, текста и стилизации из PSD- и Sketch-файлов.
По нему на канале MakeWeb есть серия роликов:
Недавно тем, кто подписан на рассылку Avocode, было прислано письмо с отчетом за 2017. Данные были собраны внутри программы и на сайте, основываясь на действиях пользователей — кто, чего, когда и сколько загружал, менял, копировал, вставлял и тэдэ и тэпэ.
За 2017 год дизайнеры из 164 стран загрузили в Avocode 2,024,815 PSD- и Sketch-дизайнов.
Наличие такого довольно большого круга пользователей позволяет ребятам собирать различную статистику и таким образом получать возможность отслеживать тренды, намечающиеся, превалирующие и ослабевающие в веб-дизайне. И я представляю вашему вниманию свое изложению сути отчета с комментариями.
Еще в 2016-м наметился тренд среди дизайнеров в виде перехода с Photoshop на Sketch. В 2017-м он еще более усилился. Правда сдерживает массовый переход отсутствие версии для Windows (которую вроде как и не собираются делать).
Кстати, между прочим, вполне реально на любой более-менее современный компьютер поставить так называемый Хакинтош, который будет работать так же стабильно как и родной мак-девайс (смотрим подробнее вот здесь). Рекомендую, сам уже больше года сижу на Хаке.
Про лидерство Sketch — ничего удивительного, ведь он создавался именно как инструмент для веб-дизайна, причем с максимальной поддержкой SVG. Размер аналогичного Sketch и PSD файла различается в 8 раз. В пользу Sketch, разумеется.
С помощью вот такого инструмента, можно перегнать свои большие PSD-шники в более компактный Sketch-формат.
Еще одним трендом является использование так называемых Symbols в Sketch. Вообще, это возможность изначально формата SVG. Речь о том, что можно создать некий символ с внутренним содержимым и многократно его переиспользовать в документе. То есть, грубо говоря, расставлять в нужных местах ссылки, не копируя само содержимое.
Таким образом, размер файла с повторяющимися частями снижается. Плюс к этому, символы таким же макаром могут использоваться в HTML-документе. Double-kill!
Отличный пример, где символы как раз «в тему», это иконки. Создаем из символов иконочный набор и используем его столько раз, сколько это требуется.
Согласно отчету, использование этой фичи среди дизайнеров растет. Разработчики конечно уже давно «пронюхали» эту возможность и используют очень даже нередко.
Также, нам говорят, что количество слоев в документах с дизайнами ощутимо упало, примерно на 30-40%, а вот количество слоев с текстом — увеличивается. Минимализм в дизайне наметился уже давно, с приходом эры Flat-дизайна.
С уменьшением количества слоев и сам файл уменьшается в размере, что не может не радовать. Кому приходится на не самом мощном ноутбуке запускать монструозные дизайны весом под полгигабайта, меня поймут. Тут Авокод спасает — он очень хорошо оптимизирует файлы и все работает ощутимо быстрее.
Текст же стал центральным местом (в принципе, он ведь, если вдуматься, чаще всего и несет основной смысл), а все лишние рюшечки-кружевочки отбрасываются — нам и так хватает пестрящей цветами рекламы. Когда заходишь почитать статью на некоторых ресурсах, просто невозможно не забеситься от всякой мишуры. Спасибо тем дизайнерам и разработчикам, которые заботятся о нервах их посетителей <3
Дизайнеры предпочитают работать с Artboards, нежели с разными документами, благо и в Photoshop эта возможность уже есть. Кто не понял, это возможность иметь в одном документе несколько. В Sketch же это вообще практика по умолчанию. На картинке видно что такое артборды:
Экспорт графики все чаще и чаще осуществляется в векторном формате SVG, потому что всякие ретины и прочие того требуют. Всем хочется, чтобы на любом устройстве с любым DPI, графика выглядела если не идеально, то близко к тому. Вполне себе неудивительно. Прибавьте к этому на порядок меньшие размеры векторных изображений.
Еще, дизайнеры освоили контроль версий и есть сервисы, нацеленные специально на версионирование дизайнов — Folio, Abstract, Kactus, Plant.
Для разработчиков существуют UI-фреймворки вроде Bootstrap, Semantic UI и других. В мире же дизайна имеется термин Design System и означает он нечто похожее по смыслу. То есть это неких свод правил и рекомендаций для построения интерфейсов в рамках заданной стилистики и концепции.
Скажем, у Яндекса есть свой стиль и от проекта к проекту, от сервиса к сервису, мы этот стиль узнаем. Это и есть результат наличия этой самой Design System. Внутри нее описаны цвета, шрифты, отступы, стилистика изображений, а также различные более сложные компоненты. Из этого можно строить дизайны новых сервисов, а сама Система регулярно совершенствуется и видоизменяется согласно трендам и возникающим в процессе эксплуатации сервисов сложностям.
P.S.
Если кто-то хочет, можно посмотреть оригиналы Avocode-отчетов за 2016 и 2017 годы на английском (внутри этих доков есть ссылки на полные версии): отчет за 2016 и отчет за 2017