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

1 Постановка задачи

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

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

Можно приводить разные примеры, задача всегда ставится конкретно. Именно этот вопрос обсуждается на первой встрече. Важно, чтобы все участники переговоров перешли от общего понимания «нам нужен сайт для нашей фирмы», к конкретной постановке задачи: «сайт должен продавать товар конечному потребителю».

2 Аналитика

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

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

3 Выработка концепции

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

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

4 Создание прототипов

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

5 Оформление дизайна и верстка

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

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

6 Интеграция дизайна и CMS

CMS – английская аббревиатура от Системы Управления Содержимым сайта. упрощенное бытовое понятие «движок сайта».

Задача программистов связать программный код CMS с HTML-шаблонами дизайна и настроить систему управления так, чтобы можно было начать наполнять сайт текстами, фотоматериалами, товарами – всем, что предусматривает ТЗ. Запускается тестовая версия интернет-проекта. Она доступна только заказчику.

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

7 Наполнение контентом

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

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

советы по наполнению сайта контентом

Обслуживание сайта

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

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

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

Вывод

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

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

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

Состав рабочей группы проекта

1. Менеджер проекта.

Ведет переговоры с заказчиком и сторонними разработчиками. Составляет договор на оказание услуг. Определяет сроки и состав работ. Координирует взаимодействие разработчиков по проекту. Ставит перед разработчиками задачи и контролирует сроки выполнения. Сдает проект заказчику. Должен обладать развитыми коммуникативными навыками и организаторскими способностями.

2. Системный аналитик.

Технический специалист со стороны исполнителя. Формализует функциональные требования, озвученные заказчиком. Иными словами переводит их на технический язык, понятный программистам и дизайнерам проекта. Составляет техническое задание на реализацию. Выбирает систему управления сайта. Определяет архитектуру баз данных. Формирует внутреннюю логику работы системы в целом. Обрабатывает запросы на внесение изменений в уже начатый проект, оценивая риски по срокам их реализации.

3. Арт-директор.

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

4. Проектировщик интерфейсов.

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

5. Дизайнер

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

6. Верстальщик.

Преобразует статичные графические прототипы в HTML шаблоны оформления. Формирует каскадные стили оформления CSS. Следит за соблюдением стандартов написания конечного HTML кода и его адекватным отображением в различных браузерах (IE, Firefox, Opera, Safari) и платформах (Windows, MacOS, Linux).

7. Flash-технолог.

Реализует всю работу проекта на FLASH, если это предусмотрено техническим заданием. Flash технолог – по сути, программист аниматор, который оживляет статичные элементы, программирует алгоритмы их поведения на экране. Интегрирует графику, видео, музыку в интерактивный flash ролик.

8. Программист.

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

Программист серверной части устанавливает систему управления сайтом, в случае выбора коммерческой CMS. Реализует уникальный функционал в случаях, когда решение на базе готовой CMS не удовлетворяет заявленным требованиям технического задания. Интегрирует шаблоны HTML верстки с серверным кодом CMS и базами данных MySQL или MSSQL. Несет ответственность за безопасность и защиту проекта от взлома.

9. Копирайтер.

Функции копирайтера это набор, подготовка, редактирование текстовой информации поступившей от заказчика. Проверка речевых и орфографических ошибок.

10. Контент-менеджер.

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

А в реальной жизни?

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