Dostosowanie witryny do urządzeń mobilnych

Specyfikacja techniczna: Strona docelowa - wynajem sprzętu nexivo-core https://nexivocore.pages.dev/ Strona: Strona jednostronicowa dla firmy wynajmującej ciężki sprzęt (buldożery, koparki, równiarki). Ciemny motyw, złote akcenty. Co już zrobione - Główne sekcje: hero, katalog, zalety, kontakty - Podgląd modelu 3D (automatyczne obracanie, zoom) - oparty na przeglądarce - Animacje przewijania, liczniki statystyk - Responsywność mobilna Co należy zrobić 1. Projektowanie i UI - Doprowadzić do poziomu premium - Mikro-animacje, efekty na najeżdżanie - Niestandardowy kursor - Markowy preloader (zastąpić obecny spinner) - Hero z cząstkami / tłem gradientowym 2. Sekcja podglądu 3D - Zastąpić spinner prawdziwym paskiem postępu (procent) - Przełączanie przycisków między 3 modelami (buldożer, koparka, równiarka) - Dostosować automatyczne obracanie 3. Formularze i leady - Formularz prośby o oddzwonienie - Walidacja (telefon, imię) - Wysyłka po stronie serwera (punkt końcowy Python) - Powiadomienia Telegram o nowych leadach 4. Katalog - Filtruj według typu / ceny - Modal szczegółowy dla każdego elementu sprzętu - Ładowanie danych z JSON 5. Mapa - Mapa oddziałów z znacznikami (Leaflet) - Przycisk „Najbliżej mnie” 6. Wersja angielska - Przełącznik języków - Tłumaczenia z JSON 7. SEO - Schema.org znacznikowanie - Open Graph / podgląd społecznościowy - Lazy loading dla wszystkiego 8. Mobilne - Dolny pasek nawigacyjny - Galeria do przewijania Stos technologiczny - HTML + CSS + JS (czysty) - Python dla backendu formularzy - Działa na Nginx + Ubuntu - GSAP / biblioteki animacji OK Dostarczone - Pełny kod źródłowy obecnej wersji - Dostęp do GitHub z obecną wersją - Modele 3D (.glb pliki) - Certyfikat SSL i domena Wymagania - Czysty kod, komentarze nie są potrzebne - Działa w Chrome, Safari, Firefox, Edge - BEZ CMS, PHP ani Node.js

Specyfikacja techniczna: Strona docelowa - wynajem sprzętu nexivo-core https://nexivocore.pages.dev/ Strona: Strona jednostronicowa dla firmy wynajmującej ciężki sprzęt (buldożery, koparki, równiarki). Ciemna tematyka, złote akcenty. Co już zrobione - Główne sekcje: hero, katalog, zalety, kontakty - Podgląd modelu 3D (automatyczne obracanie, powiększenie) - w przeglądarce - Animacje przewijania, liczniki statystyk - Responsywność mobilna Co należy zrobić 1. Projektowanie i UI - Doprowadzić do poziomu premium - Mikro-animacje, efekty na najeżdżanie - Niestandardowy kursor - Markowy preloader (zastąpić obecny spinner) - Hero z cząstkami / tłem gradientowym 2. Sekcja podglądu 3D - Zastąpić spinner prawdziwym paskiem postępu (procent) - Przełączanie przycisków między 3 modelami (buldożer, koparka, równiarka) - Dostosować automatyczne obracanie 3. Formularze i leady - Formularz prośby o oddzwonienie - Walidacja (telefon, imię) - Wysyłka po stronie serwera (punkt końcowy Python) - Powiadomienia Telegram o nowych leadach 4. Katalog - Filtruj według typu / ceny - Modal szczegółowy dla każdego elementu sprzętu - Ładowanie danych z JSON 5. Mapa - Mapa oddziałów z znacznikami (Leaflet) - Przycisk „Najbliżej mnie” 6. Wersja angielska - Przełącznik języków - Tłumaczenia z JSON 7. SEO - Schema.org znacznikowanie - Open Graph / podgląd społecznościowy - Lazy loading dla wszystkiego 8. Mobilne - Dolny pasek nawigacyjny - Galeria do przewijania Stos technologiczny - HTML + CSS + JS (vanilla) - Python dla backendu formularzy - Działa na Nginx + Ubuntu - GSAP / biblioteki animacji OK Dostarczone - Pełny kod źródłowy obecnej wersji - Dostęp do GitHub z obecną wersją - Modele 3D (.glb pliki) - Certyfikat SSL i domena Wymagania - Czysty kod, komentarze nie są potrzebne - Działa w Chrome, Safari, Firefox, Edge - BEZ CMS, PHP ani Node.js

