Здравствуйте. Начну с того, что нужно дизайн для сайта спортивной одежды и упор в дизайне делаем на мобильной версии, конечно я понимаю что делается десктоп, а потом адаптация, но разработка концепта дизайне должна исходить из мобильной версии.
90% покупателей на данном сайте заходят с мобильных устройств, поэтому мы приняли решение сделать мобильный дизайн в виде интерфейса приложения, конечно есть такие блоки как футер, что отличает от приложения но ориентируемся максимально на вид интерфейса.
Стиль 3Д. объем, тени, анимация
Цвета в магазине сейчас: Серый, черный, белый, немного красного. Также нравятся синий, и градиент сине фиолетовый.
у сайта 2 цветовые схемы темная и светлая
Далее представлено ТЗ общего концепта, напишите пожалуйста стоимость и сроки разработки дизайна для моб и десктопа. После выбора исполнителя пришлю максимально детальное ТЗ с каждым нужным словом и значком.
Общие характеристики
Переключатель Light mode и Dark mode
Не перегружать анимацией слишком сильно
Мобильный дизайн
Перелистывание фиксировано по блочно paralax
Главная
Что-то вроде этого скриншота
Слайдер баннеров
далее переключатель:
популярные
мужские
женские
детские
в зависимости от этого показываются ниже слайдер соответствующих товаров
Ниже
блок для перехода на страницы акций
ниже блок новинки что-то вроде этого
Логотипы брендов
Виджет инстаграм постов
Последние новости блога
Топ
Убираем полностью
Футер
Лого
Кнопки:
Про компанию
эмеил
2 телефона
адрес
кнопка проложить маршрут
Скрытые блоки остаются меняется дизайн
В самом низу оставляем копирайт, добавляем место для надписи разработанно «»
значки visa, mastercard, applepay, googlepay, liqpay
Блок меню
Кнопка меню
Лого
Поиск
Корзина
график работы кнопка которая открывает выпадающее меню с информацией
Пн-Пт - 10.00-19.00, Сб-Вс - 10.00-19.00
Меню
Все блоки должны быть визуально разделены, фокус на категории
При нажатии анимировано открывается появляется слева на весь экран
крестик для закрытия
Кнопка позвонить
Открывается раздвигается как выпадающий список номеров для набора
Кнопка вход, кнопка регистрации/личный кабинет(Для авторизованных)
Текст авторизуйтесь для получения скидки
Категории открываются как сейчас последовательно
кнопки категорий с изображениями соответствующих продуктов
Кнопка новостей
Переключатель языка
UA RU
Переключатель цвета темы
Мы в соц сетях
кнопка телеграм
кнопка инсаграм
Категория
breadcrumbs только последний и стрелочка назад к предидущему
Блок фильтрацией бренда по горизонтали можно листать вправо/лево и нажимая будет применяться фильтр этого производителя
Далее идет блок сортировки. Отображается по такому же принципу как бренды
ниже название категории
и дальше список карточек товаров
товар один по горизонту
Дизайн карточки что-то подобное как на скриншоте
надписи все в капслоке
название четкое жирным шрифтом
цена, если скидка то зачеркнутая цена и новая
обувь на белом фоне
сам кроссовок под углом и с тенью
кнопка добавить в корзину
добавить в избранное
Указание на некоторых подлежит дисконту на других доставка 1-3 дня
Блок вопрос ответ скрытый который открывается
Страницы переключаются как кнопкой «показать еще» так
и переключением цифрами
внизу экрана статично находится кнопка фильтров при нажатии на которую открывается весь список фильтров на весь экран
Одежда
Тоже самое только первое фото ровное без наклона и вместо прямоугольника квадрат
Фильтры
Кнопка фильтра находится внизу страницы категории и не исчезает
При нажатии открывается меню фильтров на весь экран
Бренд - логотипы
Цвет - полоски цветные
Размер - квадраты
Цена слайдер
Сортировка
сверху прямоугольники как выбор бренда
Корзина
Надпись «Оформление заказа»
Поле корзины
Надпись «Товар» под ним все товары корзины (фото, название, размер) по строчно
правее от товара надпись количество стрелки вправо и влево поле с количеством кнопка удалить
Справа напротив товара и количества надпись «Стоимость» и ниже сама стоимость
Внизу блока корзины поле Итого: и общая стоимость всех товаров в корзине
Ниже кнопка добавить купон
при нажатии открывается всплывающее окно для ввода купона с кнопкой применить
после применения купона светится надпись Ваш купон применен в поле корзины
Далее идет блок входа
«Уже зарегистрированы?»
Кнопка Войти
Кнопка Войти через Facebok
далее выбор продолжить без регистрации или зарегистрироваться и получить скидку
далее идет поле ФИО
эмеил
телефон обязательное поле
город обязательное поле
отделение либо адрес выпадающий список с подсказками
Далее блок выбора способа доставки
крупные блоки с подписями в виде карточек как карты в приложении приват/моно
Новая почта отделение
Новая почта курьер
Самовывоз из магазина
Далее блок выбора способа оплаты
вот такого формата как на скриншоте
Банковская карта/apple pay/googlepay
Оплаты при получении
Оплата частями
Быстрая рассрочка
Кнопка подтверждения заказа
pop-up окно корзины
Тоже самое только в новом дизайне
Успешный заказ/ошибка
Что-то подобное
Текст Ваш заказ успешно оформлен (Номер заказа)
Кнопка перейти на главную
Для отображения ошибки в заказе изображение красное с крестиком
С Вашим заказом Что-то пошло не так
Кнопка (Связаться с менеджером) -> открывает страницу контактов
Кнопка вернуться на галвную
404
Анимационная 3D картинка
Баскетбольная корзина в ней застрял мяч
Персонаж смотрит на корзину поворачивается смотрит в сторону пользователя моргает глазами
Надпись «404 запрашиваемый URL не подходит к нашему сайту»
кнопка на главную
Карточка товара
Обувь
Название вверху
артикул мелкий под названием
просмотр картинки имитирует прокрутку как на этом скриншоте
Первая картинка отображаются под углом
Меняется при слайде пальцем в любую сторону
При прокрутке исчезает фото и появляется другое, а сам слайдер имитирует прокрутку
Тени для объема
Справа вверху добавить в избранное значок
справа под кроссовком кнопка увеличения
Наличие
Кнопка таблицы размеров
Выбор размера кнопками
Атрибут материалы
рейтинг
Отметка либо подлежит дисконту либо доставка 1-3 дня
Цена/цена зачеркнутая и цена со скидкой
Большая кнопка купить всегда отображающая внизу
Кнопка быстрого заказа
Кнопка купить в кредит
справа внизу отображение возможности скролинга вниз и вверх
Изначально загружается только верхний блок
при прокрутке вниз прокручивается блок paralax
в новом блоке
Описание
Способы доставки
Способы оплаты
все артибуты
отзывы
блоками с возможностью слайда в стороны
Рейтинг
Имя
Текст
Кнопка добавить отзыв
Всплывающее окно на 100 символов
похожие товары прямоугольными блоками в одну линию с возможностью слайда в стороны
недавно просмотренные товары прямоугольными блоками в одну линию с возможностью слайда в стороны
Комплекты
квадратные блоки из 4х товаров в квадрате с возможностью слайда в стороны
Одежда
Тоже самое только первое фото ровное без наклона
Блог
Слайдер блоков новостей что-то такое как на скринах ниже
при нажатии открывается анимацией через ajax
блоки состоят из большой картинки как на примерах
на них название
и ниже хештег
При нажатии на статью плавно убираются объекты и открывается плавно страница статьи
На странице:
сверху изображение
ниже заголовок
далее текст с возможностью использовать иззображения
Гиперссылки в тексте выделяются закругленным цветным, объемным задним планом
Кабинет
Про компанию
карта google
фотографии магазина
адресс
номера телефонов
эмеил
телеграм
виджет инстаграм
Принятие кукис
Провести слайдом вправо принять
Настроить нажатием на кнопку
Поиск
такая же как страница категорий + строка поиска
Дисконт страница
такая же как страница категории
Страница новинок
такая же как страница категории
Страница возврата
Форма заполнения на возврат
Условия опаты
Текстовая страница
Доставка
Текстовая страница
Условия
Текстовая страница
Десктоп тоже самое только нужно расположить фильтры слева на странице открытыми
меню нужно расположить раскрытым
И по на странице категории товары по 3 в ряд
Не пишите комментарии я их не читаю.
