WebMaster — конструктор прототипов с функцией краулинга чужой структуры сайта

Привет, vc.ru! Меня зовут Боровков Евгений. Я основатель конструктора прототипов сайтов WebMaster. В этой статье я расскажу про возможности своего сервиса, его преимущества перед аналогами и почему рынку нужен такой инструмент, как краулер.

Предисловие

Цель этой статьи — рассказать вам, что существует такой сервис. Поэтому я постараюсь говорить именно про сам продукт. Не про историю его появления или этапы создания. Зачем нужны прототипы, зачем нужны сервисы создания прототипов и почему сейчас все переезжают на российский софт — мы обсудим в других статьях. Можете подписаться на мой блог, чтобы не пропустить!

Конструктор прототипов сайтов

Как вы уже поняли из названия статьи, Webmaster — это конструктор прототипов сайтов. Что означает название и почему оно именно такое написано в этой статье. Сервис облачный. А значит скачивать себе на устройство ничего не нужно. Достаточно пройти регистрацию.

Основная задача WebMaster — закрыть весь цикл прототипирования сайта. От этапа, когда идея только зародилась в голове, до этапа передачи прототипа в реализацию. При этом обеспечив низкий порог входа и сохранность данных.

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

Можно ли назвать полученный результат прототипом? Да, если под прототипом мы понимаем “первый набросок сайта”. Но говоря на языке разработчиков — это скорее варфрейм. Достаточно ли такого прототипа, чтобы дать ход разработке сайта? Безусловно!

Ниже я расскажу про каждый из “модулей”. Ну и про нашу главную фишку — краулер. Кому лень читать статью целиком, можете посмотреть это видео.

Рассказ о сервисе за 3 минуты

Создание структуры сайта с чистого листа

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

Добавляете страницы, наполняете их блоками. На выбор есть 50 вариантов этих самых блоков. Можно менять заголовок, писать комментарии, переименовывать проект.

Список почти всех блоков

Кастомизация в виде создания своего собственного блока или другого типа структуры (не древовидной) пока не доступна. Если эти фишки вам нужны, то напишите об этом в комментариях.

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

Создание структуры сайта из шаблона

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

Например для салона красоты или организации мероприятия — ни к чему изобретать велосипед. Достаточно посмотреть на соседние салоны или на соседнее мероприятие.

На сегодняшний день у нас подготовлено более 20 шаблонов под разные задачи. Например “Шаблон digital агентства” или “Шаблон для сайта конференции”.

Так выглядит окно выбора шаблона в интерфейсе сервиса

А еще мы решили хайпануть и подготовили шаблоны для “пострадавших бизнесов”. Пользуйтесь на здоровье 🙂

Как можем, так и поддерживаем 🙂

Создание структуры сайта на основе конкурента (краулер)

Наша главная фишка — визуализация чужой структуры сайта. Или краулинг (crawling) сайта. В таком виде такого функционала нет ни у кого.

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

Создание прототипа на основе сайта

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

Вот, например, кейс. Где наш пользователь сэкономил 80 часов своей команде. Просто открыв для себя краулер.

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

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

Разумеется, мы пока не даем собрать, например, vc.ru или vk.com. Просто потому, что в этом нет никакого смысла. Хотя, в дальнейшем у нас будет функция краулинга абсолютно любых сайтов. Хоть Youtube, хоть Pornhub. Но в формате разовых платных отчетов. Если вам нужна такая функция, напишите мне об этом! В личные сообщения или комментарии.

Выгрузка ТЗ и шеринг проекта

Когда готов прототип, что происходит дальше? Он отправляется команде. Чтобы они или дорабатывали\комментировали, или занимались своей частью: дизайном, копирайтингом, разработкой.

Именно поэтому у нас есть шеринг проекта по ссылке и выгрузка в документ.

Демонстрация открытия доступа по ссылке и экспорта проекта

Выгрузку можно делать в PNG и, самое интересное, в форматы PDF, DOC и DOCX. Их внешний вид подобран исходя из обычной практики работы диджитал агентств СНГ с клиентами. Вот пример выгрузки в формате PDF.

Регистрацию и прочие тонкости описывать не вижу особого смысла. Мы стараемся не пускать ботов и кликеров, поэтому нужно подтверждать емейл. Есть быстрая регистрация через Google.

Кейсы

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

Полноценных кейсов у нас описано три штуки. Вот они:

Если вы хотите поделиться своим опытом применения WebMaster, напишите об этом мне! Мы сейчас собираем реальные кейсы применения сервиса для публикации в нашем блоге.

Планы на будущее

