Была организована встреча с Заказчиком. Мы определили ЦА (целевую аудиторию), определили цели и задачи проекта , обсудили концепцию сайта, получили конкретные пожелания по части визуального оформления. Одно из пожеланий - использовать анимацию. Собрали материалы: тексты, фотографии продуктов. Все. Можно приступать к проектированию.

Целевая аудитория: крупные федеральные розничные сети, небольшие городские магазины, торговые точки, розничные покупатели.

1. Разработка структуры и прототипов.

На основании предоставленных материалов и пожеланий мы разработали структуру сайта и подготовили прототип главной страницы.

 

Прототип списка товаров в каталоге:

2. Разработка дизайна

Основное внимание требовалось уделить первому блоку. Нами был предложен такой вариант:

Презентуем заказчику. По итогам презентации, решаем менять картинку в первом блоке на что-то более природное и натуральное.

Другой вариант главной страницы:

Презентуем заказчику. Останавливаемся на втором варианте.

Рисуем внутренние страницы. Верстаем.

3. Верстка анимации

Пишем небольшой сценарий анимации для первого блока. Утверждаем. Далее верстаем плавное появление логотипа и картинки. Презентуем заказчику. Вносим мелкие правки.

Далее добавляем параллакс эффект к первому блоку и к блоку "Рецепты".

На странице каталога реализовали динамическую подгрузку контента (без перезагрузки страницы) при переходе в подкатегории: "Сыр", "Масло" по технологии Pjax. Получилось на подобии умного фильтра с ЧПУ url-ми. 

Что получилось в итоге, можно посмотреть на сайте (см. ссылку на проект).

4. Результат:

Разработан современный промо-сайт компании «Костромские сыроварни». На сайте представлен весь ассортимент продукции торговой марки «Костромские сыроварни» и адреса расположения торговых точек, представительств в различных регионах России.

5. Благодарственное письмо

 

Перейти на сайт