Аудит дизайн-системы

Контекст

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

Задача

Это был мой первый аудит дизайн-системы. Команда обратилась ко мне на самом старте, и я поставила перед собой такие задачи:

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

Анализ

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

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

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

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

Второй этап аудита включал проверку этой гипотезы — для этого команда предоставила свои наработки. Руководитель отдела разработки при этом задал вопрос: «Не слишком ли мы нагружаем дизайнеров?»

Закрыть

Процесс

Ответ на заданный выше вопрос: да. Дизайнеры начали работу от частного к общему и углубились в разработку одного компонента — поля ввода <input> — пытаясь предусмотреть все возможные варианты. К моменту, когда компонент попал ко мне на ревью, было отрисовано 360 различных вариантов поля ввода, при этом автоматизация через ассеты в Figma не была полностью настроена. Я отметила это как точку роста, которую важно подсветить комманде: использовать такую громоздкую конструкцию как основу для создания трёх визуально разных направлений будет почти невозможно.

Нужен был редизайн и я вооружилась бритвой, чтобы отсечь всё лишнее. Выявила сугубо технические тонкости, например, неоптимальное использование возможностей Figma. Отметила и проблемы, связанные с недостатком экспертизы в смежных областях и/или коммуникации с разработкой, а именно неполное понимание того, как элементы ведут себя в браузере. В итоге мне удалось пересобрать макет, полностью сохранив изначальный дизайн, и сократив количество сущностей в семь раз: с 360 до 50.

Процесс упрощения и пересборки компонента на слайдах:

Закрыть

Закрыть

Закрыть

Закрыть

Закрыть

Технологический стек: дизайнеры работают в Figma, разработка использует VueJS, HTML, CSS.

Выводы

Я проанализировала все предоставленные мне материалы и подтвердила свою гипотезу.

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

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

Мой опыт подсказывал, что такой подход съедает много времени, создаёт ощущение, что дизайн-система мешает, а не помогает, и рискует привести к выгоранию команды.

Результат

Результатом моего аудита стал технический редизайн предоставленных макетов и рекомендации по выстраиванию флоу.

В рекомендациях я:

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

Дизайн-система контента веб-справочника (Дока)

Контекст

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

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

Задача

Я присоединилась к команде из арт-директора, иллюстратора и литературного редактора в роли дизайнера-разработчика. Нам предстояло выработать стиль проекта, его tone of voice, и подготовить проект к запуску в формате open-source. Для этого нужно было решить следующие задачи:

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

Анализ

Изучив наработки авторов, мы определили, что наполнение справочника состоит из контента четырёх типов:

• литературный текст самих статей;
• песочницы — демонстрация того, как описываемый в справочнике компонент выглядит и работает на практике;
• технические схемы — блок-схемы, диаграммы, таблицы;
• обложки статей, передающие настроение и идентичность.

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

Процесс

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

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

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

Гарнитура Roboto была выбрана за визуальную нейтральность, обилие начертаний и доступность для использования, т.к. в будущем дизайн-систему предстояло открыть для контрибьюторов, то есть, любой человек должен будет иметь возможность использовать нужный шрифт.

Эти принципы позволили сделать оформление статей справочника визуально согласованным и единообразным:

Закрыть

Песочницы

Я владею навыками дизайнера и веб-разработчика одновременно, поэтому моей сферой ответственности были песочницы. Песочница в Доке это веб-страница, посвящённая описываемому в статье предмету. Моё понимание тем, о которых пишут разработчики, сильно облегчило задачу: я не только оформляла элементы веб-страниц, но и помогала разработчикам выразить идеи максимально понятно для читателя.

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

Накопив 20-30 дизайнов веб-страниц, код которых был полностью под моим контролем, я смогла проанализировать закономерности, согласовать внешний вид элементов с другими составляющими будущей дизайн-системы, и приступить к её созданию.

Результат моей работы предоставлялся в виде дизайна, HTML-разметки и CCS-кода, стоящих за этим дизайном:

