На рынке есть масса предложений по созданию сайтов. При этом разброс цен достигает нескольких порядков и колеблется от $200 до $5 000 и выше (основано на рейтинге cmsmagazine среди украинских студий). Логично предположить, что ценообразование основано не на одних лишь аппетитах студий, но и на проделанной ими работе.

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

Условно, работу над проектом можно разделить на 5 этапов:

1. Проектирование
2. Разработка
3. Наполнение
4. Тестирование и ввод в эксплуатацию
5. Поддержка

Поддержка проекта – это отдельный пункт, более подробно я его описал в другой статье.

Проектирование

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

Этапы работ:

1. Исследование темы разработки, анализ конкурентов;
2. Разработка концепции;
3. Прототипирование и тестирование юзабилити;
4. Утверждение, внесение корректировок.

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

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

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

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

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

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

Разработка

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

Этапы работ:

1. Разработка дизайна и иллюстраций
2. Верстка
3. Разработка программной части, настройка и отладка

Дизайн

В некоторых кругах принято считать, что дизайн – это субъективизм и вкусовщина. В связи с этим, именно утверждение дизайна часто оборачивается головной болью, как для дизайнера, так и для клиента. На самом деле, это не совсем так. Да, задача дизайнера – быть в курсе современных тенденций, уметь использовать различные стили, создавать графические элементы на основе этих стилей. А еще, дизайн – это правила. Чем выше квалификация дизайнера, тем меньше в его работах субъективизма. Например, большинство размеров и отступов могут иметь логическое обоснование. Сочетание шрифтов также подчиняются некоторым правилам. У кнопок, иконок и иллюстраций есть технические параметры оценки качества. И так далее.

Айс

Не айс

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

В случаях жесткой экономии или если веб-дизайн у студии-разработчика – не самая сильная сторона, прибегают к использованию уже готового дизайна, заказав его за 50$ в базе шаблонов. Частенько там появляются довольно приличные работы, превосходящие по уровню эксклюзив некоторых исполнителей.

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

Верстка

Есть огромная разница между подходами к верстке сайтов 5–7 лет назад и сейчас. Если раньше задачу верстки брал на себя дизайнер, либо программист, то сейчас верстка сайтов – отдельная ценная специализация.

Задачи хорошей верстки:

• одинаково, как задумывалось в макете дизайна, отображаться во всех распространенных браузерах и устройствах;
• хорошо восприниматься поисковыми системами;
• быстро загружаться (быть легкой);
• не распадаться при увеличении масштаба средствами браузера;
• легко подстраиваться под появляющиеся на сайте новые материалы;
• быть удобной в обслуживании и доработке.

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

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

Программа

Существует несколько подходов к разработке программной части сайта:

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

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

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

• CMS, созданные внутри студии, код которых, как правило, создается и дорабатывается от проекта к проекту.

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

  В нашей студии мы не используем многоразовую CMS. У нас есть:

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

  Наполнение сайта

  Этапы работ:

  1. Сбор, верстка контента
  2. Подготовка фотографий и иллюстраций
  3. Внутренняя поисковая оптимизация, вычитка текстов

  Данный этап наиболее очевиден для экономии бюджета на разработку – клиенту предоставляется пустой, готовый к заполнению сайт. Подготовка рекламных текстов, поиск фотографий и иллюстраций – всё это ложится на его плечи.

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

  Тестирование и ввод в эксплуатацию

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

  Этапы работ:

  1. Проверка сайта на тестовых данных
  2. Согласование с заказчиком и внесение допустимых корректив

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

  Расчет стоимости

  Из описанного выше можно прикинуть объем проводимой работы над проектом. По опыту, с учетом всех необходимых этапов, это 150–300 человеко-часов, плюс время на правки и согласования.

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

  Из этого следует, что над проектом за $300–500 будут либо трудиться люди вообще без какой-либо квалификации, либо будут опущены многие ключевые этапы работ и проект будет сделан за три дня на коленке.