Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Программа для оптимизации взаимодействия между дизайнером и разработчиком.
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
26
Битрикс24

Битрикс24

www.bitrix24.ru

16
Отследить-посылку

Отследить-посылку

B2B-сервис трекинга посылок

14
myPreza

myPreza

mypreza.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

10
YAGLA

YAGLA

yagla.ru

10
Reader

Reader

Интернет-журнал о современных технологиях.

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

Как мы решили проблему трансфера UI от дизайнера к разработчику

638 12 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Сегодня мы бы хотели представить вашему вниманию обзор самых популярных программ для передачи макетов от дизайнера к разработчику: Zeplin, Avocode, Sympli. A также пояснить, почему появился Sketchode.

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

Одной из такого рода задач перед нашей командой стала нарезка элементов интерфейса из файлов, приходящих от наших дизайнеров. Пользовательские интерфейсы наш арт-отдел отрисовывает в Sketch, в последние годы зарекомендовавший себя как отличный UI-редактор под Mac, удобный для отрисовки как мобильных, так и десктопных приложений. Справляется он и с нарезкой, однако использование разработчиками приложения за $99 для столь утилитарной задачи было поставлено под сомнение нашим финансовым отделом.

Следующим шагом к решению проблемы стали пробы существующих на рынке утилит, позволявшими бы работать с проектами Sketch существенно уже, и, соотвественно, дешевле:

Avocode позволяет работать с дизайн-проектами, созданными как в Sketch, так и в Photophop. Работа производится при помощи облачного онлайн-сервиса, что позволяет всем задействованным в разработке лицам принимать непосредственное участие в менеджменте проекта. Avocode поддерживает функцию автоматической конвертации дизайн-проекта в любой формат, в том числе в CSS. Сервис интегрирован со Slack, уведомления обо всех изменениях приходят на указанную юзером электронную почту. Нужный функционал пользователь приобретает, выбрав и оформив удобную по формату подписку: так, месяц пользования Avocode небольшой группой людей с неограниченным количеством проектов будет стоить $8.99, а бизнес-подписка без ограничений обойдется уже в $12.99 в месяц.

Zeplin также позиционируется как инструмент, призванный облегчить коммуникацию между дизайнером и разработчиком и сократить время на обсуждения внутри команды. У Zeplin, как и у Avocode, имеется функция интеграции с каналом Slack, любое обновление отслеживается в виде уведомления в чате. Работа через "облако" позволяет пользователям Zeplin оперативно реагировать на любые изменения в проекте. За 3 проекта Zeplin просят $15 в месяц, за бизнес-подписку (8 проектов) – $25 в месяц; наконец, неограниченное количество проектов обойдется подписчику в $100 ежемесячно. Впрочем, 1 проект можно реализовать бесплатно, чтобы ознакомиться с функционалом и определиться с выбором подписки.

Sympli стал последним инструментом, с которым мы попробовали работать. В отличии от предыдущих проектов, этот сервис доступен исключительно в вебе, интегрируясь со средами разработки (XCode и Android Studio) с помощью плагинов. Ценовая политика полностью аналогична Zeplin. Завязка работы на плагинах обещала существенно ускорить работу (дизайн в средах воссоздается на лету), но, к сожалению, далекая от совершенства поддержка не успевает за обновлениями софта: новые версии Sketch не поддерживаются, Xcode с установленным плагином теряет стабильность.

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

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

Кстати, Scetchode - единственный из продуктов, упомянутых в данной статье, доступный для скачивания в Mac App Store. Приложение можно опробовать на одном проекте, а затем получить доступ к неограниченному их количеству за единовременную плату $9.99.

Мы не стоим на месте: у нас есть множество идей для развития. В первую очередь – это обеспечение кроссплатформенности, затем, возможно, внедрение поддержки дизайн-проектов Photoshop, а дальше… следите за обновлениями :)

Sketchode - пример продукта, в буквальном смысле созданного разработчиками для разработчиков. Уже сейчас у нас в компании им пользуются десятки коллег – но нам очень не хватает обратной связи от потенциальных пользователей за пределами IT Top. Мы были бы благодарны пользователям spark.ru, которые захотят попробовать продукт, оставить отзывы или задать вопросы.

Связаться с нами можно оставив комментарий, а также через почту sketchode@eltterado.com или официальную группу продукта vk.

+1
Первые Новые Популярные
Devicerra
Онлайн сервис подбора электроники
Valeriy C
«$9.99» - по-моему цена уж очень маловата, у маководов денежек побольше, чем у таких как я, сторонников свободного программного обеспечения :)
Ответить
Surgebook
Платформа для создания и публикации онлайн книг
Андрей Ивашкевич
Avocode - весьма крутая штука.
Ответить
Sketchode
Программа для оптимизации взаимодействия между дизайнером и разработчиком.
Гайфуллин Ринат
Крутая, не спорим. А не хотите принять участие в бета-тесте? Дадим потестить Sketchode на 3 Ваших проектах бесплатно. А Вы нам пришлете свои комментарии и замечания или просто заполните анкету.
Ответить
GreenRed brand studio
разработка логотипа за 99$
Панченко Андрей
Взяли на карандаш.
Ответить
Sketchode
Программа для оптимизации взаимодействия между дизайнером и разработчиком.
Гайфуллин Ринат
Если будут вопросы, пишите, мы всегда рады помочь!
Ответить
Sketchode
Программа для оптимизации взаимодействия между дизайнером и разработчиком.
Гайфуллин Ринат
Цена хорошая, интересная и вкусная цена))
Ответить
Показать предыдущие комментарии
Sketchode
Программа для оптимизации взаимодействия между дизайнером и разработчиком.
Гайфуллин Ринат
Мы пока ограничены мак стором, кроссплатформенность - вот к чему мы хотим стремиться. Очень часто пишут ребята и просят версию для винды.
Ответить
Devicerra
Онлайн сервис подбора электроники
Valeriy C
Тоже хочу версию для Win :)
Ответить
Sketchode
Программа для оптимизации взаимодействия между дизайнером и разработчиком.
Гайфуллин Ринат
Вы есть вк? Подписывайтесь на нашу группу, там все новости есть. Тут тоже стараемся о новых событиях писать. Спасибо за интерес!
Ответить
Devicerra
Онлайн сервис подбора электроники
Valeriy C
У меня на ВК аллергия :) Ого, Вы оказывается из Новосиба! В общем жду win-версию. Удачи!
Ответить
Sketchode
Программа для оптимизации взаимодействия между дизайнером и разработчиком.
Гайфуллин Ринат
Спасибо, будем стараться!
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать