Блог

Как разрабатывают сайты - от идеи до результата

Как разрабатывают сайты - от идеи до результата

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

Согласитесь, лучше учиться на ошибках других, чем на своих.

В конце статьи добавлю все ссылки, которые использую в тексте + пример ТЗ для разработки сайта, брифы на разработку сайта и дизайна. Если решите организовать процесс самостоятельно, вам  будет полезно :)

Кто я и кто «мы»


Я разработчик, в сфере веб-разработки с 2015-го и по сей день.
До 2019-го успел поучаствовать в более чем 100 проектах разной сложности. Из них 37 - это командная разработка и управление проектами.

За это время познакомился с квалифицированными специалистами, которых видел в деле, а не на словах. Опыт каждого из них от 3-х и более лет. Полученные навыки и знакомства, за эти годы, дали возможность организовать команду надежных и проверенных специалистов. Это позволяет разрабатывать проекты качественно, а главное — в срок!

Являясь разработчиком, хорошо понимаю как решать поставленные задачи и какие специалисты требуются для разработки проекта. Я и сам участвую в проекте в качестве Front-End  разработчика :)


 

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

Если опыт уже был, вы понимаете каково это:)
У вас есть возможность сравнить мой подход к работе и предыдущих подрядчиков с которыми вы работали, тем самым сразу определиться, подхожу я вам или нет буквально за 10 минут.

Кратко и по сути:

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

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

Личная статистика

7 из 10 заказчиков с которыми я работаю, ранее меняли подрядчика по 2-м основным причинам:

1. Халатность и сорванные сроки.
Данный пункт не зря на 1-м месте. 150 причин по которым работа будет выполнена «завтра» и так каждый день на протяжении недели, в лучшем случае.

2. Сваливают на заказчика все подряд. 
Вот мол 10 файлов, 100  вопросов, пример тех.задания на 20 страниц — пишите. Как напишите, так и сделаем. И абсолютно никого не интересует, что человек пришел к специалистам как раз потому, что в этом слабо разбирается и ему нужна помощь, а не очередной повод убить время, которого нет.

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

Увы, понимание такой простой истины приходит спустя годы опыта.

 

Процесс разработки сайта

 

Разработка сайта состоит из этапов:

1. Согласование;
2. Задачи и ТЗ;
3. Дизайн сайта: 3.1 Прототипы > 3.2 Концепция и дизайн;
4. Разработка сайта: 1. Верстка > 2. Функционал > 3. Тестирование;
5. Запуск.

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

Сайт - инструмент для достижения цели, а не сама цель.

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

Первые 2-3 пункта требуют от заказчика непосредственного участия.

Уверяю, все что можно сделать без вас, будет сделано без вас.

1. Согласование

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

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

Лучше потратить 30 минут на вопросы, чем месяц на правки.

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

 


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

В ходе диалога оказалось, что каналом для привлечения клиентов должен быть трафик из Google и Яндекс. Не контекстная реклама, а естественный трафик из поиска (SEO-продвижение).
Заказчик был удивлен, узнав что поднять лендинг на нормальные позиции в высоко-конкурентной нише практически нереально. Он лишь потратит уйму времени, средств, а результата не получит толком.


 

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

Разница между неопытными исполнителями и опытным в том, что неопытные спрашивают что делать, а опытные исходя из задач предлагают решение.

2. Задачи и ТЗ

Техническое задание

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

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

Чтобы заказчик ознакомился и прочел еще раз то, что мы обсуждали. Это даст заказчику представление о том, что он получит в конечном итоге, а мне уверенность в том, что верно его понял.

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

После утверждения, переходим к этапу проектирования и дизайна сайта (если дизайн требуется).

Техническое задание для разработчиков выглядит примерно так.

ТЗ

3. Дизайн

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

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

В нашем случае, дать ответы нужно будет на простые вопросы, что-то вроде:

  • Какие сайты нравятся, а какие нет;
  • Есть ли у вашей компании лого, фирменный стиль, цвета, шрифты?
  • Какие контакты необходимо разместить на сайте (телефон, почта, карта, ссылки на соц.сети).

