Модератор: Obrigada, Синтия, за Ваше выступление. Это было потрясающе, и да, у нас есть один вопрос. Даже два. Пожалуйста, расскажите обо всех этапах создания дизайн-системы на примере вашего продукта. Спасибо.
Синтия Ромеро: Все этапы? Их куча, список огромен. При создании дизайн-системы первое, о чем вы думаете, это: должна ли она быть в общем доступе? Например, в случае компонента он принесет пользу более чем одному продукту. Нам нужно подумать о дизайне контента: каким образом вы собираетесь описывать информацию на сайтах или элементах? Нам нужно подумать о подходящих цветах, поведении компонентов.
Первым делом мы начинаем наше исследование. Мы изучаем дизайн, чтобы понять, как мы хотим использовать этот компонент. После этого мы совершаем первый аудит. Мы проводим его только для того, чтобы команда просмотрела, все ли хорошо работает. Мы разговариваем с инженерами, дизайнерами, иногда с ребятами, которые проводят исследования: «Все ведь хорошо работает?» Только после аудита, мы переходим к этапу проектирования, на котором мы начинаем группировать компоненты и добавлять пространство между элементами. Что насчет оформления? Размеров? Как ведут себя элементы во время работы с ними? Как все выглядит с точки зрения дизайна?
После того, как мы закончили с дизайном, прежде чем что-либо кодировать, мы берем разные части продукта, собираемся командами и проводим дизайн-спринт. «Вот компонент, который мы создаем. Вот поведения всех элементов, спецификации дизайна, принципы, лежащие в основе этого исследования. Что вы думаете? Подходит ли этот продукт для вашей команды?» После получения этих отзывов мы вносим некоторые улучшения. Мы делаем вайрфреймы и файл для инженеров, чтобы они могли приступить к работе над кодами для компонента. После того, как они закончат с кодом, мы собираемся заполнить страницу с руководством, чтобы осветить некоторые моменты: как работает этот компонент, его поведение, его локализация. Например, если я переведу его на арабский язык, то как будут размещены компоненты. Станут ли они занимать слишком много места? Нужно ли мне уменьшить шрифт?
После кодирования мы делаем второй обзор, и если все работает хорошо, мы опубликуем продукт. Да, иногда перед публикацией нам нужно провести пользовательское тестирование. Это зависит от продукта. Иногда вам приходится проводить пользовательские тесты уже после публикации. Например, если обнаружатся какие-либо ошибки после прочтения страницы, они снова проведут тесты и посмотрят, нужно ли вам что-то исправлять. В целом, это все. Я ответила на ваш вопрос?
Модератор: Я надеюсь, что так. Еще один вопрос, но у нас осталось одна минута. Поэтому ответ будет кратким. Поделитесь, пожалуйста, какие вы можете назвать основные элементы дизайн-системы для создания новой линейки продуктов? В том случае, когда вы не ограничены временем и ресурсами.
Синтия Ромеро: Я бы сказала, что обязательными являются рекомендации по использованию. Они описывают как нужно использовать компонент, чтобы убедиться, что все это знают, и когда его использовать нежелательно. Также важными вещами являются наличие информации и доступность. Для Pinterest это просто необходимо, потому что у нас миллионы пользователей, и не у всех одинаковые возможности. Таким образом, для нас доступность это, безусловно, отличная вещь. Она однозначно обязательна. Также важны взаимодействия: как мы взаимодействуем с продуктом? Есть ли какая-нибудь анимация, о которой нам следует знать? А как ведут себя компоненты?
Я бы ответила на Ваш вопрос так: создайте рекомендации по использованию, разработайте лучшие элементы для компонента, проверьте его способность к взаимодействию, доступность и ссылки на код, чтобы убедиться, что он чистый и его будет легче реализовать. И последнее – токены. Обязательно создайте их, потому что если у вас есть дизайнерские токены и вам нужно сделать одно изменение, то вы можете изменить только токены, а все остальное будет автоматически обновлено. Поэтому, да, не забудьте создать их.