V/A – Various Artists is an online magazine for cultural professionals initiated by the Swiss Arts Council Pro Helvetia, which features an artful design and, despite its individuality, can be conveniently edited from within the Pro Helvetia Multisite.
The online blog promotes exchange between international cultural professionals, actively supporting their ideas and work, and sensing contemporary sensibilities in a multi-layered present.
To attract the target group of cultural professionals, a website with special features and elements of surprise was needed. Thanks to the design agency Hammer, a unique online magazine with numerous animations and elaborate styles was created, and the end result of the brand-new Pro Helvetia magazine – V/A – Various Artists – is a true experience.
Some of the distinctive features of the website that give us great pleasure:
Automatic generation of elements and colors
The core is the so-called “Generator” in the header on all detail pages, which displays different colors and elements depending on the content of the blog post.
This works in such a way that each article is assigned a section and a discipline from a predefined list. Also, related countries are assigned to the article. These three elements are used to create the header of the article. The header consists of a gradient, which is made up of two colors, and icons, which are either in focus or blurred. The combination of these three variables makes each article header unique.
Even though the article header may look random to visitors, we needed a structure and a plan of how these elements should come together. Each section and discipline is assigned a color and each country has two icons.
With the help of the documentation on paper, we started with development. The gradient with the two colors was relatively simple, but the bigger challenge was how to define the symbols for the countries. After all, up to six countries can be assigned to one article and the symbols should be in different positions on a larger screen than on a smaller one.
The different country flags and symbols are automatically visualized by the frontend to match the content. Based on the number of countries, the order and the combination, this creates new and unique visuals over and over again. No single article is like the other.
On the technical side, we use SVG graphics and CSS features to display the appropriate layout. This allows us to support the many different browsers and as many device variations as possible.
Normally, with multilingual websites, the entire site is translated, but not with V/A – Various Artists. The blog articles are in English by default, and only selective blog posts are translated – be it in French or German or even sometimes Arabic. Besides the option to translate the blog articles completely, there is also the possibility to add a link to an external publication. All this is possible thanks to the language switch feature, which we have designed and implemented in a customized way. This custom solution consists in having both the English text and the other language in the same post, with visitors being able to switch back and forth with a toggle button.
In order to achieve a good result, there were a few things we had to consider:
Search engine optimization, fast loading times and layout flexibility
To make life easier for the editors, we have also defined a template with two language blocks where content can be inserted and the language can be defined. In addition, the editors have the freedom to design the content within the page as they wish.
Animation on page change
For example, when moving from the home page to the content page, we load the content from the next page into the current page using Barba.js and then use GSAP to hide old content and show the new content. For other links, like the imprint, newsletter, or search, we create completely new elements within the current page. This means for the users that the content of the website never has to be completely reloaded. As a result, everything loads faster and much less data is requested and sent.
Another special feature that the Hammer design agency came up with is the way the filter that sorts the different posts is supposed to work. While you select the criteria in the filter overview, it visibly generates the results in the background.
For the filter, we rely on the Preact library in the frontend. This is particularly suitable for lightweight web applications. Preact allows us to implement dynamic content and interactions with complex requirements within individual parts of the website particularly well. In the project for the Education Department of the Canton of Zurich, a much larger web application, we also used React, for the same purpose.
The newsletter signup form uses micro-interactions. If you forget to fill in a field, a popup shows which field was forgotten and the latter moves briefly.
Thanks to the many possibilities CSS3 offers nowadays, we were able to implement all these interactions with it.
We are proud of the final result, which we have developed together with Hammer and Staacks. The implementation of a website with special functions and animations like Various Artists requires a delicate touch and a particularly close collaboration between designers and developers. Hopefully the users will enjoy the website as much as we enjoyed programming it.
Our project team