Разработка веб-сайта. Мастерская веб-разработчика

6 марта, 2013

Что же такое веб-проект? Из чего он состоит, сколько длится, сколько стоит?

Можно поступить следующим образом: взять бесплатный (или недорогой) шаблон, коих в веб-пространстве достаточно, засунуть туда логотип компании, переименовать меню и разместить на хостинге. Вуаля! — корпоративный сайт готов. Останется только наполнить контентом по технологии ”paste&copy” из блокнота.  Можно также продавать такие сайты под лейблом «Сайт за 5 тысяч рублей» или «Сайт за один день». 

У нас несколько другой путь.

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

I. Проектирование
II. Визуализация
III. Разработка
IV. Отладка, сопутствующие работы и публикация
V. Обслуживание и развитие


I. Проектирование:

Первый и очень важный этап работы над любым веб-проектом. 

Затраты — от 10 до 150 человеко-часов, в зависимости от сложности проекта. 

Этап включает в себя:

Постановку цели и задач проекта.

Как ни странно, треть заказчиков на вопрос «Зачем вам сайт и что вы от него хотите?» не могут сразу дать внятного ответа. Особенно, если речь идёт о корпоративном веб-сайте. 

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

Определение структуры будущего сайта.

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

Если сайт будет объектом СЕО-продвижения, то уже на этом этапе следует разработать семантическое ядро — оно во многом определяет структуру будущего веб-ресурса.

Составление блок-схем наиболее важных страниц.

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

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

Простая блок-схема страницы может выглядеть так:

Создание подробного технического задания

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

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


II. Визуализация, графический дизайн.

Сайт спроектирован, понятен, продуман. Теперь за дело берутся дизайнеры. Им нужно добиться того чтобы сайт был не «одним из…», а особенным, со своим характером. Каким именно? Это опять зависит от цели. Может быть инновационным,  или консервативным, смелым и ярким или сдержанным, а может он должен рождать определённые ассоциации или относить пользователей к определённой эпохе. На этом этапе схемы должны ожить, страницы больше не должны быть безлики и унифицированы.

Временные затраты — от 25 до 100 человекочасов в зависимости от сложности проекта.

Этап включает:

Создание фирменного стиля или анализ / корректировка существующего.

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

Дизайн главной страницы.

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

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

Ревизии.

После того, как дизайн главной страницы готов, он презентуется заказчику. 

Мы всегда стараемся пояснить, почему мы сделали так, а не иначе, каковы были мотивы. После обсуждения, составляется список изменений по дизайну главной страницы и делается обновление (ревизия). Как правило, когда работает профессиональный дизайнер и всё тщательно спланировано, количество ревизий (версий с изменениями) дизайна невелико, но  мы всегда готовы править дизайн до тех пор, пока и заказчик и мы не будем полностью им удовлетворены.

Дизайн внутренних страниц.После того, как дизайн главной страницы одобрен и принят мы делаем дизайн внутренних страниц.  Количество внутренних страниц, которые следует сделать на этапе визуализации разнится в зависимости от величины проекта. Для простого сайта-визитки достаточно «отдизайнить»  1-2 внутренние страницы, для сложного интернет магазина — 8-10.

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

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


III. Разработка

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

Временные затраты — от 40 человекочасов.

Этап включает:

Вёрстка.

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

Разработка и внедрение системы управления сайтом. 

Мы в своей работе используем как широко известные программные платформы и CMS (WordPress, 1S Bitrix, Joomla, Magento, Prestashop, Netcat и др.), так и созданные нами, свои собственные системы.

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

Этот этап выполняется совместно верстальщиками и програмистами.

Разработка сложной функциональности.

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

Этот этап работы выполняется программистами.

В случае разработки нового инновационного веб-сервиса именно эта фаза работы занимает больше всего времени и требует наибольшей квалификации веб-разработчиков.

Создание альфа-версии будущего сайта. 

Создание функционального прототипа сайта и функциональное тестирование.


IV. Отладка и сопутствующие работы

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

Временные затраты — от 25 человекочасов на простых проектах, нередко более 100 часов для сложных веб-разработок.

Этап включает:

Обучение заказчика работе с веб-ресуром.

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

Добавление живого контента на веб-сайт.

Для интернет магазинов — экспорт продуктов.

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

Тщательное тестирование веб-ресурса с привлечением незадействованных до этого  профессиональных разработчиков. 

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

Подготовка сайта к СЕО-продвижению по согласованию с заказчиком.

Создание sitemap.xml и robots.txt файлов. Анализ и редактирование контента. Создание внутренней перелинковки и т.д.

Публикация нового веб-сайта.

Самая волнительная часть работы. Это как спуск на воду нового флагмана. До этого он был закрыт для посторонних глаз и наконец его увидят все.

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

Веб-сайт сделан и сдан. Однако, как правило, работа на этом не заканчивается.


V. Обслуживание и Развитие

Нередко говорят, что веб-сайт — это такая штука, за которую вы платите один раз, и она будет работать на вас 24 часа в сутки, всю жизнь… Это не правда. Сайт требует обновлений, развития, продвижения, обслуживания и т.д. Только тогда он имеет смысл. Только так перед веб-ресурсом можно ставить какие-то задачи.

Основные направление деятельности такие:

Обычное обслуживание.

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

Веб-маркетинг.

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

Разработка новых функций, обновление программной платформы и т.д.

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


Кратко можно сформулировать следующие выводы:

1. Разработка уникального веб-иструмента — сложный процесс, состоящий из пяти этапов. 

2. Роль таких этапов, как «I. Проектирование» и «IV. Отладка», часто недооценивается. На наш взгляд, повышенное внимание на эти этапы — хороший критерий профессионализма веб-студии.

3. Создание простейшего, но индивидуального веб-ресурса занимает не менее 100 человекочасов. Часто эта цифра гораздо больше. Именно на расчёте трудозатрат и строится оценка проекта в нашей веб-студии.

4. После окончания основного проекта сайт требует обслуживания и развития.

Ещё не передумали создавать новый веб-сайт? 🙂 

Обратитесь к нам! Закажите обратный звонок!

Все Статьи