1.1. Видение проекта

Это документ, описывающий:

1. Концепцию проекта, цели его создателей;
2. Потребности пользователей;
3. Возможности пользователей на сайте;
4. Основные идеи для проекта.

1.2. Ключевые персонажи

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

1.3. Карта сайта

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

После утверждения карты сайта мы приступаем к разработке прототипов. Каждый прототип – это будущая страница проекта в черно-белом варианте и с условными размерами элементов. На каждом прототипе мы показываем все компоненты до мельчайших подробностей:

• Общие структурные элементы: «шапка» страницы, «подвал», навигация по сайту (меню, путь по сайту – «хлебные крошки»);
• Блоки с контентом – их расположение и взаимодействие друг с другом;
• Ссылки и кнопки – их названия, реакция на нажатие и т.д.

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

Кроме того, создание интерактивного прототипа позволяет:

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

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

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

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

1. Какие роли пользователей предполагает ваш проект (учитель и ученик, продавец и покупатель, мужчины и женщины, администраторы, модераторы)? Какими правами и ограничениями обладают пользователи с той или иной ролью?
2. Как действует игровой механизм (если ваш проект предполагает наличие игры): какие ступени есть в игре, каковы преимущества на той или иной ступени?
3. Как формируются рейтинги пользователей, фотографий, статей и т.д.?
4. По какому принципу сортируются в списках пользователи, фотографии, публикации, видео?
5. Как пользователи могут вывести с сайта заработанные деньги?
6. Как сайт получает доход: описание платных услуг, их стоимость, процесс получения комиссии и т.д.?

В спецификации (техническом задании) должны быть описаны все возможные требования к разработке проекта. В частности:

1. Технологии, посредством которых будет разрабатываться проект (asp.net, flash, ajax, javascript);
2. Браузеры, в которых сайт должен отображаться и работать без ошибок;
3. Требования к нагрузкам (сколько пользователей, запросов должен выдерживать сайт за определенный промежуток времени);
4. Правила формирования URL-ов;
5. Требования к серверному обеспечению.

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

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

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

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

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

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