Техническое задание на разработку дизайна - Альфа

стр. 1 из 15
Приложение №1 к договору №120 МЮ от
08.10.2009г.
Техническое задание на разработку
макета сайта.
дизайн-
1. Введение .....................................................................................................................................2
2. Назначение дизайн макета ........................................................................................................3
3.Требования к дизайн-макету сайта ...........................................................................................4
3.1 Требования к функциональным характеристикам ...........................................................4
3.1.1 Функциональные элементы сайта ...............................................................................4
3.1.2 Навигация на сайте .......................................................................................................5
3.2 Требования к визуальному отображению .........................................................................5
3.2.1 Фирменный стиль .........................................................................................................5
3.2.2 Размер и вид шрифта ....................................................................................................5
3.2.3 Визуальное размещение элементов ............................................................................6
3.2.3 Информационное наполнение дизайн-макета ...........................................................6
3.2.4 Прочие требования .......................................................................................................6
3.3 Требования к составу дизайн-макета.................................................................................6
3.3.1 Структура и количество страниц дизайн-макета. .....................................................6
3.3.2 Количество и типы графических файлов ...................................................................6
3.4 Требования к параметрам технических средств ...............................................................7
3.4.1 Диапазон разрешения мониторов ...............................................................................7
3.4.2 Цветовая палитра мониторов ......................................................................................7
3.5 Требования к информационной и программной совместимости ...................................7
4. Требования к оформлению документации ..............................................................................8
5. Этапы разработки дизайн-макета ............................................................................................9
5.1 техническая проработка ТЗ. ...............................................................................................9
5.2 разработка образа дизайн-макета .......................................................................................9
5.3 приемка графического образа дизайн-макета ...................................................................9
5.4 верстка дизайн-макета.........................................................................................................9
5.5 приемка дизайн-макета ......................................................................................................9
5.6 юзабилити тестирование .....................................................................................................9
5.7 исправление замечаний по дизайн-макету .......................................................................9
5.8 окончательная приемка дизайн-макета ............................................................................9
Приложение 1. Структура сайта ............................................................................................10
Приложение 2. Семантическое ядро сайта ...........................................................................11
Приложение 3. Функциональные блоки сайта .....................................................................12
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 2 из 15
1. Введение
Сайт ООО “ПО Альфа-металл”(далее Заказчик) расположен по адресу www.alfametal.ru
Заказчик занимается продажей цветного металлопроката (в основном алюминиевого, медного,
латунного, бронзового проката) и имеет филиалы в г.Москва, в г.Каменск-Уральский (Екатеринбург) и
в г.Краснодар.
Основные покупатели:
 крупные и средние металлопотребляющие производства,
 металлоторговцы
Предполагаемая целевая аудитория сайта:
 снабженцы металлопотребляющих предприятий, возраст от 20 до 50 лет, время посещения
сайта – рабочее.
 Аудитория связанная профессионально, либо потребительски cо свойствами металлов и
сплавов
Возраст сайта – более 8 лет.
Программное обеспечение сайта – CMS система, изготовленная и модифицируемая Заказчиком
самостоятельно.
Дизайн-макет сайта является набором шаблонов страниц сайта, выполненных на HTML(XHTML),
дополненный файлом таблицы стилей, графическими и JavaScript-файлами.
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 3 из 15
2. Назначение дизайн макета
По разработанному Исполнителем дизайн-макету Заказчиком будут самостоятельно проведены работы
по изменению дизайна сайта Заказчика.
Сайт необходим Заказчику для:
 Представления фирмы в Интернет: информация о фирме, история фирмы, партнёры фирмы,
вакансии фирмы, филиалы фирмы, режим работы, потребности Фирмы, цены на товары,
новости о поступлении новых товаров, справочная информация, консультации посетителей,
юридический адрес, почтовый адрес, схема проезда, контактная информация, банковские
реквизиты
 Обеспечение возможности доступа к информации о товарах и услугах, предлагаемых фирмой
всем заинтересованным лицам, вне зависимости от их местонахождения.
 Создание постоянной аудитории сайта, используя существующие и новые сервисы (химсостав,
калькуляторы масс, и т.д.)
Цель создания дизайн-макета:
 Обеспечить посетителям понятный и удобный доступ к информации, расположенной на сайте.
 Создать запоминающийся стиль оформления сайта
 Способствовать росту постоянной аудитории сайта
 Обеспечить одинаковое отображение сайта во всех современных браузерах
