Нужно переработать оформление каталога под существующий дизайн сайт по продаже наклеек на телефон (см в приложении). + также требуется доработать фунцию отображения картинки товара в зависимости от выбранной марки телефон (подробности в тз). Работа срочная нужно сделаьт до 28 числа. Оплата 15.000 руб.
Срочно! Хорошая оплата! Требуется переработать оформления каталога под готовый дизайн.
Автор
Гендель Станислав
, Aug 23 2013 09:15
оформление каталога. оформление корзины оформление тизера товара
Сообщений в теме: 2
#3
Отправлено 23 August 2013 - 09:29
Сайт есть, каталог настроен, нужно теперь пеработать внешний вид каталога под существующий дизайн.
cайт который нужно переработать http://greenlipa.ru/
ПУНКТ 16 В ТЗ ОБЯЗАТЕЛЬНЫЙ!
Тех задание:
Основной шрифт на сайте
Arial, Helvetica, sans-serif; 12 px. если не указано иное.
Заголовок – Arial 12 px bold
Так же можно использовать для различных заголовков - Georgia 14
Расстояние между пунктами строчками по вертикале 12 px
Если возникают вопросы по шрифтам - https://www.tcsbank.ru/ - берите шрифты от сюда. Я их от сюда и брал.
Главная страница
Название сайта:
Сайт будет в зеленых тонах, но есть еще два для разбавления сайта
87c540
ef3342
64cae1 (в разумных пределах используем)
Градиент (9de44b - 87c540 - 7fb643)
По дизайну ничего особого не требуем, но цвет зеленый обязательно присутствует. –
Ширина 1220 px. Стоит ли заранее закладывать размер под меньшие мониторы или это можно сделать потом? Если можно, то оставляем как есть. Если нет, то было бы неплохо, чтобы сайт мог сжиматься до 980 px
Основной фон – белый
Структурные блоки – я не понял, что значит в боксах. Если имеется ввиду границу вокруг каждого блока, то нет – без нее.
1. Верхнее меню
Здесь выводятся основные разделы сайта.
Меню находится непосредственно в шапке (смотри эскиз).
Планируются следующие разделы
Доставка и оплата
Статьи
Помощь
О компании
Пункты находятся один под другим, как текст только с подчеркиванием. Подчеркивание исчезает при наведении
Для примера смотри верхнее меню сайта http://www.vinil-koritsa.ru
Меню находится в шапке
Шрифт - Arial, Helvetica, sans-serif; 14 px
2. Шапка
Логотип (кликабелен, переход на «Главная»). Красивый фон по теме сайта. Вывод информации по корзине. Блок вывода текстовой информации с возможностью редактирования. –
Как разместить логотип смотрите http://www.vinil-koritsa.ru/
Текстовый блок справа – Arial 12px. Расстояние между пунктами строчками по вертикале 12 px. Размеры 120 по высоте, 200 ширине, на 10 отступает от правой границы сайта и сверху
Потом идет верхнее меню. См описание выше. Размеры 120 по высоте, 150 ширине, на 10 отступает от правой границы сайта и сверху
выравнивание по правому краю.
Высота шапки 140px во всю ширину сайта
Как расположить элемент товар и его описание (карточка товара) – смотрите здесьhttp://www.maryjane.ru/catalog/ika1505/59213/category,phones/#iphone-5
Кнопки в файле PSD
Укажите "Еще чуть чуть о наклейке" – это будет текстовое описание
Нижнее меню
Здесь выводятся основные разделы каталога.
Пока планируется.
Полимерные наклейки
Наклейки
Иметь возможность спрятать меню при необходимости.
Расстояние от меню до нижних элементов 10 px
Шрифт - Arial, Helvetica, sans-serif; 14 px
Цвет пункта зеленый, выбранный пункт (при наведении) – светло зеленый, активный – тёмно-зелёный (согласно градиенту)
Вложенность на данном этапе не будет.
Зеленая полоса не тянется через весь экран, а кончается у последнего пункта меню.
Смотри файл PSD
3. Хлебные крошки
Меняются в зависимости от страницы нахождения. Каждый этап кликабелен.
Шрифт - Arial, Helvetica, sans-serif; 9 px
Расположение под нижнем меню. 10 px от левого края, 10 px jn нижнего меню
4. Боковое меню
Будут выводиться основные критерии вывода наклеек
Отображается только в каталоге, сразу под хлебными крошками
Предположительно
Тематика
Цвет
Распродажа
Лидеры продаж
Каждый товар имеет поле для присвоения от одного до всех критериев (тегов).
Т.е. я каждому товару присваиваю тэг. Например, красный, распродажа и при нажатии на цвет.
Т.е. боковое меню по факту отображает теги, которые я присваиваю товарам.
Теги группируются в группы:
Например в группе «Тематика» содержатся теги «море», «горы», «трэш» и т.д.
В группе «цвет» содержатся теги «красный», «синий» и пр.
Распродажа – отдельный тег
Лидеры продаж отдельный тэг
Шрифт группы: стандартный
Шрифт тэга: стандартный+наклокнный
Ширина блока – 300 px
Расположение через 12 px от хлебных крошек
5. Каталог товаров
Посмотрите, как выводится каталог на сайте http://funkit.ru/. Тот способ выбора телефона, что представлен на этом сайта очень удачен. Выбор и поиск по модели.
Выберите модель телефона (любую) и посмотрите как меняется каталог. Нужно реализовать аналогичный функционал.
Изначально выводится 18-24 товаров, с возможностью просмотреть подробнее по кнопке купить и цена. Прокручивание списка осуществляется простым прокручиванием вниз как на сайте http://www.maryjane.ru/
Ширина каталога 900
Размер одного элемента каталога 300x400
Получается, по 3 элемента в строке
Смотри файл PSD
При нажатии на саму картинку открывается подробное описание.
6. Счетчик наклеек
Суммирует каждую произведенную продажу. Иметь возможность изменить счетчик вручную.
Пусть будет просто текстом. Сама цифра жирным выделена и меняется от количества продаж.
7. Блоки Акция 1 и Акция 2
Отображаются на всех страницах, кроме страниц оформления заказа. Иметь возможность менять картинку и ссылку.
Размер 200x250
8. Блок социальных сетей
Отображаются на всех страницах, кроме страниц оформления заказа.
Наша группа ВКонтакте
Ширина 250. Высота 300 или больше при необходимости
9. Слайдер
Отображаются только на главной странице.
Размер 900x300
Иметь возможность менять картинку и ссылку.
11. Галерея фотографий
Отображаются только на главной странице.
Размер 490x250
Здесь будут показываться фотографии наших работ
12. Видео
Отображаются только на главной странице.
Размер 390x250
Здесь будут показываться видеозаписи
Расстояние между блоками Галерея и Видео – 20px
13. Текстовый блок
Блок для вывода текста. Ширина 900 px. Меняется в зависимости от количества текста.
Можно скрыть и можно показать на всех страницах, кроме страниц оформления заказа.
Возможность изменять текст для каждой страницы отдельно
20 px расстояние между блоками по вертикали от нижнего и от верхнего
14. Подвал
Выделяются 3 основных блока: Текстовое поле и ниже счетчик, Текстовое поле, Дублируется верхнее и боковое меню. Фон - зеленый
Размер подвала: во всю ширину сайта. Высота 150 px
1 текстовый блок: 300x130. Отступ слева 10px, сверху и снизу по 10 px
2 текстовый блок: 300x130. Отступ слева 100px, сверху и снизу по 10 px
Блок подменю: 400x130/ Отступ слева 100px, сверху и снизу по 10 px, справа 10 px
15. Сравнение товара
Выполнить сравнение товара. Это значит, что на одной странице выводится до 6 наклеек телефона для сравнения. Фактически это отображаются 6 позиций каталога на одной странице
16. Элемент выбора мобильного телефона
Этот элемент должен работать следующим образом.
Здесь перечень мобильных устройств. Например, Iphone4, iphone5, Galaxy s4
Выбирая телефон – я хочу чтобы менялась картинка у всех товаров.
По умолчанию, выбран Iphone 4. Все картинки на сайте показываются именно с этой моделью. Как здесь http://www.allskins.ru/nakleiki/phones/apple/
Далее человек выбирает другой телефон и все картинки меняются на сайте
Как здесь http://www.allskins.ru/nakleiki/phones/samsung/samsung-galaxy-s3/
Причем меняется только модель телефона, а картинка на ней остается прежней.
В приложении есть макет шаблон 2 моделей.
17. Страница оформления заказа.
На ней нет никакой лишней информации. Смотри приложенные макеты, а также как оформляется заказ на сайтах http://www.maryjane.ru/ , http://www.kidskidki.ru
Только шапка и подвал
18. На каждой странице необходимо иметь возможность интегрировать видео с Youtiube, фотографии.
19. Стандартная задача- ко всем страницам иметь возмодность прописыватьtitle, metakeywords, metadescription. К фотографиям тег alt.
20. Все элементы на сайте должны быть переведены на русский язык.
Вопрос решен
