Как сэкономить на создании большого сайта без конструкторов и фрилансеров

Привет, я Сергей Асанов, владелец и арт-директор Asanov.Agency. В этой статье я расскажу, как сэкономить до 400 тысяч рублей при создании большого корпоративного сайта или интернет-магазина.

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

Прототип – основа будущего сайта. Он покажет его структуру, расположение блоков на страницах и основной функционал. Прототип поможет оценить сроки разработки сайта и посчитать смету. Вносить правки в проект на поздних этапах всегда трудозатратно и дорого — приходится переделывать всё: от дизайна до вёрстки. Важно максимально хорошо продумать сайт уже на этапе проектирования. Это сбережет вам нервы и деньги.

Вы можете самостоятельно подготовить структуру сайта на этапе формирования ТЗ. Вам нужно будет тщательно продумать сценарии поведения пользователей на сайте и навигацию между разделами. Проработать содержание каждой страницы, вплоть до форм обратной связи и сообщений об их успешной отправке. Параллельно с этим вам придётся думать над контентом. Идеально, если перед созданием этого «фундамента» вы проведете маркетинговый анализ и выясните, кто ваши конкуренты, что они пишут, как позиционируются и за счёт чего находятся в топе поисковых систем. А еще соберете семантическое ядро, чтобы понимать, как посетители будут попадать на ваш сайт, и запланируете отдельные посадочные страницы под каждую точку входа. Звучит сложно, но сделать реально.

Раньше для проектирования мы использовали Axure, cейчас — Figma. Впрочем, для начала можно обойтись и Google Docs.

Проверьте, попадает ли ваша деятельность под определение YMYL (Your Money or Your Life). Это сайты, способные влиять на здоровье, жизнь и финансовое благополучие пользователей. Если тематика вашего сайта — медицина, финансы, налоги, инвестиции, юриспруденция, то это точно YMYL. К таким сайтам предъявляются повышенные требования E-A-T (Expertise-Authoritativeness-Trustworthiness) – Экспертность, Авторитетность и Достоверность. Например, если у вас сайт стоматологии, то страницы врачей в обязательном порядке должны содержать блоки: имя, фото, опыт работы, образование, дипломы-лицензии и т.д. В этом случае мы рекомендуем прорабатывать прототип с профессионалами, чтобы сайт не был понижен в поисковой выдаче из-за несоответствия каким-либо критериям.

Создание прототипа – это примерно 20% от всего бюджета на сайт. Если оставлять аналитику с семантическим ядром на стороне агентства, то экономия получится в 15%.

Дизайн — это не только про красивые картинки, но и про управление пользовательским поведением, конверсии и продажи. Важно создать удобный и понятный сайт, который полюбят посетители.

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

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

Цена страницы формируется исходя из сложности дизайна и количества «экранов». С экранами всё понятно — это длина страницы. Сложность дизайна — это когда для каждого экрана также требуется разработать иконки, нарисовать иллюстрации, продумать сложные интерфейсные элементы.

При этом каждую страницу нужно «задизайнить» в трёх разрешениях: десктоп, планшет, мобильная версия. Допустим, цена шаблона это Х руб. С адаптивом — 3X руб. В дальнейшем эту страницу нужно сверстать также в трёх разрешениях. Стоимость хорошей вёрстки с анимациями близка к стоимости дизайна. Итого, добавление одного уникального шаблона — это 6Х руб.

Продумайте на этапе ТЗ и прототипирования, какие страницы сайта должны быть уникальными. Если у вас интернет-магазин, то это могут быть: Главная, Страница категории, Карточка товара, Контакты, Корзина, Оформление заказа. Остальные страницы – О компании, Новости, Доставка и оплата, и т.д. — могут быть сделаны на базе одного шаблона общей типовой страницы. На ней собираются общие стили заголовка 1/2/3, стили текста, вставленных в текст картинок, стиля ссылок, нумерованного и ненумерованного списков и таблички. Обычно этого хватает для любой текстовой страницы.

Чтобы принять решение об отказе от планшетной версии, проверьте в метрике своего текущего сайта процент посещаемости с планшета. Если меньше 5%, можно смело отказываться от этой опции и выводить деcктопную версию сайта на планшетах в горизонтальной ориентации и мобильную версию — в вертикальной.

Сэкономить получится прилично, зависит от количества страниц сайта, но в среднем, 10-12% от бюджета.

Подготовьте текстовый контент всего сайта. Финальный. Что это значит? Это значит, что тексты написаны, проверены, утверждены, перепроверены, поправлены, снова утверждены и только потом отданы дизайнерам.

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

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

Резюме. Готовый контент и графика в совокупности принесут еще порядка 5% в копилку.

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

Ещё раз подчеркну, что стоимость вёрстки напрямую зависит от количества шаблонов. Чем больше шаблонов и чем больше разрешений нужно верстать, тем дороже вёрстка.

Вёрстка сильно завязана на дизайне. Поэтому для экономии на вёрстке, уже в дизайне нужно заложить под это базу. Это заранее можно обсудить с разработчиками.

• Свести к минимуму количество анимаций элементов интерфейса.
• Разрабатывать дизайн с максимальным количеством одинаковых блоков, чтобы их можно было переиспользовать в вёрстке.
• Адаптивную версию делать максимально похожей на десктопную, просто перестраивая блоки из горизонтальных последовательностей в вертикальные.
• По окончании дизайна должен быть собран полный UI-Kit с элементами интерфейса во всех состояниях: при фокусе, наведении, нажатии.
• Не делать оптимизацию скорости загрузки в рамках основных работ по созданию сайта, а отложить на другой этап.

Здесь сложно посчитать экономию точно, но это от 5% до 10% бюджета.

Самое очевидное — сэкономить на лицензии CMS (системы управления сайтом). Если у вас не интернет-магазин, а небольшой сайт, то можно выбрать бесплатную CMS, например WordPress. И вынести в админку редактирование основного контента страниц. Чем большим количеством блоков вы хотите управлять из админки, тем больше времени потребуется программисту на их подключение. Но зато в дальнейшем вы сможете сэкономить на технической поддержке, обновляя любые блоки сайта самостоятельно.

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

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

Ещё раз коротко список того, что сэкономит ваши деньги:

• Готовая структура сайта;
• Чёткое понимание количества шаблонов (какие страницы должны иметь уникальный дизайн);
• Отказ от ненужных разрешений;
• Финализированный контент и собственная галерея изображений;
• Минимализм в анимации;
• Использование бесплатной CMS.