Как и чем лучше прототипировать сайт в 2022 году
Вопрос создания прототипа сайта, по сути, является вопросом «Как лучше всего создать веб-сайт?» Правильная постановка вопроса, как известно, содержит в себе половину ответа — этот принцип верен не только в математике, но и постоянно подтверждает себя в реальной жизни. Грань между созданием прототипа сайта и созданием сайта всё сильнее размывается, одно практически невозможно представить без другого. Но пойдём по порядку. Для того, чтобы понять, с чего лучше приступить к прототипированию сайта, надо сперва представить, какой в принципе набор подходов к прототипированию существует. Основных метода прототипирования есть три:
- Через программы для презентаций (условно, нарисовать в Power Point).
- Закодированные прототипы (от среднего до продвинутого).
- Через специализированные приложения для прототипирования (для всех уровней знаний).
Эти три метода неравноценны, и здесь есть, на мой взгляд, очевидные лидеры и очевидные аутсайдеры — в зависимости от того, кто вы, что вы умеете и что вы хотите.
Прототип в программе для презентаций
Это самый очевидный и олдовый метод для неспецов любого рода: перенести прототип страниц сайта из головы «на бумагу» в неспециализированном приложении — от Word и Paint до PowerPoint. Самую большую популярность в этой нише имеют именно программы для презентаций — PP, Keynote, Google Slides.
Плюсы прототипирования с помощью презентационных программ
Знакомость: обычно ими пользуются люди, которые с ними уже знакомы и постоянно применяют их для других рабочих задач — они уже знают основы, и им не так уж сложно изучить более продвинутые функции, такие как анимация, переходы между слайдами и связывание слайдов для взаимодействия.
Библиотеки базовых элементов: благодаря простым библиотекам каркасов, таким как Keynotopia (открывается в новой вкладке), можно быстро создавать каркасы с низкой точностью, а затем связывать их вместе для интерактивного прототипа.
Линейность процесса: характер слайд-шоу этих инструментов проводит вас через последовательный пользовательский поток, который заставляет вас думать об опыте помимо визуальных эффектов. Более продвинутые пользователи могут связывать слайды сложным образом, выходящим за рамки линейной последовательности.
Минусы прототипирования с помощью презентационных программ
Ограниченный функционал: начав «играться» с расширенными возможностями программ для презентаций, вы быстро достигнете предела их возможностей.
Ограниченное сотрудничество: большинство программ для презентаций не предлагают возможности совместной работы (за исключением Google Slides). Компромисс заключается в том, что программному обеспечению для совместных презентаций не хватает интерактивности, графических манипуляций, форм, текста и параметров цвета, которые делают их полезными для прототипирования. Если вы хотите сотрудничать без компромиссов, используйте инструмент прототипирования.
Ограниченные блок-схемы: хотя можно сообщить о расширенных потоках пользователей, это непросто сделать, и карты сайта не связаны с прототипами, как в специальном программном обеспечении для прототипирования.
Ограниченная интерактивность: находчивые пользователи могут продвинуться довольно далеко, если будут использовать все функции Keynote или Powerpoint, но если вы готовы потратить на это время и силы, то эффективнее будет их приложить к изучению специализированных решений для прототипирования.
В общем и целом, главной проблемой использования неспециализированного софта для прототипирования будет «пропасть» между прототипом и реализацией вебсайта: набросать «на салфетке» пауэрпойнта желаемый вид страниц своего сайта может любой интернет-маркетолог, но затем за них нужно будет сесть профессиональному дизайнеру, чтобы сделать из них пригодные для программирования макет/вёрстку. То есть, простота таких «набросков» для заказчика компенсируется добавлением целого этапа согласования уже настоящего дизайна на их основе. А это как раз тот этап, которого многие заказчики хотели бы избежать, поскольку процесс работы с дизайнером для неподготовленного заказчика может превратиться в болото, чтобы избежать которого, лучше освоить сервисы для прототипирования самому (пунт III).
Кодированное (HTML) прототипирование
Один из самых больших вопросов, который возникает у дизайнеров при создании прототипа веб-сайта, заключается в том, использовать ли код. Эта неопределенность связана с тем, что некоторые дизайнеры не умеют программировать: они либо не знают, как это делать, либо не любят это делать. По сравнению с более увлекательным и интуитивным методом использования инструмента прототипирования или даже рисованием от руки написание кода может показаться утомительным. Сегодня есть больше причин, чем когда-либо, чтобы освоить программирование. Разделение труда «я рисую, ты кодишь», принятое в веб-дизайне в прошлом, сегодня уже устарело. Когда потребность в создании сайта возникает у людей, которые «могут в разработку» — дизайнеров-кодеров, разработчиков, и так далеее, они могут сразу кодить прототип.
Плюсы кодированного прототипирования
Независимость от платформы: HTML-прототипы работают в любой операционной системе, и для их использования никому не нужно стороннее программное обеспечение.
Модульность: HTML основан на компонентах, что может повысить производительность.
Низкая стоимость: существует множество бесплатных текстовых редакторов HTML, но вам нужно потратить некоторое время на изучение языка, прежде чем он станет вам полезен (или воспользуйтесь этой шпаргалка по HTML).
Техническая основа: при условии, что вы создаете готовый к работе код (а не просто выбросите его ради быстрого прототипа), вы можете сэкономить время на разработке.
Закодированные прототипы можно создавать разными способами, но HTML, пожалуй, наиболее популярен.
Главное преимущество прототипирования в коде в том, что вы начинаете работу над проектом в формате, который сразу даёт представление о том виде, в котором будет готов результат.
Главный минус — начало непосредственно с кода может помешать творческим и концептуальным аспектам создания сайта. Не зря инженеры-конструкторы, скажем, в автомобилестроении, приходят после дизайнеров: если бы автомобили начинали проектироваться с их технической части, то внешний результат был бы практически лишён индивидуальности. Это необязательно плохо — для некоторых задач это подходит идеально, я знаю успешные сервисы, которые полностью созданы усилиями исключительно программистов, где нет «дизайна» в принятом понимании — голый функционал, и им это отлично подходит. Как правило, это сервисы для таких же профессионалов.
Для большинства потребительских сервисов всё-таки обёртка имеет значение, поэтому начинать с кода, игнорируя декоративную часть проектирования, будет упущением.
Также при принятии решения, использовать код в вашем прототипе или нет, зависит от вашего уровня навыков.
И, наконец, вопрос времени. Начать сразу кодить может оказаться ложной оптимизацией в плане экономии времни: спросите себя, сколько страниц вы можете закодировать в HTML или JavaScript за два часа по сравнению с разработкой в программе прототипирования.
Использование программного обеспечения и приложений для прототипирования
Прелесть программного обеспечения и приложений для создания прототипов заключается в том, что они специально разработаны для этой цели, поэтому они обеспечивают идеальный баланс между функциональностью, сроком обучения и простотой использования.
Как начинающие, так и опытные дизайнеры используют специализированные инструменты, подобные приведенным ниже: новички из-за простоты использования, а ветераны из-за элементов управления, созданных с учетом их конкретных потребностей.
Списки подробных сервисов составляются постоянно, но в 2022 году их снова требуется обновить. Во-первых, из-за важности функции краулера, который есть не у всех. Во-вторых, из-за ограничений на оплату из России, которые появились вместе с санкциями, поэтому в списке необходимые российские сервисы или сервисы, поддерживающие оплату с российских карт. В сегодняшний обзор я включил 11 сайтов.
Что такое краулер: сервис, позволяющий «скопипастить» структуру страниц и SEO произвольного сайта, чтобы на их основе проектировать свой. Киллер-фича для многих заказчиков, потому что позволяет от этапа потребность перешагнуть сразу на этап решения задачи, не требуя для этого экспертизы архитектора сайтов/SEO.
Gloomaps
Бесплатный сервис с оптимальным набором функций и широкими возможностями экспорта готового проекта.
Стоимость, подписка: бесплатно
Простота использования: подходит для начинающих
Командная работа
Экспорт: ссылка, PNG, PDF, XML
Flowmapp
Сервис с продуманным набором функций и приятным интерфейсом. В бесплатной подписке функции доступны в широком спектре. Подойдет для эффектной и качественной презентации проектов сайтмэпов.
Бесплатный план предусматривает 1 активный проект и 100 Мб места, без ограничении по коллабораторам. Платные подписки от 8 $ в месяц при годовой оплате.
Простота использования: для начинающих и пользователей среднего уровня
Командная работа.
Экспорт: ссылка, PNG, SVG, PDF, DOCX
WebMaster
Сервис с самым продвинутым краулером среди аналогов. Что такое краулер? Это инструмента реверс-прототипирования структуры любого заданного сайта. Проще говоря, можно взять любой существующий сайт конкурента или просто подходящий референсный ресурс, и автоматически превратить его в прототип — основу для своего ресурса.
Пользователь загружает любой адрес сайта, алгоритм ВебМастера очищает ссылку от лишних элементов, сканирует сайт на наличие файлов со структурой (sitemap, robots.txt), парсит структуру всех ссылок и заголовков, включая SEO-параметры заголовков (H1, H2 итд).
На выходе краулер визуализирует структуру сайта в готовом для доработке прототипирования виде. С этого момента использование Вебмастера сопоставимо с использованием остальных сервисов для прототипирования в обзоре.
Лайфхак — бесплатного тарифа ВебМастера достаточно для краулинга сайтов до 100 страниц. Для большинства небольших бизнесов и проектов этого должно быть достаточно.
Бесплатный план предусматривает регистрацию одного пользователя и глубину краулера до 100 страниц. Платные подписки от 790₽ в месяц.
Оплата с карточек с российских банков.
Простота использования: для начинающих и пользователей среднего уровня
Командная работа
Экспорт: ссылка, PNG, PDF, DOC.
Octopus.do
Рациональный набор инструментов и интеллигентный дизайн интерфейса, отвечающий духу времени. Регулярные обновления и улучшения функционала от команды Octopus, делают сервис привлекательным и, безусловно, полезным.
Бесплатный план предусматривает 1 активный проект. Платные подписки от 8 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Командная работа.
Экспорт: ссылка, PDF и PNG (только для платных пользователей)
Writemaps
«Только самое необходимое» именно так можно охарактеризовать подход к функционалу бесплатной версии. Платная подписка подойдет для пользователей, которые планирую распределение контента, помимо общей структуры сайта.
Бесплатный план предусматривает 3 активных проекта с ограничением в 50 страниц. Платные подписки от 14.99 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Командная работа
Экспорт: CSV, XML, PDF и ссылка (только для платных пользователей)
Rarchy
Один из самых молодых проектов в обзоре, который за пару лет с момента релиза уже вырос до полнофункционального инструмента для создания сайтов.
Стоимость, подписка: от $15
Простота использования: для начинающих
Командная работа
Экспорт: CSV
Visual Sitemaps
Visual Sitemaps будет удобен для предварительного анализа проекта. Особенно, если есть необходимость посмотреть и оценить устройство страниц.
Бесплатный план предусматривает регистрацию одного пользователя и 50 скриншотов с ограничение глубины краула до двух уровней. Платные подписки от 29 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Командная работа
Экспорт: ссылка, PDF
Slickplan
Богатый набор функций и продуманный интерфейс. Огромный набор возможностей и настроек экспорта.
30-дневный триальный период. Платные подписки от 9.99 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Командная работа
Экспорт: ссылка, PDF, EPS, HTML, CSV, TXT, DOCX, Slickplan Sitemap XML
Dynomapper
Инструмент производит основательное впечатление и скорее всего подразумевает более глубокую проработку проектов и работу с контентом.
14-дневный триальный период. Платные подписки от 49 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Командная работа
Экспорт: ссылка, PDF, CSV
Visual Site Mapper
Бесплатный краулер, генерирует стайтмэп существующего сайта автоматически. Результат краулинга — схема связей страниц сайта. И в отдельных случаях результат может оказаться масштабным. Создатели сервиса выложили исходный код на Github (последнее обновление было в 2016). Краулер бережно сохраняет историю запросов.
Бесплатный
Простота использования: для начинающих
Creatly
Creately по механике работы наиболее близок к графическим редакторам. Функции сервиса позволяют создавать не только сайтмэпы, но и множество других диаграмм и блок-схем.
Бесплатный план предусматривает 5 публичных документов и возможность добавления до 3-х коллабораторов. Платные подписки от 5 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Командная работа
Экспорт: ссылка, PNG, JPG, SVG
В 2022 году стоит избежать соблазна «рисовать сайты на салфетках», поэтому вариант прототипирования в программе для презентаций, на мой взгляд — абсолютный аутсайдер обзора. Для большинства коммерческих и любительских проектов оптимальным вариантом будет лучше разобраться и освоить любой из инструментов прототипирования выше. Для коммерческих проектов предпочтительно выбирать сервис с краулером, по причинам, понятным любому коммерсанту: самая надёжная бизнес-идея — это уже реализованная бизнес-идея.
Способы оплаты
Важный нюанс, проблема-2022 — это возможность оплаты сервисов из России, точно принимает российские карточки только WebMaster, на остальных сервисах такая возможность не заявлена, но если знаете сервисы из списка или альтернативные варианты, которые принимают к оплате российские карточки или альтернативные методы платежей (например, Qiwi) — делитесь в комментариях.
