Rekonstrukcja pierwszego ekranu strony internetowej

1. Tytuł Motion designer: animacja Lottie analizy twarzy dla landing (web, wektorowa)2. Co robimy Potrzebna jedna wektorowa animacja dla sekcji hero landing-page produktu webowego (analiza twarzy AI, format playful). Fabuła: stylizowana siatka-twarz (linia, półprzezroczysta, namalowana przez artystę — nie zdjęcie). Na niej po kolei „siadają” punkty charakterystyczne (oczy, nos, linia żuchwy, brwi), między nimi budowana jest lekka siatka. Na końcu z twarzy miękko „wylatują” 2–3 małe karty wyników (np. Ciekawość 88 / 100). Zachowanie: budowanie przy ładowaniu (siatka się buduje, karty się pojawiają, ~3–4 s) → następnie cichy bezszwowy cykl (~8–12 s): siatka ledwo „oddycha”, karty miękko pulsują. Bez nagłych ruchów.3. Styl Estetyka: editorial, kliniczny, szary — spokojne jasne „studialne powietrze”, cienkie linie, miękkie światło od wewnątrz. Referencja tonu — QOVES analiza twarzy (premium „medyczno-analityczny raport” × rozkładka magazynowa). Ważne — ton: to playful vibe-analiza, a NIE medyczne skanowanie i NIE rozpoznawanie twarzy. Żadne IDENTIFIED ramki, celowniki-krzyże, czerwony, „bezpieczny” HUD, cyber-neon. Punkty i przypisy mają być odczuwane jako ciekawe i lekkie, a nie jak biometryczny nadzór. Paleta i typografia — ściśle według wyciągu na końcu tego dokumentu (przestrzeganie palety — warunek przyjęcia). Referencje, które dodaję: estetyka QOVES + 2–3 przykłady Lottie w szaro-klinicznym / stylu siatki + zrzut ekranu hero, gdzie animacja się znajdzie (obok są szklane karty — animacja ma z nimi żyć, a nie sprzeczać się).4. Wymagania techniczne Format: Lottie JSON, przezroczyste tło. Rozmiar pliku: ≤ 150 KB (idealnie ~80–100 KB). 30 fps. Bez rastrowych obrazów wewnątrz — wszystko wektorowe (żadne wbudowane PNG/JPG). Minimum masek i dużych gradientów; bez efektów, które Lottie nie renderuje natywnie (skomplikowane rozmycia, niektóre merge-paths). Należy testować eksport właśnie w web-odtwarzaczu (lottie-web / LottieFiles preview), a nie tylko w After Effects. Mobilne: poprawnie odtwarzane i czytane na rzeczywistych iOS Safari i Android Chrome; na wąskiej kolumnie twarz/siatka nie są przycinane, karty nie wychodzą poza granice; płynnie na budżetowym Androidzie. Artboard, który czysto skaluje się w zakresie ~360–700px szerokości. Dostarczane z reduced-motion klatką — statyczny końcowy stan (zbudowana siatka + karty) dla prefers-reduced-motion.5. Wyniki + prawa Wykonawca dostarcza: Lottie JSON dla landing. Reduced-motion statyczna klatka (SVG lub PNG). Edytowalny plik źródłowy — plik projektu After Effects (.aep) ze wszystkimi warstwami i podpisanymi grupami. (Opcjonalnie / bonus) „cicha” wersja light dla strony logowania z tych samych warstw — jeśli mieścicie się w budżecie; w przeciwnym razie przenoszone do następnego etapu. Prawa: pełne przeniesienie wyłącznych praw majątkowych + nieograniczone komercyjne wykorzystanie. Wykonawca potwierdza, że wszystkie elementy są oryginalne lub licencjonowane do komercji. Czcionki w kartach — darmowe Google Fonts (Hanken Grotesk, JetBrains Mono), żadnych płatnych pułapek czcionkowych.6. Proces Stylframe w pierwszym dniu — jedna statyczna klatka przyszłej animacji do zatwierdzenia stylu. Potwierdzam tego samego dnia. Po moim „ok” — animacja. 2 rundy poprawek wliczone w cenę. Płatność w etapach przez Safe-umowę: część po zatwierdzeniu stylframe, reszta — po przyjęciu finalnych plików. Ważny szybki start: stylframe w pierwszym dniu, więc odzywajcie się tylko jeśli naprawdę jesteście teraz wolni.7. Budżet i termin Budżet: $150 za pełny zakres z wynikami i prawami (stała kwota). Termin: 4 dni od startu.8. Co wysłać w odpowiedzi 1–2 prace właśnie w Lottie / motion (nie tylko statyczne ilustracje). Krótk komentarz: jak widzicie ten styl pod naszą referencję. Potwierdzenie, że możecie rozpocząć od razu i dać stylframe w pierwszym dniu. Odpowiedzi bez przykładów Lottie i bez komentarza o stylu nie będą rozpatrywane.Wyciąg-paleta (przekazać wybranemu wykonawcy) To wszystko, co potrzebne artyście odnośnie koloru/typografii. Pełny CSS/repozytorium nie przekazuję. Tło: neutralny jasny #f2f5f7. Linie siatki, kontur twarzy, tekst: szare „tusze” —#1f2730 (główny), #56606c (drugorzędny), #8a93a0 (jaśniejszy). Jedyny akcent — tylko na węzłach-punktach charakterystycznych: szaro-skalny #505c65(głębsza wersja #3b4651). Więcej NIGDZIE akcentu nie używać. Zabronione: jakiekolwiek inne kolory, nasycone gradienty, tęcze, neon, czerwony, ciężkie cienie. Cienie — tylko miękkie, niskiej przezroczystości, z zimnym odcieniem. Karty wyników (trait-reveal): półprzezroczyste „szklane” płytki (frosted, lekki blur, cienki jasny kant); duża cyfra — cienka waga 300, elegancka, nie tłusta; podpis-znacznik — mała mono-czcionka, WIELKIMI LITERAMI, rozrzedzone śledzenie. Czcionki: Hanken Grotesk — nazwy traitów, podpisy (waga 300–500). JetBrains Mono — małe znaczniki, indeksy, cyfrowe podpisy (np. / 100). Ton jednym zdaniem: spokojne prawie białe studialne powietrze, oświetlone od wewnątrz; cienkie linie; jeden szaro-skalny akcent dotyka tylko węzłów siatki.

