akzente is a leading sustainability consultancy partner for companies, organizations and brands that want to shape their future responsibly. For over  25 years already, they have been working at the forefront of sustainability. It’s what drives them every single day, and never stops to excite them. Their motto: Responsibility is our business.

Made in collaboration with Serious Business GmbH

Outdoor Guide stands for competent and comprehensive information about the world of outdoor sports. It’s a Swiss magazine that informs twice a year about trekking, mountaineering, biking, canoeing, backcountry skiing, snowboarding and free riding. You will find very useful equipment tips, inspiring interviews and portraits, thorough tour recommendations and stunning stories of all sorts of expeditions. 

brand strategy.
user experience.

brand strategy.
UX & UI design.

akzente Logo on a Photo of a Tunnel

Develop a unique look to capture and communicate in an authentic way the personality and values of akzente. Design a website that creates curiosity and interest with the users to learn more about akzente. 

THE OBJECTIVE: How it all starts.

Screenrecording of an Animation on the Landing Page for akzente
Photo of the Team before a wall full of Post-its, discussing during the workshop
Animation of Work in Progress for Akzente

We started off with a branding workshop. Combined with client interviews and extensive online research, this was the starting point to define the suitable brand model, personality and design values for akzente. Based on this foundation, we then developed a storytelling and visual concept (see below). In a second workshop we further developed the structure of the website together with the akzente team.

THE PROCESS: Our journey from idea to execution.

Mockup of the Career Page for akzente

As a befitting extension to the new brand strategy for akzente, we developed the storytelling concept of “guidance”. This was the foundation for the visual concept of the website: the guiding line. The simplest expression of giving direction and visualizing a journey is to use a line, which became the key visual element. A line combined with a dot can visualize the collective journey. The circle around the dot can be used to visualize the destination or a stopover during the journey.

CONCEPT: The big idea. 

Screenrecording of an Animation on the Landing Page for akzente
Mockup on iPad and iPhone of the Akzente About Page
Mockup on an iPhone of the Akzente Expertise Page

After a lot of wireframes, prototyping and user testing, the new website for akzente was born. As defined in the concept, the line is now used as the main visual element to give the user direction, supported with other interactive visual elements to provide the best possible guidance. For the imagery we chose photos that have a clear perspective, and use subtle lines on the images to guide the eye and emphasize this perspective direction.

THE OUTCOME: What we achieved.

Animation of different Cover Images for the Akzente Website
Animated Icon for an Industry Akzente is working with – ENERGY AND RAW MATERIALS
Animated Icon for an Industry Akzente is working with – FINANCIAL SERVICES
Animated Icon for an Industry Akzente is working with – POLITICS AND ADMINISTRATION
Animated Icon for an Industry Akzente is working with – TECHNOLOGY, TELECOMMUNICATIONS AND THE MEDIA

We developed a series of bespoke icons for the different industries akzente is working with. Every icon has the same structure, starting from a dot and a circle – elements which we are using throughout our visual concept. The outcome is a set of abstract icons representing the various business sectors. This style perfectly reflects the personality of akzente: passionate, knowledgeable and pragmatic. 

ICONS: A custom set of user interface symbols for akzente.

Mockup on iPad and iPhone of the Akzente Expertise Page
Screenrecording of Menu for the Blog on the akzente Website
Mockup on an iPad of the Akzente Cases Page
Screenrecording of an animated Timeline on the About Page for akzente

More work.

Berg & Macherbrand design

Outdoor Guideeditorial design

Brukseilasbrand design

Editorial artworkillustration

Kustermanneditorial design

Omnevabrand design

Siemens Financial Servicescorporate editorial design

supertrail.guidecorporate identity

Seraphvisual identity

Logotypeslogo design