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

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

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

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

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

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

Интерфейс

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

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

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

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

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

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

В процессе разработки родилась идея создать раздел, где в виде карточного «ватерфолла» публикуется вся активность внутри команды. На фоне общего светлого интерфейса, раздел получил темное оформление. Экран можно вывести студийный TV и видеть как макеты обновляются в реальном времени.

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

Лендинг

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

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

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


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

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

Подробный кейс о причинах создания сервиса и о том, как происходил процесс — на сайте Fragment.