ТЗ-Диз. Сайт-визитка с бизнес-инструментарием

Техническое задание на разработку дизайна сайта-визитки.

Название проекта: Проект* (* - сокр. вариант).

Тип проекта: Сайт-визитка с бизнес-инструментарием.

Цель проекта: Продажа товаров и услуг компании *, и т.д. и т.п..

Задачи:

• Формирование концепции визуализации проекта.

• Подготовка скетчей, описывающих концепции.

• Разработка макетов дизайна сайта.

• Разработка базовых элементов фирстиля – лого, визитка, бланки.

Общие пожелания по проекту:

• Преобладание функционала над дизайном. Проект должен быть понятен и прост как для технически-продвинутых, так и для далеких от WEB посетителей.

• Блочная информационная структура.

• Современный, минималистичный дизайн. Текстонаполненное информационное пространство сайта.

Конкуренты/ориентиры/«доноры», предоставлены заказчиком:

*

Данные проекты позволяют сформировать общее представление о типаже, структуре/архитектуре проекта.

Ориентиры по дизайну:

• http://www.karcher.de/ru/home.htm - «западный» дизайн, устаревший, подходящая цветовая гамма.

• http://www.tcsbank.ru/ - современный, концептуальный, профессиональный, качественная графика, подходящая цветовая гамма, но перегружен, нечеткая сетка, затрудненное восприятие.

• http://old.euroset.ru/ - аналогично – профессиональные решения, но визуально перегружен.

Контакты проекта:

*

Структура навигационного меню проекта:

• Главная страница

• О компании

o Вакансии

o Отзывы

o Сертификаты

o Новости

o Статьи

o Часто задаваемые вопросы (FAQ)

• Услуги

o Обслуживание

o Ремонт

o Запчасти

o Расходные материалы

• Производители

*

o Прочие

• Прайс-лист

• Контакты

Элементы к разработке:

• Главная страница

• Информационная страница

• Страница-список (типа, «Новости») + субстраница (страница с новостью)

• Страница отзывов, вопросов-ответов

• Техническая страница – «контакты»

• Страница-галерея – «производители» + субстраница.

Формы:

• Стилизованная под проект форма обратной связи, Обратный звонок.

Прочее:

• Логотип.

Скорее всего подшлифовать слитное написание названия компании, попробовать с др. цветами. После – такую же, серую и сокращённую версии.

• Бланк MS Word+Excel.

• Визитка.

Дополнительная информация, особенности, детали проекта:

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

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

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

Анимированный баннер – для ЦКО (центральная контентная область), горизонтальный, концепция:

Идея с баннером в шапке отсюда: *.ru. Детали:

1. По высоте баннер можно уменьшить до разумных пределов, но не желательно, т.к. не поместиться текст.

2. Для этого блока прогер напишет скрипт, в котором мона будет добавлять эффекты смены, задержку, иное. На хосте будет папка с этими баннерами, которые и будут находиться в ротации. Они будут активные и по клику осуществляется переход на соотв. раздел сайта.

3. Для начала мы нарисуем (вырежем из клипартов) баннеры, в которых надо предусмотреть место для текста, ок. 800 знаков (текст пишется)/ баннер:

А) с техникой (типа экскаватора, подъёмника, крана, карьерного самосвала), 4 штуки.

Б) с логотипами фирм-производителей: *, 6 штук.

4. Этот блок-баннера имеет такой же функционал, как и на евросети:

А) Стрелки влево-вправо посередине и под ним, у текста баннера, активные.

Б) Точки на самом баннере, у нас изначально – 10 шт. Они имеют нумерацию, слева направо, мелко, в круге (1-10). Эти точки различаются по цвету: активный – яркий, с фоном; остальные постепенно осветляются по мере удаления от левого края. Т.е. Слева – самый тёмный, справа – самый светлый кружок.

В) Под баннером идёт блок с мини-активными стрелочками влево-вправо.

Г) У стрелок под баннером, по аналогии, идет короткий текст названия баннера. Посередине – текущего баннера.

Общее пожелание – в стиле работ АртЛебедева, т.е: Простота, функциональность, удобство, минимализм, легкость восприятия и интуитивность интерфейса.

Ориентиры из моих проектов:

*

Цвета обязательно из безопасных:

http://web.artlebedev.ru/tools/colors/

Графика на проекте – фотореалистичная, не рисованная, но с максимальной компрессией, с учетом широкого географического охвата магазина.

Макеты для статичной верстки, 1024*768.

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

Сайт будет на двух языках. Переключалка языка с флагами и названиями стран. Фон – прозрачный. Английская версия сайта будет на домене: *.com

Обязательно показываем промежуточные результаты, при этом заботимся об именах файлов: Название_Проекта_страница_версия.jpg, пример: *_Top_03.jpg

В шапке иконки: главная, карта сайта, написать письмо.

Кнопки: Сделать заказ, Обратный звонок.

На главной будут присутствовать блоки следующих разделов:

А. Отзывы Б. Вопросы-ответы (FAQ) Г. Статьи Д. Новости.

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

Показываться будет анонс новости-статьи-отзыва, с заголовком, ссылка на отзыв и раздел.

В целом, попробовать сделать как на http://*.ru/ блок новостей на главной, т.е. - обводка, белый фон, заголовок, анонс, вместо даты - от кого вопрос-отзыв, ссылка на раздел "Все отзывы/ вопросы".

Попробовать добавить к решению дополнительную графику как на http://*.рф/ и выделать заголовок другим шрифтом, крупным и цветом. слева от подобных блочков (продажа квартир).

Используй шрифты и их размеры в аналогичных блоках отсюда: http://*.рф/

По иконкам для отзывов и вопросов-ответов, на их страницах используем решение:

Для вопросов-ответов, мона использовать иконки, типа как тут: http://www.*

Для отзывов: в круге смайлики или унылые рожи в том же стиле.

По отображению отзывов и вопросов-ответов:

*http://*

(касаемо пролистывания страниц - уж точно отсюда, с квадратиками страницы).

А выделение полоской красной ответов - тоже решение хорошее.

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

Для вставки в графику используй отзывы и вопросы с проекта, чтобы сразу понимать, как оно выглядит: http://*

Выпадающем меню, по аналогии с http://*.рф/, выпадать будет, до 3-х уровней вложенности.

Хлебная крошка. Оптимальное решение:

http://*

Главная » Информация » Доставка грузов из разных стран » Грузы из Китая

Дополнительное навигационное меню слева. По аналогии с: http://*

Т.е.: Если зайдём в раздел «Вакансии», то слева увидим стилизованное меню:

• Главная страница

• О компании

o Вакансии

o Отзывы

o Сертификаты

o Новости

o Статьи

o Часто задаваемые вопросы (FAQ)

• Услуги

• Производители

• Прайс-лист

• Контакты

В подвале, обязательные элементы:

Вывод дублирующего главного меню.

Схема проезда (ссылка на страницу).

Поиск по сайту.

Копирайты: © 2009 — 2011, *.ru

Счётчик, Li, в дизе сайта.

Карта сайта + XML (ссылки).

Контактный телефон: +7 (495) *

Почта: info@*.ru

Адрес офиса: *, Россия, Москва, ул. *.

Адрес домена: *.ru

Собрать для проекта порядка 30 уникальных картинок по профилю, которыми будем анимировать текст. С техникой, запчастями крупными. Пример анимации текстов: http://*

Большая просьба:

1. Отвечайте с указанием контактной информации, вопросами по ТЗ, бюджетом, ссылками на портфолио по схожим проектам (строго лебедевский/ близкий).

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

3. Цените Ваше и наше время.

Спасибо.