Инструмент для хранения и демонстрации дизайна Drafta
Инструмент для хранения и демонстрации дизайна Drafta

Инструмент для хранения и демонстрации дизайна Drafta

Drafta наводит порядок в дизайн-макетах и помогает обсуждать их с заказчиками.
15 февраля 2019
www.drafta.co
Drafta родилась в 2013 году. Тогда мы сделали для себя небольшой внутренний инструмент, где все макеты, нарисованные для одного проекта, были собраны в одном месте. Список всегда оставался слева на экране, как в классическом файл-менеджере, а макет открывался в соседней колонке, поэтому по проекту было удобно ориентироваться.

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

Каждая страница имела уникальную публичную ссылку, которую легко вставить в любой документ или письмо. Макеты из Drafta отображались в браузере без искажений и с учетом retina-разрешения.
Мы добивались простоты и ненавязчивости интерфейса — в области макета не было сложных панелей управления.
Со временем сервис оброс дополнительными функциями: пользователи смогли добавлять комментарии, менять цвет фона и следить за обновлениями макетов и заметками к ним через Slack.

Мы пользовались Drafta 5 лет, и это было так удобно, что мы решили сделать сервис доступным для всех.

Прежде чем сделать Drafta публичной, мы ее доработали. Дизайнер усовершенствовал интерфейс под новые сценарии использования, а программисты написали фронтенд на React.

Интерфейс

Делая продукт для дизайнеров, мы понимали, что нельзя схалтурить в интерфейсе и оформлениии, так как оправдать недоделки «ранним MVP» не получится :-) 

Изначально Drafta имела две панели: публичную и админку, через которую добавлялись и сортировались макеты дизайна. В новой версии мы решили объединить их в один интерфейс. 

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

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

Мобильный вид

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

Лента активности

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

Лендинг

На промостранице мы рассказываем и показываем, как пользоваться сервисом. Для этого мы сделали ролик, где на примере реальных проектов демонстрируется функционал.

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

Этот плагин попал в подборку featured на официальном сайте Sketch — наравне с продуктами Marvel, Invision и Zeplin. 


Поддержка проекта

Как и в случае с Pulse.red, мы запустили Drafta с минимально необходимым набором функциональности. Мы общаемся с пользователями и планируем развитие на основании обратной связи. Сейчас сервис бесплатный и открытый для регистрации.

Подробный рассказ о том, как мы придумывали и создавали Drafta, есть на сайте Fragment.

Fragment — структурное подразделение Scada, осуществляющее разработку продуктовых сервисов и собственных проектов.
Подробнее