Logimark (English version)

Logimark was ready to invest in its digital presence, as their existing brand identity felt flat and anonymous. The company wanted to preserve its core values, but felt it was time for a fresh new look. Since the website is both the company’s most visited platform and often the first point of contact for new clients, the brand modernization started there.

During our initial meeting, it became clear that they also had requirements around meeting Google’s technical SEO standards, and they wanted the new site to feel more dynamic and engaging through the use of animations.

In the discovery phase, we focused heavily on visual expression, which also fed into strategies for engaging a broad audience within the manufacturing industry.

We discussed Logimark’s brand values and identified a desire to appear as a creative and reliable company with deep expertise in product marking. They wanted to distance themselves from the rigid and overly corporate feeling that can sometimes define industrial brands.

We also reviewed inspiration material, which laid the foundation for the internal moodboard used to shape the new brand direction.

Design Phase
In the early stages of the design process, a new visual identity emerged. We selected typefaces and colors that echoed the original brand while modernizing them to give the company a fresh and forward-facing feel.

The primary color was darkened to convey quality and professionalism, while the white tone was warmed to a beige shade to add personality and warmth. This also worked well as a contrasting color against the product images, which had pure white backgrounds. The color palette was expanded with additional tones to support the brand system. One standout addition was a complementary, vivid orange hue, chosen to balance the more muted primary color and serve as an eye-catching accent for calls to action like buttons.

The typography shifted from a heavy to a lighter style to align with trends in the industrial and tech sectors, an insight gained through our competitive analysis and the client’s inspiration material.

One distinctive visual element that emerged early on was the use of highlighting marks behind key words. These subtle background shapes behind thin typography helped emphasize important messages while referencing the company’s core business, marking and labeling. This created both a unique visual language and a thematic link to their products.

With the typography and palette finalized, we developed a design language that moved away from harsh, angular aesthetics to a slightly more rounded, yet still grid-based, structure. This allowed for visually engaging layouts with boxed sections that grouped content clearly and improved usability.

Website Design
Once the new identity was in place, we began designing the entire website. The homepage was crafted to emphasize key selling points that make Logimark stand out in their industry, while also presenting relevant content for returning customers.

After nine design revisions, we delivered over 20 unique page layouts in Figma. Alongside these, we created a flexible design library of modular components, allowing new pages to be built efficiently during development and beyond.

Development
The website was built using WordPress as a CMS and includes several custom post types. For editorial content, we created post types for Case Studies, Knowledge Articles, and News. In addition, Logimark can post open job positions and maintain a filterable list of team members, each with their own post type.

The most advanced structure was the product section, which uses a hierarchical custom post type. It includes 15 main product categories, each with several subcategories that lead to individual product pages. The site needed to handle large amounts of dynamic data efficiently, both for ease of editing and to enable content to appear across multiple pages.

The product system was built in three levels, allowing users to drill down to compare products within the same subcategory. Each main category page lists its subcategories in an organized layout, with all related products displayed beneath them. We achieved this through backend logic that recognizes parent-child relationships in the post type hierarchy.

To simplify content editing, we created reusable templates for categories, subcategories, and individual products. The backend was structured using ACF fields tailored to the unique needs of each product type. One major challenge was that different pages required different sets of information, which led us to build multiple interchangeable sections. These were conditionally rendered, only appearing if the relevant data had been entered, to keep the layout clean and relevant.

Because some product pages became quite long, we developed a sticky in-page menu that allows users to scroll vertically between sections. We applied the same solution to long knowledge articles, but used JavaScript to dynamically fetch all H2 tags, generate a clickable menu, and link each item to an automatically created anchor ID for smooth navigation.

The result was a revitalized brand identity for Logimark that truly reflects the quality they bring to the industry, as well as their new direction and ambitions. The advanced website empowers the client to easily manage content through custom post types and a backend system built with ACF. To enrich the user experience, we also added scroll-based animations using GSAP.

Ultimately, the end user benefits from a website with clear structure, easy navigation, and intuitive functionality, making it simple to find, compare, and engage with the products they’re most interested in.