1 hisp0wag16juhe4kfyrwow 800x440 - Эпоха дизайн-систем ушла

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

Людям оказался нужен хаос, а дизайну — пространство для экспрессии, драматизма и продуктового роста.

История отечественных дизай-систем

Рост интереса к дизайн-системам на нашем рынке начался где-то с середины десятых. Точкой отсчета, наверное, можно считать выступление Антона Виноградова на PiterCSS с рассказом об архитектуре дизайн-системы Альфа-Банка в марте 2016. Хотя корни, конечно, стоит искать раньше.

В 2013 Бред Фрост презентует Atomic Design (книга будет опубликована в 2016) и впервые целостно описывает концепцию построения дизайн-системы. В это же время у дизайнеров набирает популярность Sketch как более быстрая, удобная и заточенная под интерфейсы альтернатива фотошопу. И в этот же году на конференции JSConf US Facebook раскрывает исходны код React, который популяризирует компонентный подход.

В 2014 выходит iOS 7 и приносит миру Flat Design, а заодно и идею того, что дизайн будущего — это интерфейсы без излишеств, а дизайнеры будущего — это инженеры, которые будут кодить, прототипировать и станут независимыми от разработчиков.

За Apple крупные компании одна за другой публикуют свои дизайн системы: Material design, UWP, IBM Design Language, Lightning, MailChimp, BBC GEL.

На волне успеха Sketch, React и концепции «дизайнер = инженер» рождается идея, что у графических редакторов нет будущего, что это артефакт, и единым источником правды будут компоненты в коде. После чего случается бум инструментов, которые пытаются совместить в себе и визуальный дизайн, и программирование. Самые известные из них — Framer и Origami.

С этого момента в дайджесте у Юры Ветрова появляется раздел «Визуальное программирование» со всеми новостями по теме и подразделом «Живые гайдлайны и компонентные системы», который после выступления Антона Виноградова из Альфа-Банка переедет в раздел «Гайдлайны платформ и компаний». А спустя год, в апреле 2017, «Гайдлайны платформ и компаний» переименуются в «Дизайн-системы и гайдлайны». И первым делом сообщит нам о том, чтоАнтон Шейн из Яндекса записал скринкасты по использованию Depo, среду прототипирования для дизайнеров на базе БЭМ.

Рост спроса на дизайнеров-инженеров и на технические решения, ускоряющие релизный цикл, пришелся на период возобновления экономического роста в России после падения рубля (с 2015 по 2018) и, возможно, был ответом на нехватку квалифицированных кадров.

(По крайней мере, так было в Авито. Когда еще не существовало кросс-функциональных команд, аджайла, стендапов, синков и некому было проводить A/B тесты. Всё делалось вслепую, а хотелось по-серьезному.)

В это время происходит бум отечественных дизайн-систем, и уже наши крупные компании одна за другой начинают демонстрировать свои достижения: Дизайн система России, Парадигм, Дизайн-система Rambler & Co, Дизайн-система МегаФона, БЭМ Дизайн, Дизайн Альфа-Банка, Дизайн-система Студии Олега Чулакова, Барс Груп, VKUI Styleguide

Параллельно с этим появляется сайт-агрегатор отечественных дизайн-систем DESIGN SYSTEMS CLUB и на всех конференциях и митапах только и говорят, что о дизайн-системах и о их проблематике. Продолжается это вплоть до 2019 года. А потом все затихает.

Что сейчас с дизайн-системами у нас

Если сегодня зайти на DESIGN SYSTEMS CLUB, то мы увидим всего 8 ссылок на дизайн-системы компаний отечественного рынка (Яндекс можно вычеркнуть, так как проекты БЭМ Дизайн, DEPO, BEAST не взлетели, а ссылка ведет просто на методологию БЭМ).

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

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

Да, некоторые можно скачать себе в виде кита (RamblerAlfa-Bank), установить и поиграться, если умеете кодить. Но все это — не более чем перекрашенный бутстрап, с помощью которого можно решить только простые задачи — собрать админку, например. Подозреваю, что эти системы имеют очень отдаленное сходство с реальным продом.

И из последних новостей о дизайн-системах: на прошлой неделе ВКонтакте опубликовал свои мобильные библиотеки базовых компонентов VKUI в Figma. Изучив ее, можно сделать несколько выводов:

1. Графические редакторы (во многом благодаря Figma) выстояли в войне с кодом и остаются основными инструментами дизайнера.

2. По прежнему только мобильный дизайн поддаётся какой-то систематизации. Во многом — благодаря стандартным платформенным элементам интерфейса и паттернам в iOS и Android. И еще благодаря простой однопоточной вертикальной структуре, которая позволяет использовать простую систему контейнеров и отступов между ними, что упрощает процесс конструирования страницы. Другое дело — Веб, где есть колонки, а значит, и потоков, между которыми нужно поддерживать согласованность, сразу несколько.

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

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

Проблемы дизайн-систем

Почему дизайн-системы так и не ушли дальше UI-библиотек с базовыми компонентами? Причин несколько:

