Visual Concept

This design has been inspired by the moonstone, the name of which derived from the visual effect of ‘adularescence’ - an optical illusion that occurs when light is reflected between layers of minerals known as lamellae. The blue shimmer of the stone resonates through the soul + inspires the colour palette as people question whether or not they have witnessed the visual transition.

Having previously been only available in print format, it was the job of Goldener Westen to take
Wir Berlin to the digital realm of websites where the initial concept was turned into tangible interactive design. All the illustrations on this project were generated by Goldener Westen for the motion graphic campaign + graphic publication built previously, which makes up the core fundamentals of the visual communication of the web project.

On a website the hero section is typically a prominent image with text or a similar element that has pride of place at the top of the homepage layout + possibly on subsequent pages. It is front + centre of the design. This is the perfect place to showcase some beautiful SVG images that could be animated with CSS enabling interaction. In this case, the images were taken from all the objects associated with the four characters. The message of this image was reinforced by a strong title. In this first impression of the website, we needed to represent the brand’s core values as clearly + simply as possible, so that the leading statement addressed the users key challenges in a short sentence. The typography of the title throughout is large + striking - emphasising its message + highlighting its importance. For the H1 we have used a high contrast cyan to bounce off the sea blue in the background of the hero. The H2 has 3 styles; high contrast cyan for the CTA, negative strips on the sections to make them feel special without appearing overpowering + a timeless dark blue which is clear but gives the aesthetic a slightly more serious tone.

As this design was inspired by the moonstone, I wanted to encapsulate this metaphor through the nuances of the animation as there is a fine line between too much + not enough. I envisioned subtle movements of scalable vector graphics (SVG) brought to life by the power of CSS (style sheets for websites). This design embodies the values of nature + is reflective of the moons energy throughout the universe which in turn bounces back to earth. The aim is for the lunar energy that we visually create to illuminate users minds as they journey through an intergalactic, immersive experience. That diamond in the rough, the pearl in the oyster shell - some of the most precious elements on the planet. We wanted our users hearts to warm as they feel enlightened by the aura. Beauty + strength are the values synonymous with precious stones.