Кастомизация дизайна шаблона магазина

Потрібно виконати повний редизайн чинного інтернет-магазину ROBO: https://robo.org.ua/ Сайт уже працює, товари та основний функціонал є. Потрібно не створювати новий сайт із нуля, а повністю переробити його дизайн, структуру сторінок і користувацький шлях до покупки. Основна мета редизайну — зробити сайт сучасним, зручним, зрозумілим і максимально продаючим. Основний трафік буде надходити з реклами Meta — Facebook та Instagram. Більшість покупців переглядають сайт зі смартфонів, тому особливу увагу потрібно приділити мобільній версії. Людина, яка вперше переходить на сайт із реклами, повинна одразу зрозуміти: — що це за товар; — які його основні переваги; — скільки він коштує; — що входить у комплект; — як здійснюється доставка та оплата; — чи можна довіряти магазину; — як швидко оформити замовлення. Потрібно проаналізувати чинний сайт, знайти основні проблеми в дизайні, структурі та зручності використання, а після цього запропонувати новий UI/UX-дизайн у Figma. Потрібно розробити повну комп’ютерну та мобільну версії сайту. Що потрібно розробити: Шапка сайту. Потрібно повністю переробити шапку сайту для комп’ютерної та мобільної версій. У шапці мають бути: — логотип магазину; — кнопка «Каталог товарів»; — меню основних категорій; — пошук по сайту; — номер телефону; — кнопка швидкого зв’язку; — графік роботи; — обране; — особистий кабінет, якщо він використовується; — кошик із кількістю товарів; — мобільне бургер-меню; — інформація про доставку, оплату або актуальну акцію. Шапка повинна бути компактною, зрозумілою та не займати забагато місця. Під час прокручування сторінки потрібно передбачити закріплену скорочену шапку з основними елементами: логотипом, каталогом, пошуком і кошиком. Мобільне меню. Потрібно окремо розробити зручне мобільне меню, у якому будуть: — каталог товарів; — категорії; — пошук; — контакти; — доставка й оплата; — гарантія та повернення; — відгуки; — обране; — кошик; — кнопки зв’язку через телефон або месенджери. Головна сторінка. На головній сторінці потрібно розробити: — головний банер із чіткою пропозицією; — акційні товари; — популярні категорії; — хіти продажу; — новинки; — товари зі знижками; — переваги магазину; — інформацію про доставку та оплату; — відгуки покупців; — блок довіри до магазину; — рекомендовані товари; — відповіді на популярні запитання; — підписку або заклик перейти до каталогу; — нижню частину сайту. Головна сторінка не повинна бути перевантаженою. Її основне завдання — швидко направити користувача до потрібного товару або категорії. Сторінка категорії товарів. Потрібно розробити: — назву категорії; — короткий опис; — підкатегорії; — фільтри; — сортування; — картки товарів; — позначки «Хіт», «Новинка», «Знижка»; — актуальну та стару ціну; — рейтинг; — кількість відгуків; — кнопку додавання до кошика; — можливість додавання в обране; — пагінацію або кнопку «Показати ще»; — мобільну версію фільтрів. Картки товарів мають бути сучасними, зрозумілими та не перевантаженими зайвою інформацією. Сторінка товару. Сторінка товару є найважливішою частиною сайту. Вона повинна поєднувати функціонал інтернет-магазину та структуру продаючого лендингу. Потрібно розробити правильну послідовність блоків, яка допоможе користувачу швидко прийняти рішення про покупку. У першому екрані сторінки товару повинні бути: — назва товару; — артикул; — рейтинг; — кількість відгуків; — галерея фотографій; — відео товару; — актуальна ціна; — стара ціна; — розмір знижки; — інформація про наявність; — варіанти кольору або комплектації; — кількість товарів; — основна кнопка «Купити»; — кнопка швидкого замовлення; — короткі основні переваги; — інформація про доставку; — інформація про оплату; — гарантія та повернення; — інформація про комплект. Після першого екрана потрібно розмістити: — короткий блок основних переваг; — демонстрацію товару в реальному використанні; — проблему, яку вирішує товар; — детальний опис; — фотографії та відео; — основні характеристики; — що входить у комплект; — інструкцію з використання; — порівняння з іншими товарами або звичайними аналогами; — кому підійде товар; — блок доставки та оплати; — гарантію й умови повернення; — відгуки покупців; — відгуки з фото та відео; — запитання та відповіді; — рекомендовані товари; — супутні товари; — товари, які часто купують разом; — повторний заклик оформити замовлення. У мобільній версії потрібно зробити закріплену нижню панель із ціною та кнопкою «Купити». Також необхідно передбачити зручне перемикання між розділами: — опис; — характеристики; — відгуки; — запитання; — доставка й оплата. Блок доставки та оплати. Потрібно розробити окремий зрозумілий блок, у якому буде зазначено: — доставка Новою поштою; — орієнтовний термін доставки; — можливість оплати під час отримання; — онлайн-оплата; — оплата на рахунок; — вартість доставки; — умови безкоштовної доставки, якщо вона діє; — обмін і повернення; — гарантія. Ця інформація має бути видимою ще біля кнопки «Купити», а також дублюватися нижче на сторінці. Відгуки. Потрібно розробити сучасний блок відгуків: — загальний рейтинг товару; — кількість відгуків; — розподіл оцінок; — ім’я покупця; — дата відгуку; — позначка «Підтверджена покупка»; — текст відгуку; — фотографії; — відео; — оцінка товару; — відповідь магазину; — кнопка «Залишити відгук»; — сортування відгуків. Відгуки повинні викликати довіру та бути зручними для перегляду зі смартфона. Характеристики товару. Потрібно створити окремий зрозумілий блок характеристик. Характеристики мають відображатися у вигляді структурованого списку або таблиці, яка добре виглядатиме на комп’ютері та смартфоні. Запитання та відповіді. Потрібно розробити блок, у якому покупці зможуть: — переглядати популярні запитання; — відкривати та закривати відповіді; — поставити власне запитання; — побачити відповідь магазину; — переглянути дату відповіді. Кошик. Потрібно розробити повну та мініверсію кошика. У кошику повинні бути: — фото товару; — назва; — вибрана комплектація або колір; — ціна; — стара ціна; — кількість; — можливість видалити товар; — промокод; — сума замовлення; — вартість доставки або інформація про неї; — рекомендовані товари; — кнопка «Оформити замовлення»; — кнопка «Продовжити покупки». Оформлення замовлення. Потрібно зробити максимально просте оформлення замовлення без зайвих полів. Основні поля: — ім’я; — номер телефону; — населений пункт; — відділення або поштомат Нової пошти; — спосіб доставки; — спосіб оплати; — коментар до замовлення; — промокод; — склад замовлення; — підсумкова сума; — кнопка підтвердження замовлення. Також потрібно передбачити повідомлення про успішне оформлення замовлення. Пошук по сайту. Потрібно розробити: — рядок пошуку; — підказки під час введення; — популярні пошукові запити; — товари в результатах; — категорії в результатах; — сторінку результатів пошуку; — повідомлення, якщо нічого не знайдено. Обране. Потрібно розробити сторінку обраних товарів із можливістю: — переглядати збережені товари; — видаляти товари; — додавати товари до кошика; — продовжувати покупки. Інформаційні сторінки. Потрібно розробити дизайн сторінок: — доставка й оплата; — гарантія; — обмін і повернення; — про магазин; — контакти; — політика конфіденційності; — публічна оферта; — популярні запитання. Сторінка контактів. Потрібно передбачити: — номер телефону; — електронну пошту; — графік роботи; — месенджери; — соціальні мережі; — форму зворотного зв’язку; — юридичну інформацію про магазин. Нижня частина сайту. Потрібно повністю розробити футер сайту. У футері повинні бути: — логотип; — коротка інформація про магазин; — каталог; — популярні категорії; — інформація для покупців; — доставка й оплата; — обмін і повернення; — контакти; — графік роботи; — соціальні мережі; — способи оплати; — юридична інформація; — політика конфіденційності; — публічна оферта. Системні сторінки та повідомлення. Необхідно передбачити дизайн таких станів: — товар додано до кошика; — товар додано до обраного; — помилка заповнення форми; — товару немає в наявності; — порожній кошик; — порожнє обране; — нічого не знайдено; — сторінка 404; — успішне оформлення замовлення; — помилка оплати; — завантаження сторінки; — повідомлення про використання файлів cookie. Дизайн-система. Потрібно створити єдину дизайн-систему, яка включатиме: — кольори; — шрифти; — заголовки; — кнопки; — поля введення; — картки товарів; — іконки; — відступи; — модальні вікна; — повідомлення; — активні та неактивні стани; — стани наведення; — мобільні компоненти. Усі елементи мають бути оформлені як компоненти у Figma. Цільова аудиторія: Покупці з України, які шукають товари для дому, авто, дітей, електроніку, подарунки та корисні гаджети. Значна частина користувачів переходить на сайт із реклами Facebook та Instagram. Переважно вони користуються смартфонами та можуть уперше бачити бренд ROBO. Тому сайт повинен: — швидко завантажуватися; — викликати довіру; — зрозуміло показувати переваги товару; — не перевантажувати користувача; — спрощувати оформлення замовлення; — добре виглядати на різних розмірах екрана; — мотивувати користувача купити товар. Вимоги до дизайнера: — досвід у дизайні інтернет-магазинів; — досвід створення продаючих сторінок товарів; — розуміння UI/UX; — розуміння мобільної адаптації; — уміння працювати у Figma; — розуміння поведінки користувачів, які переходять із реклами; — портфоліо зі схожими роботами; — готовність аргументувати запропоновані рішення; — можливість внести правки після презентації дизайну. Очікуваний результат: — повний дизайн інтернет-магазину у Figma; — комп’ютерна версія; — мобільна версія; — дизайн усіх основних сторінок; — дизайн основних системних станів; — компоненти та дизайн-система; — клікабельний прототип основних сторінок; — зрозуміла структура файлу; — підготовка макетів для передачі програмісту; — зазначені розміри, відступи, шрифти, кольори та стани елементів. Програмування та верстка на цьому етапі не потрібні. Потрібен саме повний UI/UX-дизайн у Figma. У відгуку на проєкт

