http://mango-media.eu/media/pages/websites-apps/wir-berlin-new/afc585bc2a-1633167097/wir-hero.jpeg
Mango Media - Wir Berlin

Wir Berlin

2021

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.

There is no planet B!

At Goldener Westen, we have 3 core departments: websites, graphic design + motion. Wir Berlin was a great example of how ideas can cross each of these platforms + demonstrates our ability to collaborate throughout different mediums. The initial conception was an illustrative leaflet that outlined how to be environmentally conscious. Following this, a series of animated films were created to depict 4 characters + how they combat the climate crisis. It was my job as a designer + developer to design + build a website that represented this brand digitally.

A little UX theory

The four characters associated with Wir Berlin are a personification of the aspirations of the user groups - young children aged between 11 to 14 who are interested in environmentalism. Illustration, bright colours + motion are imperative to engage with our audience. The animations created by Goldener Westen are an integral part of Wir Berlin’s brand. They are important elements of the brand story + explain clearly what the business does. Younger users like the target audience for Wir Berlin have been found to have an increased engagement with videos, ranking over 200% more engagement than with written content. Therefore we have placed the videos as primary features up front + large on this site.

In UX (user experience design) your ‘call to action’ is the part of your website that tells your target audience that they should make an action. The words used should provoke emotion or enthusiasm. It’s all about being clear + concise with your CTA. With the character limit set at 35 characters per description line, you don’t have a ton of space to get your point across - so it is important to get straight to the point. Let your audience know exactly what you want them to do.

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

Related Projects

Start creating an award
winning website today!

Anything is possible,
Let's make dreams a reality.

Get a Quote!