Dzień dobry, koledzy. W związku z problemami u projektanta, trzeba było rozpocząć jeszcze wczoraj dopracowywanie projektu stron. Załączam makietę w Figma stron, które są gotowe - Figma Gotowe teraz: Strona główna, Katalog, Karta produktu. Co trzeba dorysować: Panel użytkownika, Koszyk, Realizacja zamówienia, Jakość i kontrola, Certyfikaty, Blog oraz wewnętrzna strona bloga. Proszę tych, którzy naprawdę zapoznali się: makiety, które są już gotowe, Tz oraz prototypy — napisać kontrolną odpowiedź z Tz. Tz - Kliknij Prototypy - Kliknij

Konieczne jest profesjonalne zaprojektowanie sklepu internetowego na platformie Хорошоп, aby był nowoczesny, wygodny i wizualnie atrakcyjny. Co jest wymagane: Zapewnienie jednolitego stylu firmowego na stronie głównej. Ustawienie pięknych banerów, kategorii i bloków z produktami. Poprawa wizualnego wyglądu kart produktów i kategorii. Stworzenie wygodnej nawigacji i struktury strony głównej. Ustawienie atrakcyjnego wyświetlania promocji, nowości, popularnych produktów i marek. Optymalizacja wyświetlania strony na urządzeniach mobilnych. W razie potrzeby zaproponowanie ulepszeń w zakresie UX/UI. Wykorzystanie możliwości platformy Хорошоп bez pogarszania prędkości ładowania strony. Atutem będzie: Doświadczenie w projektowaniu sklepów na platformie Хорошоп. Posiadanie portfolio z zrealizowanymi projektami. Znajomość nowoczesnych zasad UX/UI i e-commerce. Znajomość wymagań SEO przy projektowaniu strony. Proszę o przesłanie: linków do sklepów, które zaprojektowałeś na Хорошоп; krótkiego opisu wykonanych prac; kosztu i terminu realizacji projektu.