1. Заголовок Моушн-дизайнер: Lottie-анимация анализа лица для лендинга (веб, векторная)2. Что делаем Нужна одна векторная анимация для хиро-секции лендинг-страницы веб-продукта (AI-анализ лица, игривый формат). Сюжет: стилизованное wireframe-лицо (линейное, полупрозрачное, нарисованное художником — не фото). На него по очереди «садятся» landmark-точки (глаза, нос, линия челюсти, брови), между ними строится легкая сетка. В финале из лица мягко «вылетают» 2–3 небольшие score-карточки (например, Curiosity 88 / 100). Поведение: построение при загрузке (сетка строится, карточки появляются, ~3–4 с) → далее тихий бесшовный цикл (~8–12 с): сетка едва «дышит», карточки мягко пульсируют. Без резких движений.3. Стиль Эстетика: editorial, clinical, grey — спокойное светлое «студийное воздух», тонкие линии, мягкий свет изнутри. Референс тона — QOVES face-analysis (премиальный «медико-аналитический отчет» × журнальный разворот). Важно — тон: это игривый vibe-анализ, а НЕ медицинское сканирование и НЕ распознавание лица. Никаких IDENTIFIED-рамок, прицелов-перекрестий, красного, «безопасного» HUD, кибер-неона. Точки и выноски должны ощущаться интересно и легко, а не как биометрический надзор. Палитра и типографика — строго по извлечению в конце этого документа (соблюдение палитры — условие принятия). Референсы, которые добавляю: QOVES-эстетика + 2–3 примера Lottie в серо-clinical / wireframe-стиле + скриншот хиро, куда анимация станет (рядом есть стеклянные карточки — анимация должна с ними жить, а не спорить).4. Технические требования Формат: Lottie JSON, прозрачный фон. Размер файла: ≤ 150 КБ (идеал ~80–100 КБ). 30 fps. Без растровых изображений внутри — все вектор (никаких встроенных PNG/JPG). Минимум масок и больших градиентов; без эффектов, которые Lottie не рендерит нативно (сложные blur, некоторые merge-paths). Обязательно тестировать экспорт именно в web-плеере (lottie-web / LottieFiles preview), а не только в After Effects. Мобильные: корректно проигрывается и читается на реальных iOS Safari и Android Chrome; на узкой колонке лицо/сетка не обрезаются, карточки не вылезают за пределы; плавно на бюджетном Android. Артборд, который чисто масштабируется в диапазоне ~360–700px ширины. Поставляется с reduced-motion кадром — статическое финальное состояние (построенная сетка + карточки) для prefers-reduced-motion.5. Deliverables + права Исполнитель сдает: Lottie JSON для лендинга. Reduced-motion статический кадр (SVG или PNG). Редактируемый исходник — файл проекта After Effects (.aep) со всеми слоями и подписанными группами. (Опционально / бонус) «тихая» light-версия для login-страницы из тех же слоев — если укладываетесь в бюджет; иначе выносится в следующий этап. Права: полная передача исключительных имущественных прав + неограниченное коммерческое использование. Исполнитель подтверждает, что все элементы оригинальные или лицензированные под коммерцию. Шрифты в карточках — бесплатные Google Fonts (Hanken Grotesk, JetBrains Mono), никаких платных-шрифтовых ловушек.6. Процесс Стилфрейм в первую добу — один статический стоп-кадр будущей анимации на утверждение стиля. Я подтверждаю того же дня. После моего «ок» — анимация. 2 раунда правок включены в цену. Оплата по этапам через Safe-соглашение: часть после утверждения стилфрейма, остальное — после принятия финальных файлов. Важен быстрый старт: стилфрейм в первую добу, так что откликайтесь только если реально свободны сейчас.7. Бюджет и срок Бюджет: $150 за полный объем с исходниками и правами (фиксировано). Срок: 4 дня от старта.8. Что отправить в отклике 1–2 работы именно в Lottie / motion (не только статические иллюстрации). Краткий комментарий: как вы видите этот стиль под наш референс. Подтверждение, что можете стартовать сразу и дать стилфрейм в первую добу. Отклики без примеров Lottie и без комментария по стилю не рассматриваю.Извлечение-палитра (отдать выбранному исполнителю) Это все, что нужно художнику по цвету/типографике. Полный CSS/репозиторий не передаю. Фон: нейтральный светлый #f2f5f7. Линии сетки, контур лица, текст: серые «чернильные» тона —#1f2730 (основной), #56606c (вторичный), #8a93a0 (светлее). Единый акцент — только на узлах-точках landmark: серо-сланцевый #505c65(глубокий вариант #3b4651). Больше НИКДЕ акцент не использовать. Запрещено: любые другие цвета, насыщенные градиенты, радуги, неон, красное, тяжелые тени. Тени — только мягкие, низкой прозрачности, с холодным оттенком. Score-карточки (trait-reveal): полупрозрачные «стеклянные» плитки (frosted, легкий blur, тонкий светлый кант); большая цифра — тонкая вага 300, элегантная, не жирная; подпись-метка — маленький моно-шрифт, КАПСОМ, разреженный трекинг. Шрифты: Hanken Grotesk — названия трейтов, подписи (вес 300–500). JetBrains Mono — маленькие метки, индексы, цифровые подписи (например, / 100). Тон одним предложением: спокойное почти белое студийное воздух, освещенное изнутри;тонкие линии; один серо-сланцевый акцент касается только узлов сетки.

