Разработка сайтов

Когда приходит время заявить о себе или о своей деятельности в интернете, появляется необходимость в создании сайта. В связи с этим возникает масса вопросов, самый распространённый из них:

«Сколько стоит сайт?» и следом за ним «Почему так дорого?»

---

Задача данной статьи – рассказать о типах сайтов, об их особенностях, о ценообразовании и раскрыть этапы создания сайта.

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

1. Готовые решения

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

Готовые решения бывают универсальные и специализированные. 

Специальные сайты разработаны непосредственно под определённый вид деятельности. Например,

• магазин автозапчастей
• свадебный салон
• ЖКХ
• сайт поликлиники
• магазин парфюмерии 
• и т.д.

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

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

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

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

2. Индивидуальная разработка

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

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

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

2.1 Этапы разработки

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

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

2.2 Прототипирование и написание технического задания

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

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

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

2.3 Что нужно чтобы составить ТЗ?

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

2.4 Что включает в себя ТЗ?

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

2.5 А сколько страниц нужно спроектировать?

На примере интернет-магазина

• Главная
• Страница каталога
• Карточка товара
• Страница поиска
• Страница сравнения товара
• Контакты
• Информационная страница (Статья, информация о доставке)
• Список новостей
• Страница новости
• Страница брендов
• Корзина
• Оформление покупки
• Завершение покупки
• Страница оплаты
• Личный кабинет пользователя
• Отзывы
• Частые вопросы

На примере сайта визитки

• Главная
• Страница поиска
• Контакты
• Информационная страница (Статья, информация о доставке)
• Список новостей
• Страница новости
• Отзывы
• Частые вопросы

На примере сайта адвокатского бюро

• Главная
• Информационная страница
• Список новостей
• Страница новости
• Карьера
• Клиенты
• Практики / отрасли
• Страница команды
• Страница сотрудника компании
• Поиск
• Аналитика

2.6 Дизайн

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

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

2.7 Верстка

После того, как дизайнер завершил свою работу, ее нужно сверстать. Что это значит?

Перевести всю графическую информацию в читаемый код. Основным языком верстальщика является HTML. Благодаря нему компьютер пользователя, а в частности браузер (программа для просмотра web-страниц), понимает какие элементы куда расположить и как их нужно отобразить. За визуализацию блоков отвечает каскадная таблица стилей - CSS.

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

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

2.8 Настройка системы управления

Системы управления позволяют работать с сайтом без знания HTML и CSS. Прежде чем устанавливать свёрстанный дизайн, в системе управления нужно наладить все связи и взаимодействия между компонентами.

Что необходимо настроить?

• В зависимости от структуры, нужно создать информационные блоки, которые отличаются набором свойств: Новости могут содержать автора и источник, а товары - цену, цвет и размер. В каждом из этих блоков настраивается список свойств (картинка к новости, автор, источник, видео)
• Настроить автоматическое формирование человеко понятного адреса страницы (ЧПУ)
• Права доступа к различным разделам сайта (например, контент-менеджеры новостей не могут редактировать цены в товарах)
• Настроить поиск по сайту таким образом 
• Настройка быстродействия системы. Если загрузка срнаниц будет слишком долгой, пользователь незамедлительно покинет сайт.
• Расписание создания резервных копий
• Настроить правильное формирования заголовков окна браузера, ключевых слов и описания страницы для поисковых систем.

2.9 Сборка

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

2.10 Тестирование и отладка

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

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