пример Технического задания по созданию автомобильного сайта

Техническое задание на разработку дизайна и верстки
сайта audi-motors.com.ua
1. Основные сведения и требования
2. Содержимое сайта
3. Главная страница
3.1. Логотип audi
3.2. Название, адрес и телефоны головного офиса автосалона
3.3. Главное меню
3.4. Изображение одной из моделей
3.5. Список анонсов новостей
3.6. Несколько тумбнейлов моделей
3.7. Счетчики посещений
3.8. Логотип и текст копирайта
4. Страница каталога автомобилей (конкретной модели).
4.1. Раздел «взгляд»
4.2. Разделы «фото» и «цвета»
4.3. Разделы «технические характеристики» и «комплектация и цены»
5. Версия для печати
6. Страница новостей
6.1. Страница конкретной новости
7. Остальные страницы («Автосалон», «Сервис», «Кредит»…)
8. Список страниц, которые необходимо сверстать
8.1. Главная
8.2. Каталог автомобилей: «взгляд»
8.3. Каталог автомобилей: «фото» и «цвета»
8.4. Каталог автомобилей: «Технические характеристики» и «Комплектация и цены»
8.5. Версия для печати
8.6. Страница новостей
8.7. Страница отдельной новости
8.8. Остальные страницы
9. Срок выполнения
10. Сведения для размещения на макете:
11. Картинки можно взять:
1. Основные сведения и требования
Сайт предназначен для ознакомления потенциальных клиентов с модельным рядом
AUDI и предоставления информации об автосалоне и условиях покупки автомобиля.
Основное внимание следует уделить удобству навигации по сайту и легкости
восприятия информации.
Сайт должен одинаково отображаться в различных браузерах (IE 6, IE 7, Firefox,
Opera) для различных разрешений экрана и не содержать ошибок XHTML
(http://validator.w3.org).
Будут приведены примеры с сайта http://audi.com.ua/, официального сайта
(http://audi.com/), а также http://hyundai-motors.zp.ua. Структура сайта в целом очень
похожа на http://hyundai-motors.zp.ua.
Дизайн сайта должен соответствовать корпоративным стандартам audi (см.
прилагаемый PDF).
2. Содержимое сайта
Сайт будет состоять из следующих разделов:





Главная страница;
Каталог автомобилей;
Сервис;
ООО «Автоком»;
Новости.
Каждый из разделов может содержать один или несколько подразделов.
3.
Главная страница
На главной странице должны присутствовать следующие элементы:










3.1.
Логотип audi;
Название, адрес и телефоны головного офиса автосалона;
Главное меню (двухуровневое);
Правое меню (картинки, 3 пункта: Продажа, сервис, контакты):
Обработанное изображение одной из моделей audi (как на http://hyundaimotors.zp.ua/); Таких изображений должно быть сделано 5 штук, они будут
динамически сменять друг друга случайным образом. Поверх изображения
должно быть написано название модели и слоган (можно взять с audi.com.ua)
Несколько последних новостей автосалона;
Несколько последних новостей audi;
Несколько тумбнейлов моделей (как на http://hyundai-motors.zp.ua)
Счетчики посещений и кнопки различных каталогов
Логотип audi и текст копирайта.
Логотип audi
Расположение в левом верхнем углу, как на сайте http://audi.com.ua/. Должен
содержать как картинку, так и слоган торговой марки.
3.2.
Название, адрес и телефоны головного офиса автосалона
Эти элементы должны быть текстовыми, чтобы была возможность без проблем их
изменять.
3.3.
Главное меню
Главное меню должно быть текстовым с возможностью изменения. Необходимо
сверстать его таким образом, чтобы была возможность добавить Javascript, который будет
динамически показывать/убирать второй уровень.
Первый уровень должен содержать от 4х до 7 элементов.
Второй уровень – от 2х до 6 элементов.
3.4.
Изображение одной из моделей
Это должна быть картинка размера примерно 500х500 с изображением одной из
моделей audi. В качестве примера – сайт
http://hyundai-motors.zp.ua и
http://www.kmcir.com/defaultE.aspx . Таких изображений должно быть сделано 5 штук,
они будут динамически сменять друг друга случайным образом. Поверх изображения
должно быть написано название модели и слоган (можно взять с audi.com.ua)
3.5.
Список анонсов новостей
На главной странице должно находиться 2 списка анонсов новостей: «новости
автосалона» и «новости audi». Требования к их оформлению одинаковые.
Список должен содержать заголовок, в котором будет указан тип новостей. Затем
должен идти сам список. Каждый его элемент должен иметь дату и текст, который будет
ссылаться на страницу новости. Кроме того, должны быть ссылки на страницу новостей
как одну, так и другую («Все новости автосалона» и «Все новости audi»).
3.6.
Несколько тумбнейлов моделей
Несколько (количество зависит от дизайна) маленьких изображений моделей, которые
ведут на страницу модели. Рядом с каждым тумбнейлом должен размещаться текст
приблизительно следующего содержания: «Купить audi Rio в Запорожье»
3.7.
Счетчики посещений
Должно быть предусмотрено место для нескольких счетчиков посещений
стандартного размера. Верстка не должна «ломаться» в случае блокировки счетчиков
посещений фильтрами и баннерорезками.
3.8.
Логотип и текст копирайта
Внизу должен находиться текст копирайта в текстовом виде. Также должен
присутствовать логотип audi (скорее всего без слогана).
4.
Страница каталога автомобилей (конкретной модели).
Когда посетитель попадает на страницу раздела «Автосалон», он автоматически видит
страницу одной из моделей. Общей страницы для моделей нет.
Основные требования к оформлению страницы модели:
 Список всех моделей предположительно должен отображаться под главным
меню и должен быть расширяемым. Выбранная модель должна быть выделена.
 Меню раздела должно находиться слева и содержать следующие пункты:
«взгляд», «фото», «цвета», «технические характеристики», «комплектация и
цены».
 Где-то должен находиться четко выделенный заголовок, в котором должно
быть указано название подраздела, логотип и название модели.
4.1.
Раздел «взгляд»
В этот раздел посетитель попадает сразу после выбора конкретной модели. Он
содержит короткое описание автомобиля и и его изображение. Верстка должна
предусматривать изображения различных размеров ( 350 +- 100 пикселей по ширине).
Должна быть ссылка на версию для печати. Про версию для печати будет написано
подробнее далее.
4.2.
Разделы «фото» и «цвета»
Здесь находятся тумбнейлы картинок, при наведении на которые – центральная
картинка изменяется на ту, на которой находится указатель мыши. Размер центральной
картинки – от 250 до 400 пикселей по ширине.
Должна быть надпись «Наведите на картинку для её увеличения».
4.3.
Разделы «техические характеристики» и «комплектация и цены»
Должны содержать таблицы с соотвтествующими данными. Таблица должна легко
изменяться и заключаться в тэге <table> чтобы её можно было отредактировать в
стороннем редакторе.
Кроме того, должна присутствовать ссылка на версию для печати.
5.
Версия для печати
Ссылки с некоторых страниц ведут на «версию для печати». После нажатия на ссылку
открывается новое окно, в котором в простом виде представлена вся информация
соответствующего раздела, таким образом, чтоб при нажатии кнопки CTRL+P или
ссылки «Распечатать», которая также должна быть на этой странице, произошла печать
находящегося текста. Весь текст должен красиво разместиться на листе бумаги и при
необходимости перенестись на следующий лист.
Также на странице версии для печати вверху должно находиться название раздела и
название модели, тумбнейл модели, а в самом низу должны быть реквизиты автосалона
(название, адрес, телефон).
Цвета должны быть такими, чтобы при печати на черно-белом принтере, текст был
разборчивым.
6.
Страница новостей
На сайте будет находиться 2 одинаковых по структуре раздела новостей: «Новости
автосалона» и «Новости audi». На них будет представлен список добавленных новостей с
постраничной разбивкой.
Такая страница должна содержать:
 Заголовок, в котором указано название данного раздела новостей;
 Список новостей (каждый из элементов которого должен включать в себя дату
добавления новости, ссылку на версию для печати, заголовок новости, текст
анонса новости, ссылку на страницу этой новости с надписью «Подробнее».
Ссылка может быть картинкой).
 Сверху и снизу должен быть перечень «1, 2, 3, 4…» страниц, на которые
разбиты все новости. Номер текущей страницы должен быть выделен.
6.1.
Страница конкретной новости
Такая страница должна содержать заголовок раздела новостей, заголовок новости, текст
новости, дату добавления, ссылку на версию для печати, ссылку возврата к списку
новостей.
Должна быть возможность добавления изображений внутри текста новости.
7.
Остальные страницы («Автосалон», «Сервис», «Кредит»…)
Остальные страницы должны представлять собой контейнер для текста и
изображений, который будет динамически изменяться из админ-панели. Тексту, который
будет добавлен на эту страницу, автоматически должны назначаться необходимые стили.
8.
Список страниц, которые необходимо сверстать
Здесь приведен список и приблизительный внешний вид различных по структуре
страниц, которые необходимо нарисовать и сверстать. Расположение элементов может
быть изменено на усмотрение дизайнера после согласования с заказчиком.
8.1. Главная
Приблизительный внешний вид:
Адреса и телефоны
Логотип
Главное меню (первый уровень)
Главное меню (второй уровень)
Изображение одной из
моделей
Тумбнейлы нескольких
моделей
Правое меню
Новости 1
Счетчики посещений
Copyright
8.2. Каталог автомобилей: «взгляд»
Приблизительный внешний вид:
Адреса и телефоны
Логотип
Главное меню (первый уровень)
Главное меню (второй уровень)
Список
разделов
каталога
автомобилей
Список всех моделей: Rio :: Magentis :: Opirus :: Sorento ....
«Взгляд» : Kia magentis +Ссылка на версию для печати
Изображение
модели
Счетчики посещений
Copyright
Текст
Новости 2
8.3. Каталог автомобилей: «фото» и «цвета»
Приблизительный внешний вид:
Адреса и телефоны
Логотип
Главное меню (первый уровень)
Главное меню (второй уровень)
Список
разделов
каталога
автомобилей
Список всех моделей: Rio :: Magentis :: Opirus :: Sorento ....
«Фото» : Kia magentis
Главная картинка,
которая изменяется
Список картинок, при наведении на которые
изменяется главная
Счетчики посещений
Copyright
8.4. Каталог автомобилей: «Технические характеристики» и «Комплектация и
цены»
Приблизительный внешний вид:
Адреса и телефоны
Логотип
Главное меню (первый уровень)
Главное меню (второй уровень)
Список
разделов
каталога
автомобилей
Список всех моделей: Rio :: Magentis :: Opirus :: Sorento ....
«Технические характеристики» : Kia magentis +Ссылка на версию для печати
Таблица с данными
Счетчики посещений
Copyright
8.5. Версия для печати
Приблизительный внешний вид:
Заголовок раздела и модели, для которых делается версия для печати
Текст и картинки, которые надо напечатать
Реквизиты автосалона
8.6. Страница новостей
Приблизительный внешний вид:
Адреса и телефоны
Логотип
Главное меню (первый уровень)
Главное меню (второй уровень)
Заголовок раздела
- 1 – 2 -3 – 4 – 5 – 6 …
Список новостей
- 1 – 2 -3 – 4 – 5 – 6 …
Счетчики посещений
Copyright
8.7. Страница отдельной новости
Приблизительный внешний вид:
Изображен
ие модели
Адреса и телефоны
Логотип
Главное меню (первый уровень)
Главное меню (второй уровень)
Заголовок раздела
Заголовок новости
Ссылка на версию для печати
Текст новости (с картинками)
Назад к списку новостей
Счетчики посещений
Copyright
8.8. Остальные страницы
Приблизительный внешний вид:
Адреса и телефоны
Логотип
Главное меню (первый уровень)
Главное меню (второй уровень)
Заголовок раздела
Текст с картинками. Должен быть предусмотрен
нормальный вид всех возможных элементов: таблиц,
списков, ссылок …
Счетчики посещений
Copyright
9. Срок выполнения
Срок выполнения дизайна: 3 дня с момента выяснения всех деталей. Срок выполнения
верстки – 4 дня с момента выполнения всех деталей и внесения правок в дизайн.
10. Сведения для размещения на макете:
Название фирмы: ООО «Автоком»
Адрес и телефон: ул. Победы 131а, р-н ДК «Титан». Тел.: 222-30-30 (40)
11. Картинки можно взять:
http://audimedia.com
http://netcarshow.com/audi