Разработка сайта — от первой встречи с заказчиком до сдачи проекта, или как быть фрилансером и выжить

Привет!

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

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

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

Кому интересно — добро пожаловать под кат!

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

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

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

Итак, вот она, моя схема работы над новым проектом:

1. Знакомство
2. Первая встреча, обсуждение проекта
3. Бриф и коммерческое предложение
4. Вторая встреча, подписание договора, предоплата 30%
5. ТЗ, его утверждение
6. Макет главной страницы, его корректировка и утверждение
7. Макеты остальных страниц сайта на основе стилистики, заданной главной страницей, их корректировка и утверждение
8. Предоплата 30%
9. Верстка и программирование. Приемка и утверждение результатов работы
10. Третья встреча, оплата оставшихся 40%, обучение работе с админкой (при необходимости), закрытие работ по договору
11. Перенос сайта на «боевой» хостинг

Рассмотрим этапы более подробно.

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

Итак, вы познакомились с человеком, которому очень нужен сайт. Узнайте примерно, что ему нужно и сможете ли вы ему с этим помочь, а потом сразу назначайте встречу. Сколько бы не было разговоров о том, что сейчас 21-й век, есть Skype, все можно решить удаленно и т.д. — непосредственный контакт очень важен. Чтобы заказчик в вас поверил и не побоялся выделить вам предоплатных денег, вы должны произвести на него хорошее впечатление.

Я люблю проводить встречи в хороших кафе и ресторанах в центре города. В заведении должно быть не шумно и желательно наличие Wi-Fi. Такие заведения расслабят и вас, и заказчика, переведут общение на более непринужденный лад, вы спокойно все обсудите и поймете, что заказчик хочет от вас. Противоположностью является встреча в середине дня в офисе заказчика. Он, как правило, весь с головой в своей ежедневной рутине, его постоянно отвлекают, и конструктивный диалог бывает наладить очень сложно. С таких встреч, если они все же происходят, я всегда выхожу с больной головой.

Когда будете договариваться о встрече, учитывайте пожелания заказчика о месте и времени, но не слишком прогибайтесь под него — вы равные партнеры и время и место встречи должны быть удобны как ему, так и вам. Оденьтесь поприличнее и выдвигайтесь на обговоренное место встречи. Я люблю приехать минимум за полчаса — во-первых, я уверен, что не опоздаю, во вторых, я успеваю спокойно усесться, заказать себе чашечку кофе, расслабиться, открыть ноутбук и почитать свежие новости/подумать о том, о чем вы сейчас будете разговаривать.

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

Бриф включает в себя краткий текстовый конспект того, что вы обсудили на встрече. По сути, на нем будет впоследствии основываться ТЗ. Оформите его красивым литературным языком, но без «воды» и словоблудия. Написали? Отлично! Теперь самое интересное — коммерческое предложение.

Прочитайте еще раз бриф. Покажите его своим подрядчикам, которые будут с вами делать проект. Пусть назовут свою примерную цену за такую работу. Прибавьте сюда вашу себестоимость как специалиста (дизайнера, в моем случае). А теперь еще раз все проанализируйте и прибавьте коммерческий интерес. При его подсчете исходите из платежеспособности заказчика — и не в плане того, что если он «богатенький Буратино», то можно с него стричь без стыда и совести — наоборот, если вы видите, что он, как и вы, на заре развития своего дела, будет уместным немного «подвинуться» в цене — добродетель это всегда хорошо; учитывайте также и его психологический портрет, который вы должны были составить во время встречи — прикиньте, насколько велика вероятность того, что он будет «мучать» вас необоснованными правками, или просить поставить на главную страницу сайта фотографию своей любимой кошки, добавив ей анимацию сверкающих глаз на JS. Ну а вообще, не продешевите. Работа приносит удовольствие тогда, когда знаешь, что она будет достойно оплачена.

Определились с ценой? Сделайте красиво оформленную PDFку с вашим логотипом (если логотипа нету, не беда, но лучше сделайте или закажите), заголовком типа «Коммерческое предложение на разработку сайта www.domain.com). В теле КП распишите этапы работы над сайтом (наподобие как это сделал я чуть выше). Обязательно должно быть четко понятно, в какой момент и сколько заказчик должен платить! Да, можете в КП включить какие-нибудь бонусы. Обязательно укажите бонусом, что вы готовы провести обучение работе с админкой сайта в количестве стольких-то часов после сдачи проекта. Можете подарить заказчику год хостинга. По деньгам мелочь, а человеку будет приятно.
Да, ну и, конечно же, укажите цену, в которую обойдутся заказчику ваши услуги. К этому моменту она должна четко сформироваться у вас в голове.

Прикрепляйте КП к письму с брифом и отправляйте заказчику. Ждите ответа. Не ответит через день — перезвоните и спросите, получил ли он бриф и КП? Ах, он, оказывается, уезжал в срочную командировку — а мы волнуемся, куда он пропал. Ждем еще! И вот звонит телефон, или в списке писем появляется новая строчка, выделенная жирным.

