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

Несколько дней назад я прочел статью об управлении руководствами по стилю с помощью 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

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Каллиграфия и леттеринг для начинающих

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

Zeplin.io – способ подружить дизайнера и верстальщика

Zeplin – это новый и очень перспективный сервис, цель которого подружить и ускорить взаимодействие дизайнеров и других разработчиков. На данный момент сервис вышел с бета тестирования и уже его испытать в действии. Поддержка Sketch уже есть из коробки, а Photoshop появится немного позже.

Руководство дизайнера по DPI и PPI

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