Design trends
2017

Конец года — время не только подводить итоги,
но и начать планировать следующий год продуктивной работы.
Наша команда подготовила прогноз относительно дизайн-трендов.

01

Новые инструменты
для дизайна

03

Адаптивность
всего

05

Победа мобильного
трафика

07

Визуальный
дизайн

02

Интерактивные
прототипы

04

Интеллектуальные
алгоритмы
в дизайне

06

Авторское фото
и иллюстрации

08

Анимация, моушен,
интерактив

01

Новые инструменты
для дизайна

02

Интерактивные
прототипы

03

Адаптивность
всего

04

Интеллектуальные
алгоритмы
в дизайне

05

Победа мобильного
трафика

06

Авторское фото
и иллюстрации

07

Визуальный
дизайн

08

Анимация, моушен,
интерактив

Заключение

В целом, никаких революций не случилось — идет закономерное развитие в сторону сервисного дизайна, пока визуальные тренды сменяют один другой. Продолжается интеграция всех смежных веб-дизайну областей: реклама, брендинг, полиграфический дизайн отдают вебу свои находки и тенденции, одновременно вбирая в себя лучшее из digital.

Интерфейсы еще дальше уходят от «картинки» в сторону «взаимодействия» — именно по этой причине моушен-дизайн по объему доносимой до пользователя информации сегодня практически равен дизайну графическому.

Мобильный интернет вырывается вперед, и процесс адаптации сайтов под мобильные устройства готов смениться обратным процессом — парадигма Mobile Native говорит о приоритете именно мобильных сайтов и пользователей для современного бизнеса.

Продолжается стандартизация проектирования интерфейсов, на первый план выходит компонентный дизайн. Качество мокапов, UI-китов, готовых скриптов анимации, цветовых палитр и других компонентов значительно выросло — это помогает дизайнерам создавать гармоничный и эффективный интерфейс, затрачивая минимум ресурсов на проработку визуального стиля.

Наиболее интересные и пока не проявившие себя в полной мере области — это AI, нейросети и VR. Посмотрим, оправдает ли 2017 наши ожидания.

Рост популярности новых инструментов для дизайна

Использовать Photoshop и другие продукты Adobe в проектировании UI — в большей степени привычка дизайнеров «старой школы». Кажется, теперь и они готовы отказаться от привычного инструментария.

Подробнее

Что сейчас

Sketch App начал свое победоносное шествие в 2010, но в России стал массовым явлением всего пару лет назад. Специализированные инструменты для веб-дизайна постепенно вытесняют традиционные.

Дорогостоящие коммерческие решения получают конкурентов в лице качественных, но менее дорогих инструментов (Affinity Designer). Вместе с тем, платформенная «эксклюзивность» таких продуктов постепенно сходит на нет — Affinity выпустил свой продукт для Windows в ноябре 2016, перестав быть «только для Мас».

Чего ждать

Рынок продолжит усложняться — уже сейчас есть функциональные SaaS-решения для проектирования UI (Figma), которые почти ни в чем не уступают нативным приложениям.

Шаг Affinity Designer не останется незамеченным — стоит ждать и других мультиплатформенных продуктов (сделает ли такой шаг Sketch App?).

Экраны высокого разрешения выдвигают качественно новые требования к графике — векторная графика продолжит вытеснять растровую, а векторные редакторы — привычный Photoshop.

Интерактивные прототипы

Пользователи все сильнее отвыкают от статики, а дизайн сайта перестает быть просто картинкой.

Подробнее

Что сейчас

Интерфейс сегодня — это на 70% взаимодействие и только на 30% композиция. UX-дизайнеры хотят проектировать и то, и другое без помощи программистов — и такую возможность им дают сервисы наподобие UXpin или Marvel. Интерактивные презентации макетов — уже правило хорошего тона в отрасли.

Чего ждать

Ценность прототипов для разработки интерфейсов будет признана большинством. Презентации станут более эффектными: из привычных слайд-шоу с комментариями в InVision они превратятся полноценную демонстрацию логики сервиса и возможных сценариев.

То же касается гайдлайнов — тренд задал Material design, но сегодня интерактивные анимированные гайдлайны стали обязательной частью коммерческих проектов. Дизайнерам интерфейсов, которые еще не используют их в презентациях, стоит начать в 2017, чтобы не отстать от тренда.

Перейти в principleformac.com Low Fidelity Reservation Flow
by Sam Thibault for Handsome

Адаптивность всего