Potrzebny jest front-endowiec/projektant stron internetowych do wizualnej aktualizacji strony. Funkcjonalności zmieniać nie trzeba — tylko wygląd (HTML/CSS, obrazy). Co jest teraz: Funkcjonująca strona gry (panel sterowania prywatnym serwerem Mu Online) w PHP, silnik autorski, bez frameworków. Szablony — zwykłe pliki HTML z placeholderami typu $TITLE$, $USER_USER$ itp., które silnik sam podstawia danymi przy ładowaniu. Style — zwykły CSS, skrypty — jQuery, bez bundlerów (Webpack/Vite) i preprocesorów (SASS/LESS). Strona składa się z 2 funkcjonalnych sekcji: część gościnna (dla niezalogowanych — opis serwera, wiadomości, top) oraz część wewnętrzna (panel gracza — statystyki postaci, gildie, miasto, sklep itp.). Przełączanie między nimi na poziomie treści, a nie osobnych stron. Co trzeba zrobić: Część gościną — wizualnie zaprojektować od podstaw według referencji (styl mutts.lt, jest gotowa koncepcja AI, ale jest zbyt jaskrawa, trzeba dostosować do ogólnej palety strony). Część wewnętrzną — zaktualizować wizualnie istniejące strony (panel gracza, miasto, gildie itp.) według referencji, zachowując całą obecną strukturę danych i funkcjonalność. Ważne: Placeholdery silnika ($...$) nie mogą być ruszane — tylko markup i style wokół nich. Cała obecna logika (obliczenia, formularze, zapytania AJAX) pozostaje bez zmian — przenoszona do nowego layoutu bez modyfikacji. Dostęp do plików strony i konta testowego udostępnię po rozpoczęciu pracy. Dołączę do zamówienia: referencję projektu (site.png), zrzuty ekranu obecnego wyglądu strony.

