Создание дизайна хедера сайта в мобильной и десктопной версиях на основе примеров и ТЗ

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), скриншоты текущего вида сайта.

1. Общие сведения о проекте Заказчик: семейный парк развлечений в Германии (полное название и домен раскрываются исполнителю после старта проекта) Тип проекта: полная редизайн и пересборка сайта с нуля Текущий сайт: WordPress/Elementor, устарел, требует полной замены Целевая аудитория: семьи с детьми 2 до 12 лет, регион Германии с несколькими крупными городами поблизости (15 до 20 минут на машине) Язык сайта: основной немецкий (DE), дополнительно английский (EN), отдельная языковая версия CMS: на усмотрение разработчика, WordPress с кастомной темой, Webflow, или headless CMS. Elementor не использовать. Домен: существующий, переносится без замены Срок сдачи: по согласованию с заказчиком 2. Цели и ключевые KPI Новый сайт должен выполнять три стратегические функции: Передавать атмосферу парка как иммерсивного приключения, не список услуг, а погружение в тематический мир. Максимизировать конверсию: посетитель сайта должен совершить бронирование менее чем в 3 клика от любой страницы. Обеспечить безупречный мобильный UX, более 60% трафика ожидается с мобильных устройств. KPI #1: время до первого клика "Забронировать" не более 10 секунд с момента загрузки главной страницы KPI #2: Page Speed Score (Google PageSpeed Insights) не менее 85 на мобильных, не менее 90 на десктопе KPI #3: показатель отказов (Bounce Rate) менее 45% KPI #4: корректное отображение во всех современных браузерах (Chrome, Firefox, Safari, Edge) и на iOS/Android 3. Состав работ 3.1 Страницы и разделы Минимальный набор страниц: Главная: Hero секция, анонс живого шоу по выходным, топ 5 аттракционов, отзывы Google, CTA блок Каталог аттракций с фильтром по возрасту (0 до 3 / 3 до 6 / 6 до 12 лет), карточки с фото и видео Пакеты дня рождения, описание плюс конфигуратор Текущие акции и сезонные события, каждое со своей визуальной карточкой Цены, таблица плюс виджет онлайн бронирования (интеграция с внешней системой бронирования) Ресторан, меню и атмосфера Фотогалерея плюс встроенный Instagram фид О парке, правила, FAQ (без дублирования правил) Контакты, карта Google Maps, контактная форма, часы работы, кликабельные телефон и email Зеркало всех страниц на английском языке 3.2 Что необходимо удалить с текущего сайта Все тексты об ограничениях COVID 19 (2021 до 2022), включая футер FAQ с вопросами о стоимости разработки веб сайтов (посторонний контент) Устаревший copyright год, заменить на актуальный Нерабочие Elementor popup кнопки Устаревшие уведомления об открытии после ограничений Дублирование правил парка в разделе FAQ 4. Функциональные требования P1 = критично для запуска, P2 = желательно в v1.0, P3 = возможные доработки позже 4.1 Hero секция (главная страница) P1, Fullscreen Video Hero: autoplay видео без звука (muted, loop), 100vw на 100vh. При клике включение звука. Поверх видео короткий слоган и кнопка CTA. P1, текстовый слой над видео: H1 заголовок, подзаголовок плюс кнопки "Забронировать" и "Узнать больше". Шрифт читаем на любом фоне. P1, Sticky Navigation: навигационная панель фиксируется вверху при скролле, фон меняется с прозрачного на тёмный при прокрутке. P1, Sticky CTA Button: кнопка "Забронировать" всегда видна, на десктопе в хедере, на мобильном фиксированная полоса внизу экрана. P2, Scroll анимации: элементы появляются с CSS анимацией (fade in плюс slide up) при прокрутке. Библиотека Intersection Observer или AOS.js. Без тяжёлых 3D библиотек. 4.2 Аттракции P1, карточки аттракций: фото/видео, название, краткое описание, значок возрастного ограничения, кнопка "Подробнее" P1, фильтр по возрасту: клиентский фильтр без перезагрузки страницы, реализация CSS классы плюс vanilla JS или Vue/React компонент P1, детальная страница аттракции: собственный URL, крупное фото/видео, полное описание, ограничения по росту/возрасту, кнопка бронирования P2, short form видео: 15 до 30 секунд ролик для каждой аттракции, autoplay при наведении на десктопе или tap на мобильном 4.3 Система бронирования P1, интеграция с внешней системой бронирования: виджет встроен inline (iframe или JS embed) на страницы цен и дня рождения, без открытия в новой вкладке P1, multi step booking flow: пошаговый мастер, тип визита, дата/время, количество гостей, подтверждение, обязателен progress bar P1, объяснение тайм слотов: инфо блок рядом с выбором времени P2, live доступность слотов: API запрос к системе бронирования, отображение занятых/свободных слотов в реальном времени 4.4 Конфигуратор дня рождения P1, multi step конфигуратор: возраст именинника, количество детей, выбор пакета, дополнительные опции, выбор даты, форма запроса или прямое бронирование P1, динамический расчёт цены: обновляется в реальном времени при изменении параметров, без перезагрузки P2, итоговое резюме: сводная карточка выбора на финальном шаге с кнопками "Запросить" и "Забронировать напрямую" 4.5 Доверие и социальное подтверждение P1, виджет Google Reviews: минимум 5 отзывов, средний рейтинг, звёзды, размещение на главной странице над CTA блоком бронирования P1, Instagram фид: встроенная лента последних 9 до 12 постов через официальный API или виджет, ссылка на аккаунт P2, счётчик посетителей: анимированный счётчик 4.6 Дополнительные функциональные блоки P1, live статус "сейчас открыто/закрыто": автоматическая отметка на основе часов работы P1, кликабельные контакты: телефон и email как активные ссылки, обязательно в хедере и на странице контактов P2, интерактивная карта парка: SVG или image map с кликабельными зонами аттракций P2, трекер загруженности: визуальный индикатор ожидаемой загруженности парка P2, обратный отсчёт до события: виджет countdown до ближайшего сезонного события P3, отдельный раздел вечерних мероприятий: страница или секция с собственным визуальным стилем и кнопкой бронирования 5. Нефункциональные требования 5.1 Производительность LCP не более 2,5 сек на мобильном (3G fast) CLS менее 0,1 FID/INP менее 100 мс Google PageSpeed Score не менее 85 mobile, не менее 90 desktop Изображения: формат WebP плюс fallback JPEG, lazy loading, srcset Видео: стриминг через CDN или YouTube/Vimeo embed, не хранить тяжёлые MP4 на хостинге 5.2 SEO Schema.org: LocalBusiness плюс OpeningHoursSpecification плюс Event Meta теги: уникальные title (не более 60 символов) и description (не более 155 символов) на каждой странице Hreflang для языкового переключателя Canonical URL на каждой странице Sitemap.xml автоматически генерируемый Настроенный robots.txt 5.3 Доступность WCAG 2.1, уровень AA как минимальный стандарт Alt атрибуты обязательны для всех изображений Контраст текст/фон не менее 4,5 к 1 Полная навигация с клавиатуры ARIA атрибуты на всех интерактивных элементах 5.4 Безопасность HTTPS обязателен, redirect с HTTP DSGVO/GDPR: cookie баннер (Consent Management), актуальная политика конфиденциальности CSRF защита, honeypot или reCAPTCHA v3 на всех формах Все зависимости актуальных версий, без известных уязвимостей 5.5 CMS и редактируемость Тексты, цены, часы работы, фотографии редактируемы через CMS без привлечения разработчика Создание/архивирование акций и событий через интерфейс CMS Обновление Instagram фида автоматическое через API Видеоинструкция (10 до 15 минут) по работе с CMS, обязательный deliverable 6. Дизайн система 6.1 Цветовая палитра: основной глубокий зелёный, вторичный средний лесной зелёный, акцентный красный для CTA, светло зелёный для фонов карточек, бежевый для текстурных акцентов, тёмный для основного текста, белый 6.2 Типографика: выразительный display шрифт для заголовков (в духе приключения), читаемый нейтральный sans serif для основного текста, минимальный размер 16px body, 14px caption, line height 1,5 до 1,7 6.3 Изображения и медиа: только реальные фотографии, стоковые фото не использовать, формат WebP, минимум 1920px для hero, 800px для карточек, видео hero не длиннее 30 до 60 секунд в loop версии, все изображения с правом публикации 6.4 Анимации: hover эффекты плавные (scale 1.03 на карточках), scroll анимации fade in плюс translateY, только transform и opacity для GPU ускорения 7. Ожидаемые результаты Дизайн макеты в Figma: десктоп плюс мобильный вид всех страниц (десктоп 1440px, мобильный 375px) Адаптивная вёрстка: брейкпоинты 375 / 768 / 1024 / 1440px, mobile first подход Готовый сайт на staging домене для приёмки, после одобрения деплой на боевой домен Настройка CMS: все редактируемые зоны настроены, тестово заполнены Видеоинструкция (10 до 15 минут) по управлению контентом Базовая настройка SEO: meta теги, Schema, Sitemap, подключение Google Search Console Установка Google Analytics 4 плюс Google Tag Manager, настройка событий (click CTA, form submit, page_view) Кросс браузерное и кросс девайсное тестирование, отчёт PageSpeed Insights до сдачи Передача исходного кода (Git репозиторий) заказчику после финальной оплаты 8. Критерии приёмки Все P1 требования реализованы и протестированы PageSpeed Score не менее 85 mobile, подтверждено скриншотом Корректное отображение на iPhone (Safari), Android (Chrome), iPad, MacBook, Windows (Chrome, Edge, Firefox) Форма бронирования успешно отправляет запрос и присылает подтверждение Google Reviews загружаются корректно Instagram фид обновляется автоматически Все ссылки работают, нет 404 ошибок Cookie баннер соответствует DSGVO, GDPR Контент в CMS редактируется без привлечения разработчика