Responses by Marvin Schwaibold, designer

Background: The site showcases Hochburg’s outstanding design work in an interactive environment, enabling it to thrive and entice both potential customers and future employees. We also needed the site to be bold, cool and to set a benchmark for Hochburg’s future interactive work. We were trying to showcase the firm’s creative process in an interactive way. It’s simple, intuitive and usable—just like the work this company produces.

Favorite detail: Definitely the screensaver on the intro page. When you stop moving your mouse on the intro page, the entire UI disappears, leaving only a masked and distorted version of the company’s X logomark on the screen.

Challenges: Actually, it was the team structure: developer Baptiste Briel and myself, and on the other side, the Hochburg design team. Baptiste and I wanted something flashy, playful, highly interactive and experimental. Hochburg wanted something minimal, bold, simple and calm. During the initial design phase, I created a vast number of multiple layouts. We went back and forth on every aspect of the site, discussed, prototyped and reviewed each section for weeks on end. It was difficult to bring these two mindsets towards digital products together, but I feel that at the end of the day we only enhanced each other’s minds and skillsets further.

Navigation design: The infinite menu is the centerpiece of the site, as well as its primary navigation tool. It needed to be bold and intuitive. We are also proud of the index and the “all projects” secondary index. I personally love building sites that use more than one index structure; it gives users the chance to check primary project cases but can give them a broader overview if necessary.

Anything else? The navigation cursor works as a small indicator and changes shape depending on what action is required in the section where the user drags it. Hover over a project and an arrow appears, letting the user know: “This way to the project detail page.” When you open the project details page, the cursor turns into an X, indicating that you can now use the mouse anywhere in this area to close out of the section. We use this mechanic throughout the entire page, and it adds a secondary level of navigation for users to enhance their mobility throughout the site.