Дизайн интернет-магазина

Возможно более читабельное ТЗ в гугл-документах https://docs.google.com/document/d/1Orp0DW8sx-cva2...

Суть: нужен дизайн интернет-магазина дверей

Технические требования к макету Стандартные:

• http://logvi.ru/money/pravila-xoroshego-tona-v-fot...


Нестандартные:



• Использовать браузер Сафари в макете


• В формах - названия полей внутри поля


• Соблюдение вертикалей и отступов, сетки


• Сразу рисовать с учётом больших элементов дизайна (длинная пагинация, много товаров в корзине, длинный пункт меню, длинное название товара...)


• По дизайну можно за 2 секунды понять, чем занимается компания


• В psd не используется прозрачность (все слои 100% прозрачности)


• Все цвета являются полноцветными (серый — это серый, а не 50% черного)


• Слои сгруппированы в соответствующие группы (Шапка, баннер, логотип, телефон, форма, лайтбокс, слайдер и т.д.)


• Все используемые нестандартные шрифты приложены в отдельную папку


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


• Все всплывающие и модальные окна должны быть отрисованы


• У всех динамических элементов есть hover и press версии.


• Ссылки должны быть подчеркнуты полупрозрачной линией, потому что верстальщик будет их делать с помощью border-bottom, а не underline (пример таких ссылок: http://www.artlebedev.ru/). В фотошопе для простоты можно сделать два одинаковых текстовых слоя, нижний подчеркнутый и 50% прозрачности, а верхний без подчеркивания.


• Кнопки: неактивная версия, версия при наведении, версия при нажатии, заблокированная (например, кнопка не доступна до тех пор, пока пользователь не введет все обязательные данные в форме).


• Для каждой различной ссылки: неактивная версия, версия при наведении.


• Что может быть hover: кнопки, ссылки, ячейки таблицы, логотипы, поля форм, чекбоксы, радиобаттоны, ярлычки, иконки, элементы фильтратора, выпадающие списки, элементы навигации (в меню, слайдере и т.п.).


• У всех форм есть неактивная версия, активная (когда там находится курсор) и ошибочное состояние (когда введеные пользователем данные не верные)


• Есть отдельный файл Desc.psd, где вынесены все динамические элементы или состояния элементов интерфейса (hover, active). Это сделано для удобства верстальщика.


• При необходимости создать файл txt с описанием (например, описать анимацию или откуда и куда вылетают элементы)




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

1. Главная
   
   
   1. - неавторизованный пользователь
   
   
   2. - авторизованный (ссылка "выход")
   
   
   3. - с пустой корзиной
   
   
   4. - с товарами в корзине
   
   
   
   

Описание блоков главной страницы:

1. Шапка:

• Название + слоган (позже заменится на логотип)


• Личный кабинет (У неавторизовавшегося там ссылки «Войти» и «Регистрация», у авторизовавшегося «Личный кабинет: Имя Отчество» + «Выход»)


• Мои заказы (Это корзина + проекты. Если что-то есть, то появляется ссылка «Оформить заказ»)


• Телефон (пока любой с кодом города)


• Кнопка "заказать звонок" + форма заказа


• Ссылка "рассчитать стоимость двери"

1. Верхнее меню (никаких выпадающих подпунктов!)


2. Слайдер с акциями или другой информацией


3. Контент:

• Заголовок h1


• Небольшой абзац текста

Новинки магазина (замки, фурнитура ). Матрица 3*3 шт.

• Готовые проекты (будет переход в калькулятор с предустановленными вариантами). Слайдер с 3-мя проектами в 1 строку с прокруткой по горизонтали.


• Блок с анонсами новостей. Три новости в 1 строчку (заголовок-ссылка + дата + анонс)


• Текстовый блок «Наши гарантии», аля лендинг


• Текстовый блок «Как мы работаем», аля лендинг


• Текстовый блок Акции», аля лендинг


• Призыв + кнопки «Перейти в каталог» и «Калькулятор»

1. Футер:

• Все разделы сайта


• Копирайт


• Контакты


• Ссылка “Создание сайта — дизайн-студия «Aston»”

По дизайну стоит ориентироваться на это:
http://www.okonti.ru/
http://unionokna.ru/

По контенту на это:
http://taifun.ru/

1. Список новостей (например http://садылюбви.рф/content/news/)
   


2. Новость http://садылюбви.рф/content/news/detail.php?ID=80
   


3. Контакты


4. Регистрация (http://dimsi.ru/registration/)


5. Авторизация


6. Корзина http://aquariumabc.com/personal/cart/
   


7. Мои заказы (можно зарегистрироваться на http://aquariumabc.com/ и посмотреть страницы Заказы, Настройки и Кабинет там в личном кабинете)


8. Мои настройки


9. Мой кабинет
   
   
   1. Расчёты
   
   
   2. Профиль
   
   
   
   


10. Каталог http://aquariumabc.com/catalog/694/
    


11. Подкаталог


12. Страница товара http://aquariumabc.com/catalog/694/25932/
    


13. Текстовая страница


14. Фотогалерея


15. Карта сайта http://azariny.ru/sitemap/
    


16. Калькулятор стоимости двери (прототип этого раздела ещё разрабатывается, но будет практически идентичен http://www.okonti.ru/service/calculator/sizes/)


17. Рассылки http://bit.ly/1j4RBCU
    


18. Страница 404


19. Поиск


20. Результаты поиска

Структура сайта: a.О компании
i.Производство (текст)
ii.Гарантия (текст)
iii.Акции (инфоблок, текст)
iv.Вакансии (текст)
v.Кредит (текст)
vi.Установка и доставка (текст)
vii.Вызов мастера (текст, обратный звонок)
viii.Новости (инфоблок, текст)
b. Личный кабинет
i.Расчёты (список сохранённых расчётов в виде ссылок)
1. Отправить расчёт (отправка администратору сайта)
2. Отредактировать расчёт (переход к калькулятору)
3. Удалить расчёт
ii.Данные профиля
c.Каталог продукции
i.Готовые двери
1. Входные
a.Эконом класс
b. МДФ с плёнкой ПВХ
c.МДФ покрытая шпоном
d. Массив дуба
e. С элементами ковки
f.Для ТСЖ
g.Двухстворчатые
2. Межкомнатные
a.Модель 1
b. Модель 2
c.Модель 3
d. Модель 4
3. Противопожарные (Каталог http://adkspb.ru/catalog/3/27.html)

ii.Кованые изделия
1. Козырьки
2. Решетки
3. Перила
4. Ворота
iii.Решетки, ворота, заборы
1. Решетки
2. Раздвижные решётки
3. Газонные ограждения
iv.Фурнитура
1. Замки
2. Петли
3. Наличники
4. Ручки
5. Глазки
d. Услуги
i.Установка дверей
ii.Доставка
iii.Такелаж
e. Полезные статьи
f. Фотогалерея
g.Контакты
i.Обратный звонок
ii.Яндекс.Карта
h. Карта сайта
i.Кнопки шаринга в социальные сети
Результат Промежуточная демонстрация - файлы в формате jpg
Результат работ - макеты в формате psd

Процесс работы Демонстрация наработок - через 12 часов с момента начала работы. Если результатов нет, то отдаём заказ другому дизайнеру, у нас тоже дедлайны. Далее - демонстрация результатов каждые 6 часов. Так что пропадать не надо. Естественно, время на переговоры/согласования сюда не входит. Если видим, что работа не стоит на месте - лютовать не будем, главное, чтобы процесс шёл.

Оплата Можете сделать дешевле других? Предлагайте.
Никакой предоплаты, с этим мы уже наигрались вдоволь. Есть дизайн - получи деньги. Есть ещё дизайн - получи ещё денег.
Оплатить можем наличными в Санкт-Петербурге, переводом на карту банка Авангард или Санкт-Петербург, на Яндекс.Деньги, на WebMoney. Комиссия за наш счёт.