{"id":4352,"date":"2025-11-05T15:24:44","date_gmt":"2025-11-05T15:24:44","guid":{"rendered":"https:\/\/4eck-media.veronika.psd-tutorials.net\/referenzen\/tool-grinding-shop-hesselkamp\/"},"modified":"2026-04-17T13:31:07","modified_gmt":"2026-04-17T13:31:07","slug":"tool-grinding-shop-hesselkamp","status":"publish","type":"references","link":"https:\/\/4eck-media.de\/en\/references\/tool-grinding-shop-hesselkamp\/","title":{"rendered":"Tool Grinding Shop Hesselkamp"},"content":{"rendered":"
\n
\n
\n
\n
\n
\n
\n
\n \n\n \n \"Website\n<\/picture>\n <\/div>\n <\/div>\n
<\/div>\n <\/div>\n <\/div>\n
\n
\n

Our solution<\/h2>

We reorganized the company information into a OnePager. At the top, a cool video loop thematically engages website visitors right away. The location icon and phone icon remain prominent as important calls to action in a fixed navigation. And because Hesselkamp’s sharp logo invites it, the design features extremely strong contrasts and impressive typography. From top to bottom, the OnePager speaks a clear language: work is being done here – let’s get started! <\/p>\n<\/div> <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>

\n
\n
\n
\n

Contrasting color, typography, and image concept<\/h3>

A design that sparks interest at first glance… The large typographic elements that stretch from top to bottom across the entire landing page<\/a> are particularly attention-grabbing. pulling, and the color concept of black-and-white images and high-contrast color images with red overlays. Sharp contrasts meet a modern experience – we believe we have wonderfully realized the theme. <\/span><\/p>

Animations as highlights to experience<\/h3>

The visitor is greeted directly with a video loop. A small moving arrow points down to encourage scrolling. The navigation is pinned at the top. The location icon and phone icon, as important call-to-actions, enlarge. Icons fade in from the sides while scrolling. Additionally, there is a button to scroll back to the top at any time. Everything works wonderfully in desktop view and, of course, on mobile. In other words: all cool! <\/span><\/p><\/div>\n <\/div>\n

\n

At a glance<\/h3>
  • Concept and layout of the fresh <0> tool website as a one-pager in Adobe XD.<\/li>
  • Image research and image optimization<\/li>
  • Implementation and development in HTML5 & CSS3<\/li>
  • Responsive adaptation (mobile optimization)<\/li>
  • Creation of custom icons<\/li>
  • Fine animations such as scroll progress bars and icon animations.<\/li><\/ul><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>
    \n \n\n \n \"Modern\n<\/picture>\n<\/section>
    \n
    \n
    \n
    \n