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

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

Несколько дней назад я прочел статью об управлении руководствами по стилю с помощью 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 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Дебаггинг (Debugging) плагинов Sketch
Подробнее

Дебаггинг (Debugging) плагинов Sketch

Панель Sketch Custom Script – это игровая площадка для разработчиков и хороший инструмент дебаггинга. В верхней части вы печатаете код, а внизу находится область вывода для вашего кода.
Подробно о плотности пикселей в дизайне интерфейсов
Подробнее

Подробно о плотности пикселей в дизайне мобильных интерфейсов

Пиксельная плотность обозначает количество пикселей, которое вмещается в определенном физическом размере (обычно, это дюйм). На первом Mac-е было 72 пикселя на дюйм - число вроде кажется большим, но на самом деле это были огромные пиксели, под которые еще не каждая графика подойде

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

Total
0
Share