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

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

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

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

Разберем этапы создания сайта и способы сэкономить на каждом из них

Спойлер

Хорошая новость: все способы в сумме помогут сэкономить до 35% бюджета, то есть примерно 300–500 тысяч рублей.

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

Этап 1. Проектирование

Почему важно начинать с прототипа

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

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

Как сэкономить

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

Где можно собирать прототипы

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

Когда точно не стоит экономить на прототипе

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

Сколько удастся сэкономить

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

Этап 2. Дизайн

Почему так дорого

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

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

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

Стоимость дизайна зависит не от общего количества страниц сайта, а от количества уникальных шаблонов. Отказ от одного уникального шаблона может сэкономить 10-15% бюджета сайта.

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

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

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

Экономия на количестве уникальных шаблонов

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

Экономия на отказе от планшетной версии

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

Хороший пример разумной экономии. Вконтакте пять лет не обновляла приложение для iPad: с 2016 по 2021 год.

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

Экономия на готовом контенте: текстовом и графическом

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

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

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

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

Этап 3. Вёрстка

Почему вёрстку не стоит передавать фрилансерам или делать самим

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

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

Как сэкономить на вёрстке

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

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

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

Этап 4. Программирование

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

Выводы. Или почему в статье нет лайфхаков

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

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

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

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

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

Неужели вы и правда думаете, что сторонний разработчик, с опытом разработки десятков сайтов, разной сложности, не выполнит этот пункт, который по вашему мнению служит ответом на вопрос, почему фрилансерам не стоит отдавать вёрстку?!

1

...В этой статье я расскажу, как сэкономить до 400 тысяч рублей...
...например WordPress...
...Сложные проекты – это сложные решения...

Вы млядь это на полном серьёзе писали?😳

Николай, спасибо за ваш комментарий. С радостью поясню для вас моменты, которые кажутся удивительными. Далеко не всем сайтам нужен мощный функционал. 
Тут хорошим примером будет наш проект https://sbctech.ru, который взял премию Specia Awards и вошёл в шорт-лист Рейтинга Рунета. Он работает и вовсе без CMS. Для больших контентных проектов со сложной информацией, основные бюджеты (до миллиона рублей) могут запросто уходить на проектирование, дизайн и вёрстку. Редактировать тексты на таких «дизайнерских» страницах никто не планирует, а поддержкой занимается внутренняя техническая команда, которая при необходимости внесёт любые изменения прямо в код.
В США большинство корпоративных сайтов работают именно на WordPress. Но интернет-магазин на нём мы бы делать не стали.

1

Это про что, если вы про вордпресс: «вынести в админку редактирование основного контента страниц. Чем большим количеством блоков вы хотите управлять из админки, тем больше времени потребуется программисту на их подключение.» 

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