В качестве справочной информации в Приложении 2 приведен список слов и выражений, по которым
планируется продвигать сайт в выдаче поисковых систем.
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 4 из 15
3.Требования к дизайн-макету сайта
3.1 Требования к функциональным характеристикам
3.1.1 Функциональные элементы сайта
На данный момент в информационном наполнении страницы существуют следующие функциональные
блоки (см. Приложение 3):
1 Блок “Основное меню”
Представляет из себя меню с основными разделами сайта
2 Блок “Рассылка”
Позволяет посетителю подписаться на рассылку и/или перейти в раздел сайта, посвященному
почтовой рассылке
3 Блок “Регистрация на сайте”
Позволяет посетителю зарегистрироваться, либо пройти аутентификацию на сайте
4 Блок “Поиск по сайту”
5 Блок “Основные контакты”
В блоке указаны основные телефоны Заказчика
6 Блок “Прайс-листы”
Указаны дата и время последнего обновления каталога металлопроката на сайте, предоставляется
доступ к каталогу металлопроката: к полному каталогу (без учета наличия на складе) и к каталогу
металлопроката имеющемуся в наличии на складе
7 Блок “Заявка менеджеру”
Позволяет посетителю написать заявку, которая будет обработана менеджером Заказчика.
8 Блок “Сервис счетов”
Сервис счетов позволяет посетителю обратиться к внутренней базе данных Заказчика и получить
информацию о состоянии указанного счета
9 Блок “А знаете ли вы что?”
В блоке представлена познавательные факты в области деятельности Заказчика. Факты
выбираются случайным образом при загрузке страницы. количество символов в блоке до 500.
10 Блок “Меню текущего раздела”
Структура сайта Заказчика имеет иерархическую структуру, а соответственно подчиненные и
родительские страницы. В этом блоке отображены ссылки на имеющиеся подчиненные страницы,
если подчиненных страниц нет, то показаны равнозначные разделы.
11 Блок “Анонсы разделов сайта”
В блоке представлены ссылки на интересные (по мнению Заказчика) разделы сайта
12 Блок “Текущая позиция на сайте”
Путь к текущей странице в иерархической структуре сайт, начиная с главной страницы.
13 Блок “Текст страницы”
Основной текст страницы. Текст страницы храниться в Базе Данных в формате HTML. Валидность
HTML разметки этого блока Заказчиком не гарантируется.Исполнитель должен разработать
дизайн-макет не зависимый от валидности HTML разметки этого блока..
14 Блок “Комментарии к тексту страницы”
Посетитель имеет возможность отставлять комментарии к некоторым страницам сайта. В Этом
блоке отображены все комментарии к странице и форма ввода нового комментария.
15 Блок “Сервисные функций”
Позволяет посетителю добавить страницу в избранное, просмотреть версию страницы “для
печати” и т.д.
16 Блоки “Баннер1”, “Баннер2”,”Баннер3”
Баннеры в этих блоках меняются случайным образом. Баннеры являются ссылками на внутренние
разделы сайта.
17 Блок “Последние темы форумов”
В блоке расположены ссылки на последние 3-7 тем форума, кроме объявлений
18 Блок “Последние темы комментарии”
В блоке расположены ссылки на последние 3-7 комментариев к страницам сайта
19 Блок “Каталог металлопроката”
От заказчика
От Исполнителя
___________________/__________________/
______________________/______________/
М.П.
М.П.
стр. 5 из 15
В блоке расположены ссылки на каталог металлопроката. Ссылки соответствуют списку металлов в
каталоге. Предусмотрен выбор – показывать весь металл или только в наличии.
20 Блок “Вы посетили страницы ”
В блоке расположены ссылки на последние 3-7 страниц, которые загрузил посетитель в текущей
сессии
21 Блок “RSS подписки”
Блок информирует посетителя о возможности подписки на RSS-ленты, а также содержит прямые
ссылки на RSS-ленты для поисковых систем
22 Блок “Курсы LME”
В блоке отображается информация по текущему курсу LME, а также ссылки на архив данных LME
(LME- лондонская биржа металлов)
23 Блок “Курсы валют”
В блоке отображается информация по текущему курсу USD и EUR а также ссылки на архив курсов
24 Блок “Счетчики”
Блок содержит 3 счетчика – spylog, mail.ru, rambler TOP100
25 Блок “Сегодня”
В блоке отображается срочная информация – срочные новости компании, новые обновления, сервисы,
поздравления с праздниками.
При создании дизайн-макета необходимо разместить все функциональные блоки на каждой странице.
Количество блоков, их содержание и необходимость их размещения на каждой странице могут быть
согласованы Исполнителем с Заказчиком на этапе технической проработки ТЗ (п. 5.1), и на этапе
разработки образа дизайн-макета (п. 5.2).
3.1.2 Навигация на сайте
Пользовательский интерфейс дизайн-макета должен обеспечивать наглядное, интуитивно понятное
представление структуры размещенной на сайте информации, быстрый и логичный переход к разделам
и страницам. Навигационные элементы должны обеспечивать однозначное понимание пользователем
их смысла: ссылки на страницы должны быть снабжены заголовками и комментариями (подсказками),
условные обозначения соответствовать общепринятым. Графические элементы навигации должны
быть снабжены альтернативной подписью.
Система должна обеспечивать навигацию по всем доступным пользователю ресурсам и отображать
соответствующую информацию. Для навигации должна использоваться система контент-меню,
которое должно представлять собой текстовый блок (список гиперссылок).
С каждой страницы дизайн-макета должен быть обеспечен переход (установлена гиперссылка) на
главную страницу. Сайт должен содержать страницу "Содержание" (карта сайта).
Головная (начальная) страница сайта должна содержать гиперссылки, обеспечивающие переход с нее
на не менее чем 90% разделов сайта, но не более чем 200 гиперссылок.
Основные элементы навигации (присутствуют на каждой странице):
 Основное меню сайта, отображает основные разделы сайта
 Меню раздела сайта, отображает подразделы.