На данный момент конструктор полностью готов закрывать ваши рабочие задачи. Работает стабильно и без сбоев. Обновления мы стараемся накатывать только по ночам.

Главные принципы, которые мы хотим сохранить, чтобы у нас получилось занять свое место на, казалось бы, уже насыщенном рынке:

  • Низкий порог входа. Чтобы сервисом могли пользоваться, и опытные исполнители, и менее опытные заказчики сайтов.
  • Доступность на российском рынке. Да, у нас работают платежи и мы никуда не собираемся уходить.

Скажу еще пару слов про ближайшее будущее. Вот эти фичи мы планируем выкатить:

  • Доработка краулера, чтобы он мог собирать страницы “по факту”. Сейчас умеет только из сайтмапа. Ну, и чтобы мог собирать блоки на страницах, а не только голый скелет. Пару слов об этой фиче я сказал в этом видео.
  • Добавление новых форматов выгрузки. Пишите в комментарии или в поддержку какие вы бы хотели видеть еще форматы экспорта. Пока мы планируем SVG и XML.
  • Доработка визуала и самого конструктора. Давать серьезные обещания не буду. Скажу лишь, что мы давно работаем над этой частью.
  • Кастомизация блока. На платных тарифах планируем добавить кастомизацию блоков. Чтобы не только готовые можно было выбирать, но и создавать свои.
  • Добавление в каркасы и комментарии медиа файлов. Чтобы вместо страницы можно было вставить скрин. Или вместо блока.
  • Возвращение горячих клавиш Ctrl+z и т.п. Они были, но пока мы их спрятали. Скоро вернем.

Регистрация полностью бесплатная. Ограничения по времени на триал нет. Если бесплатного тарифа станет мало, то вот промокод: VC555. Даст возможность оплатить тариф со скидкой почти 50% (Тариф "Фрилансер" выйдет в 555 рублей на месяц). Вводить промокод лучше при регистрации. Скидка применится автоматически и будет видна на окне оплаты.

Вступайте в наше сообщество в Telegram https://t.me/wmtools_ru чтобы быть в курсе новостей сервиса и иметь возможность очень быстро задать вопрос разработчикам.

0
133 комментария
Написать комментарий...

Комментарий удален модератором

Развернуть ветку
Олег Павлов

Коль уж я 9 лет жизни проработал в команде сайтбилдера и связанных с ним b2c веб-сервисов, вставлю свои пять копеек. Ладно конструкторы сайтов, ниша понятная. Но конструктор прототипов для тех, кто ничего не знает про сайты? То есть ты тратишь свое время, абсолютно ничего не понимая в теме, чтобы потом всё равно аутсорсить процесс другим? Мертворожденная идея, сори. Гораздо проще и эффективнее не страдать ерундой, а скинуть задачу на раннем этапе тем, кто в этом компетентен.

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

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

Ответить
Развернуть ветку
Leha Shum

Конструкторы прототипов очень нужная вещь

Ответить
Развернуть ветку
1 комментарий
Боровков Евгений
Автор

Да, у нас есть пользаки, которые собирают свои "сайт для компании N", являясь представителем этой компании N.
Они ничего не понимают про сайты. Но донести свою мысль до исполнителя они по другому все равно не могут. Хоть схема помогает в этом вопросе.
Я с ними общался — тут не вижу смысла доказывать, что им это заходит.

Да, именно те, кто пытается на раннем этапе отдать задачу. Но не готов полностью положиться на опыт этих самых аутсорсеров. А таких заказчиков, по моему опыту, большинство.

Компьютерное зрение интересно да :)
Но дойдем до туда еще может. А пока и визуализация структуры просто сайтов просто в интернете — это не закрытый вопрос в 2022 году.

Ответить
Развернуть ветку
4 комментария
Pixel Lens
Но конструктор прототипов для тех, кто ничего не знает про сайты?

Думаю ты не совсем правильно понял замысел сабжа.

Это же просто карта ума с иллюстрированными ветками. А карта ума сама по себе штука полезная. Я в ней старался дифференировать ветки эмодзями, а здесь более заточенный под это дело софт, только и всего

Ответить
Развернуть ветку
7 комментариев
Dmitriy

В идеале создать функционал сравнимый c существующими конструкторами, но максимально его упростить. Просто перетаскиваем нужные элементы, меняем цвет, размер. Франкенштейн из фигмы и конструктора. Простейшие скрипты взаимодействия, корзина, обработка формы заявки, анимации и т.д. Сделать экспорт готового набора файлов и останется просто загрузить на хостинг. т.е. на выходе максимально чистый валидный код, со всеми SEO элементами, без лишнего хлама, который есть на конструкторах.
Брать 100 рублей за месяц неограниченного функционала.

