5 ключевых шагов для создания идеальной системы дизайна
Основные шаги для создания дизайн-системы
Дизайн-системы - это набор элементов, элементов и правил многократного использования, которые служат руководством для всей команды разработчиков проекта. В настоящее время он широко считается важной частью процесса проектирования UX, которая имеет большое значение для обеспечения успешного взаимодействия с пользователями.
За последние несколько лет эта система привнесла глоток свежего воздуха в стратегии дизайна продукта во многих странах, и это намного больше, чем типичные руководства по пользовательскому интерфейсу.
Мы много слышим о необходимости создания этой системы, учитывая последовательность и другие преимущества, которые она нам предлагает.
Известные компании, такие как IBM и Airbnb, также внедрили собственные системы дизайна, чтобы ускорить и упростить творчество внутри своих команд.
Имея в виду это краткое введение, давайте перейдем к более подробному описанию дизайн-систем и узнаем, как они могут нам помочь.
Что такое дизайн-система?
Дизайн-система - это единый источник информации, состоящий из различных элементов, который помогает членам команды в проектировании и разработке продукта.
Это позволяет вам обрабатывать все, что связано с дизайном продукта, в большем масштабе для нескольких приложений. Общий результат этого набора рекомендаций - согласованный порядок в системах, охватывающий каждый шаг, от кнопок действий до целевой страницы.
В чем разница между системами дизайна и руководствами по стилю?
Обычно система проектирования состоит из различных элементов, которые делают ее надежным источником для различных приложений.
В руководстве по стилю вы найдете широкий спектр цветов, логотипов, шрифтов и других необходимых атрибутов бренда. Команды дизайнеров и маркетологов в основном используют руководства по стилю, но дизайн-система стоит выше визуальных аспектов и аспектов презентации.
Это сочетание стиля, голоса и компонентов, которые имеют решающее значение для создания воплощения системы.
Рассмотрим руководства, которые в основном ориентированы на то, как компании должны разговаривать со своей аудиторией.
Это отличается от обычных руководств по стилю, поскольку в них рассказывается, что делать и чего избегать, чтобы передать лучшее чувство человеку и, следовательно, оставить более ценный опыт.
Проще говоря, вы можете найти принципы, руководства, шаблоны, компоненты и протоколы в месте, которое называется системой проектирования.
Зачем компании иметь дизайн-систему?
Дизайн-система - это динамический набор информации, который развивается вместе с продуктами по мере расширения компании или изменения потребностей клиентов.
Повышенная производительность и простота сотрудничество два неразделимых результата систем дизайна в командной работе. Они могут помочь предприятиям во многих отношениях в их росте, и вот некоторые из наиболее важных:
Согласованность
Компаниям часто необходимо разрабатывать проекты для нескольких платформ, сохраняя при этом согласованность взаимодействия и поведения между ними.
Чем более согласованными будут ваши источники, тем проще дизайнерам и разработчикам будет реализовать высококачественный пользовательский интерфейс.
Таким образом, они смогут рассматривать конкретный продукт или страницу как комбинацию известных элементов. Учтите, что вам нужна кнопка CTA на целевой странице.
Вместо того, чтобы описывать точные сведения о шрифте, отступах, цвете и фоне, вы просто просите их дать вам «основной призыв к действию».
Это не позволяет увидеть продукт с более чем десятью различными типами стилей кнопок, несколькими макетами дизайна, а также различными ощущениями и взглядами.
С другой стороны, это дает компонентную и модульный мышление ваших дизайнеров. Это позволяет им определять гораздо больше управляемых элементов и вносить необходимые изменения в соответствии с потребностями дизайна.
Такая согласованность оставляет не конечный результат, а продукт более высокого качества, который также облегчает мониторинг команды QA.
Командная работа
Вы одна из тех корпораций, в которых над проектами одновременно работают несколько команд? Если это так, создание дизайн-системы может значительно ускорить сотрудничество между членами команды.
Этот источник информации позволяет вам сэкономить столько времени на создании новых проектов с нуля или обновлении существующих, поскольку люди имеют лучший доступ к различным ресурсам.
Более того, общение между дизайнерами и разработчиками становится более эффективным. Вот почему многие считают дизайн-системы мостом между этими дисциплинами.
Наличие дизайн-системы не только увеличивает продуктивность нынешних членов команды, но и ускоряет этапы посадки новичков.
Новые дизайнеры или разработчики в вашей команде смогут быстрее познакомиться с вашими ценностями и без труда найти то, что им нужно.
Какой тип дизайн-системы нам нужен?
Тип системы дизайна, которой следует придерживаться, во многом зависит от вашей команды и продукта, который вы хотите производить. Мы можем понять это, начав с нескольких простых вопросов.
- Будет ли система использоваться маленькой командой или большой? Они полностью понимают предмет?
- Какое общее количество продуктов будет согласовано? Какие платформы и технологии мы используем?
- Для нас важна консистенция всех продуктов или нет?
Следующие принципы помогут нам лучше понять этот вопрос.
Гибкий или жесткий?
Прежде всего, вам нужно иметь четкое представление о том, хотите ли вы оставить место для дальнейших экспериментов или нет.
Гибкий план дает всем членам команды общее руководство, в то же время дает им определенный уровень свободы. Это означает, что члены вашей команды, занимающиеся проектированием и разработкой, могут использовать его в соответствии со своими требованиями.
С другой стороны, жесткий план охватывает подробную документацию, которая дает дизайнерам и разработчикам согласованный план, которому нужно следовать.
Вводить новые идеи или элементы в план непросто в строгих системах, и поэтому они должны быть подготовлены в первую очередь с учетом всех обстоятельств.
Лучший подход - использовать сочетание гибкости и жесткости. Иногда ваши дизайнеры и разработчики могут быть не очень заинтересованы в использовании вашей дизайн-системы, и принуждение их к этому не оказывает никакого влияния, кроме как отталкивать их.
Однако очень свободная система, в которой все остается необязательным, вообще не может считаться дизайн-системой! Так что не забывайте получить лучшее из обоих миров, подготовив свою дизайн-систему вместе со строгими и свободными планами.
Модульное против интегрированного
Модульные системы в настоящее время широко используются в различных отраслях промышленности. Лучше всего использовать его в проектах, которые влекут за собой потребности нескольких пользователей и должны масштабироваться за короткий период.
Однако внедрение таких систем часто требует более высоких бюджетов, поскольку создание независимых частей, которые могут эффективно работать вместе, является сложной задачей.
Его часто используют в широкомасштабных проектах, таких как крупные интернет-магазины или правительственные сайты.
Интегрированная система, с другой стороны, в основном сосредоточена на одном контексте. Хотя он состоит из некоторых частей, их можно заменять или использовать взаимозаменяемо.
Это подходит для систем, в которых не так много повторяющихся элементов.
Как построить дизайн-систему?
Запуск дизайн-системы для вашей организации вначале может показаться чрезвычайно сложным. Существует множество моментов, которые необходимо учитывать, и дизайн-систему нельзя подготовить и ввести в действие в одночасье.
В общем, перед нами два случая: начать новый проект или работать с продуктами, которые у нас есть в настоящее время. Общий подход почти такой же, но последний включает больше шагов.
Для нового проекта вы должны начать с проверки различных образцов, которые включают элементы и концепции. Ищите дизайн, который доставит вам удовольствие, а затем используйте существующие популярные принципы, чтобы придумывать цвета и формы для различных деталей.
Если вы уже работаете с проектом, первым делом необходимо создать инвентарь Элементы пользовательского интерфейса.
Поступая таким образом, вы сможете анализировать различия и сходства между ними и, следовательно, уменьшить количество дополнительных вариантов.
Теперь вы можете эффективно группировать их в зависимости от их применения и использовать доступные инструменты для ускорения процесса.
В качестве общей процедуры ключевые этапы создания такой системы заключаются в следующем.
Анализируйте то, что у вас есть
Лучший способ выбрать, какую дизайн-систему внедрить, - это проанализировать существующий подход, который вы применили к своим проектам. Начните с определения процессов, которым вы следуете, и инструментов, которые вы используете для этой цели.
Также оцените, насколько легко ваши продуктовые команды могут понять аспекты дизайна, чтобы попытаться оценить время, необходимое для внедрения дизайн-системы.
Затем определите алфавит, который вы используете для своего бренда.
Этот общий термин включает в себя ценности продукта, а также используемые вами цвета, голос и шрифты. Вы также можете ознакомиться с руководящими принципами вашего бренда и использовать этот сбор данных при работе над принципами дизайна.
Изучите визуальные аспекты
Последнее, с чем вы когда-либо хотели бы столкнуться, - это дублирование дизайна. Это приводит к несогласованности, что приводит к снижению качества результатов проекта.
Проведите визуальный аудит, чтобы выявить дубликаты и классифицировать все связанные компоненты в продукте. Этот аудит не только поможет вам найти несоответствия в продукте, но и наиболее важные и используемые элементы в нем.
Вы можете начать этот многоступенчатый процесс, узнав о количестве уникальных цветов и шрифтов в вашем CSS с помощью инструмента CSS Stats.
Теперь, когда у вас есть лучшее представление о своем стиле, вы можете искать компоненты.
Здесь вы можете использовать веб-сайт Atomic Design, на котором, как следует из названия, вы найдете разбивку мельчайших элементов, существующих на веб-странице.
Создать язык дизайна и шаблон
Ваш язык дизайна - это сердце дизайн-системы, которую вы собираетесь использовать. Великолепного пользовательского опыта можно достичь, четко понимая, почему принимаются дизайнерские решения.
Ваши принципы проектирования должны давать понятный ответ на вопросы о том, что вы строите, о причинах этого и методологии, которую вы использовали для этого. Язык дизайна должен состоять из четырех основных частей.
Цвет
Обычно используются два или три основных цвета, чтобы представить идентичность бренда. Если вы хотите предоставить вашим дизайнерам больше возможностей, включите цветовые смеси, оттенки и оттенки.
шрифты
Правильная система дизайна часто состоит из двух шрифтов; один для заголовков и тела, а другой шрифт для кодов. Избегайте использования нескольких шрифтов, так как это только сбивает с толку ваших пользователей без каких-либо положительных результатов. Также, Выбор подходящего шрифта для сайта может быть непросто, поэтому уделите ему достаточно внимания.
Интервал и размер
Пробелы и поля, которые вы используете на своих страницах, выглядят наиболее выгодно, когда они сбалансированы. Выбор систем, которые полностью совместимы со смартфонами, в настоящее время становится обязательным в этом отношении.
Изображение
Ваши изображения также должны быть подготовлены на основе руководящих принципов. Установите некоторые правила и планы для своего бренда и придерживайтесь их любой ценой.
Теперь пришло время погрузиться в фактические компоненты, которые будут использоваться в вашем пользовательском интерфейсе. Сделайте библиотеку из имеющихся у вас частей и частей, которая включает в себя каждую кнопку, изображение и даже ваши формы.
Оцените их на основе ваших конкретных потребностей, объедините похожие и удалите лишние элементы, чтобы упростить процесс принятия решений.
Установите правила и стратегии
Как указывалось ранее, конечная цель дизайн-системы - поднять творческий потенциал на более высокий уровень.
В предыдущих разделах мы упоминали, что ваши правила должны быть сочетанием строгих и свободных, чтобы творческий потенциал членов команды никогда не ограничивался одним направлением.
Принимая во внимание динамическую природу дизайн-системы, вы должны определить, как вы будете справляться с изменениями в долгосрочной перспективе.
Одна из популярных моделей описывает три подхода к стратегии управления: одиночный, централизованный и федеративный.
В одиночной модели ответственный человек или группа принимает все решения, связанные с системой проектирования.
Централизованная модель относится к условиям, в которых команда отвечает за то, что происходит в системе. А федеративная модель означает, что за систему отвечают несколько человек из разных команд.
Многие считают одиночную модель самым рискованным выбором, поскольку все решает один человек, что во многих случаях может помешать выполнению задачи.
Организации, у которых есть команда, отвечающая за обновление и изменение системы, должны поддерживать тесный контакт с другими, чтобы сделать систему более универсальной.
Учитывая участие нескольких команд в федеративной модели, люди могут гораздо быстрее адаптироваться к изменениям. Тем не менее, для контроля общего прогресса требуется руководитель группы.
У каждого из этих вариантов есть свои плюсы и минусы, и выбор модели зависит только от вас.
Вы можете реализовать комбинацию всех подходов в своей команде, но независимо от того, что вы делаете, всегда сосредотачивайтесь на участии членов команды в вашей системе и поощряйте их обсуждать свои идеи.
Подводя итог
Дизайн-системы больше не являются футуристическими идеями. Дизайн-система - это полный пакет необходимых элементов дизайна, который все чаще становится основой продуктовых стратегий в компаниях.
Чем лучше он может интегрироваться с дизайнерами и разработчиками, тем лучше будут результаты. Эта система усиливает деятельность, основанную на дизайне, и продолжает развиваться с течением времени.
Поэтому мы должны постоянно обновлять его вместе с изменениями и разработками продуктов.
