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

Konieczne jest opracowanie nowoczesnej korporacyjnej strony internetowej-katalogu dla firmy zajmującej się produkcją i sprzedażą okien z metalu i plastiku. Główna grupa docelowa: deweloperzy; firmy budowlane; architekci; projektanci; klienci korporacyjni. Jako punkt odniesienia w stylu i poziomie wykonania można wykorzystać stronę: https://pravilnieokna.com.ua/ Nowa strona nie powinna być kopią. Potrzebny jest unikalny design z naciskiem na współpracę z klientami B2B. Wymagana realizacja: nowoczesny responsywny design; wygodny katalog produktów; sekcja „O firmie”; sekcja „Produkcja”; sekcja „Dla deweloperów”; sekcja „Zrealizowane projekty”; sekcja „Certyfikaty”; strona „Kontakt”; formularze kontaktowe; formularz wysyłki projektu lub specyfikacji z możliwością załączenia plików; podstawowa optymalizacja SEO; wygodny system zarządzania stroną (preferowane WordPress lub inne nowoczesne rozwiązanie). Strona powinna wyglądać nowocześnie, działać szybko i budzić zaufanie u dużych klientów. Proszę o podanie w odpowiedzi: kosztu opracowania; terminów realizacji; na jakiej CMS lub technologii będzie opracowana strona; co wchodzi w koszt; przykłady podobnych prac (obowiązkowo); propozycje dotyczące poprawy struktury i funkcjonalności. Priorytet będą mieli wykonawcy z doświadczeniem w opracowywaniu stron korporacyjnych i katalogów B2B.

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

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.