1. Ogólne informacje o projekcie Zleceniodawca: rodzinny park rozrywki w Niemczech (pełna nazwa i domena zostaną ujawnione wykonawcy po rozpoczęciu projektu) Typ projektu: pełny redesign i przebudowa strony od podstaw Aktualna strona: WordPress/Elementor, przestarzała, wymaga całkowitej wymiany Grupa docelowa: rodziny z dziećmi w wieku od 2 do 12 lat, region Niemiec z kilkoma dużymi miastami w pobliżu (15 do 20 minut samochodem) Język strony: główny niemiecki (DE), dodatkowo angielski (EN), osobna wersja językowa CMS: według uznania dewelopera, WordPress z niestandardowym motywem, Webflow lub headless CMS. Nie używać Elementora. Domena: istniejąca, przenoszona bez zmiany Termin oddania: do uzgodnienia z zleceniodawcą 2. Cele i kluczowe KPI Nowa strona powinna spełniać trzy strategiczne funkcje: Przekazywać atmosferę parku jako immersywnej przygody, nie lista usług, a zanurzenie w tematycznym świecie. Maksymalizować konwersję: odwiedzający stronę powinien dokonać rezerwacji w mniej niż 3 kliknięcia z dowolnej strony. Zapewnić doskonałe mobilne UX, ponad 60% ruchu oczekiwane z urządzeń mobilnych. KPI #1: czas do pierwszego kliknięcia "Zarezerwuj" nie więcej niż 10 sekund od momentu załadowania strony głównej KPI #2: Page Speed Score (Google PageSpeed Insights) nie mniej niż 85 na urządzeniach mobilnych, nie mniej niż 90 na desktopie KPI #3: wskaźnik odrzuceń (Bounce Rate) poniżej 45% KPI #4: poprawne wyświetlanie we wszystkich nowoczesnych przeglądarkach (Chrome, Firefox, Safari, Edge) oraz na iOS/Android 3. Zakres prac 3.1 Strony i sekcje Minimalny zestaw stron: Strona główna: sekcja Hero, zapowiedź pokazu na żywo w weekendy, top 5 atrakcji, opinie Google, blok CTA Katalog atrakcji z filtrem według wieku (0 do 3 / 3 do 6 / 6 do 12 lat), karty z zdjęciami i filmami Pakiety urodzinowe, opis plus konfigurator Aktualne promocje i sezonowe wydarzenia, każde z własną wizualną kartą Ceny, tabela plus widget rezerwacji online (integracja z zewnętrznym systemem rezerwacji) Restauracja, menu i atmosfera Galeria zdjęć plus wbudowany feed Instagram O parku, zasady, FAQ (bez powielania zasad) Kontakt, mapa Google Maps, formularz kontaktowy, godziny otwarcia, klikalny telefon i email Odbicie wszystkich stron w języku angielskim 3.2 Co należy usunąć z aktualnej strony Wszystkie teksty o ograniczeniach COVID 19 (2021 do 2022), w tym stopka FAQ z pytaniami o koszty tworzenia stron internetowych (treści zewnętrzne) Przestarzały copyright, zastąpić aktualnym Niedziałające przyciski popup Elementor Przestarzałe powiadomienia o otwarciu po ograniczeniach Powielanie zasad parku w sekcji FAQ 4. Wymagania funkcjonalne P1 = krytyczne dla uruchomienia, P2 = pożądane w v1.0, P3 = możliwe poprawki później 4.1 Sekcja Hero (strona główna) P1, Fullscreen Video Hero: autoplay wideo bez dźwięku (muted, loop), 100vw na 100vh. Po kliknięciu włączenie dźwięku. Na wideo krótki slogan i przycisk CTA. P1, warstwa tekstowa nad wideo: nagłówek H1, podtytuł plus przyciski "Zarezerwuj" i "Dowiedz się więcej". Czcionka czytelna na każdym tle. P1, Sticky Navigation: pasek nawigacyjny przyczepia się na górze podczas przewijania, tło zmienia się z przezroczystego na ciemne podczas przewijania. P1, Sticky CTA Button: przycisk "Zarezerwuj" zawsze widoczny, na desktopie w nagłówku, na urządzeniach mobilnych stały pasek na dole ekranu. P2, animacje przewijania: elementy pojawiają się z animacją CSS (fade in plus slide up) podczas przewijania. Biblioteka Intersection Observer lub AOS.js. Bez ciężkich bibliotek 3D. 4.2 Atrakcje P1, karty atrakcji: zdjęcie/wideo, nazwa, krótki opis, ikona ograniczenia wiekowego, przycisk "Więcej informacji" P1, filtr według wieku: filtr klienta bez przeładowania strony, realizacja klasy CSS plus komponent vanilla JS lub Vue/React P1, szczegółowa strona atrakcji: własny URL, duże zdjęcie/wideo, pełny opis, ograniczenia wzrostu/wieku, przycisk rezerwacji P2, krótki film wideo: 15 do 30 sekundowy film dla każdej atrakcji, autoplay przy najechaniu na desktopie lub tap na urządzeniach mobilnych 4.3 System rezerwacji P1, integracja z zewnętrznym systemem rezerwacji: widget wbudowany inline (iframe lub JS embed) na stronach cen i urodzin, bez otwierania w nowej karcie P1, wieloetapowy proces rezerwacji: kreator krok po kroku, typ wizyty, data/godzina, liczba gości, potwierdzenie, obowiązkowy pasek postępu P1, wyjaśnienie slotów czasowych: blok informacyjny obok wyboru czasu P2, na żywo dostępność slotów: zapytanie API do systemu rezerwacji, wyświetlanie zajętych/wolnych slotów w czasie rzeczywistym 4.4 Konfigurator urodzinowy P1, wieloetapowy konfigurator: wiek jubilata, liczba dzieci, wybór pakietu, dodatkowe opcje, wybór daty, formularz zapytania lub bezpośrednia rezerwacja P1, dynamiczne obliczanie ceny: aktualizowane w czasie rzeczywistym przy zmianie parametrów, bez przeładowania P2, podsumowanie końcowe: zbiorcza karta wyboru na ostatnim kroku z przyciskami "Zapytaj" i "Zarezerwuj bezpośrednio" 4.5 Zaufanie i społeczna weryfikacja P1, widget Google Reviews: minimum 5 recenzji, średnia ocena, gwiazdki, umiejscowienie na stronie głównej nad blokiem CTA rezerwacji P1, feed Instagram: wbudowany feed ostatnich 9 do 12 postów przez oficjalne API lub widget, link do konta P2, licznik odwiedzających: animowany licznik 4.6 Dodatkowe bloki funkcjonalne P1, status "teraz otwarte/zamknięte": automatyczne oznaczenie na podstawie godzin otwarcia P1, klikalne kontakty: telefon i email jako aktywne linki, obowiązkowo w nagłówku i na stronie kontaktowej P2, interaktywna mapa parku: SVG lub mapa obrazkowa z klikalnymi strefami atrakcji P2, tracker obciążenia: wizualny wskaźnik oczekiwanego obciążenia parku P2, odliczanie do wydarzenia: widget odliczający do najbliższego sezonowego wydarzenia P3, osobna sekcja wieczornych wydarzeń: strona lub sekcja z własnym stylem wizualnym i przyciskiem rezerwacji 5. Wymagania niefunkcjonalne 5.1 Wydajność LCP nie więcej niż 2,5 sekundy na urządzeniach mobilnych (3G fast) CLS mniej niż 0,1 FID/INP mniej niż 100 ms Google PageSpeed Score nie mniej niż 85 mobile, nie mniej niż 90 desktop Obrazy: format WebP plus fallback JPEG, lazy loading, srcset Wideo: streaming przez CDN lub osadzenie YouTube/Vimeo, nie przechowywać ciężkich MP4 na hostingu 5.2 SEO Schema.org: LocalBusiness plus OpeningHoursSpecification plus Event Meta tagi: unikalne title (nie więcej niż 60 znaków) i description (nie więcej niż 155 znaków) na każdej stronie Hreflang dla przełącznika językowego Canonical URL na każdej stronie Sitemap.xml automatycznie generowany Skonfigurowany robots.txt 5.3 Dostępność WCAG 2.1, poziom AA jako minimalny standard Atrybuty alt obowiązkowe dla wszystkich obrazów Kontrast tekst/tło nie mniej niż 4,5 do 1 Pełna nawigacja z klawiatury Atrybuty ARIA na wszystkich interaktywnych elementach 5.4 Bezpieczeństwo HTTPS obowiązkowy, przekierowanie z HTTP DSGVO/GDPR: baner cookie (Zarządzanie zgodą), aktualna polityka prywatności Ochrona CSRF, honeypot lub reCAPTCHA v3 na wszystkich formularzach Wszystkie zależności aktualnych wersji, bez znanych luk w zabezpieczeniach 5.5 CMS i edytowalność Teksty, ceny, godziny otwarcia, zdjęcia edytowalne przez CMS bez angażowania dewelopera Tworzenie/archiwizowanie promocji i wydarzeń przez interfejs CMS Automatyczna aktualizacja feedu Instagram przez API Film instruktażowy (10 do 15 minut) dotyczący pracy z CMS, obowiązkowy deliverable 6. System designu 6.1 Paleta kolorów: głęboka zieleń jako kolor podstawowy, średnia leśna zieleń jako kolor wtórny, czerwony akcent dla CTA, jasna zieleń dla tła kart, beżowy dla akcentów teksturowych, ciemny dla tekstu głównego, biały 6.2 Typografia: wyrazista czcionka display dla nagłówków (w duchu przygody), czytelna neutralna czcionka sans serif dla tekstu głównego, minimalny rozmiar 16px body, 14px caption, wysokość linii 1,5 do 1,7 6.3 Obrazy i media: tylko prawdziwe zdjęcia, zdjęcia stockowe nie używać, format WebP, minimum 1920px dla hero, 800px dla kart, wideo hero nie dłuższe niż 30 do 60 sekund w wersji loop, wszystkie obrazy z prawem do publikacji 6.4 Animacje: efekty hover płynne (scale 1.03 na kartach), animacje przewijania fade in plus translateY, tylko transform i opacity dla przyspieszenia GPU 7. Oczekiwane wyniki Projekty w Figma: desktop plus mobilny widok wszystkich stron (desktop 1440px, mobilny 375px) Responsywna struktura: punkty przerwania 375 / 768 / 1024 / 1440px, podejście mobile first Gotowa strona na domenie stagingowej do odbioru, po zatwierdzeniu wdrożenie na domenę produkcyjną Konfiguracja CMS: wszystkie edytowalne obszary skonfigurowane, testowo wypełnione Film instruktażowy (10 do 15 minut) dotyczący zarządzania treścią Podstawowa konfiguracja SEO: meta tagi, Schema, Sitemap, podłączenie Google Search Console Instalacja Google Analytics 4 plus Google Tag Manager, konfiguracja zdarzeń (click CTA, form submit, page_view) Testowanie między przeglądarkami i urządzeniami, raport PageSpeed Insights przed oddaniem Przekazanie kodu źródłowego (repozytorium Git) zleceniodawcy po finalnej płatności 8. Kryteria akceptacji Wszystkie wymagania P1 zrealizowane i przetestowane PageSpeed Score nie mniej niż 85 mobile, potwierdzone zrzutem ekranu Poprawne wyświetlanie na iPhone (Safari), Android (Chrome), iPad, MacBook, Windows (Chrome, Edge, Firefox) Formularz rezerwacji pomyślnie wysyła zapytanie i wysyła potwierdzenie Google Reviews ładują się poprawnie Feed Instagram aktualizuje się automatycznie Wszystkie linki działają, brak błędów 404 Baner cookie zgodny z DSGVO, GDPR Treść w CMS edytowalna bez angażowania dewelopera