Добрый день, коллеги. В связи с проблемами у дизайнера, нужно было приступить еще вчера к доработке дизайна страниц. Прикрепляю макет в Figma страниц, которые готовы - Figma Готово сейчас: Главная, Каталог, Карточка товара. Что нужно дорисовать: Личный кабинет, Корзина, Оформление заказа, Качество и контроль, Сертификаты, Блог и внутренняя страница блога. Прошу тех, кто реально изучил: макеты, которые уже готовы, ТЗ и прототипы — написать контрольный ответ с ТЗ. ТЗ - Тыць Прототипы - Тыць

Необходимо профессионально оформить интернет-магазин на платформе Хорошоп, сделать его современным, удобным и визуально привлекательным. Что требуется: Оформить главную страницу в едином фирменном стиле. Настроить красивые баннеры, категории и блоки с товарами. Улучшить визуальное оформление карточек товаров и категорий. Сделать удобную навигацию и структуру главной страницы. Настроить привлекательное отображение акций, новинок, популярных товаров и брендов. Оптимизировать отображение сайта на мобильных устройствах. При необходимости предложить улучшения по UX/UI. Использовать возможности платформы Хорошоп без ухудшения скорости загрузки сайта. Будет преимуществом: Опыт оформления магазинов на платформе Хорошоп. Наличие портфолио с реализованными проектами. Понимание современных принципов UX/UI и e-commerce. Знание SEO-требований при оформлении сайта. При отклике, пожалуйста, пришлите: ссылки на оформленные вами магазины на Хорошоп; краткое описание выполненных работ; стоимость и сроки выполнения проекта.

