https://mango-media.eu/media/pages/projects/wir-berlin-new/742d5aae16-1656421149/wir-hero.jpeg

Jump to the UI Design

* Wir Berlin * Wir Berlin * Wir Berlin * Wir Berlin * Wir Berlin * Wir Berlin * Wir Berlin

* Wir Berlin * Wir Berlin * Wir Berlin * Wir Berlin * Wir Berlin * Wir Berlin * Wir Berlin

Wir Berlin

Every little deed counts! Become an environmentalist in Berlin Mitte Too!

Some of the best projects to work on are those where the ethics of the brand are fundamentally righteous. The environment is in peril + it is on all of us to do what we can to help prevent any further damage. I believe that knowledge is power + by educating young people hopefully the changes we can make together help our planet survive.

Date

08/06/2021

Client

Wir Berlin

Location

Mitte, Berlin, Deutschland

Service

Web Development + Design

Tools

Sketch, CSS, Javascript, Wordpress, Illustrator.

CONCEPT CONCEPT CONCEPT

CONCEPT CONCEPT CONCEPT

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.

See Project