ТЗ на дизайн лендинга по продаже крафтового пива с доставкой.
В дальнейшем дизайнер будет привлекаться для к отрисовки других страниц
Цель – продажа крафтового пива и закусок с возможностью доставки на дом
Характеристики нашего клиента- а) ценит вкус настоящего пива б) имеет хороший уровень достатка в) преимущественно это IT-шники и предприниматели
Прототип сайта доступен по ссылке
В прототипе несколько вкладок – лендинг, лендинг (второй вариант меню), модальные окна, цветовая гамма, бонусная программа
Сайт на которые стоит обратить внимание
С некоторых стран сайт не доступен по этому заходите через браузер Opera
Структура лендинга
1. Шапка (горизонтальная или вертикальная) имеет Логотип CraftBeer.kh.ua (Отрисовывать не нужно, просто написать подобранным шрифтом с актуальным для дизайна цветом), надпись – Магазин крафтового пива в Харькове, номер телефона, иконки репостов в соц сетях, меню страницы
2. Преимущества – бесплатная доставка, работаем 24/7, бонусная программа, гарантия свежести. Каждое преимущество должно иметь графическую иллюстрацию которая в полной мере отразит его смысл. В иллюстрациях НЕ НУЖНО использовать стандартные приевшиеся временем иконки. Необходим креативный подход. Иллюстрации можно подобрать и уникализировать например на этом сайте
или отрисованы с нуля. Но повторюсь – они не должны быть стандартными, приевшиеся временем. Предоставить в формате svg
3. Товары.
а) Фильтр
Цвет (Если ползунок перемещен влево то отображаются только светлые сорта пива, посередине все, вправо темные сорта) отобразить градиент перехода от светлого к темному, пример
Горечь (слева не горькие, посередине все, справа горькие сорта), отобразить с цветовым градиентом пример
Алкоголь
Плотность
Каждый фильтр имеет свой цветовой градиент
б) Сегодня на кранах. По 5 – 6 в ряд. (ежедневно в наличии будет примерно 25 – 30 сортов пива).
На товаре отображено – фото (пиво на черном круглом фоне), название пива, название пивоварни, цена. Ярлыки Скидка, Новинка, Акция...Учитывать что в дальнейшем ярлыков на товаре может быть больше
При наведении на товар пользователь должен видеть что при нажатии товар попадет в корзину
Когда товар в корзине то это должно быть как-то проиллюстрировано (на прототипе товары которые в корзине отмечены зеленой галочкой)
в) Закуски к пиву. 1 – 2 ряда. Все аналогично пиву
г) Кнопка "Полный ассортимент в PDF"
4. Плавающий элемент "Корзина" Плавающий элемент который визуально показывает о том что это корзина. Отобразить два состояния – корзина пустая, корзина с товаром
При использовании Вертикальной шапки, Корзину можно расположить в правом меню
5. Акции и спецпредложения.
Отрисовать вариант(ы) оформления Акций и спецпредложений...Необходимо учитывать то что акций может быть несколько (на прототипе отображена только одна)
6. Кега на праздник. Этот блок примерно то же самое что и Акции, но его можно оформить немного по иному
7. Карта точек самовыноса. Google карта с графическими элементами показывающими адреса на карте.
8. Рассылка. В случае с вертикальной шапкой кнопку "подписаться" можно отобразить в вертикальном меню, а форма будет всплывать в модальном окне
9. Соц сети. Facebook, ВКонтакте, Instagram, Untappd, YouTube с отображением количества подписчиков. При использовании вертикального меню ссылки на соц сети можно отправить в вертикальное меню
10. Стрелочка вверх
11. Модальные окна – а) Корзина б) Спасибо за заказ в) Корзина пустая г) Вам есть 18 лет? д) Подписаться на рассылку
12. Цветовая гамма. Подобрать наиболее подходящие варианты цветовой гаммы. Можно несколько.
На вкладке Цветовая гамма мои пожелания по цветам и их оттенкам
Обязательным является светлый фон (FFFFFF, FEFDFA) и черные карточки товаров (круглые)
13. Шрифт. Подобрать гармонирующий с дизайном шрифт или пару шрифтов (желательно шрифты без засечек) и оптимальные размеры для всех элементов контента – H1, H2, название товара. пивоварня, цена товара, названия кнопок, и прочее.
Важные фактор при выборе шрифта – читабельности и гармоничное сочетание со стилем дизайна. рекомендую ознакомиться со статьей
14. Размеры. Минимальное разрешение экрана монитора на которое должен быть ориентирован дизайн сайта 360px
15. Что точно НЕ НУЖНО делать.
а) Не нужен баннер на первом экране
б) Не нужны тени и 3d эффекты делающие сайт объемным
16) Бонусная программа. Прототип кардинальных изменений не требует. Необходимо просто адаптировать эту страницу под общий дизайн.
ОЧЕНЬ ВАЖНО чтобы исполнитель был перфекционистом и дотошно относился ко всем мелочам.