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

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

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

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

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

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

Профессия «Дизайнер интерактивных медиа»
Профессия «Дизайнер интерактивных медиа»
Скидка 45% по промокоду UXPUB
Узнать подробнее

Артефакты руководства по стилям используются командами дизайнеров для общего согласования элементов дизайна в руководстве по стилям, и обычно представлены в виде файлов 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
Total
0
Shares
2 комментария
  1. Использую ровно этот же функционал для демонстрации дизайна заказчику и обсуждения.
    Так что это полезно не только внутри дизайн–команд.

  2. Тоже примерно так, но чаще zeplin вместо инвижна, в нем можно и комментить и утверждать с клиентами и сразу передавать в разработку с размерами

Добавить комментарий

Ваш адрес email не будет опубликован.

Похожие статьи
Что думают ваши близкие, когда вы говорите "UX дизайнер"
Подробнее

Что думают ваши близкие, когда вы говорите, что вы “UX дизайнер”

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

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
0
Share