Закрыть

Результат

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

Дизайн-система песочниц оформлена в виде документации на GitHub, где дизайн элементов сопровождается сниппетами HTML, CSS и JS кода, которые каждый новый автор может скопировать в свой проект. При этом фреймворков в системе нет: код примеров сделан максимально дружелюбным для джуниоров, чтобы даже начинающий разработчик мог быстро понять, как всё работает. Это отражает ключевую ценность Доки — снижать порог входа в веб-разработку.

Дизайн-система схем представляет собой конструктор в Figma, сопровождающийся документацией и советами.

К запуску проекта нам удалось создать дизайн-систему контента, которая содержит:

• руководство по литературному стилю, включающее как языковые аспекты, так и tone of voice проекта;
• дизайн-систему примеров кода, включающую дизайн компонентов, кодовую базу и документацию;
• графический конструктор для создания схем в Figma, сопровождающийся инструкцией по использованию конструктора;
• уникальный стиль иллюстраций — единственный непубличный компонент дизайн-системы, потому что личный стиль иллюстратора — это ценность, которую нужно беречь.

В соответствии с дизайн-системой к запуску проекта было оформлено 300+ иллюстраций, схем и примеров.

Время на создание схем и примеров для статей сократилось с нескольких дней до нескольких часов.

В настоящее время дизайн-системой doka.guide пользуется 6 человек из редакции и 460+ внешних контрибьюторов.

Команда

Арт-директор, автор дизайн-системы графики — Валентина Смирнова

Продуктовый дизайнер, автор дизайн-системы примеров — Светлана Коробцева

Иллюстратор — Кира Кустова

Литературный редактор — Ольга Алексашенко

Разработка дизайн-системы для онлайн-курса (Яндекс Практикум)

Контекст

Яндекс Практикум — центр обучения IT-профессиям. Особенность Практикума — асинхронный формат и упор на практические навыки. Студенты знакомятся с материалом в удобное для себя время и тут же практикуются в тренажёре.

Тренажёр — миниатюрная веб-страница, встроенная в текст урока, в которую студент должен дописать недостающий код.

VЁRSTKA — курс Практикума по HTML и CSS вёрстке, в работе над которым я участвовала как продуктовый дизайнер.

Задача

У курсов Практикума мощная визуальная идентичность: иллюстрации, инфографика и увлекательный нарратив — всё работает на вовлечение студентов. Тренажёр — место, где код встречается с интерфейсом — должен выглядеть не как чужой элемент, а органично вписываться в эту эстетику.

Закрыть

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

Решение

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

Я выделила ключевые элементы изобразительного языка, чтобы опираться на них:

• контраст тонкой линии и жирного текста;
• плотная компоновка элементов;
• яркие фирменные цвета;
• умышленное нарушение правил.

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

Закрыть

Закрыть

Закрыть

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

Результат

Моя дизайн-система позволила интегрировать тренажёры бесшовно в общую визуальную экосистему курса, поддерживая и усиливая его нарратив. Благодаря ей:

• курс вышел в срок — за 20 месяцев;
• работа 4 разработчиков с разным опытом была скоординирована и едина;
• появилась база для дальнейшей поддержки и масштабирования курса.

Закрыть

Команда

Тимлид, автор уроков — Александр Патлух

Авторы уроков:

• Алёна Батицкая
• Алексей Казаков
• Наталия Рыжова

Ведущий иллюстратор — Анна Римша

Нарративный директор — Елизавета Золотухина

Портал ЖКХ

Контекст

Портал ЖКХ это сервис для жителей Иркутска, который позволяет всё общение со службами ЖКХ вести онлайн, начиная от подачи показаний счётчиков и заканчивая вызовом мастера. Сейчас у продукта 100 000+ пользователей, он доступен на Web, iOS и Android.

Задача

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

