fbpx
Руководство по стилям для дизайнеров. “Дизайн, обмен и контроль”

Руководство по стилям для дизайнеров. “Дизайн, обмен и контроль”

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

Живые руководства по стилям:

Живые руководства по стилю пишутся в HTML и готовы для использования в продакшне.

Артефакты руководства по стилям:

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

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

Дизайн

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

Наш базовый файл руководства по стилям в Sketch
Наш базовый файл руководства по стилям

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

Обмен

Используя Dropbox (или Google Drive), мы можем обмениваться и контролировать версии файлов дизайна. В этом примере я создал папку Styleguide через приложение Github и сохранил там свой файл Sketch. Вы можете скачать приложение Dropbox и сохранять копии файлов на компьютере.

Dropbox

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

Контроль

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

Сначала создайте проект Desktop с тем же названием, что и папка в Dropbox.

Создание нового проекта в Invision
Создание нового проекта в Invision

Затем подключите Invision к аккаунту Dropbox. Кликните розовую кнопочку с плюсом в “Sync With Dropbox”.

Sync With Dropbox

В диалоговом окне Dropbox выберите файл Sketch с руководством по стилям.

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

Как только Invision завершит синхронизацию, вы увидите все артборды как Screens (в этом примере “Buttons”).

Экран кнопок в Invision
Экран кнопок в Invision

В этом примере кликните на экран “Buttons”, чтобы войти в режим редактирования и используйте режим Comment для комментирования стилей кнопок.

 

режим Comment для комментирования стилей кнопок

Чтобы произвести изменения, указанные в комментарии, снова откройте Sketch:

Чтобы произвести изменения, указанные в комментарии, снова откройте Sketch

На этом этапе изменения должны автоматически подтянуться в Invision.

 автоматически подтянуться в Invision

Гораздо лучше

Перейдите в Invision и решите проблему с кнопками.

Invision

Я также мог бы отметить этот скрин как “approved”. Так как я решил все проблемы с ним.

approved

И, наконец, давайте проверим историю всех изменений в дизайне:

История всех изминений
Ухты, я даже могу следить за всем, что творится!

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

Выводы

  1. Создавайте артефакты дизайна в Sketch
  2. Обменивайтесь с командой и контролируйте версии через Dropbox
  3. Контролируйте, просматривайте, комментируйте и прототипируйте в Invision
2 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Перестаньте использовать «MVP» как оправдание для выпуска дерьмовых продуктов
Подробнее

Перестаньте использовать «MVP» как оправдание для выпуска дерьмовых продуктов

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

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share