Poszukujemy projektanta do aktualizacji designu systemu CRM. Z doświadczeniem i zrozumieniem trendów designu na 2026 rok. Jeśli to możliwe, proszę przesłać przykłady podobnych prac. Szczegóły i przykład designu wyślemy w wiadomości prywatnej. Będziemy wdzięczni za współpracę!

Potrzebny jest pełny redesign istniejącego sklepu internetowego ROBO: https://robo.org.ua/ Strona już działa, produkty i podstawowa funkcjonalność są dostępne. Należy nie tworzyć nowej strony od zera, ale całkowicie przerobić jej design, strukturę stron i ścieżkę użytkownika do zakupu. Głównym celem redesignu jest uczynienie strony nowoczesną, wygodną, zrozumiałą i maksymalnie sprzedażową. Główny ruch będzie pochodził z reklamy Meta — Facebook i Instagram. Większość klientów przegląda stronę na smartfonach, dlatego szczególną uwagę należy poświęcić wersji mobilnej. Osoba, która po raz pierwszy przechodzi na stronę z reklamy, powinna od razu zrozumieć: — co to za produkt; — jakie są jego główne zalety; — ile kosztuje; — co wchodzi w skład; — jak odbywa się dostawa i płatność; — czy można zaufać sklepowi; — jak szybko złożyć zamówienie. Trzeba przeanalizować istniejącą stronę, znaleźć główne problemy w designie, strukturze i wygodzie użytkowania, a następnie zaproponować nowy projekt UI/UX w Figma. Trzeba opracować pełną wersję komputerową i mobilną strony. Co należy opracować: Header strony. Trzeba całkowicie przerobić header strony dla wersji komputerowej i mobilnej. W headerze powinny być: — logo sklepu; — przycisk „Katalog produktów”; — menu głównych kategorii; — wyszukiwarka; — numer telefonu; — przycisk szybkiego kontaktu; — godziny otwarcia; — ulubione; — konto osobiste, jeśli jest używane; — koszyk z ilością produktów; — mobilne menu burger; — informacje o dostawie, płatności lub aktualnej promocji. Header powinien być kompaktowy, zrozumiały i nie zajmować zbyt dużo miejsca. Podczas przewijania strony należy przewidzieć przypięty skrócony header z głównymi elementami: logo, katalogiem, wyszukiwarką i koszykiem. Mobilne menu. Trzeba osobno opracować wygodne mobilne menu, w którym będą: — katalog produktów; — kategorie; — wyszukiwanie; — kontakty; — dostawa i płatność; — gwarancja i zwroty; — opinie; — ulubione; — koszyk; — przyciski kontaktu przez telefon lub komunikatory. Strona główna. Na stronie głównej należy opracować: — główny baner z wyraźną ofertą; — produkty promocyjne; — popularne kategorie; — hity sprzedaży; — nowości; — produkty ze zniżkami; — zalety sklepu; — informacje o dostawie i płatności; — opinie klientów; — blok zaufania do sklepu; — polecane produkty; — odpowiedzi na popularne pytania; — subskrypcję lub wezwanie do przejścia do katalogu; — dolną część strony. Strona główna nie powinna być przeładowana. Jej głównym zadaniem jest szybkie skierowanie użytkownika do potrzebnego produktu lub kategorii. Strona kategorii produktów. Trzeba opracować: — nazwę kategorii; — krótki opis; — podkategorie; — filtry; — sortowanie; — karty produktów; — oznaczenia „Hit”, „Nowość”, „Zniżka”; — aktualną i starą cenę; — ocenę; — liczbę opinii; — przycisk dodawania do koszyka; — możliwość dodania do ulubionych; — paginację lub przycisk „Pokaż więcej”; — mobilną wersję filtrów. Karty produktów powinny być nowoczesne, zrozumiałe i nieprzeładowane zbędnymi informacjami. Strona produktu. Strona produktu jest najważniejszą częścią strony. Powinna łączyć funkcjonalność sklepu internetowego i strukturę sprzedażowego landing page'a. Trzeba opracować odpowiednią sekwencję bloków, która pomoże użytkownikowi szybko podjąć decyzję o zakupie. W pierwszym ekranie strony produktu powinny być: — nazwa produktu; — artykuł; — ocena; — liczba opinii; — galeria zdjęć; — wideo produktu; — aktualna cena; — stara cena; — rozmiar zniżki; — informacje o dostępności; — opcje koloru lub konfiguracji; — liczba produktów; — główny przycisk „Kup”; — przycisk szybkiego zamówienia; — krótkie główne zalety; — informacje o dostawie; — informacje o płatności; — gwarancja i zwroty; — informacje o zestawie. Po pierwszym ekranie należy umieścić: — krótki blok głównych zalet; — demonstrację produktu w rzeczywistym użyciu; — problem, który rozwiązuje produkt; — szczegółowy opis; — zdjęcia i wideo; — główne cechy; — co wchodzi w skład; — instrukcję obsługi; — porównanie z innymi produktami lub zwykłymi odpowiednikami; — dla kogo produkt będzie odpowiedni; — blok dostawy i płatności; — gwarancję i warunki zwrotu; — opinie klientów; — opinie ze zdjęciami i wideo; — pytania i odpowiedzi; — polecane produkty; — produkty towarzyszące; — produkty, które często kupowane są razem; — ponowne wezwanie do złożenia zamówienia. W wersji mobilnej należy zrobić przypięty dolny panel z ceną i przyciskiem „Kup”. Trzeba również przewidzieć wygodne przełączanie między sekcjami: — opis; — cechy; — opinie; — pytania; — dostawa i płatność. Blok dostawy i płatności. Trzeba opracować osobny zrozumiały blok, w którym będzie wskazane: — dostawa Nową Pocztą; — orientacyjny czas dostawy; — możliwość płatności przy odbiorze; — płatność online; — płatność na konto; — koszt dostawy; — warunki darmowej dostawy, jeśli obowiązują; — wymiana i zwroty; — gwarancja. Te informacje powinny być widoczne jeszcze przy przycisku „Kup”, a także powtarzać się poniżej na stronie. Opinie. Trzeba opracować nowoczesny blok opinii: — ogólna ocena produktu; — liczba opinii; — rozkład ocen; — imię kupującego; — data opinii; — oznaczenie „Potwierdzony zakup”; — tekst opinii; — zdjęcia; — wideo; — ocena produktu; — odpowiedź sklepu; — przycisk „Zostaw opinię”; — sortowanie opinii. Opinie powinny budzić zaufanie i być wygodne do przeglądania na smartfonie. Cechy produktu. Trzeba stworzyć osobny zrozumiały blok cech. Cechy powinny być wyświetlane w formie uporządkowanej listy lub tabeli, która dobrze wygląda na komputerze i smartfonie. Pytania i odpowiedzi. Trzeba opracować blok, w którym klienci będą mogli: — przeglądać popularne pytania; — otwierać i zamykać odpowiedzi; — zadać własne pytanie; — zobaczyć odpowiedź sklepu; — przeglądać datę odpowiedzi. Koszyk. Trzeba opracować pełną i mini wersję koszyka. W koszyku powinny być: — zdjęcie produktu; — nazwa; — wybrana konfiguracja lub kolor; — cena; — stara cena; — ilość; — możliwość usunięcia produktu; — kod promocyjny; — suma zamówienia; — koszt dostawy lub informacje o niej; — polecane produkty; — przycisk „Złóż zamówienie”; — przycisk „Kontynuuj zakupy”. Składanie zamówienia. Trzeba zrobić maksymalnie proste składanie zamówienia bez zbędnych pól. Główne pola: — imię; — numer telefonu; — miejscowość; — oddział lub paczkomat Nowej Poczty; — sposób dostawy; — sposób płatności; — komentarz do zamówienia; — kod promocyjny; — skład zamówienia; — łączna kwota; — przycisk potwierdzenia zamówienia. Trzeba również przewidzieć powiadomienie o pomyślnym złożeniu zamówienia. Wyszukiwanie na stronie. Trzeba opracować: — pasek wyszukiwania; — podpowiedzi podczas wpisywania; — popularne zapytania; — produkty w wynikach; — kategorie w wynikach; — stronę wyników wyszukiwania; — powiadomienie, jeśli nic nie znaleziono. Ulubione. Trzeba opracować stronę ulubionych produktów z możliwością: — przeglądania zapisanych produktów; — usuwania produktów; — dodawania produktów do koszyka; — kontynuowania zakupów. Strony informacyjne. Trzeba opracować design stron: — dostawa i płatność; — gwarancja; — wymiana i zwroty; — o sklepie; — kontakty; — polityka prywatności; — publiczna oferta; — popularne pytania. Strona kontaktów. Trzeba przewidzieć: — numer telefonu; — adres e-mail; — godziny otwarcia; — komunikatory; — media społecznościowe; — formularz kontaktowy; — informacje prawne o sklepie. Dolna część strony. Trzeba całkowicie opracować stopkę strony. W stopce powinny być: — logo; — krótka informacja o sklepie; — katalog; — popularne kategorie; — informacje dla klientów; — dostawa i płatność; — wymiana i zwroty; — kontakty; — godziny otwarcia; — media społecznościowe; — metody płatności; — informacje prawne; — polityka prywatności; — publiczna oferta. Strony i powiadomienia systemowe. Trzeba przewidzieć design takich stanów: — produkt dodany do koszyka; — produkt dodany do ulubionych; — błąd wypełnienia formularza; — produkt niedostępny; — pusty koszyk; — puste ulubione; — nic nie znaleziono; — strona 404; — pomyślne złożenie zamówienia; — błąd płatności; — ładowanie strony; — powiadomienie o używaniu plików cookie. System designu. Trzeba stworzyć jednolitą system designu, która będzie obejmować: — kolory; — czcionki; — nagłówki; — przyciski; — pola wprowadzania; — karty produktów; — ikony; — odstępy; — okna modalne; — powiadomienia; — stany aktywne i nieaktywne; — stany najechania; — komponenty mobilne. Wszystkie elementy powinny być zaprojektowane jako komponenty w Figma. Grupa docelowa: Klienci z Ukrainy, którzy szukają produktów do domu, samochodu, dzieci, elektroniki, prezentów i przydatnych gadżetów. Znaczna część użytkowników przechodzi na stronę z reklamy Facebook i Instagram. Przeważnie korzystają ze smartfonów i mogą po raz pierwszy zobaczyć markę ROBO. Dlatego strona powinna: — szybko się ładować; — budzić zaufanie; — jasno pokazywać zalety produktu; — nie obciążać użytkownika; — upraszczać składanie zamówienia; — dobrze wyglądać na różnych rozmiarach ekranu; — motywować użytkownika do zakupu produktu. Wymagania dla projektanta: — doświadczenie w projektowaniu sklepów internetowych; — doświadczenie w tworzeniu sprzedażowych stron produktów; — zrozumienie UI/UX; — zrozumienie mobilnej adaptacji; — umiejętność pracy w Figma; — zrozumienie zachowań użytkowników, którzy przechodzą z reklamy; — portfolio z podobnymi pracami; — gotowość do argumentowania zaproponowanych rozwiązań; — możliwość wprowadzenia poprawek po prezentacji designu. Oczekiwany rezultat: — pełny design sklepu internetowego w Figma; — wersja komputerowa; — wersja mobilna; — design wszystkich głównych stron; — design głównych stanów systemowych; — komponenty i system designu; — klikalny prototyp głównych stron; — zrozumiała struktura pliku; — przygotowanie makiet do przekazania programiście; — wskazane rozmiary, odstępy, czcionki, kolory i stany elementów. Programowanie i kodowanie na tym etapie nie są potrzebne. Potrzebny jest pełny projekt UI/UX w Figma. W odpowiedzi na projekt

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