Разработать предстояло навигацию по личному кабинету пользователя и интерфейс страниц этого личного кабинета. Данные на Портале представлены, преимущественно, в табличной форме.

Решение

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

Закрыть

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

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

Закрыть

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

Закрыть

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

Закрыть

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

Закрыть

Команда

Менеджеры проекта:

• Марина Раковская
• Филипп Кононов

Анимации

Контекст

Отрисовать анимацию покадрово для передачи разработчику, оживить элементы самостоятельно при помощи CSS-функций, смонтировать ролик в After Effects, воспроизвести UI видеоигры в Photoshop — сделаю всё, что угодно, для передачи смысла. Или найду исполнителя.

SVG-анимации в стиле Pixel Art

Пиксельные ретро-анимации собраны в Figma из простейших квадратиков и анимированы при помощи прототипирования.

Закрыть

CSS-анимации

Иллюстрация работы временных функций для создания CSS-анимаций из одноимённой статьи в Доке.

Неоновый логотип украшает интерфейс вымышленной биржи и создан при помощи CSS.

.flicker {
    animation: flicker 20s
               linear infinite;
}

@keyframes flicker {
    0%,100%,19.999%,22% {
        opacity: .99;
    }

    20%,21.999% {
        opacity: .4;
    }
}

Видео

Видеовизитка для соцсетей и видеоиллюстрации для статей справочника о состояниях :hover и :active собраны в Adobe After Effects.

Покадровая анимация в Photoshop

Это моё хобби: вручную воссоздавать необычные интерфейсы, чтобы почувствовать, как они устроены. Экран внутриигрового мобильного телефона из Cyberpunk 2077 отрисован и анимирован в Adobe Photoshop.

Дизайн сайтов с ограничением в технологиях

Контекст

Яндекс-практикум — онлайн-школа с упором на практические навыки. К концу курса студенты выполняют несколько полноценных проектов для портфолио. На курсе по HTML и CSS вёрстке они сверстают несколько сайтов.

Задача

Я была рада поработать руками и присоединилась к команде разработки курса VЁRSTKA в роли UI-дизайнера.

Главная особенность технического задания при разработке учебных макетов это ограничение по технологиям. Сайт должен:

• быть свёрстан с использованием только тех знаний, которые уже есть у студента;
• включать полный набор изученных технологий для закрепления навыков.

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

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

Решение

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

1. Анализ контента, поиск визуальной метафоры.
2. Изучение технических требований.
3. Сборка скелета сайта в Figma.
4. Поиск оформительских решений для всех требующихся технологий в рамках выбранного стиля.
5. Передача макета разработчику.
6. Подгонка в свёрстанного сайта и макета друг под друга в технике Pixel Perfect.

Обычно при подгонке в технике Pixel Perfect разработчик подстраивается под дизайн, но в случае с учебными макетами процесс идёт наоборот: важно сохранить код максимально лаконичным и логичным, поэтому при прочих равных лучше подвинуть что-то в макете.

Результат

Для курса я создала 6 проектных работ нарастающей сложности.

1 проектная: Оно тебе надо.

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

2 проектная: Надо сделать идеально.

Для студента: технологии встраивания видео. Для меня — минимум средств, в котором всё ещё нужно сохранить идентичность. &mdash; вместо тире — моя маленькая шутка.

3 проектная: Посмотри в окно

Видео, подгрузка контента, формы. Сделать что-то вроде YouTube, но не YouTube. Курсовая ирония в действии.

4 проектная: Обходные стратегии

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

5 проектная: Сложно сосредоточиться

Адаптив на 3 размера, две цветовые схемы, сложные эффекты, masonry. Чтобы обыграть тему наведения фокуса я использовала тень текста (несфокусированная картинка расплывается), а картинки в галерее расположила подобно диафрагме фотоаппарата, обращаясь к теме оптики.

6 проектная: Закрывающий тег

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

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

Команда

Тимлид — Александр Патлух

Автор текстов — Елизавета Золотухина