Responses by Daniel Spatzek, designer/developer, Spatzek Studio.
Background: The intention of the site was to draw attention to Viita Watches’ latest addition to its smartwatch collection, the VIITA RACE. Users should get the proper impression of the new smartwatch, and the site guides them through the main features in a simple yet entertaining way.
As part of a Kickstarter campaign for the new VIITA RACE, the site’s primary goal is to lead visitors there. However, it also gives potential Kickstarter supporters a high-quality impression of the VIITA brand—as well as the new watch—to gain confidence in the project.
Design core: Probably the most striking aspect of the site is its fast horizontal scrolling. In order to fit the racing theme, I opted for a horizontal layout to convey the impression of a race. The site’s aesthetics and typography are inspired by retro racing magazines, which give the product a more established appeal while maintaining that high-quality look.
Contrary to the current trend of using the same aesthetics, layout and effects for every genre, I tried to give the website a unique character. Nowadays, a website for a tech company looks exactly the same as a website for a high-fashion brand—as does every single portfolio. I also resisted the temptation of adding overused WebGL effects for no reason.
Challenges: Definitely the horizontal scrolling. It is always tricky to hijack custom scrolling behavior while delivering an enjoyable experience on all devices. The differences between touch and non-touch devices made this especially tricky. I ended up creating a fallback to custom scrolling on touch devices.
Navigation: The site had to be fast and smooth, even more so due to its racing theme. It also had to be as simple as possible, especially due to the fact that people are not that used to horizontally scrolling websites. The solution to this was a simple, one-page scrolling experience with an optional progress bar that comfortably sends you to the respective section via clicking.
Technology: The site has been designed in Adobe XD. Picture retouching was done in Adobe Lightroom. The coding part was done in Atom. I used Nuxt.js for the site’s structure, and SSR and GSAP for the animations.