3.2 Требования к визуальному отображению
3.2.1 Фирменный стиль
Цвета – синий, белый. Заказчик
3.2.2 Размер и вид шрифта
Размер шрифта сайта - 10 (для оформления текста). Размер шрифта для оформления заголовков,
названия страниц и т.д. не оговаривается. Вид (название) шрифта не оговаривается.
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 6 из 15
3.2.3 Визуальное размещение элементов
каждая страница дизайн-макета должна содержать логотип и название Фирмы.
на каждой странице дизайн-макета должна быть указана контактная информация.
3.2.3 Информационное наполнение дизайн-макета
Каждая страница дизайн-макета должна содержать информационное наполнение. Исполнитель должен
использовать информацию находящуюся на сайте www.alfametal.ru и соответствующую
разрабатываемому разделу дизайн-макета.
3.2.4 Прочие требования
Допускается дополнительное применение flash-технологий только для изготовления баннеров, ссылок,
логотипов, в остальных случаях применения flash-технологий запрещено без согласования с
заказчиком.
Использование изображений людей, животных запрещено. (допускается строго по согласованию с
Заказчиком).
Названия разделов сайта, подразделов сайта, названия и текст в функциональных блоках должны быть
оформлены как текст. Не допускается оформление в виде картинки динамически изменяющихся
параметров, как то : название страницы, текст страницы.
3.3 Требования к составу дизайн-макета
Дизайн макет должен состоять из :
 страниц HTML, связанных между собой ссылками
 файла таблицы стилей global.css
 файла script.js
 графических файлов, flash-файлов, анимации
