Вчера ко мне подошел человек и спросил сколько стоит создание сайта. Конечно, я ответил, что все зависит от того какой сайт нужен и рассказал как есть, но сам вопрос не правильный. Поделю нестандартно все сайты на 2 типа, по легкости их создания:

  • Сайт можно создать за пару кликов в специальных сервисах. Подходит для быстрого старта “меньше думать, больше делать” и для типовых задач: блог, простой Landing Page (LP), страница заглушки. Стоимость от 0 до 1 000 р.
  • Хороший сайт, который решает конкретную задачу. Узкоспециализированные ресурсы, как правило, уже не стартапы. Кстати, тут тоже могут быть LP как дополнительный канал для получения заказов в существующий успешный бизнес. Стоимость от 30 000 р., ограничений сверху нет.

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

 1. Определение функциональных назначений сайта

На этом этапе мы отвечаем на такие вопросы, как:
  1. Что должен выполнять сайт? Функциональность сайта. Возможность логиниться на сайт, оставлять комментарии, заявки, яндекс карта и т. д.
  2. Кому что то должен делать сайт? Наша целевая аудитория. По возможности делим ЦА на сегменты. Вариант “Жители Санкт-Петербурга” или “Женщины от 26 до 36” не подходят, это как пальцем в небо. Будет здорово, если вы знаете как думает ваш клиент, есть ли у него высшее образование, какими гаджетами пользуется, насколько финансово обеспечен, его привычки. Многие в этот момент могут спросить “откуда мне все это знать?”. Придумайте. Представьте в голове кто ваш пользователь и делайте для него ваш сайт. Подходящего человека вы найдете.

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

2. Копирайтинг и сбор контента

lorem ipsum design boromir

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

“Напишите туда что-нибудь, потом заменим”. Это слышал каждый дизайнер. Большинство думает, что можно вставить в макет Lorem Ipsum, а потом заменить текст и получить отличную работу. Нет, при замене с “рыбы” на реальный контент, страница поплывет в большей или в меньшей степени. Актуально для всех сайтов, но гиперактуально на информационных сайтах.

Касательно контента, тут нужно все, все что есть и как можно больше. Фото, видео, сертификаты, портфолио, все что у вас есть и что следует донести вашему клиенту.

3. UX, карта сайта, прототипы

wireframe

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

Если в первом пункте мы искали ответы на вопросы “Что?” и “Кому?”, то в этом мы отвечаем на вопрос “Как?”. По методу постепенного уточнения результата, рисуем сначала карту сайта, потом прототипы и смотрим на то, как каждый пользователь решает какую то свою задачу.

4. Дизайн

responsive-design

Визуализируем прототип. В результате получаем оригинал-макеты (готовые страницы в формате psd). Есть 2 мнения о том, насколько оригинал-макет должен его повторять:

  1. Точно повторять. Дизайнер выполняет роль кисточки.
  2. Дать свободу. Дизайнер вносит какие то коррективы в проект в лучшую сторону и способный объяснить изменения. Мне такой подход нравится больше.

5. Верстка

html css js

Разметка HTML и CSS стили к ней. Если понятным языком, описываем оригинал-макет понятным для браузера языком, где можно уже кликать на кнопки. Тут же верстается и адаптивная версия, если он предусмотрен.

6. Натяжка на CMS или фрэймворк

Работает уже Back-end разработчик (программист), который привязывает верстку к соответствующей функциональности сайта. На примере редактирования статьи в блоге. Сверстанный дизайн показал нам, как выглядят элементы статьи: заголовки, комментарии, цитаты, лайки, репосты в соц. сети. Back-end программист добавит возможность редактировать заголовки и цитаты, оставлять комментарии, ставить лайки и репостить.

 7. Загрузка на сервер

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

8. Наполнение контентом

Сайт уже готов, остается только заполнить текстом. Если мы выполнили п.2 с контентом, то проблем никаких не будет. На выходе вы получите классный, функциональный, красивый сайт с интересным контентом (который можно на этапе копирайтинга уже написать с SEO оптимизацией, главное не перегнуть палку, контент для людей).

9. Тестирование и последующее обслуживание

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

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


Как видите, все не так просто, если подходить к работе основательно. Сегодня в одиночку создавать серьезные проекты практически невозможно, нужно объединяться в команды.

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