Дизайн Alexey Vasilevsky
1 626

Drafta — как мы создали инструмент для демонстрации и обсуждения дизайна сайтов

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

В закладки
Аудио
MVP. Идеология классического файл-менеджера

На рынке тогда было уже много мощных инструментов для веб-дизайнеров — таких как InVision, Marvel или просто Google Drive и Dropbox для хранения файлов. Но для нас наш собственный был все-таки удобней или, возможно, привычней — опять же из-за классической и наглядной структуры.

Когда мы проектируем сайт, мы думаем о структуре. Когда мы отправляем дизайны по электронной почте, структуру очень легко потерять. Разложите по полочкам все экраны вместе с различными статусами и мобильными версиями и делайте их доступным по url-адресу, без регистраций.

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

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

Drafta — Showcase your work like a designer, not a photographer

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

20 октября 2018 года мы запустили проект в сеть (Product of the Day, No.2 на Product Hunt) в том первозданном виде, в котором он разрабатывался шесть лет назад: ничего лишнего, полный аскетизм, весь акцент — на удобную структуру для удобной работы веб-дизайнера.

Видимо, за это нас и полюбил Sketch. “Мне очень нравится ваш предельно упрощенный подход”, — написал нам сотрудник из маркетинга Sketch. Нас добавили в Featured Integrations.

Получить признание от Sketch было очень приятно — к тому же мы лишний раз убедились, что чем продукт проще, тем он лучше.

Sketch Featured Integrations

После приятного старта проект начал жить настоящей жизнью — регистрации, обзоры, первые пользователи среди веб-студий. Но конфликт делать или не делать никуда не исчез: ощущение, что продукт не доделан и не доведен до полностью законченного состояния, осталось и после запуска.

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

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

На момент написания этой статьи мы чувствуем полную гармонию в душе (надолго ли?). Теперь Drafta кажется полностью законченным инструментом для веб-дизайнеров и веб-студий.

Статистика проекта

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

На графике можно наблюдать и эффект Product Hunt, Sketch и как было грустно на новогодние праздники.

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Alexey Vasilevsky", "author_type": "self", "tags": [], "comments": 19, "likes": 25, "favorites": 51, "is_advertisement": false, "subsite_label": "design", "id": 58925, "is_wide": false, "is_ugc": true, "date": "Tue, 19 Feb 2019 14:08:18 +0300" }
{ "id": 58925, "author_id": 211230, "diff_limit": 1000, "urls": {"diff":"\/comments\/58925\/get","add":"\/comments\/58925\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/58925"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

19 комментариев 19 комм.

Популярные

По порядку

Написать комментарий...
2

Чем вас Figma не устроила?

Ответить
3

Фигма, это немного иное. Пишу как пользователь обеих сервисов:

В Drafta удобно показать проект не особо знакомому клиенту, которому сдаешь проект в первый раз и презентовать его

а в Figma удобно показывать постоянным клиентам, которым не в лом просто скинуть ссылку на исходники и не париться, что он там не сможет зарегаться или скопипастит там все мои исходники тупо себе и кинет с последней частью платежа, к примеру :)

Ответить
1

Figma вышла в 2016, а Drafta мы уже начали пользоваться с 2013

Ответить
2

Тогда без вопросов! У вас хорошая линейка простых и понятных продуктов для digital, ждем новые!

Ответить
1

Спасибо! Кстати скоро будет новый :-)

Ответить
1

WOW! Ждем!!!

Ответить
2

Клевый сервис, жаль узнал о нем буквально пол года назад. Дождался таки внедрения комментов для заказчиков. Так же пользовался вашим Пульсом. Очень круто, ребята, так держать.

Ответить
0

Спасибо Михаил. Приятно, что вы разделяете наш подход и пользуетесь нашими продуктами. Будем рады услышать замечания / улучшения.

Pulse не пошел? (

Ответить
0

Pulse тоже зашел. Использую в основном для своих проектов.
Планируете развивать Drafta? Не хватает возможности задать параметры всей группе (цвет фона, позиционирование, масштабирование для ретины), приходится пока забивать для каждой страницы.

Ответить
2

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

Ответить
1

Классный сервис, часто для этих целей использую инвижен, но у него очень неудобная структура, когда экранов много.
Вопрос к вам ребята, как в этой цепочке из скетч + drafta, вы передаете макеты на код?

Ответить
2

Эти цепочки живут параллельно. Для клиентов и внутренней работы мы из Sketch экспортируем в Drafta, а для девелоперов — в Zeplin.

Marvel конечно выступает тут как "два в одном", предлагая Handoff. Но вот со структурой там сложнее.

Ответить
1

Выглядит интересно. Наверное перейду к вам. Особенно понравился этот сайдбар с понятной структурой. Возможность видеть Desktop + Mobile и группировать скрины — существенный плюс. Пользуюсь Марвел и в нем как раз таких примочек и не хватает.

Ответить
1

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

Ответить
0

у нас как-раз все постоянные клиенты на Драфте. Некоторые годами

Ответить
0

Планируете оставить сервис бесплатным или будете добавлять платные функции?

Ответить
0

Думаем в скором времени подключить платежку и сделать сервис платным. Окончательной ценовой политики пока нет. Но Freemium будет.

Ответить
0

Приятно 😇. Будем очень рады, если Вы потом поделитесь впечатлением.

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }