In the past I’ve developed a few websites for Studio Bruch, a design studio from Graz focused on Branding, Editorial- and Package- Design. It’s always been a pleasure to work with them so it was an easy decision when they asked me to help them out on this particular project.

Bringing a static design to life

My part in this project was to develop the website for a local veneer factory designed by Studio Bruch. The website was part of a major redesign conducted by the design studio so it had to go hand in hand with the new Corporate Design.

The website (which was entirely designed by Studio Bruch) used large and moody images to set the tone of the page right from the start. Also image sliders were used throughout the page to illustrate the production process and the products of the factory. The content was set in very distinctive Typefaces and was laid out in a minimalistic fashion, which is Studio Bruch’s trademark style. Furthermore a lot of signets and icons where used to illustrate the production process of the company.

The final version of the website

Development decisions and details

For this image-heavy site to look as good possible on the web, we decided to make it retina-ready. More and more people visit the Web with devices that are equipped with HiDPI displays, so it was a very future-proof and reasonable decision to make. Nobody wants to visit a image-heavy page and be forced to look at blurred images.

So I ended up using a technique to swap the images based on the pixel density of the device that wants to open the website. To further improve the look of the site on HiDPI devices I implemented SVG-Icons for the signets and logos. With SVG-Icons the site becomes resolution-independent and will render sharp on any browser that supports it. A fallback for older browsers to load PNGs instead of SVGs is integrated using Modernizr to make sure the logos and signets are displayed correctly.

A look backstage

The Site was built with WordPress as a CMS handling the backend and therefore making it easy for the client to change the content.

As a base theme we’ve used the Foundation Framework by ZURB which offers an amazing toolkit to lay out your website in almost no time. It really did the heavy lifting on the structure of the site including the image swapping and the carousel.

WordPress is my go-to choice when it comes to choosing a CMS. I tend to use it not only for its user-friendly interface but also for its incredible extensions. To feed the content into the theme for example I’ve used the incredible Advanced Custom Fields plugin which caters the needs of almost anything you ever want to create within WordPress.

This backend setup guaranteed an easy maintenance of the site for the client, enabling them to keep the content up to date in the future.

Conclusion

By using future-proof front-end techniques and frameworks combined with a solid back-end structure, I was able to ship a very robust site. Not only does it reflect the Corporate Design of the brand but also makes it easy for the client to maintain their content for the future. Definitely a win-win situation.