Т.е. на подобные вопросы заказчик с легкостью ответит.
Более сложные вопросы я заполняю сам:

  • Тип проекта;
  • Структура сайта;
  • Кол-во уникальных страниц/шаблонов/разделов;
  • Какие формы, поля и типы данных будут использованы;
  • Технические требования к макету и т. д.

Мне в будущем, по готовым макетам делать адаптивную верстку сайта, а после передавать в работу backend-разработчику. Никто лучше меня данные технические требования не напишет:)

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

Это одно из преимуществ разработки сайта в команде! Существенно экономиться время на коммуникацию и минимум бюрократии с файлам, документами и т.д.

3.1 Прототипы

Прототипы

 

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

Тут совсем просто: разрабатываем 2-3 варианта прототипов и демонстрируем.
Заказчику нужно лишь ознакомиться и утвердить.

3.2 Концепция и дизайн

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

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

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

Раздел больше технический и для вас тут минимум полезной информации.
Разработка сайта имеет 3 этапа:
- Верстка;
- Функционал;
- Тестирование.

Опишу все простыми словами.

  1. Адаптивная верстка — этап превращения дизайна в полноценные страницы сайта, адаптирующиеся под ширину экрана разных устройств (телефон, планшет, десктоп).
  2. Программирование — этап интеграции верстки на CMS (админку) и написание/подключение требуемого функционала.
  3. Тестирование — Название говорит само за себя. Тестируем получившийся результат, устраняем ошибки и оптимизируем код.

На деле все намного сложнее. Взять хотя бы этап адаптивной верстки, его подробно описал на medium.com «Как происходит процесс разработки внешнего интерфейса».

Заказчик лишь наблюдает за процессом, когда есть время и желание.

Разработка ведется на наших серверах с открытым для заказчика доступом, в любое время суток можно зайти и убедиться, что слова «работа кипит, все идет по плану» соответствуют действительности.

5. Запуск

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

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

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

Итог

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

Как и обещал, вот ссылки на материал о котором упоминал, он возможно вам пригодиться:)

5 популярных ошибок заказчика при разработке сайта
Что не забыть, принимая макет сайта от дизайнера, или мелочей не бывает
Как происходит процесс разработки внешнего интерфейса

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

Пример брифа на дизайн (6 страниц)
Пример брифа на сайт (3 страницы)
Пример ТЗ на разработку сайта по прототипу (13 страниц)

Пример подробного ТЗ на разработку сайта (31 страница)

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

А если заказчиком является предприниматель? Или менеджер которому поручили найти исполнителей и заказать сайт для компании?
Совсем не понимаю, как человек не имеющий опыт в создании сайтов может без помощи специалистов все правильно заполнить и написать.

Надеюсь, материал был вам полезен и дал ответы на интересующие вас вопросы.

*ТЗ — техническое задание.
*MODX —  профессиональная система управления содержимым (CMS) и фреймворк для веб-приложений. Согласно рейтингу Рунета, Modx находится в ТОП-5 всех CMS.

Есть проект?

Пишите, обсудим! 95% заказчиков приходят по рекомендации,
я это очень ценю и всегда общаюсь лично:)

Можем созвониться в skype или telegram,
в будние дни с 11:00 до 20:00 по Киеву.

Логотип

Еще статьи

Как влияет скорости загрузки сайта на продажи и прибыль

Как думаете, сколько обходиться лишняя секунда загрузки сайта вашему бизнесу? В среднем, от 700$…

Читать далее

Адаптивная верстка цена 2019

Стоимость адаптивной верстки. Верстка лендинга или одностраничника, верстка главной страницы сайта,…

Читать далее

Гарантия на разработанный сайт

На каждый созданный сайт действует гарантия 6 месяцев. На протяжении этого времени, при выявлении…

Читать далее
Социальные сети facebook
vk.com
Мессенджеры Telegram
Skype
Локация

Центральная Украина,
Днепропетровск