Нужен верстальщик/веб-дизайнер для визуального обновления сайта. Функционал менять не нужно — только внешний вид (HTML/CSS, картинки). Что есть сейчас: Рабочий игровой сайт (панель управления приватным сервером Mu Online) на PHP, движок самописный, без фреймворков. Шаблоны — обычные HTML-файлы с плейсхолдерами вида$TITLE$,$USER_USER$ и т.п., которые движок сам подставляет данными при загрузке. Стили — обычный CSS, скрипты — jQuery, без сборщиков (Webpack/Vite) и препроцессоров (SASS/LESS). Сайт состоит из 2 функциональных разделов:гостевая часть (для незалогиненных — описание сервера, новости, топ) ивнутренняя часть (личный кабинет игрока — статы персонажа, гильдии, город, магазин и т.д.). Переключение между ними на уровне контента, а не отдельных страниц. Что нужно сделать: Гостевую часть — оформить визуально с нуля по референсу (стиль mutts.lt, есть готовая AI-концепция, но она слишком яркая, нужно привести к общей палитре сайта). Внутреннюю часть — обновить визуал существующих страниц (личный кабинет, город, гильдии и т.д.) по референсу, сохранив всю текущую структуру данных и функционал. Важно: Плейсхолдеры движка ($...$) трогать нельзя — только разметку и стили вокруг них. Вся текущая логика (расчёты, формы, AJAX-запросы) остаётся как есть — переносится в новую вёрстку без изменений. Доступ к файлам сайта и тестовому аккаунту предоставлю после старта работы. Приложу к заказу: референс дизайна (site.png), скриншоты текущего вида сайта.