Дизайнер ≠ инженер

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

Дизайн, по сути — это перебор вариантов. Чем больше вариантов попробовал и покрутил, тем более стильное выйдет решение.

Работа в графическом редакторе для этого дешевле всего — скопировал, изменил, скопировал, изменил..

Код — более трудозатраоный инструмент. В него очень высокий порог входа. И из-за возни с ним у дизайнера будет меньше времени, сил и желания на проработку решения. (К слову, усложнение компонентов в Фигме тоже ведет к этой проблеме).

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

Продуктовый рост

Рынок постоянно растет и ускоряется. Чтобы конкурировать, продукт вынужден учиться быстрее реагировать на изменения вокруг и постоянно предлагать что-то новое и что-то лучшее.

А новому компоненту, чтобы попасть в библиотеку, а уж тем более в дизайн-систему, нужно пройти долгий путь: от обоснования перед всеми до реализации. На это может уйти несколько недель.

А таких компонентов не один. Сходу не вспомню ни одной задачи ( ни из своих, ни из задач других ребят из команды), которую можно было решить только на готовых компонентах. Очередная страница-форма с инпутами и кнопками? К частью, таких задач очень мало.

А бизнесу все равно — по системе сделано или нет, если вы проигрываете конкурентам.

Илья Михайлов хорошо про это рассказал: academy.yandex.ru/posts/kak-ustroeny-i-zachem-nuzhny-dizayn-sistemy

Потребность в сильных дизайнерах

Ну и, конечно, одной из основных задумок этого всего было создание инструмента, который можно будет дать даже слабому дизайнеру и ждать в ответ если не сильные, то, как минимум, уверенные решения.

Но на практике слабый дизайнер имея даже самый продуманный инструмент все равно сделает слабо.

А что еще хуже, когда у дизайнера появляется ощущение, что за него всё уже продумали, он перестает анализировать и критически мыслить. Это останавливает его развитие.

Тут может помочь только сильное арт-руководство.

Без сильных дизайнеров все равно не обойтись, а им часто достаточно иметь под рукой просто гайды, чтобы работатьбыстро и качественно. И все эти усложнения компонентов в попытке все предусмотреть опытным дизайнерам ни к чему, а иногда даже во вред. Например, когда тебе каждый раз нужно разбирать все эти автолейауты и детачить символы, потому что Фигма не дает нормально подвигать объекты.

Будущее дизайн-систем

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

И вот мы видим, как постепенно мир отказывается от идеи, что дизайнер должен уметь кодить.

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

Об этом косвенно может свидетельствовать и возвращение Димы Барбанеля с его designworkout, появление проекта W1D1, рост интереса к проекту «Камчатка» и к другим институциям, нацеленным на развитие творческого мышления. А также увеличивающийся интерес к шрифтам, типографике и 3D. И растущий запрос обществе на умеренную дичь типа type.tommorowАндрея Шугальского, ну и на того же Антона Шнайдера, который в принципе и не уходил с арены.

Конечно, гайды, библиотеки, базовые принципы будут нужны всегда — это, как правильно сказал Илья Михайлов, визуальное ДНК компании. Тут можно только предположить, что скоро они перестанут подражать коду с их токенами, автолейаутами и символами и станут чуть проще и легче. И диктатура компонентов примет рекомендательный характер:

Each team should be empowered to diverge from our recommendations, acknowledging that one solution may not work for everyone. spotify.design

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

15 июля 1972 года, в 15 часов 32 минуты, когда была взорвана первая много­этажка модернистского жилого микрорайона Прютт-Айгоу в американском городе Сент-Луис, американский зодчий и критик Чарльз Дженкс констатировал «смерть новой архитектуры».

Сегодня, 24 мая 2020 года, с выходом этого поста, я, дизайнер Сережа Плащинский, констатирую «смерть нового дизайна дизайн-систем».

Arzamas: 5 ошибок архитектуры модернизма


На этом все. Подписывайтесь на мой канал в Телеграме. Буду рад ответить на вопросы и помочь.

Серёжа Плащинский, ведущий дизайнер Авито

Свежие вакансии
                        GermanLanguage.ph LLC GermanLanguage.ph LLC German Language School – Product Designer (UX/UI) Удаленно Ереван
                        Региональная Академия делового образования Региональная Академия делового образования Технический дизайнер Удаленно Самарская область
                        BR LAb BR LAb UX/ UI web-designer Удаленно Москва 80 000 - 120 000 ₽
                        Rightapplications Rightapplications UX дизайнер Офис Харьков
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
Все вакансии

Оригинал: Серёжа Плащинский

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Организация пространства в дизайне. Отступы, сетки и лейауты

В этом руководстве мы рассмотрим основы определения пространственных базовых единиц и создание правил отношений с помощью сеток

10 золотых правил UI дизайна

Когда вы сомневаетесь, обратитесь к этому списку стандартных приемов UI дизайна, которым нужно следовать

Как создавать темные темы. Руководство от Superhuman

В этой статье мы расскажем, как создавать темные темы, которые будут читабельными, сбалансированными и восхитительными