Адаптивной может быть не только верстка, но и контент. Причина в том, что поведение мобильных пользователей иногда в корне отличается от поведения десктопных — например, мобильный браузер чаще используется как инструмент моментального решения проблем. Цели посещения сайта могут отличаться, а значит, и контент должен подстраиваться под эти цели.

Подробнее

Что сейчас

Санкции поисковых систем к не оптимизированным под мобильные устройства сайтам, общий рост числа таких устройств, повышение скорости мобильного интернета — сумма факторов подтолкнула веб к адаптивности. Практически все digital-продакшены разрабатывают адаптивные сайты, даже бесплатные шаблоны для CMS выпускаются адаптивными.

Что касается адаптивности контента, сегодня массовым явлением стали сервисы персонализации — они рекомендуют пользователю наиболее релевантные материалы сайта в зависимости от контекста: устройства, местоположения, ранее просмотренных страниц и десятков других параметров.

Чего ждать

Как обычно, сильная тенденция из одной сферы проникает в смежные — уже сейчас мы наблюдаем примеры адаптивного брендинга, что ломает классические представления о «нерушимости» единственного начертания логотипа.

Или адаптивного контента — например, когда размер шрифта и длина текста заголовков подстраивается под размер экрана устройства (адаптивная типографика).

Адаптивность контента — то, на что стоит обратить внимание в будущем.

Еще одна интересная тенденция, связанная с адаптивностью — параметрические шрифты, которые имеют множество программно генерируемых промежуточных начертаний. Стандартные Black, Bold, Semibold и прочие, вероятно, скоро будут вытеснены параметрическими шрифтами — ведь они подстраиваются под контекст.

Интеллектуальные алгоритмы в дизайне

2016 был годом VR и нейросетей. И эти модные технологии обязательно повлияют на проектирование интерфейсов.

Подробнее

Что сейчас

Пока что это влияние в сфере digital незначительно. Например, появление VR-устройств массово выразилось только в добавлении на сайты 360°-роликов, а нейросети спровоцировали появление развлекательных приложений MSQRD и Prisma.

Чего ждать

Тренд будет проецироваться на веб-дизайн, что в скором времени приведет к становлению парадигмы «экзоскелета» — совместной работы машинных обучаемых алгоритмов, которые выполняют рутинную работу, и продуктового дизайнера. Такие технологии уже работают. Например, сервис Yandex Launcher анализирует иконку приложения и на ее основе генерирует гармоничный баннер.

Нейросети выполняют также и редакторскую работу: распознают лица на фото, кадрируют изображения, генерируют журнальную верстку — это со временем приведет к тому, что «живые» специалисты будут нужны только на ведущих должностях. Так, например, создается онлайн-журнал Flipboard.

Что касается виртуальной реальности, главный барьер для проникновения технологии во все сферы нашей жизни — ее громоздкость и низкая доступность самих устройств. Однако стоит ожидать повышенного интереса к технологии со стороны рекламного digital, ведь такие кампании представляют собой самое плотное взаимодействие бренда и потребителя в цифровой среде на сегодняшний день.

Для тех, кто хочет углубиться в тему — UX-разработчик Макс Гленистер собрал любопытные доклады и статьи по теме VR и UI на сайте своего спецпроекта.

Победа мобильного трафика

Мобильные устройства становятся главным орудием интернет-пользователей — это значит, что и веб будет меняться в угоду мобильному трафику.

Подробнее

Что сейчас

Если в 2012 доля мобильного трафика еле дотягивала до 30%, то сегодня он догнал десктопный.

Исследования Data Insight предрекают рост мобильных продаж в e-commerce — около 30-40% от общего объема к 2018. Этой цифры уже достигли отдельные ритейлеры. Например, мобильные продажи сети М.Видео составили 38% еще в 2015 — это в очередной раз подтверждает прогноз.

Такие изменения сказываются и на интерфейсах сайтов — в 2010 в мобильном приложении Facebook появилась иконка «гамбургер» для обозначения меню. Мы всё чаще начинаем встречать боковые меню, которые до недавнего времени считались моветоном в веб-дизайне.

Чего ждать

Тенденция сохранится — элементы интерфейса и мобильные механики взаимодействия будут проникать в обычный веб. Веб-дизайн постепенно отходит от условностей классической модели — исчезают стрелки на слайдерах, подчеркивания у ссылок и другие интерфейсные подсказки для неопытных пользователей.

