Viewbox delivers modular building solutions that blend efficiency with premium aesthetics, ensuring each project is seamless and impactful.
Empowering brands through modular spaces
Viewbox delivers modular building solutions that blend efficiency with premium aesthetics, ensuring each project is seamless and impactful. Their approach allows you to meet tight timelines and high expectations with ease, while turning your creative vision into reality.
Empowering premium brands with aesthetically advanced modular spaces, Viewbox leads in delivering Spantech Group’s promise of tailored temporary and permanent building solutions worldwide.
Their journey began with a vision to revolutionize the modular construction industry by blending unparalleled aesthetics with cutting-edge functionality. Today, Viewbox stands at the forefront of innovation, crafting customized spaces that meet the unique requirements of their diverse clientele.
Our approach.
Combining elegance with versatility, to craft unique spaces for activations, workspaces and pop-ups.
UX/UI Design
Viewbox is part of Spantech and we’ve worked together for this project with Brand & Design Studio Onion in Brussels. The overal design system for the website got delivered to us in Figma. And we were able to pull all assets, grids, colors, fonts, … from there to kickstart development on the Viewbox website.
Development
The website is developed on WordPress and uses Barbajs to smoothly transition from page to page. This makes the website load faster and allows seemless navigation through all webpages.
We believe that our development approach sets us apart from the competition and delivers real value to our clients. Going just that extra mile the client needs to be extraordinary both online & offline, without going all-in on animations and WebGL developments.
Support
Our relationship with Spantech did not end after their corporate website was launched. We assisted them with migrating all their hosting packages to a more cost-friendly solution. As a digital partner we were also able to develop their child company website Viewbox.
The preload page transition
If you take a closer look at the website, you’ll notice than when you navigate through the pages the page itself actually never refreshes. You animate quickly to the next page, but the browser doesn’t need to fetch all of the data again.
We’re prefetching the next page already when you’re hovering over the link. There’s an average of .3 seconds between hovering a link and actually clicking it. This time is enough to already catch the next page for you.
A page will never be fetched twice and because this method doesn’t require the full head (only the page content) this loading method is extremely performant.
We’re also using the Google “History Change” event to correctly track Single Page Application views correctly for site statistics.
Other technology used
What’s happening behind the scenes at the Viewbox website?
Hubspot Integration
The contact forms on the website are seamlessly integrated with the Hubspot CRM. This way we’re able to have custom designed contact forms on the website without using form-embeds from Hubspot itself. Loading in external iframes is both a performance issue and a higher security risk for your website.
Having the custom fields gives us 100% flexibility on the fields used in the form and the layout for the forms between desktop, tablets & phones. Submitting the form sends an API request to Hubspot to register your request in Viewboxs CRM system.
This way it’s also possible to add hidden forms to the field before submitting to the CRM, with additional data such as the page where the form is filled in from, our the language the user has selected on the website.
Resulable Blocks & Patterns
The new Viewbox website is developed on WordPress. We’re using the native Gutenberg editor to rebuild the blocks from the design system. This makes the website incredibly flexible in terms of page editing & new content creation.
This also allows to create specific blocks on a page, like FAQ dropdowns or partner logo banners, and reuse the same block over multiple pages. If you would like to add a partner to the banner, you only need to update it once to add the partner everywhere manually.
But there’s more: You can also unsubscribe a reusable block to get the power again of editing the block specifically for a single page.
Custom Sliders
The Viewbox website uses 2 more advanced custom sliders. One of them is a gallery slider for projects, that gives visitors the option to view the gallery as a grid, or prefer to have it as a slider. The choice of the user is stored in a cookie, so that he doesn’t need to make this choice again when visiting another project. The grid transforms seamlessly to a slider – and visa versa.
There is also a tech slider present on the website that moves both the background of the slider, together with the technical specifications of the product. The background uses a different transition than the content on the slider.
