Rozwój UI/UX dla witryny (projektowanie witryny)

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

Całkowity zakres pracy 80 pozycji towarowych na stronie https://pro-aptechka.com.ua/ Źródła danych: Prom.ua, Rozetka lub zdjęcia dostarczone przez nas Dostęp do panelu administracyjnego OpenCart jest zapewniony️ Praca z obrazamiWymagania dotyczące zdjęć: Format: JPEG Ilość: 10-15 sztuk na 1 towar (ze strony źródłowej lub zdjęcia dostarczone przez nas) Jakość: bez utraty jakości, minimalny rozmiar pliku Orientacja: poprawna Ważne: nazwa folderu bez znaków specjalnych * + " № / ,, itd.Sortowanie: Główne zdjęcie — najlepszy ogólny widok Następnie — sekwencyjne ujawnienie towaru z różnych stron Szczegóły, elementy, cechyDodatkowo: Retusz/obróbka — jeśli zdjęcia są "surowe", potrzebna jest profesjonalna obróbka (omawiane osobno z dopłatą. Jeśli potrafisz robić ładne zdjęcia sprzedażowe - dostarcz próbki - dopłata do uzgodnienia) Wideo — dodawane link z YouTube (jeśli jest) Wypełnianie pól towaruPodstawowe pola tekstowe: PoleWymaganiaNazwa towaruJasna, informacyjna, do 110 znakówHTML-tag H1Tytuł stronyMeta-tag TitleTytuł SEOMeta-tag DescriptionOpis SEOMeta-tag KeywordsSłowa kluczoweOpisSzczegółowy opis towaru (jest gotowy prompt)Tagi towaruPrzez przecinek Dane handlowe: PoleŹródłoKod towaruZe strony źródłowej lub plikuSKU= Kod towaruCenaZe strony źródłowej lub pliku IlośćDostępnośćRozmiary (D x S x W) w cmZe specyfikacjiWaga (kg)Ze specyfikacjiPowiązania: Producent — określić i przypisać Kategoria — poprawne umiejscowienie w strukturze strony Rekomendowane towary — dobór podobnych pozycjiSpecyfikacje: Określić top-specyfikacje dla każdego towaru Znaleźć poprawny typ/nazwę specyfikacji w systemie Aspekty techniczneSEO URL: Wypełniane automatycznie w OpenCart Obowiązkowa weryfikacja — czy poprawnie się utworzyłOstateczna weryfikacja: Wszystkie zdjęcia dodane i wyświetlane Wideo podłączone (jeśli jest) Wszystkie pola wypełnione poprawnie

Opis projektu Szukać doświadczonego specjalisty Webflow do pilnego zakończenia projektu stworzenia strony internetowej dla salonu piękności. Strona jest już praktycznie gotowa i stworzona na szablonie Webflow. Należy dołączyć do finalnego etapu prac i doprowadzić projekt do całkowicie gotowego wyglądu.Co należy zrobić: wprowadzić na stronę już gotowe teksty, przygotowane przez copywritera; umieścić zdjęcia zgodnie z strukturą strony; opracować strony zgodnie z brandbookiem i firmowym stylem klienta; w razie potrzeby dopracować poszczególne bloki dla bardziej nowoczesnego i profesjonalnego wyglądu; sprawdzić responsywność strony na różnych urządzeniach; wykonać podstawowe ustawienia techniczne Webflow (pola SEO, parametry techniczne stron, ustawienia formularzy, linków, publikacja itp.); przeprowadzić ostateczną kontrolę strony przed oddaniem klientowi.Nasze oczekiwania wobec wykonawcy: pewna znajomość platformy Webflow; doświadczenie w pracy z szablonami Webflow i ich dopracowywaniu; dobre zrozumienie nowoczesnego UI/UX i webdesignu; uwaga na szczegóły; odpowzialność i szybka komunikacja.Ważne Projekt bardzo pilny. Pracę należy zakończyć w ciągu 3 dni. Koszt omawiamy indywidualnie w zależności od doświadczenia i szybkości wykonania. Przy odpowiedzi, proszę przesłać: przykłady stron wykonanych na Webflow; krótki opis swojego doświadczenia; informację o tym, kiedy mogą rozpocząć pracę. Preferencje damy wykonawcom, którzy mogą przystąpić do pracy od razu po uzgodnieniu i gwarantują zakończenie projektu w określonym terminie.