Что касается адаптивных сайтов и Mobile First — в дизайн-среде начинаются разговоры о новой парадигме Mobile Native, которая предполагает задать низкий приоритет обновлениям десктопного сайта и сосредоточиться на возможностях мобильной версии (приложения или сайта). В ближайший год парадигма вряд ли вытеснит существующую, но она как минимум любопытна.

Перейти на vc.ru mobile to desktop (GIF)
by Oliver Sin

Авторские фотографии и иллюстрации

Эпоха фотостоков неуклонно катится к закату, и мы наблюдаем становление нового тренда — авторского графического контента.

Подробнее

Что сейчас

В этой связи появляются новые специализированные фотостоки:

Та же причина у роста популярности авторских иллюстраций — однообразные лендинги с большими фоновыми фотографиями наводнили интернет, а чтобы от них выгодно отличаться, нужно использовать другую стилистику.

Чего ждать

Графическому дизайну становится тесно в рамках привычного веба — поэтому он впитывает из смежных областей всё, что модно:

Скетч-арт. Крафтовая тематика захватила бизнес-умы, а иллюстрации «от руки» завоевали современную полиграфию. Эта тенденция продолжает укореняться в вебе.

Лайн-арт иконки. Техника рисования контурами будет и дальше находить применение в вебе: например, как сейчас при создании паттернов и сложных иконок (они выигрывают у стоковых по уровню визуального исполнения).

Еще один вероятный поворот — изменения в подходе к фотоконтенту на сайтах e-commerce, уход от одинаковых изображений в магазинах в сторону уникальных авторских фотографий. Что любопытно, все предпосылки налицо: 63% пользователей считают, решающим фактором покупки выступают фотографии, и магазины давно уделяют им максимум внимания.

Перейти на behance.net Pfizer - Active and 50+ for The New York Times
by justyna stasik and Vladimir Marchukov

Визуальный дизайн

Использовать Photoshop и другие продукты Adobe в проектировании UI — в большей степени привычка дизайнеров «старой школы». Кажется, теперь и они готовы отказаться от привычного инструментария. Здесь все как обычно — несколько на-самом-деле-старых трендов набирают обороты.

Подробнее

Что сейчас

2016 можно смело назвать годом нео-ретро — стиль проявлялся во всем: от каллиграфических логотипов до дуотона и нео-мемфиса. Сохраняется тяготение дизайна к минимализму. Появляются любопытные новые формы, вроде «белых объектов с тенями», которые, однако, являются всего лишь модным веянием.

В то же время, сохраняется главенство принципа: дизайн — это функциональный инструмент, и любые «игры с цветами» служат созданию эффективного интерфейса.

Чего ждать

Сервисный (или конверсионный) дизайн остается главным вектором развития нашего сегмента.

Рынок digital-услуг диктует условие: либо предоставляй экспертизы агентства, либо теряй позиции. Быть просто «хорошим веб-продакшеном» уже не выгодно — клиенты требуют экспертизы, аналитики, выполненных KPI. Задачи уровня «нужен новый сайт» решаются современными SaaS-конструкторами. Для старта маленького e-commerce-бизнеса больше не нужен интернет-магазин, можно начинать в Instagram. Полноценные блоги с великолепным дизайном создаются по щелчку пальцев на Tilda или Readymag.

Ценность дизайна как инструмента, придающего современный вид типовому решению, сомнительна. Чем дальше, тем более явно будет выражаться ценность сервисного дизайна, — проектирование сложных интерфейсов, которые конвертируют посетителей и выполняют задачи, поставленные отделом маркетинга.

Напоследок: анимация, моушен, интерактив

Тренд заменять любую статику на динамику — один из самых устойчивых в последние годы.

Подробнее

Мы видим анимированные объекты повсюду: иконки на сайтах и в приложениях, переходы между состояниями объектов в material design, синемаграфы в социальных сетях.

Даже в почтовые рассылки пробирается интерактив: они обрастают фоновыми видео, встроенным процессом оформления заказа, полноценными меню.

Банальные гифки получили новый виток развития с появлением их агрегаторов, вроде Giphy. Кстати, недавно там завело аккаунт NASA — что лишний раз подтверждает популярность формата.

Отличительной чертой последнего года стал вертикальный микро-параллакс — он пришел на смену классическому параллаксу.

01

Новые инструменты
для дизайна

02

Интерактивные
прототипы

03

Адаптивность
всего

04

Интеллектуальные
алгоритмы
в дизайне

05

Победа мобильного
трафика

06

Авторское фото
и иллюстрации

07

Визуальный
дизайн

08

Анимация, моушен,
интерактив