3.3.1 Структура и количество страниц дизайн-макета.
Структура Дизайн-макета должна соответствовать текущему информационному наполнению сайта.
Структуру дизайн-макета Исполнитель согласует с Заказчиком на этапе технической проработки ТЗ.
Обобщенная структура сайта приведена в Приложении 1.
Также дизайн-макет должен содержать основные типы страниц каталога металлопроката, а именно : 1. страницы с выбором металла, типа проката, марки и размера
2. список выбранных товарных позиций,
3. детальная информация по товарной позиции.
3.3.2 Количество и типы графических файлов
Все рисунки объемом более 1 Кб должны быть выполнены с замещающим текстом. Рисунки размером
более 15 Кб должны быть выполнены с предпросмотром.
Формат всех рисунков gif или jpg (jpeg).
Для элементов не указанных в ТЗ необходимо применять стандартные, общепризнанные форматы.
Для блоков Баннер1, Баннер2, Баннер3 Исполнитель должен разработать варианты баннеров по
следующим тематикам и в перечисленном количестве:
 Доставка металлопроката (информирует посетителя об услуге “доставка металлопроката”,
подробнее здесь http://www.alfametal.ru/?id=service) – 2 шт.
 Резка металлопроката ((информирует посетителя об услуге “резка металлопроката”, подробнее
здесь http://www.alfametal.ru/?id=service) – 2 шт.
 Упаковка металлопроката ((информирует посетителя об услуге “упаковка металлопроката”,
подробнее здесь http://www.alfametal.ru/?id=service) – 2 шт.
 Форум (информирует посетителя о наличии форума, на котором ему ответят наши
специалисты)– 1 шт
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 7 из 15

Заявка (информирует посетителя о возможности оставить заявку на сайте, на которую ответит
менеджер Заказчика в самое кратчайшее время) — 1шт.
 Наличие на складе on-line (сервис “наличие на складе” встроен в систему управления сайтом и
позволяет подключиться к внутренней БД Заказчика и уточнить наличие конкретного товара на
складе) – 1 шт
 Химсостав (информирует посетителя о сервисе “Химсостав”, на котором он может определить
состав интересующего его сплава)– 1 шт
 Новости металлоторговли – 1шт
 Калькулятор металлопроката (информирует посетителя о сервисе “ Калькулятор веса
металлопроката”, используя который он сможет подсчитать вес изделия из конкретного сплава,
типа, размера) – 2 шт
 Справочная информация (информирует посетителя о наличии на сайте Заказчика большого и
постоянно пополняемого количества справочников, Гостов, статей) – 2 шт.
 Специальное предложение (информирует посетителя о наличии специальных предложений на
металлопрокат) - 1 шт.
Баннеры должны разрабатываться на этапе 5.4. в соответствии с утвержденным образом дизайн-макета.
3.4 Требования к параметрам технических средств
3.4.1 Диапазон разрешения мониторов
Дизайн-макет должен просматриваться без горизонтальной прокрутки в окне браузера при разрешении
монитора 1024x768 пикселей и выше.
При просмотре дизайн-макета при разрешении 800 х 600 пикселей допускается горизонтальная
прокрутка в окне браузера.
3.4.2 Цветовая палитра мониторов
Основной режим мониторов, на которых будет просматриваться сайт: 15 разрядов цветов и выше
(число цветов 65536 и выше).
3.5 Требования к информационной и программной совместимости
Дизайн-макет должен одинаково отображаться в следующих типах браузеров:
 IE 5.5 и выше,
 Opera 9 и выше,
 FireFox 2 и выше.
 Google Chrome 2 и выше.
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 8 из 15
4. Требования к оформлению документации
Во всех HTML страницах дизайн макета должны быть выделены комментариями основные блоки.
В файле script.js должны быть откомментированы все функции (что делает функция, где применяется
кратко)
В файле global.css должны быть откомментированы все стили (название на русском языке, где
применяется кратко)
Все комментарии на русском языке
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 9 из 15
5. Этапы разработки дизайн-макета
5.1 техническая проработка ТЗ.
На этом этапе согласуется ТЗ, передаются имеющиеся графические материалы
Продолжительность: 5 рабочих дней.
5.2 разработка образа дизайн-макета
Исполнитель разрабатывает минимум 3 графических образа будущего дизайн-макета. Образ дизайн
макета (далее Образец) представляет из себя графический файл в формате jpeg либо tiff, с разрешением
не менее 1240x1024 пикселя.
Продолжительность: 9 рабочих дней.
5.3 приемка графического образа дизайн-макета
Заказчик выбирает один из 3-х предоставленных Исполнителем Образцов, с которым будет
производиться дальнейшая работа по верстке дизайн-макета.
Продолжительность этапа: 5 рабочих дней
5.4 верстка дизайн-макета
Исполнитель верстает дизайн-макет и разрабатывает баннеры, в соответствии с выбранным Образцом.
Продолжительность: 4 рабочих дня.
5.5 приемка дизайн-макета
Исполнитель предоставляет Заказчику готовый сверстанный дизайн макет, соответствующий Образцу
п.5.2. и п.3.3. Заказчик принимает дизайн-макет и документацию на него, проверяет соответствие
дизайн-макета ТЗ, описывает замечания, которые необходимо исправить Исполнителю в рамках ТЗ.
Продолжительность: 2 рабочих дня
5.6 юзабилити тестирование
Заказчик по своему усмотрению проводит юзабилити тестирование дизайн макета с привлечением
стронней организации — эксперта.Указанные экспертами замечания обязательны к исправлению
силами Исполнителя. По согласованию с Заказчиком Исполнитель может не устранять указанные
недостатки.
Продолжительность: до 20 рабочих дней.
5.7 исправление замечаний по дизайн-макету
Исполнитель исправляет дизайн-макет в соответствии с указанными Заказчиком
замечаниями.
Продолжительность: 5 рабочих дней.
5.8 окончательная приемка дизайн-макета
Исполнитель предоставляет Заказчику дизайн-макет с исправленными замечаниями
(п.5.4.) Заказчик принимает дизайн-макет и документацию на него, проверяет правильность
исправления указанных замечаний, проверяет соответствие дизайн-макета ТЗ. При выявлении
несоответствия дизайн-макета и ТЗ выполняется переход к этапу 5.4.
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 10 из 15
6. Приложения
Приложение 1. Структура сайта
Обобщенная структура сайта ООО ПО Альфа-металл.
Альфа-Металл
О Компании
Сертификаты
Персонал
Поставщики
Фотогалерея
Вакансии
Отзывы клиентов
Новости
Новости цветной металлургии
Новости компании
RSS ленты
Подписка
Архив рассылки
Публикации и аналитика
Продукция
Металлопрокат
Специальное предложение
Клиентам
Стандартные договоры
Состояние счёта
Услуги
Контакты
Реквизиты
Схемы проезда
Обратная связь
Справочники
Форум
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 11 из 15
Приложение 2. Семантическое ядро сайта
алюминий
бронза
медь
латунь
Алюминиевый лист
Алюминиевые сплавы
Прокат алюминиевый
Алюминиевые компании
Купить алюминий
Проволока алюминиевая
Пруток алюминиевый
Плита алюминиевая
Алюминиевый профиль
Труба алюминиевая
Сплавы алюминия
Бронзовый пруток
Медная труба
Медная шина
Цена медь
Медная проволока
Лист медный
Латунная проволока
Прутки латунные
Лента медная
лента алюминиевая
Листовая медь
Медный прокат
Листы Латунные
Бронзовый прокат
Медный прокат
Латунный прокат
медная полоса
Шина алюминиевая
Лента алюминиевая
Трубы алюминиевые
Титан
Цинк в чушках
Баббит
Цветной металлопрокат
Цветные металлы
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 12 из 15
Приложение 3. Функциональные блоки сайта
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 13 из 15
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 14 из 15
Приложение 4. Дополнительные особенности функциональных блоков
Распределение блоков по важности
(внутри групп тоже по списку важности, сначала - самые важные.):
Очень важные:
1 Блок “Основное меню”
5 Блок “Основные контакты”
6 Блок “Прайс-листы”
10 Блок “Меню текущего раздела”
19 Блок “Каталог металлопроката”
25 Блок “Сегодня”
Важные:
16 Блоки “Баннер1”, “Баннер2”,”Баннер3”
7 Блок “Заявка менеджеру”
4 Блок “Поиск по сайту”
8 Блок “Сервис счетов”
11 Блок “Анонсы разделов сайта”
13 Блок “Текст страницы”
14 Блок “Комментарии к тексту страницы”
15 Блок “Сервисные функций”
12 Блок “Текущая позиция на сайте”
Не важные:
18 Блок “Последние темы комментарии”
9 Блок “А знаете ли вы что?”
2 Блок “Рассылка”
3 Блок “Регистрация на сайте”
17 Блок “Последние темы форумов”
21 Блок “RSS подписки”
22 Блок “Курсы LME”
23 Блок “Курсы валют”
20 Блок “Вы посетили страницы ”
Совсем не важные
24 Блок “Счетчики”
БЛОКИ С ПЛАВАЮЩИМ РАЗМЕРОМ
10 Блок “Меню текущего раздела”
(количество записей - плавающее от 1 до 100, длина текста в 1-ой записи от 1 до 200 символов например
http://www.alfametal.ru/?id=all_gosts)
19 Блок “Каталог металлопроката”
(количество записей от 1 до 40, длина текста в 1-ой записи от 1 до 20 символов)
25 Блок “Сегодня”
незначительно плавающий размер (1-2-3-4 строки может быть, сейчас на сайте 4 строки (две новости), было 2 (1
новость))
13 Блок “Текст страницы”
Текст может быть от 1 символа до 100 000 (цифра показывает просто большой объем).
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.
стр. 15 из 15
14 Блок “Комментарии к тексту страницы”
Бывает много комментариев (100 например) старые комментарии мы пока не удаляем.
12 Блок “Текущая позиция на сайте”
Длина зависит от уровня вложенности. например вот http://www.alfametal.ru/?id=gl1 (5-ый уровень вложенности)
мы у себя не ставим ограничения на уровень вложенности, но максимальный сейчас - 7, считая корневую
страницу.
От заказчика
___________________/__________________/
М.П.
От Исполнителя
______________________/______________/
М.П.