Далее следуют два варианта развития событий:

1) „Дороговато!“, говорит. „А вы на какую сумму рассчитывали?“, спрашиваем.
а) „Ну, на 20% от той, что вы написали“, отвечает. „Был рад с вами отужинать. До встречи!“ — отвечаем и вежливо прощаемся. Но вообще, такое бывает редко — исключить такие ситуации и призвана личная встреча в кафе, о которой я писал выше.
б) „Примерно на 70-90% от той, что вы написали“, отвечает. Говорим, что перезвоним. Правим ценник в КП, если позволяют возможности. Высылаем. Ждем. Далее следует возврат к варианту „1)“ или переход к варианту „2)“.

2) „Все отлично, работаем“, говорит. Сдерживаем эмоции и договариваемся о второй встрече с предоплатой и подписанием договора.

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

Распечатайте договор в двух экземплярах и езжайте на встречу. Подпишите с ним договор и решите вопрос с оплатой первого этапа (в моем случае, повторюсь, это 30% от общей стоимости работ). Попрощайтесь с заказчиком и скажите, что скоро он узреет ТЗ на свой будущий распрекрасный сайт.

После этого этапа я люблю себя чем-нибудь вознаградить. Можно купить какую-нибудь безделушку, можно сходить в кино с подругой, а можно и просто съесть мороженку и быть довольным. Главное, отметить то, что вы — молодец и что дело сдвинулось и „пошло-поехало“.

Теперь самое время писать ТЗ. Откройте бриф, который вы отправляли заказчику. Опишите краткое назначение сайта, его целевую аудиторию, пожелания заказчика по композиции и цветам. Составьте перечень макетов, которые вам (или вашему дизайнеру) предстоит отрисовать. После этого, я обычно беру блокнот с миллиметровой бумагой и рисую карандашом блочные прототипы всех страниц. После этого, я детально описываю для каждой страницы перечень элементов на них и события, происходящие при взаимодействии с ними пользователя. Еще, я отдельно описываю повторяющиеся элементы страниц, такие, как „шапка“ сайта и „подвал“, чтобы каждый раз их не описывать для каждой страницы. Общаясь с программистом, вы наверняка уже определились, какая CMS будет использоваться для сайта. Если в ее админке понадобятся какие-то уникальные модули/страницы, опишите и их тоже. Обязательно напишите пометку, что стилистическое оформление админки сайта остается на ваше усмотрение — если это так, конечно же. Этим вы предостережете заказчика от удивления, что по ссылке domain.ru/admin он увидит стандартные стили Joomla/Wordpress/Ваша CMS, а не тот гиперкосмос, который вы ему нарисовали для front-end части сайта (опять же, если вы не договаривались о другом).

Опишите минимальные требования к браузерам, минимальную ширину окна браузера и другие технические требования к системе, на которой будет просматриваться сайт. Скажите, что не несете ответственности за дополнительное ПО, установленное на компьютере заказчика, которое может влиять на отображение сайта. Простейший пример — плагин Skype для браузера, который превращает номера телефонов, записанные текстом, в кнопки вызова, что, в конечном итоге, технически меняет дизайн сайта.

Не забудьте написать про то, что сайт будет наполнен тестовым контентом, и что полное наполнение сайта не входит в данное ТЗ (если это так). Наполнение сайта обычно является отдельной работой и выполняется после сдачи сайта в рамках дополнительного соглашения (если заказчик не берет наполнение сайта на себя, что происходит чаще всего).

Старайтесь учесть в ТЗ все мелочи. В случае споров и необоснованных „предъяв“ оно, наряду с договором, будет вашим главным „козырем“ и аргументом. Да и своим подрядчикам вы упростите работу, формализовав абсолютно все детали проекта.

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

Итак, еще раз перечитайте свое ТЗ, после чего отправляйте его заказчику. Дожидайтесь его ответа, обсуждайте его с ним, вносите корректировки — и, в конечном счете, вы его утвердите.

Далее следует этап отрисовки макета главной страницы. Если вы — дизайнер, то вы и без меня знаете, что делать. Если нет, то отправьте дизайнеру ТЗ и отсканированные прототипы страниц сайта (ну или просто отправьте, если вы их изначально рисовали не на бумаге, а в специальном софте). В дополнение к этому, встретьтесь с ними или созвонитесь и все обсудите дополнительно еще и на словах, чтобы не возникло непоняток.

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

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

Три макета сайта — это тройная работа. Тройная работа оплачивается втройне. Это раз. Даже если попросить дизайнера нарисовать три разных макета, скорее всего он, будучи специалистом в своей области, которому вы доверяете (иначе зачем вы его наняли?) нарисует один правильный и продуманный со своей профессиональной точки зрения макет, и два „высосанных из пальца“. Это два.