Ответить
Развернуть ветку
1 комментарий
33_rublya

Да тут, похоже, всё ради краулера и затевалось, а конструктор лишь прикрытие )

Ответить
Развернуть ветку
Сергей Перевозчиков

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

Ответить
Развернуть ветку
16 комментариев
Artem Visotsky

ЦА тут какая то непонятная, чрезвычайно узкая...

Ответить
Развернуть ветку
1 комментарий
Alexander Moshkov

https://octopus.do

¯\_(ツ)_/¯

Ответить
Развернуть ветку
Невероятный Блондин

Прикольно, надо будет попробовать

Ответить
Развернуть ветку
6 комментариев
Dima

Класс, спасибо!

Ответить
Развернуть ветку
4 комментария
Боровков Евгений
Автор

И что?

Ответить
Развернуть ветку
3 комментария
Dima

Paint и Figma ваши конкуренты. В чем ваши преимущества?

Ответить
Развернуть ветку
Боровков Евгений
Автор

По сравнению с Figma — скорость и низкий порог входа.
Фигма же всех отпугивает своей сложностью. Это как фотошоп, который никто не хочет скачивать (из НЕ дизайнеров), чтобы не увязнуть в разбирательствах какую кнопку надо нажимать

По сравнению с Paint — удобство, очевидно.

Ответить
Развернуть ветку
6 комментариев
Dima

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

Ответить
Развернуть ветку
8 комментариев
Leha Shum

Наша главная фишка — визуализация чужой структуры сайта. Или краулинг (crawling) сайта. В таком виде такого функционала нет ни у кого.

Бомба, если этт действительно работает!

Ответить
Развернуть ветку
Боровков Евгений
Автор

Попробуйте!

Ответить
Развернуть ветку
Alexandr Lepesii

Отличный инструмент для бизнеса, менеджеров и аналитиков, "не требует PhD" для того чтобы грамотно донести свою идею для дизайнера!

Ответить
Развернуть ветку
Konstantin

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

Ответить
Развернуть ветку
Боровков Евгений
Автор

Спасибо!

Ответить
Развернуть ветку
Борис Д

Совет: более внятно покажите РЕЗУЛЬТАТ, картинкой. Что получается на выходе? У вас в видеороликах на экспорте результата всё сразу обрывается.

Ответить
Развернуть ветку
Боровков Евгений
Автор

Там приложен пример ПДФ можно скачать. Около видео ссылка

Ответить
Развернуть ветку
1 комментарий
Иван Зимин

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

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

2) Визуализация структуры это хорошо, но есть куда более удобные решения. Скриминг Фрог парсит и работает со структурой сайта любого уровня, в дальнейшем в том числе визуализируя, а сервис Арсенкина собирает топ конкурентов по запросу и выдаёт их структуру, которая также более чем наглядна, если мы говорим про отдельные страницы - https://arsenkin.ru/tools/check-h/, да без возможности редактирования, но затем итоговую структуру можно оформить в любом текстовом редакторе с комментариями, что здесь слайдшоу, а здесь блок с преимуществами.

И проблема снова та же, кто ЦА, владелец бизнеса который решил сэкономить на одном этапе? Так он передаст свою "кривую" структуру страниц и сайта и её в дальнейшем сделают правильно.

В любом случае успехов в развитии!

Ответить
Развернуть ветку
Боровков Евгений
Автор

Спасибо за ваш комментарий! Отвечу по порядку:

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

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

ЦА это аналитики, дизайнеры, маркетологи... и еще 50 портретов 😀
Опыт на нашем диджитальном рынке такой разный, что очень тяжело подвести его под одну черту. Но мы пробуем 😀

Спасибо еще раз!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Боровков Евгений
Автор

Работаем над этим. Написал это в планах.
Но спасибо за комментарий

Ответить
Развернуть ветку
Igor Vedernikov

Добавьте шаблоны админ-панелей 🙏🏼

Ответить
Развернуть ветку
Боровков Евгений
Автор

Хорошо!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Боровков Евгений
Автор

Спасибо!

Ответить
Развернуть ветку
Андрей

Статья заинтересовала, но я попробовал два случайных сайта и в обоих случаях - Карты сайта не существует. Попробуйте снова.

Ответить
Развернуть ветку
Боровков Евгений
Автор

Про это написано в статье. Что мы умеем пока визуализировать только сайты, у которых есть сайтмап.
У ваших значит его нет

Ответить
Развернуть ветку
Юлия, контент-маркетолог

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

Ответить
Развернуть ветку
Sergei Zotov

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

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

