Zeplin - гармоничное взаимодействие дизайнеров и разработчиков

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


Zeplin - гармоничное взаимодействие дизайнеров и разработчиков

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

Мы в Fingers любим инновации, а еще больше любим внедрять их в работу, если видим, что они потенциально могут упростить или усовершенствовать нашу работу.

Так мы пришли к Zeplin - сервису, позволяющему подружить дизайнера и разработчика и намного ускорить их взаимодействие при работе над мобильным приложением или сайтом.

Наш молодой и перспективный дизайнер интерфейсов Настя поделилась свои мыслями о Zeplin и впечатлениями от новых возможностей в работе.

Настя

Настя Кошко

дизайнер интерфейсов, FINGERS

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

В Fingers дизайнеры традиционно готовят несколько файлов для разработчика:

Файл со схемой приложения, где есть все или основные экраны с описанием. Если приложение небольшое, то схема выходит понятной и удобной. Для большого же приложения такую схему сделать сложно - много экранов, файл будет тяжелый.

Файл с символами, где подробно описываются отступы, используемые цвета и стили текста. Опять же, для большого приложения в файле будет очень много контента, разработчику нужно потратить время, чтобы что-то там найти.

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

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

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

Zeplin: преимущества сервиса

Самое главное в Zeplin, на мой взгляд, - это возможность разработчику не дергая лишний раз дизайнера и не копаясь в запутанных файлах с описаниями самому померить нужные размеры и расстояния, в один клик посмотреть цвета и стили текста или скачать архив с нужной иконкой. Приятная вещь - в самом Zeplin можно редактировать названия экранов, цветов, стилей текстов, есть интеграция со Slack, а разработчик может сразу экспортировать xml-код.

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

Zeplin: недостатки сервиса

Но есть и некоторые неудобства.

Например, экспортированные экраны сложно как-то упорядочить. Поэтому все равно нужно готовить схему для разработчика, чтобы он видел структуру приложения. Еще одна проблема - в Zeplin и Sketch могут отличаться расстояния между объектами на пару dp. Разница совсем небольшая, не факт, что для разработчика это будет проблемой, но этот момент нужно принимать во внимание.

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

Так что Zeplin - это очень крутой и умный посредник между дизайнером и разработчиком, который экономит время обеим сторонам. Бесплатно в Zeplin можно вести один проект, так что попробовать может каждый :)"

В следующих статьях мы продолжим знакомить вас с инструментами и приемами, которые наши дизайнеры интерфейсов активно используют при работе над дизайном мобильных приложений и сайтов!

contacts image

Появилась идея для проекта? Мы хотим узнать о том, что важно для вас

Связаться