Create a website design for citizenship

Потрібно виконати повний редизайн чинного інтернет-магазину 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. Title Motion Designer: Lottie Animation of Face Analysis for Landing (Web, Vector)2. What We Do One vector animation is needed for the hero section of the landing page of a web product (AI face analysis, playful format). Plot: a stylized wireframe face (linear, semi-transparent, drawn by an artist — not a photo). Landmark points (eyes, nose, jawline, eyebrows) sequentially "sit" on it, with a light grid built between them. In the end, 2–3 small score cards gently "fly out" from the face (e.g. Curiosity 88 / 100). Behavior: build-in on load (the grid builds up, cards appear, ~3–4 s) → then a quiet seamless loop (~8–12 s): the grid barely "breathes," cards gently pulse. No sharp movements.3. Style Aesthetics: editorial, clinical, grey — calm light "studio air," thin lines, soft light from within. Tone reference — QOVES face-analysis (premium "medical-analytical report" × magazine spread). Important — tone: this is a playful vibe analysis, NOT a medical scan and NOT facial recognition. No IDENTIFIED frames, crosshairs, red, "security" HUD, cyber-neon. Points and annotations should feel interesting and light, not like biometric surveillance. Palette and typography — strictly according to the extract at the end of this document (adherence to the palette is a condition for acceptance). References I am adding: QOVES aesthetics + 2–3 examples of Lottie in grey-clinical / wireframe style + a screenshot of the hero where the animation will be (there are glass cards nearby — the animation should coexist with them, not compete).4. Technical Requirements Format: Lottie JSON, transparent background. File size: ≤ 150 KB (ideal ~80–100 KB). 30 fps. No raster images inside — everything is vector (no embedded PNG/JPG). Minimum masks and large gradients; no effects that Lottie does not render natively (complex blur, some merge-paths). Must test export specifically in the web player (lottie-web / LottieFiles preview), not just in After Effects. Mobile: plays correctly and reads on real iOS Safari and Android Chrome; on a narrow column, the face/grid is not cut off, cards do not exceed boundaries; smoothly on budget Android. Artboard that scales cleanly in the range of ~360–700px width. Delivered with a reduced-motion frame — static final state (built grid + cards) for prefers-reduced-motion.5. Deliverables + Rights The contractor delivers: Lottie JSON for the landing. Reduced-motion static frame (SVG or PNG). Editable source file — After Effects project file (.aep) with all layers and labeled groups. (Optional / bonus) "quiet" light version for the login page from the same layers — if you stay within budget; otherwise, it will be moved to the next stage. Rights: full transfer of exclusive property rights + unlimited commercial use. The contractor confirms that all elements are original or licensed for commercial use. Fonts in the cards — free Google Fonts (Hanken Grotesk, JetBrains Mono), no paid font traps.6. Process Style frame on the first day — one static frame of the future animation for style approval. I confirm the same day. After my "okay" — animation. 2 rounds of revisions included in the price. Payment in stages through Safe agreement: part after style frame approval, the rest — after acceptance of final files. Important quick start: style frame on the first day, so respond only if you are truly available now.7. Budget and Timeline Budget: $150 for the full scope with deliverables and rights (fixed). Timeline: 4 days from the start.8. What to Send in Response 1–2 works specifically in Lottie / motion (not just static illustrations). Short comment: how you see this style according to our reference. Confirmation that you can start immediately and provide a style frame on the first day. Responses without Lottie examples and without a style comment will not be considered.Palette Extract (to be given to the selected contractor) This is all the color/typography information needed by the artist. Full CSS/repository is not provided. Background: neutral light #f2f5f7. Grid lines, face outline, text: grey "ink" tones —#1f2730 (main), #56606c (secondary), #8a93a0 (lighter). Single accent — only on landmark points: grey-slate #505c65 (deeper variant #3b4651). No other accents should be used. Prohibited: any other colors, saturated gradients, rainbows, neon, red, heavy shadows. Shadows — only soft, low opacity, with a cool tint. Score cards (trait-reveal): semi-transparent "glass" tiles (frosted, light blur, thin light edge); large number — thin weight 300, elegant, not bold; label — small mono-font, ALL CAPS, spaced tracking. Fonts: Hanken Grotesk — trait names, labels (weight 300–500). JetBrains Mono — small labels, indices, digital signatures (e.g. / 100). Tone in one line: calm almost white studio air, illuminated from within; thin lines; one grey-slate accent touches only the grid nodes.

Good day, colleagues. Due to issues with the designer, we needed to start the redesign of the pages yesterday. I am attaching the layout in Figma of the pages that are ready - Figma Ready now: Main, Catalog, Product Card. What needs to be drawn: Personal Account, Cart, Order Placement, Quality and Control, Certificates, Blog, and internal blog page. I ask those who have really studied: the layouts that are already ready, the technical specifications, and prototypes — to write a control response with the technical specifications. Technical specifications - Click Prototypes - Click

It is necessary to professionally design an online store on the Khoroshop platform, making it modern, convenient, and visually appealing. Requirements: Design the main page in a unified corporate style. Set up beautiful banners, categories, and product blocks. Improve the visual design of product and category cards. Create convenient navigation and structure for the main page. Set up attractive displays for promotions, new arrivals, popular products, and brands. Optimize the site's display on mobile devices. Propose improvements for UX/UI if necessary. Utilize the capabilities of the Khoroshop platform without compromising site loading speed. Advantages: Experience in designing stores on the Khoroshop platform. Portfolio of completed projects. Understanding of modern UX/UI and e-commerce principles. Knowledge of SEO requirements when designing the site. When responding, please send: links to stores you have designed on Khoroshop; a brief description of completed works; cost and timeline for project completion.

Need a layout designer/web designer for a visual update of the website. No need to change functionality — only the appearance (HTML/CSS, images). What is currently available: A working gaming website (control panel for a private Mu Online server) on PHP, custom engine, without frameworks. Templates — regular HTML files with placeholders like $TITLE$, $USER_USER$, etc., which the engine fills with data upon loading. Styles — regular CSS, scripts — jQuery, without bundlers (Webpack/Vite) and preprocessors (SASS/LESS). The site consists of 2 functional sections: public part (for non-logged-in users — server description, news, top) and internal part (player's personal account — character stats, guilds, city, shop, etc.). Switching between them is at the content level, not separate pages. What needs to be done: Visually design the public part from scratch based on a reference (style mutts.lt, there is a ready AI concept, but it is too bright, it needs to be brought to the overall palette of the site). Update the visuals of existing pages in the internal part (personal account, city, guilds, etc.) based on a reference, while preserving all current data structure and functionality. Important: Placeholders of the engine ($...$) cannot be touched — only the markup and styles around them. All current logic (calculations, forms, AJAX requests) remains as is — it will be transferred to the new layout without changes. Access to the site files and test account will be provided after the work starts. I will attach to the order: design reference (site.png), screenshots of the current site appearance.