Добрый вечер!
ПРОШУ ОЗНАКОМИТЬСЯ С ТЗ И ТОЛЬКО ПОТОМ ПИСАТЬ...
Есть потребность в разработке UI и дизайна для интернет магазина на базе Landing Page, адаптивной для десктоп, мобильных телефонов и планшетов. Данный магазин будет продавать наклейки для чемодана, их используют что бы тюнинговать свой чемодан. Лендинг состоит из трех блоков: 1. Сочная картинка по теме (путешествия или уже прокаченные чемоданы (в данном случае надо заменить наклейки на наши). 2. Небольшое описание, что именно мы продаем и зачем (с визуализацией из трех этапов). 3. Сами наклейки, их будет 50 шт. Что еще надо разработать: Окно авторизации через соц сети; Окно по заполнению личных данных для отправки посылки; Окно с благодарностью за покупку и некий свод правил Если мы что-то не учли, буду рад Вашим советам. Буду раз за отличный дизайн сайта и продуманную навигацию. Так же прошу быть готовым к некоторым доработкам во время верстки. Наглеть однозначно не будем, но хочется получить от Вас рабочую модель в обмен на деньги и крутой отзыв!
Технические моменты по дизайну:
Для справки:
1) дизайн будет верстаться на bootstrap4, поэтому можно использовать компоненты от туда.
2) Исходники дизайна должны быть в PSD формате или если используется Sketch, то исходники должны быть выгружены в на сервисную платформу вроде Zeplin.
Дизайн должен быть адаптивный, в 3х версиях.
1) Десктоп
2) Планшет
3) Телефон
Состоит из 3х основных блоков + будет блок информации в футере + плашка меню при прокрутки страницы будет фиксирована в верхней части экрана, это нужно учесть. Каждый блок должен иметь фон с резиновым размером и в центре блок для контента фиксированной ширины:
1) Для десктопа 1024px
2) Для планшета 768px
3) Для десктопа 320px
Меню:
Меню содержит 3 пункта (Главное, Описание, Товары) и кнопка корзины, в корзине есть счетчик товара, он должен быть учтён в дизайне. Меню будет фиксирование к верхней части окна браузера, поэтому возможно у меню будет 2 состояния. Первое когда страница только подрузилась и второй когда человек начинает прокрутку.
Первый блок:
Картинка с тематикой путешествий и заголовком, картинка резиновая на всю ширину. Нужна такая картинка что бы правильно смотрелась и на больших экранах (десктопа) и при маленьких экранах (десктопа) чтобы можно было обрезать по краям без потери смысла и эстетической части.
Второй блок:
В основном текстовая информация о сайте, зачем это нужно. Под текстовым описанием инструкция использования сайта по шагам, по каждому шагу изображение.
Третий блок:
Третий блок слайдер из товаров, для десктопа сетка из 4х3 элементов (для мобильной и планшетной версии вопрос открытый), по краям должны быть стрелки листания слайдера, под слайдером нужно отобразить количество страницы в виде точек (как пример
). Блок товара должен состоять из изображения, под ним 2 пункта название и размеры, ещё ниже кнопка добавить в корзину. Блок товара может иметь несколько состояний:
1) Стандартное (описанное выше)
2) Уже в корзине, где кнопка заказа заменяется на галочку
3) Недоступное (если нет в наличии) должно иметь серые тона, вместо кнопки надпись нет в наличии
Футер
…
Так же по мимо основной страницы есть пошаговая система заказа, та самая которая будет описана в инструкции, каждый шаг это отдельное модальное окно поверх страницы со своим контентом.
1) Шаг 1, модальное окно с открытой корзиной, в ней список товаров, в списке будет только изображение товара и его название. Под списка сумма в 1$ и кнопка заказать.
2) Шаг 2, регистрация. В модальном окне появляются 3 иконки соц. Сетей (контакт, фейсбук, инстаграм)
3) Шаг 3, заполнение данных. В модальном окне появляется форма с полями для заполнения. За формой идёт кнопка Оформить заказ
a. Фамилия Имя,
b. электронный адрес,
c. мобильный телефон,
d. фактический адрес,
e. комментарии
Общий грубый макет при обсуждении выглядел так
. Синим десктоп, красным мобильная версия.