5 шагов для создания системы дизайна

Взгляд на то, как мы создали нашу систему проектирования в Sketch

Колледж Конестога Doon Campus Студия Дизайнерских Фондов

Системы проектирования стали основным активом любой команды разработчиков и разработчиков. Они были впервые созданы техническими компаниями, такими как Google (Material), AirBnB, Uber и Facebook, и служат важной цели: предоставить единый ориентир для цифрового дизайна, включая рекомендации, компоненты и фрагменты кода. Они предназначены не только для технологических компаний и приложений, но и для любой организации с цифровым присутствием. В этом посте мы шаг за шагом покажем вам, как мы создали нашу систему проектирования и какие решения мы сделали на этом пути. Мы будем ссылаться на наш продукт Circuit в качестве примера при построении нашей системы проектирования и выбрали Sketch в качестве инструмента проектирования для создания и каталогизации компонентов.

Универсальное меню Circuit

О Circuit и наших проблемах дизайна, задачах и целях

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

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

Стремясь упростить процесс проектирования, мы решили принять систему проектирования.

Что такое система проектирования и как она помогает?

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

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

Таблица плюсов и минусов системы проектирования (диаграмма сделана с нашей системой проектирования!)

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

Как создать и организовать систему дизайна

Вот шаги, которым мы следовали, чтобы создать нашу систему проектирования. Мы выбрали Sketch для создания нашей библиотеки, и некоторые рекомендации будут касаться ее функциональности, но концепции, которые мы охватываем, универсальны. Другие инструменты, которые вы можете использовать, включают Figma, Adobe Xd и Adobe Illustrator.

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

Шаг 1 - Аудит вашего сайта или приложения и составить список

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

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

Шаг 2 - Организовать страницы

Метод атомного дизайна (слева) и метод Pattern Page (справа)

Независимо от выбранного программного обеспечения, вы, скорее всего, будете использовать страницы для организации содержимого вашей библиотеки. Есть два способа сделать это. Первая - это методология атомного проектирования Брэда Фроста, в которой элементы моделируются в соответствии с 5 иерархическими группировками: атомы, молекулы, организмы, шаблоны, страницы. Второй метод, который мы называем шаблонными страницами, представляет связанные компоненты на своих собственных страницах, таких как цвета, тип, значки, аватары, кнопки и т. Д. Для сравнения, это плоская структура без особой иерархии, которая может сделать его более простым для начинающие дизайнеры, чтобы найти конкретные части, но не хватает структурированного «строительного блока» потока атомарной методологии.

Как мы организуем нашу систему дизайна

Мы структурировали нашу систему, следуя Атомным принципам, хотя значительно упростили ее. В итоге мы получили 5 основных страниц:

Страница Руководства для письменной документации, объясняющей стандарты и цели системы проектирования.

Страница «Песочница», которая является нашей «средой разработки» для дизайна. Мы используем это, чтобы экспериментировать с новыми функциями и дизайнами. Как только функция одобрена, построена, протестирована и продвинута в производство, мы обновляем дизайн и продвигаем его в основную библиотеку.

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

Готовая страница Символы

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

Одна из страниц Руководства по стилю

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

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

Шаг 3. Создание стилей слоев и стилей текста (пропустите этот шаг, если у вас нет Sketch)

Стили слоев и текста хороши тем, что позволяют переопределять фигуры и текст, которые вы позже связали со стилями.

Стили слоев позволяют нам сохранять свойства объектов, такие как заливка, границы, тени, выравнивание и т. Д., И позволяют последовательно применять их к другим объектам.

Стили слоев Circuit

Добавление стиля слоя: выберите свой объект и на панели свойств под внешним видом нажмите «Без стиля слоя» и «Создать новый стиль слоя», чтобы сохранить свойства объекта.

Наименование стилей слоя: от того, как вы назовете ваши стили, будет зависеть их внешний вид в меню (см. Выше). Если вы обнаружите, что переход к вашему стилю занимает слишком много времени или его трудно найти, вы всегда можете изменить его в окне стилей. Слой> Организовать стили слоя. Вот как мы назвали наши стили слоя:

Цепь / цвет / Primary / Синий / Средний

Стили текста позволяют нам сохранять свойства текста, включая размер шрифта, шрифт, выравнивание и т. Д., И позволяют нам быстро вводить или изменять текст, используемый в символах в дальнейшем. Здесь вы, вероятно, захотите организовать свои стили в соответствии с семантической классификацией текста на своих веб-страницах, то есть H1, H2, H3, body и так далее.

Стили текста Circuit

Добавление стиля текста: выделите текст и на панели свойств под внешним видом нажмите «Без стиля текста», а затем «Создать новый стиль текста».

Наименование стилей текста: аналогично именованию стилей слоя. Мы сгруппировали наши стили в соответствии с абзацами H1, H2, H3,… и любыми компонентами, которым требовался собственный стиль текста.

Вы также можете применять стили слоя к текстовым стилям. Вот как:
Выберите текст> «Слой»> «Преобразовать в контуры», и тогда вы сможете добавлять стили слоя к тексту, как и к любой обычной фигуре. Однако, если у вас много текста, слишком много работы может привести к сбою в работе Sketch или к невероятной задержке.

Шаг 4 - Создание символов / компонентов

Это забавная часть. Обратите особое внимание на интервалы, размеры, формы и, если применимо, не забывайте применять стили текста и слоя к отдельным частям компонентов, это позволит впоследствии переопределить детали. Цель состоит в том, чтобы получить полную коллекцию символов и компонентов.

Создайте символ. В Sketch сгруппируйте элементы и нажмите «Создать символ» в верхней части окна. Начните с малого, определившись с такими вещами, как кнопки, аватары и значки, а затем перейдите к созданию составных компонентов.

Назовите символ: это будет определять, как они будут отображаться в меню вставки. Для кнопки мы назвали их так:

Кнопка / Default / Idle
Кнопка / Default / Hover
Кнопка / Default / Disabled

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

Панель переопределения компонента карты

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

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

Всегда масштабируйте новый символ для проверки!

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

Обратите внимание, что его легче масштабировать, чем уменьшать, поскольку иногда все становится немного шатко. Так что если вы не уверены, начните с малого!

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

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

Шаг 5 - Постоянные обновления системы проектирования

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

И это нормально! Помните, что система проектирования - это живая библиотека, и ее нужно постоянно обновлять.

Вот несколько дополнительных советов по Sketch, которые помогут вам управлять вашей системой:

  • Создайте папки данных, чтобы добавить собственную библиотеку изображений в переопределения. Имейте в виду, что если вы переместите папку, вам придется заново связать ее. Эскиз> Настройки> Данные / Библиотека.
  • Обновление вашей библиотеки в других документах - уведомления в верхнем правом углу → Обновить библиотеку (сначала необходимо сохранить и закрыть библиотеку)
  • Sketch API - это официальный обновленный источник для двойной проверки фактов, поскольку сторонние веб-сайты иногда содержат устаревшую информацию.
  • Источники SketchApp - полезное место для получения бесплатных ресурсов для скетча

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

  1. Sketch Runner - используйте клавиатуру для быстрого ввода символов!
  2. Symbol Organizer - сделайте свою страницу символов красивой и организованной так, как вы этого хотите.
  3. Unsplash It - добавить фотографии из Unsplash.

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