Он — дизайнер, и его чувство вкуса объективно в меру его профессионализма и опыта. Вы — не дизайнер, и ваше чувство вкуса субъективно. Вы можете сыграть в „русскую рулетку“ и выбрать из этих трех макетов тот, что высосан из пальца, потому что он понравится именно вам — но не большей части посетителей сайта, на которых ориентировался дизайнер, и ради создания положительного образа вашей компании в глазах которых создается сайт. Итог — вы переплатили за лишние макеты и получили плохой дизайн, который нравится только вам и вашей жене. Этого ли вы хотели?

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

Вернемся к самому макету. Согласуйте с программистом и расскажите дизайнеру, какая будет на сайте использоваться Captcha, какой клон lightbox'a будет открывать картинки, не нужно ли делать формы с jQuery UI? Пусть он сразу использует эти элементы в своих макетах.

Дождитесь макета от дизайнера, но не спешите пересылать заказчику — проверьте, что там всё ровно, аккуратно и соответствует ТЗ. Всё ок? Отправляйте. Пришли правки от заказчика? Сверьтесь с ними и ТЗ. Если все адекватно и в рамках изначальных договоренностей — вносите правки и отправляйте. Как правило, 1-2 итерации правок — и макет главной страницы утверждается.

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

По предоплате работы дизайнера — дело ваше. Я обычно плачу задаток в 50% до начала работ, и оставшиеся 50% после. С программистом и верстальщиком (если он отдельный) — та же схема.

Итак, дизайн утвержден и сделан. Время следующего этапа предоплаты в 30%! Расплатитесь с дизайнером и подкиньте предоплатных деньжат программисту. Отправьте ему ТЗ и PSD-файлы макетов сайта. Тоже встретьтесь/созвонитесь с ним и всё детально обсудите.

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

Зайдите в админку и попробуйте проделать какие-то стандартные операции — добавьте статью, загрузите фотку, добавьте новость. Все должно работать. Теперь можете самолично заняться тестовым наполнением.

Когда я вижу, как некоторые наполняют сайты тестовым наполнением в виде текста „Тест тест тест тест тест тест тест тест тест тест тест тест тест“ и одной и той же „пикселявой“ и „артефактной“ фотографией на все случаи жизни, хочется взять и у… удручающе вздохнуть. Сайт — это продукт, товар, который вы продаете. А товар должен иметь товарный вид, иначе его не купят. Нет желания писать из головы „рыбные“ тексты для тестовых статей и новостей? Для латиницы есть Lorem ipsum, а для кириллицы мне нравится Яндекс.Весна. Разные фотографии для статей и новостей можно найти в Google images.

Сделайте несколько тестовых новостей, тестовых статей. Расставляйте в тексте переносы, табуляции. Разбавляйте большие текстовые блоки ссылками, выделениями жирным и курсивом. Используйте нумерованные списки. Покажите заказчику, что вы старались над его проектом, а не сделали всё „тяп-ляп“ — поверьте, он это оценит!

Всё готово? Не сайт, а конфетка? Кидайте ссылку заказчику, пусть смотрит. Ответьте на все его вопросы. Если возникнут правки — сверьтесь с ТЗ, с утвержденными макетами и примите правильное решение.
Наконец, договаривайтесь о последней встрече, закрывайте работы и забирайте оставшиеся 40% от стоимости сайта. Вы и ваши партнеры их заслужили! И да, не забудьте хорошенько отметить со своими людьми сдачу проекта! Очень правильная традиция.

Что еще хочется сказать?

• Переносите готовый сайт на хостинг заказчика только тогда, когда получите все деньги. Это простая и уместная защита от непорядочности.
• Боритесь с ленью, если у вас она есть. Не откладывайте на завтра то, что можно сделать сейчас.
• Будьте человеком слова. Обещали сдать этап в понедельник? Не успеваете? Расшибитесь в лепешку, обпейтесь кофе, энергетиков, забудьте о личной жизни, но работу сдайте в срок. В крайнем случае, заранее свяжитесь с заказчиком, извинитесь и обсудите новые сроки. Именно ответственных и исполнительных партнеров заказчики рекомендуют своим друзьям и коллегам.
• Ведите ежедневник. Я использую для этого Google Календарь. Записывайте туда даты встреч, дедлайны и все предстоящие важные события. Дедлайны я крашу в красный, нечто приятное — в зеленый, а неприятные, но важные дела — в болотный. Когда дело выполнено — тут же отмечаю его серым. Соответственно, по прошествии недели смотрю, сколько у меня серых прямоугольников, и если много, значит я — молодец!
• Читайте всякие самомотивационные статьи и книжки, типа „Тайм-драйва“ Глеба Архангельского. Реально помогает!

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

В общем, я бы с удовольствием подискутировал обо всем этом в комментариях.
Спасибо за внимание!

UPD: И спасибо за инвайт, друзья!

Автор: bfck