MAGNAR did not simply need a new website. It needed a system that could show that the company does more than supply workers: it designs the conditions in which people and production can operate reliably.
MAGNAR operates in a category where many companies communicate a similar range of services: recruitment, temporary staffing, outsourcing, legalization, transport and accommodation. A list of services quickly becomes insufficient. If a brand defines itself solely through a catalogue of capabilities, it starts being compared primarily on price, candidate volume or the declared speed of supplying people.
The real value of the partnership is broader. A business client wants to know whether a partner understands the rhythm of the plant, can scale teams, secure formalities and take responsibility after work has already begun. A candidate needs answers to completely different questions: is the job offer real, will the contract be understandable, will the salary arrive on time, is accommodation prepared, and will someone actually answer the phone after they arrive?
Trying to tell both stories on one conventional website would lead to compromise. The language would be too corporate for candidates and, at the same time, too general for business. From the beginning, the project therefore required the narratives to be separated without separating the brand.
Recruitment-agency websites often serve several functions at once. They are service catalogues, job databases, SEO content hubs, lead forms and corporate brochures. That breadth is functional, but it often results in extensive menus, a large number of equally weighted messages and a visual language based on predictable photographs of people in offices, factories or warehouses.
MAGNAR needed a different position. The company was not supposed to look like the largest recruitment portal or pretend to have the scale of bigger competitors. It was supposed to look like a specialized, accountable operator that understands industry, runs the process and can build a repeatable model of cooperation.
The most important objective can be described through a simple scenario. A potential client has three browser tabs open: MAGNAR and the websites of two much larger companies. The MAGNAR website was not meant to pretend it had their number of branches, offers or publications. It was meant to ensure that the smaller brand would not be closed automatically after the first glance.
The condition for remaining in the comparison was to demonstrate maturity immediately: a point of view of its own, an understanding of industry, a concrete process, experience, international reach and a coherent system. The website had to earn MAGNAR the next few minutes of attention and the next conversation.
The goal was not to look like the biggest agency. The goal was not to look, beside the biggest, like an accidental, local company or one unprepared to take responsible ownership of a complex process.
Core design question: how do we show that MAGNAR does not merely find people, but designs the conditions in which people and production can operate reliably?
| Area | Final scope |
|---|---|
| Brand architecture | CORE + FOR BUSINESS + FOR CANDIDATES |
| Screens | 8 + 8 + 7 = 23 |
| Languages | 14 active versions |
| SEO URLs | 42 final URLs |
| Technology | static HTML, CSS and JavaScript + i18n generator |
| Typography | local Manrope, IBM Plex Mono, plus Georgian and Devanagari ranges |
| Forms | business and candidate forms, full validation and interface states |
| Production | sitemap, robots, canonical, hreflang, Open Graph, JSON-LD, Privacy / GDPR |
The answer to the positioning problem was the idea of a system. MAGNAR’s work does not end with recruitment. It connects candidate-sourcing geographies, selection, legalization, logistics, accommodation, onboarding at the plant and later coordinator support. The common denominator across all of these activities is responsibility for continuity.
That observation led to the line BUILD WHAT LASTS. It does not describe a single service. It defines a way of thinking about the worker, the client and the process. The brand does not promise a one-off “delivery of resources”; it promises the building of teams that have a chance to remain stable.
People. A candidate is not a record in a database. They need information, security and support after working hours as well. That is why the candidate path was not treated as a simplified application form. It was designed as an answer to specific uncertainties connected with travel, accommodation, the first day at work and day-to-day contact.
Technology and process. Scale requires data, repeatable stages, status control and clear responsibility. In the business section, the brand does not simply say it is “comprehensive.” It shows what planning, design, search, matching and finalization of cooperation actually look like.
Responsibility. A partner’s value becomes visible not when the contract is signed, but when a problem appears in documentation, transport, accommodation or onboarding. Responsibility therefore had to be present both in the content and in the behavior of the interface.
The brand layer was built on concrete numbers and structures rather than declarations alone. CORE shows 24 years of experience, more than 200 partners, more than 550 people within the organization, a database of 10,000 candidates, eight recruitment markets, more than 750 projects and 7,000 people employed.
The business section communicates through 90% retention, three cooperation models, a detailed process and five-stage legalization. The candidate section translates the promise of responsibility into the first 48 hours, accommodation standards, an orbit of support and ten specific FAQ questions.
The numbers were not added as decorative badges. Each serves as proof. It shows scale, a stage of the process or the scope of responsibility the brand is prepared to assume.
Alongside the website, elements of a wider ecosystem were being developed: a ten-screen Company Profile and the MAGNAR Standard, a document organizing the way the team works. This kept the word “standard” from becoming an empty marketing term. It began to connect external communication with the internal way of working.
In that sense, the website project became a tool for organizing the brand. It forced answers to the questions: what exactly do we promise, to whom, at what stage of the process, and what do we take responsibility for? Only once those answers existed could we design a visual language that would be more than an attractive shell.
CORE builds recognition and explains the system. FOR BUSINESS turns the brand into an operational argument. FOR CANDIDATES turns the same responsibility into clear, everyday information. The separation made it possible to adapt vocabulary, level of detail and emotion without creating three independent brands.
HERO shows 24 years of experience, the brand thesis and the choice between the Business and Candidate paths. 360° connects recruitment geography, legalization, logistics and the start at the plant into one process. NUMBERS show proof of scale instead of another declaration of quality. SECTORS organize logistics and warehousing, production and industry, and technical specialists.
PARTNERS visualize the cooperation ecosystem. TESTIMONIALS show the perspectives of client and worker; demonstration content is explicitly labelled. EPILOGUE uses a Taiichi Ohno quote to connect the ideas of standards and continuous improvement. CONTACT separates intent into a business conversation or the worker path.
The path begins with RETENTION. The 90% result opens the narrative, while three pillars — process, spectrum and geography — explain where stability comes from. SPECTRUM presents temporary staffing, permanent recruitment and the RPO model.
PROCESS leads through planning, design, search, matching and finalization. GEOGRAPHY shows the directions of Eastern Europe and Central and South-East Asia. LEGALIZATION presents five controlled stages: from verifying the starting point, through selecting the procedure and preparing documentation, to official monitoring and supervision of employment continuity.
GROWTH opens the system to business-development partners and recruitment partners. EPILOGUE uses Deming’s quote to remind us that a good person can be defeated by a bad system. CONTACT combines the form with direct business and corporate-registry details.
This path begins with PRINCIPLES: legality, transparency, safe conditions and real support instead of generic promises. THE FIRST 48H guides the user through pickup, transport, rest, documents, training and starting work.
HOW WE LIVE describes logistics, costs, equipment and the option for couples to be accommodated together. SUPPORT shows help at work and with everyday matters after hours. FAQ answers ten questions about documents, salary, language, illness, workwear, advance payments, holidays, overtime, changing jobs and accommodation.
EPILOGUE uses a Martin Luther King Jr. quote to reinforce the theme of dignity in work. CONTACT is a short form tailored to the information needed at the start of a conversation.
The B2B content was built around predictability, responsibility and process. Instead of repeating that the company is “comprehensive and flexible,” the website shows stages, criteria and the scope of responsibilities it takes over.
Candidate content answers the questions that appear before departure and after arrival. “The First 48H” begins with pickup from the airport or station. “How We Live” talks about keys, the kitchen, Wi-Fi, costs and the absence of a deposit. The FAQ does not avoid questions about the first salary, an advance payment, help at night or changing the place of work.
Transparency became part of the value proposition. The candidate is not supposed to be persuaded by one large promise. They are supposed to receive the information required to make an informed decision.
Content and layout were designed together. That meant shortening passages that lost rhythm, breaking titles into controlled lines, and changing field proportions where a language needed more space. One example was the Filipino version of the accommodation description: an overly long sentence overlapped the next module, so the copy was shortened without losing meaning.
The project did not begin with a single finished style. We tested cinematic, Japanese, typographic, corporate, poster-like and blueprint-inspired directions. Variants were created around large numbers, asymmetric composition, tables, illustrations, data fields and more conventional layouts.
The goal was not to produce many similar mockups. It was to test what kind of visual language best matched the real nature of the company. Some variants were visually attractive but failed to build the right meaning. Others organized data well but looked like a dashboard or a generic corporate report. Others still worked as individual posters, but did not create a system capable of supporting 23 screens and long translations.
We evaluated each direction against five questions:
The chosen direction combines two worlds. From industry it takes the grid, numbering, measurement points, registers, diagrams, construction lines and the language of process. From editorial design it takes typographic scale, the rhythm of white space, deliberate asymmetry, quotations, folios and the dramaturgy of consecutive screens.
The result is a system that resembles technical documentation, a modernist poster and a digital operational report at the same time. This character differentiates MAGNAR from typical HR visual language without turning the website into an artistic experiment detached from its purpose.
The project had to look like a company capable of designing a process, not like a company that bought a ready-made WordPress theme.
The system was built around three colors.
Cream — #F0EDE6. A warm, paper-like base softens the technical character and introduces a human tone. It prevents the layout from becoming a cold operational panel.
Navy — #0D1B2E. The color of structure, responsibility and industry. It replaces generic corporate black or HR blue.
Gold — #D4920A. A signal accent. It marks active points, important stages, energy and movement within the system.
Limiting the palette was not a production shortcut. It was a decision about recognizability. It allows very different screens — from numbers and FAQ to legalization — to remain part of one brand.
Manrope handles major statements, numbers and titles. It is contemporary, geometric and neutral enough to carry both B2B language and candidate communication.
IBM Plex Mono serves as the operational layer. It appears in numbering, statuses, technical descriptions, tickers and registry data. The contrast between the display font and the monospaced typeface creates a hierarchy of meaning. Manrope says: “this is the main idea.” IBM Plex Mono says: “this is part of the system, a parameter or an instruction.”
The Georgian and Hindi versions required additional local font ranges. A limited Georgian and Devanagari fallback was added so that the characters remained legible while the Latin MAGNAR elements retained their original typography.
Construction lines are not decorative frames. They organize the screen, indicate relationships between fields, guide the eye and visualize the act of building. Crosshairs in the corners suggest reference points and quality control. The lower rail with the name, number and screen title works like the label on a technical drawing sheet.
This metaphor required particular technical discipline. One missing bottom line, a shifted crosshair or text overlapping the construction immediately looked like a system error rather than a minor imperfection.
Every screen received a number and an unambiguous name. Vertical numbering on the right helps the user understand the length of the experience and their current position within it. The top ticker simultaneously serves as brand identification, local navigation and a language switcher.
Consistency, however, does not come from copying one layout. “Numbers” uses a data composition, “Sectors” uses text scanning, “Partners” uses a field of marks, “Geography” uses a map of directions, “Legalization” uses a five-stage register, “The First 48H” uses a timeline, “How We Live” uses modules for accommodation standards, and “Support” uses an orbital system.
In this identity, motion was not meant merely to make the experience more attractive. It was meant to show that the system is activated in stages. Lines are built, data is organized, modules take their positions, and the main message appears only after the context has been established.
Instead of animating everything at once, the project uses a sequence of attention. The user first recognizes the brand, then the scale, then the choice of path, and only at the end the full statement.
The first CORE screen was designed like a short opening scene:
The pace was corrected repeatedly. Early versions moved too quickly from the boxes to the text. There was not enough breathing room between events, which made the animation feel like an automatic presentation rather than deliberate direction of attention.
The key animations do not use one effect repeated across all screens. Each screen received its own verb: HERO builds, “MAGNAR in numbers” measures, “Sectors” scans, “Partners” positions, “Geography” attracts, and the “Support Orbit” remains in continuous circulation.
This makes motion more than a layer added after the project was finished. It becomes a way of explaining what the brand does.
On the SECTORS screen, a vertical scanner line moves through the highlighted “Logistics and warehousing” module. It does not illuminate the entire paragraph. It reacts precisely when it reaches the names of specific roles, including pickers and warehouse personnel.
The highlight is synchronized with the actual position of the words, so the effect remains correct even when a translation changes sentence length and line breaks.
It is a small effect, but it carries several layers of meaning. Literally, it references the warehouse scanner used in order picking. Metaphorically, it presents recruitment as the process of detecting the right competencies within a larger field of information. MAGNAR does not “move CVs around.” It identifies the element that fits a defined position in the system.
For a factory owner, logistics manager or operations director, that code can be recognizable before they consciously articulate its meaning. Scanning, detection, marking and confirmation are part of everyday industrial processes. The website therefore speaks the language of quality control and material flow, but uses it to tell a story about people.
A typical numbers section on a B2B website consists of equal cards arranged in a regular grid. The layout is clear, but all data begins to look the same, and the user recognizes a ready-made component before reading its content.
In MAGNAR, six proofs of scale were distributed along an irregular line resembling a contour line, process chart or measurement trace. Subtle supporting lines form around the main gold trajectory, and successive values appear as calibration points.
Breaking symmetry does not mean introducing chaos. All points belong to one run, share a direction and remain connected by the same geometry. The numbers are not six independent medals, but parameters of one system: experience, candidate database, partners, recruitment markets, projects and employed people.
The PARTNERS screen uses a different kind of motion. The word begins far above its intended position, falls toward the center of the composition, slightly overshoots the target, returns, and only after several increasingly small corrections settles precisely on the axis.
This is not a simple fade-in or a light bounce. Timing and damping give the typography perceptible mass. The movement can evoke the positioning of a heavy component by an overhead crane, the installation of a module or the seating of a part into a prepared position. The most important thing is not the drop itself, but the precise centering at the end.
The natural solution for international communication would have been a map with highlighted countries. It is functional, but predictable, and it quickly reduces the story to administrative borders. MAGNAR replaced it with a magnetic field.
Poland becomes the operational point, while recruitment markets are placed along lines of influence. The arcs do not merely show distance. They suggest range, attraction, flow and the ability to manage many directions within a single field of responsibility.
The GEOGRAPHY title arrives from the right, while two blocks of recruitment directions enter from the left and meet around the central field. Motion from opposite directions materializes MAGNAR’s role as the point that connects dispersed markets with one operational location.
On the FOR CANDIDATES website, support is represented as an orbital system. A gold point approaches a selected location, passes through a gate and begins continuous motion around the central word SUPPORT. When it comes close to the content, it locally illuminates it.
The orbit symbolizes continuity and availability. In a conventional recruitment funnel, the candidate moves from application to employment and the process visually ends. Here, the movement has no final point. Support remains in circulation between the areas “at work” and “after hours.”
The coordinator helps both during onboarding and communication with a supervisor, and with matters involving a doctor, an office, transport or an emergency outside the shift. The abstract word “care” was therefore translated into a simple, legible model of behavior.
The full intro should not replay every time the user returns. It would become tiring and destroy the sense of continuity. Two states were introduced:
The state is remembered in sessionStorage. This allows the motion to retain its dramaturgy on first contact without punishing the user for navigating through the website.
The contact screens revealed one of the most difficult technical problems. Successive versions of the animation had been saved in several places, so the line began drawing simultaneously from two or three points. Sometimes it started halfway through, ended before reaching the edge, or restarted after reload in the wrong state.
The fix was not another coordinate adjustment. First, all local contact-animation engines were removed. Then one shared controller was built in common.js, calculating a route for each of the three sections from the geometry of the actual elements.
The CORE route begins at the lower-left point of the construction, then moves up, right, up again and right. The Business/Candidate route begins at the upper-left corner of the relevant contact box, moves down, right, up, left, then up again and left.
Once fully drawn, the line remains on screen for three seconds and then disappears. A one-way state machine — idle → drawing → holding → finished — prevents it from restarting within the same cycle.
prefers-reduced-motion must leave a complete, readable composition.The project evolved through rapid HTML prototypes rather than a static set of mockups. This made it possible to evaluate not only appearance, but also real on-screen behavior, animation timing, scroll, text length, transitions and proportions as the viewport changed.
The method was effective, but it had a cost. Successive corrections could leave behind old CSS rules, an alternative listener or a local animation variant. The process was therefore divided into phases: exploration, consolidation, design freeze, and only then functionality and production.
Some decisions were made through rejection. The “The Wall” concept for the numbers was too poster-like and did not create enough hierarchy in the data. The first versions of the “How We Live” screen looked like a repetition of earlier cards or did not provide enough space for long descriptions. The FOR BUSINESS epilogue initially failed to maintain the proportions of CORE and Candidate, while the contact composition in the candidate and Filipino versions repeatedly lost its proportions.
Rejection was not failure. It helped define the boundaries of the system: how much text a field can carry, when asymmetry becomes accidental, and which elements must remain shared.
Once the final compositions were established, a non-negotiable freeze was introduced. Later stages were not allowed to change the design, typography, colors, responsive behavior or approved motion. This meant that i18n, refactoring, forms, SEO and Privacy / GDPR could be treated as technical layers rather than excuses to redesign the product.
That decision was essential. Without a design freeze, every functional correction could reopen the discussion about proportions and lead to an endless loop of versions.
The project was designed from the large screen down because its visual language depends on the relationship between fields, lines and large typography. Responsive design could not simply mean shrinking everything mechanically. On laptops, the tension of the composition had to remain intact; on mobile, the order of modules had to change and the screens had to be allowed to grow vertically.
The most common problems involved titles colliding with the right-side numbering, long words in German and Dutch, forms falling below the footer, CTA lines being clipped by overflow, and a four-column tablet layout becoming too cramped.
The breakpoint strategy was as follows:
Final checks included, among others, 2560 × 1440, 1920 × 1080, 1600 × 900, 1440 × 900, 1366 × 768, 1024 × 768, tablet 820 × 1180, and mobile 390 × 844 and 320 × 568.
The first natural idea — a separate HTML file for every language — would quickly have produced 42 copies. Every correction to a link, form, animation or footer would have had to be made dozens of times. At that scale, the versions would eventually begin to diverge.
The final architecture keeps only three templates: index.html, dla-biznesu.html and dla-kandydata.html. Content lives in JSON resources divided into a shared layer and separate CORE, Business and Candidate resources.
The generator turns them into 42 static pages inside the dist/ directory. Search engines receive full HTML in a specific language while the team still maintains only three layouts.
Polish, English, German, Belarusian, Ukrainian, Romanian, Georgian, Russian, Kazakh, Vietnamese, Filipino, Dutch, Hindi and Indonesian.
The full language list could not permanently occupy the ticker. The two main codes remain visible, while the others open inside the +12 layer. When the menu opens, the right-side screen numbering fades gently so that the two systems do not overlap. After a language is selected or the menu is closed, the numbering returns without shifting the layout.
Changing the language preserves the current section. A user reading the legalization screen lands on legalization in the new language rather than being returned to HERO. The language change also preserves the current hash, so the user remains on the corresponding screen.
The largest part of the work was not inserting translations but preserving the quality of the composition. German made the Business and Contact labels longer. Georgian required a separate font and optical adjustment of large titles. Russian, Kazakh and Ukrainian required control over Cyrillic and long words. Vietnamese required local font ranges with full diacritics.
Hindi required a separate Devanagari typeface and disabled letter-spacing on translated elements. Filipino produced exceptionally long sentences inside candidate modules. The Dutch word ONDERSTEUNING collided with the right-side numbering and required a positional correction.
The build classifies long CTA titles and assigns controlled i18n-long and i18n-extra-long classes. Other exceptions remain local and are applied only when length or alphabet genuinely requires them.
The build report detects missing keys and fallback use. The order is the requested language, then English, then Polish. An unresolved key stops the build. This protects the website from being published with an empty button or an untranslated form.
In a separate stage, all CORE ↔ Business ↔ Candidate transitions, the logo, section links, telephone numbers, email addresses, CTAs and footer elements were checked. Situations where an element looked like a button but had no action were removed. Language links are generated relative to the final route, so they also work in local preview.
Two forms were created: one for business and one for candidates. Each has an initial state, missing-required-data state, invalid-email state, invalid-phone state, sending, success and error. Messages are available in all 14 languages.
The button is temporarily disabled after submission, protecting against accidental repeated activation. Status uses aria-live, while the first invalid field receives focus and aria-invalid.
In the current static build, the forms prepare a mailto: message to biuro@magnar.com.pl and do not transmit data directly to a server. This is a deliberate, lightweight contact model for this version of the website.
The Privacy / GDPR panel can be closed with the button, by clicking the backdrop or by pressing Escape. Focus remains inside the dialog and, once closed, returns to the opening button. Longer content has its own scrolling, and the mechanism respects prefers-reduced-motion.
Rapid iteration created a risk of duplication. Similar contact styles existed in several files, media queries overlapped, and old animation versions could remain active alongside newer ones. Refactoring was carried out only after the design had been frozen, because earlier the code needed to support experimentation.
Final file responsibilities are as follows:
common.css — fonts, tokens, shared elements, contact and the privacy panel;core.css, biznes.css, kandydat.css — local compositions and exceptions specific to each section;common.js — forms, shared contact animation, the GDPR panel and shared controllers;core.js, biznes.js, kandydat.js — motion and behavior specific to each narrative;i18n.js — language switcher, payload and current-section behavior.The most important result was one contact-animation engine instead of several competing implementations, one controller for both forms with field configuration, removal of old SVG/canvas elements and listeners, and unification of the footer and lower construction lines.
The success criterion for the refactor was simple: after the change, the code is simpler but the user sees no difference.
The review covered all 42 generated pages. We checked links, CTAs, the logo, phone numbers and email addresses, transitions between sections and parts, language switching and hash behavior, forms and every validation state, missing assets and broken paths, duplicate IDs, and accidental horizontal overflow.
We also checked that only one contact-animation engine was present, that lower-sheet labels were correct, that language keys were complete, and that the Privacy / GDPR panel behaved correctly.
The npm run verify command runs build, form and privacy-panel validation. A build is accepted only when all pages, assets and key contracts pass the checks.
The website does not use a front-end framework or external runtime libraries. Fonts are local, and the only main WebP image weighs approximately 76 KB. CSS and JavaScript are split between a shared layer and local files. The complete production ZIP weighs approximately 1.3 MB, while the unpacked set of files is approximately 4.2 MB.
The absence of external fonts, analytics, maps, embedded video and UI libraries reduces the number of requests, the risk of layout shift and dependence on third-party services.
Each of the 42 pages receives the correct static html lang, title and meta description, a canonical URL on https://www.magnar.com.pl, a complete set of 14 hreflang alternatives plus x-default, Open Graph, Twitter metadata and the index,follow,max-image-preview:large directive.
The generator builds sitemap.xml with all URLs and language alternatives. robots.txt points to the sitemap and excludes technical, test and staging directories. The main technical redirect to Polish CORE carries noindex,nofollow, so it does not compete with the proper /pl/ route.
CORE pages include EmploymentAgency structured data with the legal name, address, contact information and the NIP, KRS, REGON and KRAZ identifiers. Schemas were not added where they had no genuine use.
Legal information needed to be available on the CONTACT screen, but it could not break the composition or move the user to a conventional subpage with a foreign visual language. A discreet PRIVACY / GDPR button was therefore placed in the lower rail.
The panel opens as a layer above the current screen, similar to the language menu, but with a size appropriate for reading and its own scroll. It does not shift the layout. When it is closed, the user returns to exactly the previous position and focus element.
Across 14 languages, the panel covers the data controller, company details, form fields, purposes and legal bases of processing, recruitment, retention, recipients, transfers, user rights, voluntary provision of data, automation, technologies and privacy contact information.
The current build does not use analytics, advertising pixels, profiling, reCAPTCHA, external maps, video or embedded services. localStorage stores the language only after the user makes a selection, while sessionStorage remembers animation state within the current session. There was therefore no reason to add an unnecessary cookie banner.
Source files: three HTML templates for CORE, FOR BUSINESS and FOR CANDIDATES; shared common.css, common.js and i18n.js; local CSS/JS files for each part; language and route manifest; JSON resources shared, core, business, candidate and privacy for 14 languages; local fonts; the main WebP image; build, extraction and verification scripts.
Production files: 42 static language pages, a root redirect with noindex,nofollow, sitemap.xml, robots.txt, shared CSS, JS, fonts and image assets, plus an i18n completeness report.
The benchmark included category leaders — EWL Group, Personnel Service and LeasingTeam — as well as companies closer to MAGNAR in offer profile and visible scale of digital communication: Eurokadra, KRX Work, GDI and Hanza HR.
The comparison does not assess the quality of operational services, financial performance or customer satisfaction. It analyzes how the offer is communicated, how audiences are guided and how recognizability is built on the basis of publicly available websites.
Large websites win through content volume, the number of search entry points, job-offer databases and recognizable proof of scale. MAGNAR builds an advantage differently: through a compact architecture of three narratives, a proprietary industrial-editorial system, motion as a metaphor for building and activating a system, full 14-language coverage, and candidate communication designed to reduce uncertainty.
MAGNAR does not outperform the largest competitors in number of offers, articles, reports or lead automation. Its advantage was created through coherence of the idea, quality of art direction, separation of business and worker needs, and the way the operational process was turned into a brand experience.
Compared with the category leaders, the website does not pretend to offer parity of scale — it builds parity of attention.
For the brand, the website gives MAGNAR a recognizable visual language independent of stock HR codes. It connects the offer, the way the company works and its values under one idea: BUILD WHAT LASTS. It also creates a system that can expand into company profiles, presentations, reports, articles and internal materials.
For business, it shows the scope of responsibility without forcing the audience to read a generic service catalogue. It explains cooperation models, process, geography and legalization. It builds an image of a partner that understands production continuity and operational risk, then leads to a direct consultation.
For candidates, it reduces uncertainty before departure and before starting work. It explains the first 48 hours, accommodation and available support. It answers specific, often uncomfortable questions and makes the complete content available in languages corresponding to the main recruitment markets.
For the organization, it organizes the offer and names the successive stages of the process. It creates one source of content and layout for 42 URLs. It introduces a technical quality gate before publication and combines content, forms, layout and the language system into one ordered digital product.
The impact of the website on sales and user behavior can be described in a separate update once MAGNAR has real data from the site in operation. The current version documents completed strategic, design and technical outcomes.
The system matters more than one spectacular screen. The best solution was not the one that looked most impressive in isolation. The stronger solution was the one that created rules for subsequent screens, languages and functions.
Motion requires direction and code architecture. Good timing is not enough if an animation has several sources of truth. The most difficult contact-screen problems were solved only when they were treated as an architectural problem rather than a purely visual one.
Multilinguality is part of design. Translation is not the final text layer. It changes length, rhythm, alphabet, optical weight and line breaks. Designing for 14 languages required maintaining rules while allowing deliberate exceptions.
A design freeze protects the value of the project. Once the appearance was approved, later stages received a clear constraint. This prevented refactoring, SEO and GDPR work from diluting earlier decisions.
Critical feedback is a quality tool. Throughout the process, there were repeated judgments that a screen was weak, the proportions were wrong, or a solution did not resemble the approved reference closely enough. That directness made it possible to reject half-measures faster and return to the real problem.
AI tools increase speed, but they do not replace direction. The speed of generating another version can just as easily increase chaos. The most important competence was not producing variants, but being able to say: this screen does not work, this detail must be frozen, and this code must not be copied any further.
The most important strategic test of the project began with a specific situation: a factory owner, operations director or procurement decision-maker has three websites open at the same time — two belonging to much larger agencies and the MAGNAR website. The first decision is not yet about signing a contract. It is about which tabs survive the first filter.
MAGNAR was not supposed to pretend to be the largest company in the category or compete on number of branches, offers and publications. The website had to remove the automatic veto caused by the impression of a small, local or accidental brand. From the very first screen, the audience should see a mature system, 24 years of experience, a precise narrative, knowledge of industry and the ability to handle an international process.
The industrial-editorial language, proprietary motion and extensive architecture are not effects for their own sake. They give MAGNAR parity of attention. Despite the scale advantage of the leaders, the brand remains credible, specific and memorable enough for the client to give it the next few minutes.
The website’s task is not to prove within seconds that MAGNAR is the largest. Its task is to prevent the client from closing the tab, let them understand the operating system, compare the scope of responsibility and begin a conversation. Remaining in the real set of considered partners was the project’s most important strategic test.
MAGNAR is an example of a project in which a website became a tool for building the brand and organizing a service product. The process began with the search for a graphic language, moved through proprietary motion and three audience narratives, and ended as a complete technical system covering i18n, responsive design, forms, refactoring, QA, performance, SEO and Privacy / GDPR.
The most important achievement is not the number of screens or languages. It is the coherence between promise and form. The brand talks about building stable systems — and the website itself was designed like a system: it has rules, reference points, controlled states, shared components and a quality procedure.
BUILD WHAT LASTS. is not a caption under the project. It is the principle by which the project was built.
The competitor benchmark was based on publicly available websites analyzed in August 2026. The conclusions concern digital communication, information architecture and visible positioning only; they do not assess the companies’ operational quality, financial performance or customer satisfaction.