MAGNAR nie potrzebował wyłącznie nowej strony. Potrzebował systemu, który pokaże, że firma nie tylko dostarcza pracowników, ale projektuje warunki, w których ludzie i produkcja mogą działać stabilnie.
MAGNAR działa w kategorii, w której wiele firm komunikuje podobny zakres usług: rekrutację, leasing pracowniczy, outsourcing, legalizację, transport i zakwaterowanie. Sama lista usług szybko staje się niewystarczająca. Jeśli marka opisuje się wyłącznie przez katalog możliwości, zaczyna być porównywana przede wszystkim przez cenę, liczbę kandydatów albo deklarowane tempo dostarczenia ludzi.
Tymczasem rzeczywista wartość współpracy znajduje się szerzej. Klient biznesowy chce wiedzieć, czy partner rozumie rytm zakładu, potrafi skalować zespoły, zabezpiecza formalności i bierze odpowiedzialność także po rozpoczęciu pracy. Kandydat chce dostać odpowiedź na zupełnie inne pytania: czy oferta jest prawdziwa, czy umowa będzie zrozumiała, czy wypłata przyjdzie na czas, czy mieszkanie jest przygotowane i czy po przyjeździe ktoś rzeczywiście odbierze telefon.
Próba opowiedzenia obu historii na jednej klasycznej stronie prowadziłaby do kompromisu. Język byłby zbyt korporacyjny dla kandydatów, a jednocześnie zbyt ogólny dla biznesu. Dlatego projekt od początku wymagał rozdzielenia narracji bez rozdzielania marki.
Strony agencji rekrutacyjnych często pełnią kilka funkcji jednocześnie. Są katalogiem usług, bazą ofert pracy, centrum treści SEO, formularzem leadowym i wizytówką korporacyjną. Taka szerokość jest funkcjonalna, ale często skutkuje rozbudowanym menu, dużą liczbą równorzędnych komunikatów i wizualnym językiem opartym na przewidywalnych fotografiach ludzi w biurze, hali albo magazynie.
MAGNAR potrzebował innej pozycji. Firma nie miała wyglądać jak największy portal rekrutacyjny ani udawać skali większych konkurentów. Miała wyglądać jak wyspecjalizowany i odpowiedzialny operator, który rozumie przemysł, prowadzi proces i potrafi zbudować model współpracy możliwy do powtarzania.
Najważniejszy cel można opisać prostym scenariuszem. Potencjalny klient ma otwarte trzy karty: MAGNAR oraz strony dwóch znacznie większych firm. Serwis MAGNAR nie miał udawać, że dysponuje ich liczbą oddziałów, ofert czy publikacji. Miał natomiast sprawić, aby mniejsza marka nie została zamknięta automatycznie po pierwszym spojrzeniu.
Warunkiem pozostania w porównaniu było natychmiastowe pokazanie dojrzałości: własnego punktu widzenia, rozumienia przemysłu, konkretnego procesu, doświadczenia, międzynarodowego zasięgu i spójnego systemu. Strona miała zdobyć dla MAGNAR prawo do następnych minut uwagi i do kolejnej rozmowy.
Celem nie było wyglądać na największą agencję. Celem było nie wyglądać przy największych jak firma przypadkowa, lokalna albo niegotowa do odpowiedzialnego prowadzenia złożonego procesu.
Główne pytanie projektowe: jak pokazać, że MAGNAR nie tylko znajduje ludzi, lecz projektuje warunki, w których ludzie i produkcja mogą działać stabilnie?
| Obszar | Finalny zakres |
|---|---|
| Architektura marki | CORE + DLA BIZNESU + DLA KANDYDATA |
| Ekrany | 8 + 8 + 7 = 23 |
| Języki | 14 aktywnych wersji |
| Adresy SEO | 42 finalne URL-e |
| Technologia | statyczny HTML, CSS i JavaScript + generator i18n |
| Typografia | lokalne Manrope, IBM Plex Mono oraz zakresy Georgian i Devanagari |
| Formularze | biznesowy i kandydacki, pełna walidacja i stany interfejsu |
| Produkcja | sitemap, robots, canonical, hreflang, Open Graph, JSON-LD, Privacy / RODO |
Odpowiedzią na problem pozycjonowania stała się idea systemu. MAGNAR nie kończy pracy na rekrutacji. Łączy geografię pozyskania kandydatów, selekcję, legalizację, logistykę, zakwaterowanie, start w zakładzie i późniejsze wsparcie koordynatora. Wspólnym mianownikiem tych działań jest odpowiedzialność za ciągłość.
Z tej obserwacji powstało hasło BUILD WHAT LASTS. Nie opisuje ono pojedynczej usługi. Definiuje sposób myślenia o pracowniku, kliencie i procesie. Marka nie obiecuje jednorazowego „dostarczenia zasobu”, lecz budowę zespołów, które mają szansę pozostać stabilne.
Ludzie. Kandydat nie jest rekordem w bazie. Potrzebuje informacji, bezpieczeństwa i wsparcia także po godzinach. Dlatego ścieżka kandydacka nie została potraktowana jako uproszczony formularz aplikacyjny. Została zaprojektowana jako odpowiedź na konkretne niepewności związane z wyjazdem, zakwaterowaniem, pierwszym dniem pracy i codziennym kontaktem.
Technologia i proces. Skala wymaga danych, powtarzalnych etapów, kontroli statusu i jasnej odpowiedzialności. W części biznesowej marka nie mówi tylko, że jest „kompleksowa”. Pokazuje, jak wygląda planowanie, projektowanie, wyszukiwanie, dopasowanie i finalizacja współpracy.
Odpowiedzialność. Wartość partnera ujawnia się nie w chwili podpisania umowy, lecz wtedy, gdy pojawia się problem w dokumentach, transporcie, mieszkaniu albo wdrożeniu. Dlatego odpowiedzialność musiała być obecna zarówno w treści, jak i w zachowaniu interfejsu.
Warstwa marki została oparta na konkretnych liczbach i strukturach, a nie tylko na deklaracjach. CORE pokazuje 24 lata doświadczenia, ponad 200 partnerów, ponad 550 pracowników w strukturach, bazę 10 tysięcy kandydatów, osiem rynków rekrutacji, ponad 750 projektów oraz siedem tysięcy zatrudnionych osób.
Część biznesowa prowadzi komunikację przez 90% retencji, trzy modele współpracy, szczegółowy proces oraz pięcioetapową legalizację. Część kandydacka przekłada obietnicę odpowiedzialności na pierwsze 48 godzin, standard zakwaterowania, orbitę wsparcia i dziesięć konkretnych pytań FAQ.
Liczby nie zostały dodane jako dekoracyjne badge’e. Każda z nich pełni funkcję dowodu. Pokazuje skalę, etap procesu albo zakres odpowiedzialności, który marka jest gotowa przejąć.
Równolegle do strony rozwijane były elementy szerszego ekosystemu: dziesięcioekranowy Company Profile oraz MAGNAR Standard, czyli dokument porządkujący sposób działania zespołu. Dzięki temu słowo „standard” nie zostało pustym terminem marketingowym. Zaczęło łączyć komunikację zewnętrzną z wewnętrznym sposobem pracy.
W tym sensie projekt strony stał się narzędziem porządkowania marki. Zmuszał do odpowiedzi na pytania: co dokładnie obiecujemy, komu, na jakim etapie procesu i za co bierzemy odpowiedzialność? Dopiero po uzyskaniu tych odpowiedzi można było zaprojektować język wizualny, który nie będzie jedynie atrakcyjną obudową.
CORE buduje rozpoznanie i wyjaśnia system. DLA BIZNESU zamienia markę w argument operacyjny. DLA KANDYDATA zamienia tę samą odpowiedzialność w jasne, codzienne informacje. Rozdzielenie pozwoliło dopasować słownictwo, skalę szczegółu i emocje bez tworzenia trzech niezależnych marek.
HERO pokazuje 24 lata doświadczenia, tezę marki i wybór ścieżki Biznes/Kandydat. 360° łączy geografię rekrutacji, legalizację, logistykę i start w zakładzie w jeden proces. LICZBY pokazują dowody skali zamiast kolejnej deklaracji jakości. SEKTORY porządkują logistykę i magazyny, produkcję i przemysł oraz specjalistów technicznych.
PARTNERZY wizualizują ekosystem współpracy. OPINIE pokazują perspektywę klienta i pracownika; treści demonstracyjne są jawnie oznaczone. EPILOG wykorzystuje cytat Taiichiego Ohno, aby spiąć ideę standardu i doskonalenia. KONTAKT rozdziela intencję na rozmowę biznesową albo ścieżkę pracownika.
Ścieżka zaczyna się od RETENCJI. Wynik 90% otwiera narrację, a trzy filary — proces, spektrum i geografia — tłumaczą, skąd bierze się stabilność. SPEKTRUM prezentuje leasing pracowniczy, rekrutację stałą i model RPO.
PROCES prowadzi przez planowanie, projektowanie, wyszukiwanie, dopasowanie i finalizację. GEOGRAFIA pokazuje kierunki Europy Wschodniej oraz Azji Centralnej i Południowo-Wschodniej. LEGALIZACJA przedstawia pięć kontrolowanych etapów: od weryfikacji punktu wyjścia, przez dobór procedury i dokumentację, po monitoring urzędowy oraz nadzór nad ciągłością zatrudnienia.
WZROST otwiera system na partnerów rozwoju biznesu i partnerów rekrutacyjnych. EPILOG przypomina za pomocą cytatu Deminga, że dobrego człowieka może pokonać zły system. KONTAKT łączy formularz z bezpośrednimi danymi biznesowymi i rejestrowymi.
Ta ścieżka rozpoczyna się od ZASAD: legalności, przejrzystości, bezpiecznych warunków i realnego wsparcia zamiast ogólnych obietnic. PIERWSZE 48H prowadzi przez odbiór, transport, odpoczynek, dokumenty, szkolenie i start w pracy.
JAK MIESZKAMY opisuje logistykę, koszty, wyposażenie oraz możliwość wspólnego zakwaterowania par. WSPARCIE pokazuje pomoc w pracy i w codziennych sprawach po godzinach. FAQ odpowiada na dziesięć pytań dotyczących dokumentów, wypłaty, języka, choroby, odzieży, zaliczki, urlopów, nadgodzin, zmiany pracy i mieszkania.
EPILOG wykorzystuje cytat Martina Luthera Kinga i wzmacnia temat godności pracy. KONTAKT jest krótkim formularzem dopasowanym do danych potrzebnych na początku rozmowy.
Treść B2B została zbudowana wokół przewidywalności, odpowiedzialności i procesu. Zamiast powtarzać, że firma jest „kompleksowa i elastyczna”, strona pokazuje etapy, kryteria i zakres przejmowanych obowiązków.
Treść dla kandydatów odpowiada na pytania pojawiające się przed wyjazdem i po przyjeździe. „Pierwsze 48H” rozpoczyna się od odbioru z lotniska lub dworca. „Jak mieszkamy” mówi o kluczach, kuchni, Wi-Fi, kosztach i braku kaucji. FAQ nie unika pytań o pierwszą wypłatę, zaliczkę, pomoc w nocy czy zmianę miejsca pracy.
Transparentność stała się częścią propozycji wartości. Kandydat nie ma być przekonywany dużą obietnicą. Ma dostać informacje pozwalające podjąć świadomą decyzję.
Treść i layout były projektowane razem. Oznaczało to skracanie fragmentów, które traciły rytm, dzielenie tytułów na kontrolowane linie oraz zmianę proporcji pól tam, gdzie język potrzebował więcej miejsca. Przykładem była filipińska wersja opisu mieszkania: zbyt długie zdanie nachodziło na kolejny moduł, więc treść została skrócona bez utraty sensu.
Projekt nie rozpoczął się od jednego gotowego stylu. Testowane były kierunki filmowe, japońskie, typograficzne, korporacyjne, plakatowe i blueprintowe. Powstawały warianty oparte na dużych liczbach, asymetrycznej kompozycji, tabelach, ilustracjach, polach danych i bardziej klasycznych układach.
Celem nie było wyprodukowanie wielu podobnych makiet. Chodziło o sprawdzenie, jaki rodzaj obrazu najlepiej pasuje do prawdziwej natury firmy. Niektóre warianty były atrakcyjne wizualnie, ale nie budowały właściwego znaczenia. Inne dobrze porządkowały dane, lecz wyglądały jak dashboard lub generyczny raport korporacyjny. Jeszcze inne działały jako pojedynczy plakat, ale nie tworzyły systemu zdolnego obsłużyć 23 ekrany i długie tłumaczenia.
Każdy kierunek ocenialiśmy według pięciu pytań:
Wybrany kierunek łączy dwa światy. Z przemysłu bierze siatkę, numerację, punkty pomiarowe, rejestry, schematy, linie konstrukcyjne i język procesu. Z projektowania editorial bierze skalę typografii, rytm białej przestrzeni, świadomą asymetrię, cytaty, folio i dramaturgię kolejnych ekranów.
Efektem jest system przypominający jednocześnie dokumentację techniczną, plakat modernistyczny i cyfrowy raport operacyjny. Taki charakter odróżnia MAGNAR od typowego języka HR, ale nie zamienia strony w eksperyment artystyczny oderwany od celu.
Projekt miał wyglądać jak firma, która potrafi zaprojektować proces, a nie jak firma, która kupiła gotowy motyw WordPressa.
System został zbudowany na trzech kolorach.
Cream — #F0EDE6. Ciepła, papierowa baza łagodzi techniczny charakter i wprowadza ludzki ton. Dzięki niej layout nie staje się zimnym panelem operacyjnym.
Navy — #0D1B2E. Kolor konstrukcji, odpowiedzialności i przemysłu. Zastępuje banalną korporacyjną czerń lub niebieski HR.
Gold — #D4920A. Akcent sygnałowy. Oznacza aktywne punkty, ważne etapy, energię i ruch w systemie.
Ograniczenie palety nie było oszczędnością produkcyjną. Było decyzją o rozpoznawalności. Dzięki temu zróżnicowane ekrany — od liczb przez FAQ po legalizację — nadal należą do jednej marki.
Manrope odpowiada za duże komunikaty, liczby i tytuły. Jest współczesny, geometryczny i wystarczająco neutralny, aby unieść zarówno język B2B, jak i komunikację kandydacką.
IBM Plex Mono pełni funkcję warstwy operacyjnej. Pojawia się w numeracji, statusach, opisach technicznych, tickerach i danych rejestrowych. Kontrast pomiędzy fontem display a krojem monospaced tworzy hierarchię znaczeń. Manrope mówi: „to jest główna idea”. IBM Plex Mono mówi: „to jest część systemu, parametr albo instrukcja”.
Wersje gruzińska i hindi wymagały dodatkowych lokalnych zakresów fontów. Dodano ograniczony fallback Georgian oraz Devanagari, tak aby znaki były czytelne, a łacińskie elementy MAGNAR zachowały pierwotną typografię.
Linie konstrukcyjne nie są ramką dekoracyjną. Organizują ekran, wskazują relacje między polami, prowadzą wzrok i wizualizują proces budowania. Celowniki w narożnikach sugerują punkt odniesienia i kontrolę jakości. Dolny rail z nazwą, numerem i tytułem ekranu działa jak oznaczenie arkusza dokumentacji.
Ta metafora wymagała szczególnej dyscypliny technicznej. Brak jednej dolnej linii, przesunięty celownik albo napis nachodzący na konstrukcję natychmiast wyglądały jak błąd systemu, a nie drobna niedokładność.
Każdy ekran otrzymał numer i jednoznaczną nazwę. Pionowa numeracja po prawej pozwala zrozumieć długość doświadczenia i miejsce użytkownika. Ticker u góry pełni jednocześnie funkcję identyfikacji marki, lokalnej nawigacji i przełącznika języków.
Spójność nie wynika jednak z kopiowania jednego layoutu. „Liczby” korzystają z kompozycji danych, „Sektory” ze skanowania tekstu, „Partnerzy” z pola znaków, „Geografia” z mapy kierunków, „Legalizacja” z rejestru pięciu etapów, „Pierwsze 48H” z osi czasu, „Jak mieszkamy” z modułów standardu socjalnego, a „Wsparcie” z układu orbitalnego.
W tej identyfikacji ruch nie miał jedynie podnosić atrakcyjności. Miał pokazywać, że system jest uruchamiany etapami. Linie powstają, dane się porządkują, moduły zajmują miejsce, a główny komunikat pojawia się dopiero po zbudowaniu kontekstu.
Zamiast animować wszystko naraz, projekt wykorzystuje sekwencję uwagi. Użytkownik najpierw rozpoznaje markę, potem skalę, następnie wybór ścieżki, a dopiero na końcu pełną deklarację.
Pierwszy ekran CORE został zaprojektowany jak krótka scena otwierająca:
Tempo było wielokrotnie korygowane. Wczesne wersje zbyt szybko przechodziły od boxów do tekstu. Pomiędzy zdarzeniami brakowało oddechu, przez co animacja wyglądała jak automatyczna prezentacja, a nie świadoma reżyseria uwagi.
Najważniejsze animacje nie korzystają z jednego efektu powielanego na wszystkich ekranach. Każdy ekran otrzymał własny czasownik: HERO buduje, „MAGNAR w liczbach” mierzy, „Sektory” skanują, „Partnerzy” pozycjonują, „Geografia” przyciąga, a „Orbita wsparcia” pozostaje w ciągłym obiegu.
Dzięki temu ruch nie jest warstwą dodaną po zakończeniu projektu. Staje się sposobem wyjaśniania, czym zajmuje się marka.
Na ekranie SEKTORY pionowa linia skanera przechodzi przez wyróżniony moduł „Logistyka i magazyny”. Nie podświetla całego akapitu. Reaguje dokładnie wtedy, gdy dociera do nazw konkretnych ról, między innymi pickerów i personelu magazynowego.
Podświetlenie jest zsynchronizowane z rzeczywistym położeniem słów, dlatego efekt pozostaje poprawny również wtedy, gdy tłumaczenie zmienia długość zdania i miejsce łamania wiersza.
To drobny efekt, ale niesie kilka poziomów znaczenia. Dosłownie odwołuje się do skanera magazynowego używanego przy kompletowaniu zamówień. Metaforycznie pokazuje rekrutację jako proces wykrywania właściwych kompetencji w większym zbiorze informacji. MAGNAR nie „przerzuca CV”. Identyfikuje element, który pasuje do określonego miejsca w systemie.
Dla właściciela fabryki, kierownika logistyki albo dyrektora operacyjnego ten kod może być zauważalny jeszcze przed świadomym opisaniem jego znaczenia. Skanowanie, detekcja, oznaczenie i potwierdzenie są częścią codziennych procesów przemysłowych. Strona mówi więc językiem kontroli jakości i przepływu materiału, ale wykorzystuje go do opowiedzenia o ludziach.
Typowa sekcja liczb w serwisie B2B składa się z równych kart ułożonych w regularnej siatce. Taki układ jest czytelny, ale wszystkie dane zaczynają wyglądać tak samo, a odbiorca rozpoznaje gotowy komponent, zanim przeczyta jego zawartość.
W MAGNAR sześć dowodów skali zostało rozmieszczonych na nieregularnej linii przypominającej warstwicę, wykres procesu lub ślad pomiarowy. Wokół głównej złotej trajektorii powstają subtelne linie pomocnicze, a kolejne wartości pojawiają się jako punkty kalibracyjne.
Złamanie symetrii nie oznacza chaosu. Wszystkie punkty należą do jednego przebiegu, mają wspólny kierunek i pozostają spięte tą samą geometrią. Liczby nie są sześcioma niezależnymi medalami, lecz parametrami jednego systemu: doświadczenia, bazy kandydatów, partnerów, rynków rekrutacji, projektów i zatrudnionych osób.
Ekran PARTNERZY wykorzystuje inny rodzaj ruchu. Słowo rozpoczyna drogę wysoko ponad właściwym położeniem, opada do środka kompozycji, minimalnie przekracza punkt docelowy, wraca i dopiero po kilku coraz mniejszych korektach stabilizuje się dokładnie na osi.
To nie jest zwykły fade-in ani lekki bounce. Timing i tłumienie nadają typografii odczuwalną masę. Ruch może kojarzyć się z pozycjonowaniem ciężkiego elementu przez suwnicę, montażem modułu albo osadzaniem części w przygotowanym miejscu. Najważniejszy nie jest sam moment spadania, lecz precyzyjne wyśrodkowanie na końcu.
Naturalnym rozwiązaniem dla komunikacji międzynarodowej byłaby mapa z zaznaczonymi krajami. Jest funkcjonalna, ale przewidywalna i szybko redukuje opowieść do administracyjnych granic. MAGNAR zastąpił ją polem magnetycznym.
Polska staje się punktem operacyjnym, a rynki rekrutacji zostają rozmieszczone na liniach oddziaływania. Łuki nie pokazują wyłącznie odległości. Sugerują zasięg, przyciąganie, przepływ oraz możliwość prowadzenia wielu kierunków w ramach jednego pola odpowiedzialności.
Tytuł GEOGRAFIA przychodzi z prawej strony, a dwa bloki kierunków rekrutacji wchodzą z lewej i spotykają się wokół centralnego pola. Ruch z przeciwnych stron materializuje rolę MAGNAR jako punktu, który łączy rozproszone rynki z jednym miejscem operacyjnym.
Na stronie DLA KANDYDATA wsparcie zostało pokazane jako układ orbitalny. Złoty punkt zbliża się do wybranego miejsca, przechodzi przez bramkę i rozpoczyna ciągły ruch wokół centralnego słowa WSPARCIE. Kiedy znajduje się w pobliżu treści, lokalnie ją rozświetla.
Orbita symbolizuje ciągłość i dostępność. W klasycznym lejku rekrutacyjnym kandydat przechodzi od aplikacji do zatrudnienia, a proces wizualnie się kończy. Tutaj ruch nie ma końcowego punktu. Wsparcie pozostaje w obiegu pomiędzy obszarem „w pracy” i „po godzinach”.
Koordynator pomaga zarówno podczas wdrożenia i kontaktu z przełożonym, jak i w sprawach lekarza, urzędu, transportu czy nagłej sytuacji poza zmianą. Abstrakcyjne słowo „opieka” zostało więc przełożone na prosty, czytelny model zachowania.
Pełne intro nie powinno odtwarzać się przy każdym powrocie. Męczyłoby użytkownika i niszczyłoby wrażenie ciągłości. Wprowadzono dwa stany:
Stan jest pamiętany w sessionStorage. Dzięki temu ruch zachowuje dramaturgię przy pierwszym kontakcie, ale nie karze użytkownika za nawigowanie po serwisie.
Ekrany kontaktowe ujawniły jeden z najtrudniejszych problemów technicznych. Kolejne wersje animacji zostały zapisane w kilku miejscach, więc linia zaczynała rysować się równocześnie z dwóch albo trzech punktów. Czasami startowała od połowy, kończyła przed dojściem do krawędzi albo uruchamiała się ponownie po reloadzie w niewłaściwym stanie.
Naprawa nie polegała na kolejnym przesunięciu współrzędnych. Najpierw usunięto wszystkie lokalne silniki animacji kontaktu. Następnie zbudowano jeden wspólny kontroler w common.js, który na podstawie geometrii rzeczywistych elementów wyznacza trasę dla każdej z trzech części.
Trasa CORE prowadzi od dolnego lewego punktu konstrukcji, następnie w górę, w prawo, ponownie w górę i w prawo. Trasa Biznes/Kandydat zaczyna się w lewym górnym rogu właściwego boxu kontaktowego, prowadzi w dół, w prawo, w górę, w lewo, ponownie w górę i w lewo.
Po narysowaniu pełna linia pozostaje na ekranie przez trzy sekundy, a następnie znika. Jednokierunkowa maszyna stanów idle → drawing → holding → finished uniemożliwia ponowne uruchomienie w tym samym cyklu.
prefers-reduced-motion musi pozostawić kompletną, czytelną kompozycję.Projekt rozwijał się przez szybkie prototypy HTML, a nie statyczny zestaw makiet. Pozwalało to oceniać nie tylko wygląd, ale także realne zachowanie na ekranie, timing animacji, scroll, długość tekstu, przejścia i proporcje przy zmianie viewportu.
Ta metoda była skuteczna, ale miała koszt. Kolejne poprawki potrafiły zostawić stare reguły CSS, alternatywny listener albo lokalny wariant animacji. Dlatego proces został podzielony na fazy eksploracji, konsolidacji, zamrożenia designu, a dopiero później funkcjonalności i produkcji.
Niektóre decyzje zapadły przez odrzucenie. Koncepcja „The Wall” dla liczb była zbyt plakatowa i nie tworzyła wystarczającej hierarchii danych. Pierwsze wersje ekranu „Jak mieszkamy” wyglądały jak powtórzenie wcześniejszych kart albo nie dawały dobrego miejsca dla długich opisów. Epilog DLA BIZNESU początkowo nie trzymał proporcji CORE i Kandydata, a kontakt w części kandydackiej i filipińskiej wielokrotnie tracił proporcje.
Odrzucanie nie było porażką. Pozwalało zrozumieć granice systemu: ile tekstu może unieść pole, kiedy asymetria staje się przypadkowa i które elementy muszą pozostać wspólne.
Po ustaleniu finalnych kompozycji wprowadzono zasadę nienaruszalności. Kolejne etapy nie mogły zmieniać designu, typografii, kolorów, responsive ani zaakceptowanego motion. Dzięki temu i18n, refaktor, formularze, SEO i Privacy / RODO były traktowane jako warstwy techniczne, a nie pretekst do ponownego projektowania.
Ta decyzja była kluczowa. Bez design freeze każda poprawka funkcjonalna mogłaby ponownie otworzyć dyskusję o proporcjach i prowadzić do nieskończonej pętli wersji.
Projekt powstawał od dużego ekranu, ponieważ jego język opiera się na relacji pól, linii i dużej typografii. Responsive nie mógł polegać na mechanicznym zmniejszeniu wszystkiego. Na laptopie trzeba było zachować napięcie kompozycji, a na mobile przestawić kolejność modułów i pozwolić ekranom rosnąć pionowo.
Najczęstsze problemy dotyczyły tytułów wchodzących na prawą numerację, długich słów w języku niemieckim i niderlandzkim, formularzy wypadających poniżej stopki, linii CTA przycinanych przez overflow oraz tabletowego układu czterokolumnowego, który stawał się zbyt ciasny.
Strategia breakpointów była następująca:
Finalne kontrole objęły między innymi rozdzielczości 2560 × 1440, 1920 × 1080, 1600 × 900, 1440 × 900, 1366 × 768, 1024 × 768, tablet 820 × 1180 oraz mobile 390 × 844 i 320 × 568.
Pierwszy naturalny pomysł — osobny HTML dla każdego języka — szybko prowadziłby do 42 kopii. Każda poprawka linku, formularza, animacji albo stopki musiałaby być wykonana kilkadziesiąt razy. Przy takiej skali wersje prędzej czy później zaczęłyby się różnić.
Finalna architektura zachowuje tylko trzy szablony: index.html, dla-biznesu.html i dla-kandydata.html. Treści znajdują się w zasobach JSON podzielonych na warstwę wspólną oraz osobne zasoby CORE, Business i Candidate.
Generator tworzy z nich 42 statyczne strony w katalogu dist/. Wyszukiwarka otrzymuje pełny HTML w konkretnym języku, a zespół nadal utrzymuje tylko trzy layouty.
Polski, angielski, niemiecki, białoruski, ukraiński, rumuński, gruziński, rosyjski, kazachski, wietnamski, filipiński, niderlandzki, hindi i indonezyjski.
Pełna lista języków nie mogła stale zajmować tickera. Dwa główne kody pozostają widoczne, a pozostałe otwierają się w warstwie +12. Po otwarciu menu prawa numeracja ekranów delikatnie znika, dzięki czemu oba systemy nie nakładają się na siebie. Po wyborze albo zamknięciu menu numeracja wraca bez przesunięcia layoutu.
Zmiana języka zachowuje aktualną sekcję. Użytkownik czytający legalizację trafia na legalizację w nowym języku, a nie na HERO. Zmiana języka zachowuje także aktualny hash, więc użytkownik pozostaje na odpowiadającym mu ekranie.
Największa praca nie polegała na wstawieniu tłumaczeń, lecz na utrzymaniu jakości kompozycji. Niemiecki wydłużał etykiety Biznes i Kontakt. Gruziński wymagał osobnego fontu i korekty optycznej dużych tytułów. Rosyjski, kazachski i ukraiński wymagały kontroli cyrylicy i długich słów. Wietnamski wymagał lokalnych zakresów fontów z pełną diakrytyką.
Hindi wymagało osobnego kroju Devanagari i wyłączenia letter-spacing dla tłumaczonych elementów. Filipiński tworzył wyjątkowo długie zdania w modułach kandydackich. Niderlandzkie ONDERSTEUNING kolidowało z prawą numeracją i wymagało korekty pozycji.
Build klasyfikuje długie tytuły CTA i dodaje im kontrolowane klasy i18n-long oraz i18n-extra-long. Pozostałe wyjątki pozostają lokalne i są stosowane tylko wtedy, gdy długość lub alfabet rzeczywiście tego wymagają.
Raport buildu wykrywa brakujące klucze i użycie fallbacku. Kolejność to język żądany, następnie angielski i polski. Nierozwiązany klucz zatrzymuje build. Chroni to stronę przed publikacją z pustym przyciskiem albo nieprzetłumaczonym formularzem.
W osobnym etapie sprawdzono wszystkie przejścia CORE ↔ Biznes ↔ Kandydat, logo, linki do sekcji, telefony, e-maile, CTA i elementy stopki. Usunięto sytuacje, w których element wyglądał jak przycisk, ale nie miał działania. Linki językowe są generowane relatywnie do finalnej trasy, dzięki czemu działają także w lokalnym podglądzie.
Powstały dwa formularze: dla biznesu oraz dla kandydata. Każdy ma stan startowy, brak wymaganych danych, błędny e-mail, błędny telefon, wysyłanie, sukces i błąd. Komunikaty są dostępne we wszystkich 14 językach.
Przycisk zostaje czasowo zablokowany po wysłaniu, co zabezpiecza przed przypadkowym wielokrotnym uruchomieniem. Status korzysta z aria-live, a pierwsze błędne pole otrzymuje fokus i aria-invalid.
W aktualnym statycznym buildzie formularze przygotowują wiadomość mailto: do biuro@magnar.com.pl i nie przekazują danych bezpośrednio na serwer. Jest to świadomy, lekki model kontaktu tej wersji serwisu.
Panel Privacy / RODO można zamknąć przyciskiem, kliknięciem tła albo klawiszem Escape. Fokus pozostaje wewnątrz dialogu, a po zamknięciu wraca do przycisku otwierającego. Dłuższa treść ma własne przewijanie, a mechanizm respektuje prefers-reduced-motion.
Szybkie iteracje stworzyły ryzyko duplikacji. Podobne style kontaktu istniały w kilku plikach, media queries nakładały się na siebie, a stare wersje animacji mogły pozostawać aktywne razem z nowymi. Refaktor został przeprowadzony dopiero po zamrożeniu designu, ponieważ wcześniej kod musiał wspierać eksperymenty.
Finalna odpowiedzialność plików wygląda następująco:
common.css — fonty, tokeny, elementy współdzielone, kontakt i panel prywatności;core.css, biznes.css, kandydat.css — lokalne kompozycje i wyjątki właściwe danej części;common.js — formularze, wspólna animacja kontaktu, panel RODO i wspólne kontrolery;core.js, biznes.js, kandydat.js — motion i zachowanie specyficzne dla narracji;i18n.js — przełącznik języka, payload i zachowanie aktualnej sekcji.Najważniejszym rezultatem był jeden silnik animacji kontaktu zamiast kilku konkurujących implementacji, jeden kontroler obu formularzy z konfiguracją pól, usunięcie starych elementów SVG/canvas i listenerów oraz ujednolicenie stopki i dolnych linii konstrukcyjnych.
Kryterium sukcesu refaktoru było proste: po zmianie kod jest prostszy, ale użytkownik nie widzi różnicy.
Kontrola objęła wszystkie 42 wygenerowane strony. Sprawdzano linki, CTA, logo, telefony i e-maile, przejścia między częściami i sekcjami, zmianę języka i zachowanie hasha, formularze i wszystkie stany walidacji, brakujące zasoby i błędne ścieżki, duplikaty ID oraz przypadkowy horizontal overflow.
Kontrolowano także obecność tylko jednego silnika animacji kontaktu, prawidłowe podpisy dolnych arkuszy, komplet kluczy językowych oraz zachowanie panelu Privacy / RODO.
Polecenie npm run verify uruchamia walidację buildu, formularzy i panelu prywatności. Build jest akceptowany tylko wtedy, gdy wszystkie strony, zasoby i kluczowe kontrakty przejdą kontrolę.
Serwis nie korzysta z frameworka front-endowego ani zewnętrznych bibliotek runtime. Fonty są lokalne, a jedyna główna grafika WebP waży około 76 KB. CSS i JavaScript są rozdzielone na część wspólną oraz pliki lokalne. Łączny pakiet produkcyjny ZIP ma około 1,3 MB, a rozpakowany zestaw plików około 4,2 MB.
Brak zewnętrznych fontów, analityki, map, osadzonych wideo i bibliotek UI ogranicza liczbę requestów, ryzyko layout shift oraz zależność od usług trzecich.
Każda z 42 stron otrzymuje statycznie właściwy html lang, title i meta description, canonical w domenie https://www.magnar.com.pl, komplet 14 alternatyw hreflang oraz x-default, Open Graph, metadane Twitter i dyrektywę index,follow,max-image-preview:large.
Generator buduje sitemap.xml ze wszystkimi URL-ami oraz alternatywami językowymi. robots.txt wskazuje sitemapę i wyklucza katalogi techniczne, testowe i stagingowe. Główny techniczny redirect do polskiego CORE ma noindex,nofollow, dzięki czemu nie konkuruje z właściwą trasą /pl/.
Na stronach CORE dodano dane strukturalne EmploymentAgency z nazwą prawną, adresem, kontaktem i identyfikatorami NIP, KRS, REGON oraz KRAZ. Nie dodawano schematów tam, gdzie nie miały rzeczywistego zastosowania.
Informacja prawna miała być dostępna na ekranie KONTAKT, ale nie mogła rozbić kompozycji ani przenosić użytkownika na klasyczną, obcą stylistycznie podstronę. Powstał więc dyskretny przycisk PRYWATNOŚĆ / RODO w dolnym railu.
Panel otwiera się jako warstwa nad aktualnym ekranem, podobnie do menu językowego, lecz ma rozmiar odpowiedni do czytania i własny scroll. Nie przesuwa layoutu. Po zamknięciu użytkownik wraca dokładnie do poprzedniej pozycji i elementu fokusu.
Panel w 14 językach obejmuje administratora danych, dane spółki, pola formularzy, cele i podstawy przetwarzania, rekrutację, retencję, odbiorców, transfery, prawa użytkownika, dobrowolność podania danych, automatyzację, technologie oraz kontakt w sprawach prywatności.
Aktualny build nie używa analityki, pikseli reklamowych, profilowania, reCAPTCHA, zewnętrznych map, wideo ani usług osadzonych. localStorage zapisuje język dopiero po wyborze użytkownika, a sessionStorage pamięta stan animacji w bieżącej sesji. Dlatego nie dodano niepotrzebnego bannera cookies.
Pliki źródłowe: trzy szablony HTML dla CORE, DLA BIZNESU i DLA KANDYDATA; wspólne common.css, common.js i i18n.js; lokalne pliki CSS/JS dla każdej części; manifest języków i tras; zasoby JSON shared, core, business, candidate i privacy dla 14 języków; lokalne fonty; główna grafika WebP; skrypty build, ekstrakcji i weryfikacji.
Pliki produkcyjne: 42 statyczne strony językowe, root redirect z noindex,nofollow, sitemap.xml, robots.txt, wspólne zasoby CSS, JS, fonty i obraz oraz raport kompletności i18n.
Benchmark obejmował liderów kategorii — EWL Group, Personnel Service i LeasingTeam — oraz firmy bliższe MAGNAR profilem oferty i widoczną skalą komunikacji cyfrowej: Eurokadra, KRX Work, GDI i Hanza HR.
Porównanie nie ocenia jakości usług operacyjnych, wyników finansowych ani satysfakcji klientów. Analizuje sposób komunikowania oferty, prowadzenia odbiorców i budowania rozpoznawalności na podstawie publicznie dostępnych serwisów.
Duże serwisy wygrywają wolumenem treści, liczbą punktów wejścia z wyszukiwarki, bazą ofert i rozpoznawalnymi dowodami skali. MAGNAR buduje przewagę w inny sposób: przez zwartą architekturę trzech narracji, autorski industrial-editorial system, motion jako metaforę budowania i uruchamiania systemu, pełne 14 wersji językowych oraz komunikację kandydata opartą na redukcji niepewności.
MAGNAR nie przebija największych konkurentów liczbą ofert, artykułów, raportów ani automatyzacją leadów. Przewaga powstała w spójności idei, jakości art direction, rozdzieleniu potrzeb biznesu i pracownika oraz sposobie, w jaki proces operacyjny został zamieniony w doświadczenie marki.
W porównaniu z liderami serwis nie udaje równorzędności skali — buduje równorzędność uwagi.
Dla marki serwis nadaje MAGNAR rozpoznawalny język wizualny niezależny od stockowych kodów HR. Łączy ofertę, sposób działania i wartości pod jedną ideą BUILD WHAT LASTS. Tworzy także system możliwy do rozwijania w profile firmowe, prezentacje, raporty, artykuły i materiały wewnętrzne.
Dla biznesu pokazuje zakres odpowiedzialności bez zmuszania odbiorcy do czytania ogólnego katalogu usług. Wyjaśnia modele współpracy, proces, geografię i legalizację. Buduje obraz partnera rozumiejącego ciągłość produkcji i ryzyko operacyjne, a następnie prowadzi do bezpośredniej konsultacji.
Dla kandydata redukuje niepewność przed wyjazdem i rozpoczęciem pracy. Wyjaśnia pierwsze 48 godzin, zakwaterowanie i dostępne wsparcie. Odpowiada na konkretne, często niewygodne pytania i udostępnia pełną treść w językach odpowiadających głównym kierunkom rekrutacji.
Dla organizacji porządkuje ofertę i nazywa kolejne etapy procesu. Tworzy jedno źródło treści i layoutu dla 42 adresów. Wprowadza techniczną bramkę jakości przed publikacją i łączy treść, formularze, layout oraz system językowy w jednym uporządkowanym produkcie cyfrowym.
Wpływ serwisu na sprzedaż i zachowanie użytkowników będzie można opisać w osobnej aktualizacji, kiedy MAGNAR będzie dysponował rzeczywistymi danymi z działania strony. Obecna wersja dokumentuje ukończone rezultaty strategiczne, projektowe i techniczne.
System jest ważniejszy niż pojedynczy efektowny ekran. Najlepsze rozwiązanie nie było tym, które wyglądało najbardziej spektakularnie w izolacji. Wygrywało to, które dawało zasady dla kolejnych ekranów, języków i funkcji.
Motion wymaga reżyserii i architektury kodu. Dobry timing nie wystarczy, jeśli animacja ma kilka źródeł prawdy. Najtrudniejsze problemy kontaktu rozwiązano dopiero wtedy, gdy potraktowano je jako problem architektoniczny, a nie wyłącznie wizualny.
Wielojęzyczność jest częścią designu. Tłumaczenie nie jest ostatnią warstwą tekstu. Zmienia długość, rytm, alfabet, optyczną wagę i sposób łamania. Projektowanie dla 14 języków wymagało utrzymania zasad oraz świadomych wyjątków.
Design freeze chroni wartość projektu. Kiedy wygląd został zaakceptowany, kolejne etapy otrzymały jasne ograniczenie. Dzięki temu refaktor, SEO i RODO nie rozmyły wcześniejszych decyzji.
Krytyczny feedback jest narzędziem jakości. W procesie wielokrotnie pojawiały się oceny, że ekran jest słaby, proporcje są złe albo rozwiązanie nie przypomina zaakceptowanego wzorca. Ta bezpośredniość pozwalała szybciej odrzucać półśrodki i wracać do rzeczywistego problemu.
Narzędzia AI zwiększają prędkość, ale nie zastępują kierunku. Szybkość generowania kolejnej wersji może równie łatwo powiększyć chaos. Największą kompetencją nie było tworzenie wariantów, lecz umiejętność powiedzenia: ten ekran nie działa, ten detal ma zostać zamrożony, a tego kodu nie wolno dalej kopiować.
Najważniejszy test strategiczny projektu zaczynał się od konkretnej sytuacji: właściciel fabryki, dyrektor operacyjny albo osoba odpowiedzialna za zakupy ma jednocześnie otwarte trzy strony — dwie należące do znacznie większych agencji i stronę MAGNAR. Pierwsza decyzja nie dotyczy jeszcze podpisania umowy. Dotyczy tego, które karty przetrwają pierwszy filtr.
MAGNAR nie miał udawać największej firmy w kategorii ani konkurować liczbą oddziałów, ofert i publikacji. Serwis miał usunąć automatyczne veto wywoływane przez wrażenie małej, lokalnej lub przypadkowej marki. Już od pierwszego ekranu odbiorca powinien zobaczyć dojrzały system, 24 lata doświadczenia, precyzyjną narrację, wiedzę o przemyśle i zdolność obsługi międzynarodowego procesu.
Industrialno-redakcyjny język, autorski motion i rozbudowana architektura nie są efektami dla samych efektów. Nadają MAGNAR równorzędność uwagi. Przy przewadze skali liderów marka pozostaje wystarczająco wiarygodna, konkretna i zapamiętywalna, aby klient poświęcił jej kolejne minuty.
Zadaniem strony nie jest w kilka sekund dowieść, że MAGNAR jest największy. Ma sprawić, żeby klient nie zamknął karty, poznał system działania, porównał zakres odpowiedzialności i rozpoczął rozmowę. Właśnie to — pozostanie w realnym zbiorze rozważanych partnerów — było najważniejszym testem strategicznym projektu.
MAGNAR jest przykładem projektu, w którym strona internetowa stała się narzędziem budowy marki i porządkowania produktu usługowego. Proces rozpoczął się od poszukiwania języka graficznego, przeszedł przez autorski motion i trzy narracje odbiorców, a zakończył się pełnym systemem technicznym obejmującym i18n, responsive, formularze, refaktor, QA, performance, SEO i Privacy / RODO.
Najważniejszym osiągnięciem nie jest liczba ekranów ani języków. Jest nim spójność pomiędzy obietnicą a formą. Marka mówi o budowaniu stabilnych systemów — i sama strona została zaprojektowana jak system: ma zasady, punkty odniesienia, kontrolowane stany, wspólne komponenty i procedurę jakości.
BUILD WHAT LASTS. nie jest podpisem pod projektem. Jest zasadą, według której projekt został zbudowany.
Benchmark konkurencji oparto na publicznie dostępnych serwisach analizowanych w sierpniu 2026 roku. Wnioski dotyczą wyłącznie komunikacji cyfrowej, architektury informacji i widocznego pozycjonowania; nie oceniają jakości operacyjnej firm, ich wyników finansowych ani satysfakcji klientów.