Home Blog A new online magazine about art

A new online magazine about art

Ulrich Pogson Avatar
A picture with different design elements that were used in the project for Pro Helvetia.

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.

An animated GIF in which several different elements and colors can be seen
Header with generated elements and colors

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.

Allocation of Colors
Color assignment in the generator

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.

Generator - Desktop Countries
Organization of countries, elements and position

The whole thing is then enhanced with JavaScript animations to give the website a lively effect. When the page loads, the individual elements are animated into the image and when scrolling you see a parallax effect, which gives everything a 3-dimensional spatiality.

Language Switcher

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.

Screenshot of Various Artists Language Toggle

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

SEO performance and fast loading times were particularly important for us. The English content in the post therefore had to be separable from the other language, so that not only the language switching works, but also the search engine bots recognize that the text is in another language. We solved this by creating a custom language block where you can select which language the content is written in. Using a custom JavaScript solution that prevents the loading of duplicate content, the text in the selected language is displayed on the website instanously.

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

Moving from one page to the next is usually not a special experience when visiting a website. This is what Hammer’s designer wanted to change. Therefore, thanks to the use of Barba.js, GSAP and our own JavaScript code, you literally float to the next page.

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.

Archive filter

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.

Screenshot Archive Filter

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.

Blur Effect

To freshen things up even more and to convey an artsy-feeling, the design agency conceived a blur effect that runs through the entire website. This occurs when scrolling through the blogposts at the quotes, which are only visible when they are in the field of view. In addition, the effect is used as a background, so that what is behind it shines through transparently. To implement this we used modern CSS and GSAP, an animation library based on JavaScript.

Gif of quote becoming blurred on website

Newsletter

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.

Animation of the form if the email is invalid

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

Portrait of Ulrich
Ulrich Pogson
Project Management and Backend Development
Simon brainstorming
Simon Halimonov
Frontend Development
Portrait of Corina Schedler
Corina Schedler
Frontend Development