Адаптивный дизайн и верстка сайта из 11 страниц

Потрібно виконати повний редизайн чинного інтернет-магазину 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. Заголовок Motion-дизайнер: Lottie-анімація аналізу обличчя для landing (web, векторна)2. Що робимо Потрібна одна векторна анімація для hero-секції landing-сторінки веб-продукту (AI-аналіз обличчя, playful-формат). Сюжет: стилізоване wireframe-обличчя (лінійне, напівпрозоре, намальоване художником — не фото). На нього по черзі «сідають» landmark-точки (очі, ніс, лінія щелепи, брови), між ними будується легка сітка. У фіналі з обличчя м'яко «вилітають» 2–3 невеликі score-картки (напр. Curiosity 88 / 100). Поведінка: build-in при завантаженні (сітка будується, картки з'являються, ~3–4 с) → далі тихий безшовний цикл (~8–12 с): сітка ледь «дихає», картки м'яко пульсують. Без різких рухів.3. Стиль Естетика: editorial, clinical, grey — спокійне світле «студійне повітря», тонкі лінії, м'яке світло зсередини. Референс тону — QOVES face-analysis (преміальний «медично-аналітичний звіт» × журнальний розворот). Важливо — тон: це playful vibe-аналіз, а НЕ медичне сканування й НЕ розпізнавання особи. Жодних IDENTIFIED-рамок, прицілів-перехресть, червоного, «безпекового» HUD, кібер-неону. Точки й виноски мають відчуватись цікаво й легко, а не як біометричний нагляд. Палітра й типографіка — суворо за витягом наприкінці цього документа (дотримання палітри — умова приймання). Референси, які додаю: QOVES-естетика + 2–3 приклади Lottie у сіро-clinical / wireframe-стилі + скріншот hero, куди анімація стане (поруч є скляні картки — анімація має з ними жити, а не сперечатись).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 для landing. 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), скріншоти поточного вигляду сайту.