Содержание
- Что такое «дизайн-система»?
- Основные соображения перед внедрением дизайн-системы
- 01. Учитывайте зрелость продукта и компании.
- 02. Создайте заявление о видении
- 04. Установите руководящие принципы проектирования.
- 05. Просмотрите стек технологий и проведите инвентаризацию интерфейсов.
- 06. Создайте основную команду
- Создание дизайн-системы
- 01. Продать идею
- 02. Выберите и завершите пилотный проект.
- 03. Дизайн и сборка
- 04. Запуск и поддержка
Дизайн-системы помогают крупным игрокам отрасли стандартизировать процесс проектирования и сделать его более предсказуемым. Многие компании пытаются взять на себя инициативу по созданию собственной дизайн-системы. Но довольно часто, несмотря на все самые лучшие намерения, все усилия, которые команда разработчиков вкладывает в создание продуманной системы дизайна, могут пойти насмарку.
В ходе этой статьи мы определим, что такое дизайн-система, что следует учитывать перед созданием дизайн-системы и как лучше всего внедрить дизайн-систему в вашей организации. Дополнительные полезные ресурсы см. В нашем обзоре инструментов веб-дизайна.
Что такое «дизайн-система»?
Название «дизайн-система» может создать ложное впечатление о чем-то, что представляет ценность только для дизайнеров. Но на самом деле дизайн-система касается не только дизайнеров; вместо этого речь идет о том, как вся организация создает свои продукты (если это включает в себя веб-сайт, вам понадобится лучший конструктор веб-сайтов и отличный веб-хостинг).
Успешные процессы проектирования обычно зависят от тесного межфункционального сотрудничества между всеми командами, участвующими в создании продукта. А дизайн-система - это создание общего языка, который позволяет командам более эффективно сотрудничать. Это полный набор принципов, правил и стандартов проектирования, а также инструментарий (шаблоны проектирования, визуальные стили и библиотека кода многократно используемых компонентов пользовательского интерфейса), необходимые для достижения этих принципов, правил и стандартов. Система проектирования позволяет производственной группе создавать продукт быстрее - без ущерба для качества - за счет возможности многократного использования дизайна (убедитесь, что у вас есть надежное облачное хранилище для хранения ваших активов).
Конечная цель внедрения дизайн-системы - помочь бизнесу учиться и расти. Вот почему дизайн-система всегда должна основываться на целях бизнеса. По той же причине не все дизайн-системы построены одинаково, но, тем не менее, большинство дизайн-систем имеют несколько общих элементов:
- Принципы дизайна - ценности, которые гарантируют, что проектные усилия будут идти в правильном направлении.
- Компоненты и библиотеки шаблонов - это строительные блоки дизайн-системы.
- Руководства по дизайну - особые правила дизайна той или иной части
продукт. Они могут включать рекомендации по стилю (типографика, цвета, интервалы и т. Д.) И рекомендации по написанию UX (голос и тон, язык, принципы письма и т. Д.). - Практики проектирования - помогают поддерживать систему в рабочем состоянии и обеспечивать ее ценность для команды разработчиков.
Основные соображения перед внедрением дизайн-системы
01. Учитывайте зрелость продукта и компании.
Прежде чем приступить к созданию дизайн-системы, необходимо четко понимать, зачем она вам нужна. Многие компании внедряют дизайн-системы, чтобы сократить свой технический долг и ускорить процесс разработки продукта (тратя меньше времени на утомительную, монотонную деятельность). Но не все компании сталкиваются с такими проблемами, потому что у компаний разный уровень зрелости дизайна.
Создание дизайн-системы с нуля - занятие, отнимающее много времени, и небольшим, быстро развивающимся командам, вероятно, не понадобится дизайн-система, потому что это замедлит их работу. Стартап из трех-пяти человек, который все еще пытается найти продукт, соответствующий рынку, вероятно, потратит значительное количество времени на создание системы. Когда ресурсы тратятся на создание дизайн-системы, они не тратятся на создание продукта. Таким образом, до тех пор, пока компания не установит четкое направление развития своей продукции, инвестирование времени в создание системы проектирования может привести к появлению большого количества отходов.
02. Создайте заявление о видении
Дизайн-система - это люди - как они работают вместе для достижения общей цели. И люди хотят знать ответы на следующие вопросы:
- Куда мы идем?
- Чего мы хотим достичь?
- Почему мы хотим этого добиться?
Это фундаментальные вопросы, на которые вам нужно ответить, чтобы сформировать общее видение. Общее видение станет основой для системы проектирования, которая даст командам направляемый способ поиска решений для своих проблем с продуктом.
Заявление о видении определяет, чего ваша команда, продукт или компания пытается достичь и, что более важно, почему. Он объединяет команды вокруг четкого набора общих целей и становится звездой для всей организации - он объединяет людей, участвующих в разработке продукта, и направляет их к общему пункту назначения.
Если вы ищете простой способ сформулировать свое видение, подумайте о том, чтобы описать, как ваш продукт или организация должны выглядеть через пять лет. Поступая так, вы определите целевое условие, и будет намного проще создать стратегию, которая поможет вам его достичь.
04. Установите руководящие принципы проектирования.
Как вы определяете хороший дизайн? Как узнать, что что-то готово к реализации? Когда дело доходит до оценки качества дизайна, дизайнеры часто полагаются на свой собственный набор стандартов. Но такой подход может внести много хаоса в процесс разработки продукта, потому что каждый дизайнер будет иметь субъективные идеи. Вот где принципы дизайна могут спасти положение.
Прочные принципы проектирования являются основой любой функционирующей системы. Они должны отражать суть того, что хороший дизайн означает для компании, и давать практические рекомендации для продуктовых команд о том, как этого добиться (принципы дизайна всегда должны быть действенными). Принципы дизайна выступают в качестве стандартов для продуктовой команды и помогают им оценивать свою работу.
Вот несколько вещей, которые следует помнить при работе над принципами дизайна:
- Принципы дизайна должны отражать характер продукта. Например, когда дело доходит до проектирования интерфейса человек-машина для автомобилей, наиболее важным принципом проектирования должно быть «Безопасность прежде всего» (цель - обеспечить безопасность водителя и пассажиров). Вот почему каждое проектное решение следует принимать во внимание с точки зрения безопасности.
- Принципы дизайна не должны звучать как правила. Они не должны блокировать творческую энергию. Создатели продукта не должны чувствовать себя ограниченными или ограниченными.
- Принципы дизайна должны быть результатом открытого обсуждения. Во многих случаях нетрудно заставить людей следовать руководящим принципам, но, скорее, трудно заставить людей соглашаться с ними. Если в организации много команд дизайнеров, то участие их в обсуждении жизненно важно. Получая их отзывы о принципах дизайна, вы можете адаптировать их к потребностям пользователей.
05. Просмотрите стек технологий и проведите инвентаризацию интерфейсов.
Многие компании стремятся строить дизайн-систему поверх текущего интерфейса, но этот подход не самый лучший по многим причинам. Представьте, что ваша компания долгое время создавала продукт без системы.
Продукт, вероятно, имеет некоторую несогласованность в дизайне. Несоответствие обычно вызвано дублированием элементов дизайна. Выявление дублирования элементов дизайна помогает команде избежать сценария, при котором члены группы создают элемент с нуля и через некоторое время обнаруживают, что его версия уже существует.
Вот почему, если вы планируете внедрить дизайн-систему, начните с аудита - проведите инвентаризацию интерфейса, чтобы понять, что используется.
Изучите существующие взаимодействия, соберите все элементы пользовательского интерфейса, составляющие интерфейс, и просмотрите их. Это важно сделать до создания реальной системы проектирования, потому что процедура поможет вам понять две вещи:
- Сколько проектной задолженности имеет ваша организация и какие области требуют большего внимания.
- Причины несоответствия и изменения, которые необходимо внести в процесс проектирования, чтобы избежать таких проблем в будущем. Может быть, вам нужно будет изменить процесс или, возможно, вам нужно будет внедрить новую технологию.
06. Создайте основную команду
Кто должен участвовать в построении дизайн-системы? Дизайн - это командный вид спорта, и создание дизайн-системы не исключение. Опыт и творческая энергия, обеспечиваемые межфункциональным сотрудничеством, необходимы для создания дизайн-системы. Вот почему основная группа людей, которая фактически создает систему, обычно включает инженеров, дизайнеров, менеджеров по продуктам и заинтересованных лиц. Когда вы начинаете создавать дизайн-систему, очень важно иметь небольшой размер основной команды (от шести до восьми человек), потому что это поможет вам создать импульс и быстро что-то построить.
Создание дизайн-системы
Рассмотрите возможность реализации дизайн-системы как проекта. И, как и любой другой проект, у этого должен быть прочный процесс со следующими этапами:
- Продать идею
- Завершить пилотный проект
- Дизайн и сборка
- Запуск и обслуживание
01. Продать идею
Продажа идеи дизайн-системы - первый и самый важный шаг во внедрении дизайн-системы. Обычно продавать дизайн-системы сложно из-за компромиссов - и руководство, и члены продуктовой группы понимают, что ресурсы, потраченные на создание дизайн-системы, не тратятся на доставку функций. Поэтому вполне естественно ожидать некоторого сопротивления. Чтобы продать дизайн-систему, вам нужно сделать две вещи:
Получите поддержку от заинтересованных сторон
Дизайн-система не заработает, если люди, принимающие решение о финансировании, не одобрят ее. Намного легче заручиться поддержкой руководителей, если вы покажете, что система решает реальные бизнес-проблемы. Определите ключевые болевые точки бизнеса (области, в которых компания теряет деньги) и покажите, как дизайн-система может спасти положение. Напишите стратегию с четким предложением и представьте ее ключевым людям, принимающим решения.
Рекомендуется создать презентацию (или серию презентаций), чтобы убедить заинтересованные стороны инвестировать в этот проект. Вы можете оформить презентацию в виде рассказа. Рассказывая истории успеха, у вас будет больше шансов привлечь заинтересованные стороны.
Получите поддержку от ваших пользователей
Заручиться поддержкой заинтересованных сторон - это только половина дела. Вам нужно заручиться поддержкой ваших потенциальных пользователей. Во-первых, вам нужно определить вашу целевую аудиторию. Кто будет использовать вашу дизайн-систему и как они будут ее использовать? Вот несколько общих групп пользователей:
- Продуктовые команды (например, дизайнеры, разработчики)
- Третьи стороны (например, поставщики)
- Бизнес (например, маркетинг, продажи, юриспруденция)
Вам нужно будет определить болевые точки различных групп пользователей и показать ценность, которую система им принесет. У каждой группы пользователей разные триггеры покупки - причины, по которым они хотели бы использовать дизайн-систему. Например, для разработчиков триггером может быть большая последовательность в методах реализации или меньше времени на рефакторинг кода.
02. Выберите и завершите пилотный проект.
Как только вы создадите базовую концепцию для своей дизайн-системы, важно ее проверить. Лучший способ проверить концепцию - протестировать ее на пилотном проекте.
Выберите образец реального продукта и создайте дизайн-систему, которая приведет к реальному решению. Выбранный вами проект следует использовать в качестве основы для вашей будущей системы проектирования, чтобы вы могли проверить, работает ли система для вашей организации.
Вот набор критериев, которые вы можете использовать для определения потенциальной эффективности пилота:
- У проекта должен быть потенциал для общих компонентов и шаблонов. Он должен содержать компоненты и шаблоны, которые можно повторно использовать в других продуктах.
- Он должен иметь хорошую техническую осуществимость и несложно вносить все необходимые изменения.
- Проект должен быть выполнен в разумные сроки (в идеале - за пару недель) и не должен требовать участия большого количества людей из разных отделов (важно сохранять независимость).
- У проекта должен быть маркетинговый потенциал. Проект должен вдохновить другие команды на внедрение дизайн-систем в свой процесс проектирования.
03. Дизайн и сборка
Создавайте повторно используемые компоненты
Одна ошибка, которую я вижу снова и снова, заключается в том, что команды создают компоненты, которые слишком сосредоточены на одном варианте использования. В результате система становится слишком негибкой, и ее пользователям приходится создавать свои собственные компоненты каждый раз, когда им нужно охватить конкретный сценарий.
Попробуйте разработать компоненты, которые не привязаны к одному варианту использования, но могут
можно повторно использовать в различных контекстах. Чтобы компоненты можно было использовать повторно и масштабировать, они должны иметь следующие свойства:
- Модульный: модульные компоненты самодостаточны - у них нет никаких зависимостей.
- Составные: можно комбинировать компоненты для создания новых компонентов.
- Настраиваемый: компоненты можно настраивать и расширять, чтобы они работали в различных контекстах.
Каждый раз, когда члены команды хотят представить новый компонент, им необходимо подумать о том, как он будет работать на различных платформах, для которых они разрабатывают. В идеале каждый компонент, который они разрабатывают, должен работать на всех платформах.
Показать ценность через среду песочницы
Хорошо известно, что лучший способ увидеть ценность - это испытать ее на собственном опыте. Так что создайте среду песочницы, в которой члены продуктовой группы смогут создавать прототипы продуктов с помощью вашей системы дизайна.
04. Запуск и поддержка
Некоторые продуктовые команды считают, что работа завершена после создания дизайн-системы. Не правда. Дизайн-система - это продукт, и очень важно управлять им как продуктом, а не проектом - дизайн-система требует постоянного обслуживания и улучшений по мере необходимости.
Поощряйте принятие вашей дизайн-системы
Как и любой другой продукт, дизайн-системе нужны активные пользователи. Вы можете создать лучшую дизайн-систему в мире, но если вы не будете активно продвигать ее в своей организации, все усилия сильно пострадают. Вот почему, начиная с первого выпуска вашей системы, вам нужно много работать, чтобы способствовать ее внедрению:
- Создайте сообщество сторонников. Соберите группу евангелистов во главе с авторитетными влиятельными лицами или дизайнерами, которые будут предлагать и продавать идеи о вашей системе дизайна. Евангелисты должны участвовать в таких мероприятиях, как семинары и встречи, целью которых является повышение осведомленности о существовании системы и обучение людей тому, как ее использовать.
- Вносить обновления. Время ожидания обновлений играет ключевую роль в принятии дизайн-системы. Практикуйте регулярные инкрементные выпуски, а не большие открытия, и всегда следите за тем, чтобы обновления поставлялись с журналом изменений.
Проанализировать, как люди используют дизайн-систему
Дизайн-системы растут и падают в зависимости от того, насколько они просты в использовании. Если вы только начали внедрять дизайн-систему в процесс дизайна своей организации, проведите серию интервью с пользователями, чтобы понять, как люди ее используют. Таким образом вы сможете определить общие проблемы, с которыми может столкнуться ваша целевая аудитория.
Для систем, которые будут включены в процесс проектирования в течение некоторого времени, важно измерить время, необходимое для поддержания системы в актуальном состоянии. Если поддерживать дизайн-систему в актуальном состоянии станет сложно, она быстро устареет.
Проверьте свои дизайнерские решения
Независимо от того, насколько хорошо вы предсказываете вещи, бывает сложно предсказать, как то или иное изменение повлияет на взаимодействие с пользователем. Вот почему так важно подтверждать свои решения.
Вот три типа тестирования, которые вам помогут:
- Юзабилити-тестирование
- Визуальное регрессионное тестирование, которое помогает выявить непреднамеренные визуальные изменения в стилях компонентов.
- Ручное и автоматическое тестирование доступности, которое гарантирует доступность ваших компонентов
Ввести управление версиями
В дизайн-системах должны быть версии, потому что управление версиями упрощает отслеживание изменений. С версионными выпусками пользователи могут ссылаться на конкретную версию как на зависимость. У них также есть контроль над тем, когда и как выполняется обновление до новых версий.
Существует два типа управления версиями:
- Версионирование всей системы. Здесь все в системе относится к одному номеру версии. Как пользователи, мы занимаемся управлением версиями для всей системы при обновлении нашей мобильной ОС - при обновлении iOS мы обновляем все программное обеспечение.
- Версионирование по модулям. Это предполагает наличие номера версии для каждого компонента или стиля в системе дизайна. По сравнению с управлением версиями всей системы, управление версиями по модулям дает большую гибкость - пользователи могут обновлять только те элементы, которые им нужны.
Создание дизайн-системы - это не разовая деятельность; это на самом деле итеративно. Люди, участвующие в создании дизайн-системы, должны думать о ней как о живом организме, соединяющем всю организацию. Успешная дизайн-система становится частью ДНК организации и помогает обеспечить согласованный пользовательский опыт.
Этот контент изначально появился в netmag.