Ответить
Развернуть ветку
1 комментарий
Natalya Belozertseva

Я ЦА (манагер который делает прототипы регулярно), но делаю такое в фигме или уж совсем лень/надо быстро то в слайдах. Для меня такой прототип слишком упрощенный, по факту это текст в обводке. На деле, в прототипе нередко каждый квадратик (блок) делается под конкретного клиента, потому что у всех все разное (хотелки, информация, цели).

Ответить
Развернуть ветку
Angel Cvetov

Круто! При создании сайта на этапе исследования конкурентов может быть очень полезным 👍 Визуализировать структуры, просканировать блоки/разделы, увидеть всю картину на одном листе — намного быстрее и удобнее, чем детальное изучение каждого сайта c фиксированием разделов.

Ответить
Развернуть ветку
Боровков Евгений
Автор

В точку!

Ответить
Развернуть ветку
DZMITRY TRUBNIKAU

Кто ваша целевая аудитория? Кто будет платить? Почему не захотят делать через wix или shopify с кучей плагинов от аналитики до автоматизации оплаты и оптимизации уже на борту? А если просто заменить ваероделку, так каждый заказчик почти всегда быстрее на салфетке нарисует, что ему нужно, квадратиками и кружками .

Ответить
Развернуть ветку
Боровков Евгений
Автор

ЦА это дизайнеры, аналитики, маркетологи, продакты... те, кто работает над созданием сайтов

Как показывает наш опыт, заказчику далеко не всегда удаётся нарисовать кружочками и квадратиками на салфетке свою мысль.
Мы предлагаем альтернативу этому способу

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

Ну и раз пошел разговор за другие способы решения этой же самой проблемы: мы единственный российский инструмент на этом рынке. У нас не надо скакать с бубном чтобы произвести оплату и не надо разбираться в сложном интерфейсе

Ответить
Развернуть ветку
7 комментариев
Anton Medvedev

Натыкался на инструмент, достаточно удобный. Воспользоваться краулером так и не удалось, потому что на бесплатном тарифе ограничение в 50 страниц, а сайт меньше 50 страниц это не тот случай, когда нужен краулер)))) Но в принципе логично, за бесплатно сыр только в мышеловке бывает.
А по основному функционалу достаточно удобно. Единственное, что представление итоговое у разветвлённого сайта с большим количеством страниц немного неудобно выглядит. Пока пролистываешь экран в стороны, можно потеряться между уровнями. Но я и не представляю, как оно может быть удобнее. Удобнее это просто майндкарта, а прототип в такой формат не запихаешь. В общем впечатления от инструмента положительные.

Ответить
Развернуть ветку
Боровков Евгений
Автор

Спасибо большое за такой фидбек!

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

А для какого размера сайтов вам нужен был бы краулер? Поделитесь пожалуйста 😀 от 1000 страниц? Какую вы информацию оттуда хотите получать?

Над отображением еще тоже работаем. Там будут скорее всего и скрывания веток и всякие другие фичи, чтобы было поприятнее тыкать

Ответить
Развернуть ветку
2 комментария
Иван Игнатов

о качок делает прикольную штуку оказывается

Ответить
Развернуть ветку
Боровков Евгений
Автор

Получается так 😀

Ответить
Развернуть ветку
Вадим Чиняев

Для фриланса и "которые хотят как на том на сайте, я бы написал тз но времени нет" - торт.

Ответить
Развернуть ветку
Боровков Евгений
Автор

В том числе да 😀

Ответить
Развернуть ветку
Борис Гостроверхов

Ребята, успехов!

Ответить
Развернуть ветку
Боровков Евгений
Автор

Спасибо!

Ответить
Развернуть ветку
Василий Крылов

Так и до аналога/замены миро один шаг)

Ответить
Развернуть ветку
Боровков Евгений
Автор

Таких планов у нас пока нет
Но может да! 😁

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Боровков Евгений
Автор

Я написал про происхождение термина. И почему название именно такое.
И я сомневаюсь, что Яндекс будет заморачиваться и делать визуализацию сайтмапа

Ответить
Развернуть ветку
7 комментариев
Sergey Sergeychik

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

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

предложил бы перевестись и пойти на продукт-хант (аудитория будет больше) и попутно думать какие варианты допилки или пивота есть.

Ответить
Развернуть ветку
Боровков Евгений
Автор

Не совсем уловил про одноколоночные прототипы.

На счет дальнейшего развития я примерно планы описал. Глобально говорить что будет через год не готов 🙂

Ответить
Развернуть ветку
4 комментария
Артём Басов

Теперь каждый может сделать "свой гугл")))

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
130 комментариев
Раскрывать всегда