There are lots of new online trends out there. Some go as quick as they came, some stay for longer. Last Round Table – two years ago – we talked about flat design, which is already replaced with material design. Other trends like card layout, split screen or storytelling are still valid and widely seen out there. We will not talk about those trends again, because we want to surprise you with four new topics.
At nexxar – for our business – we define a trend as something we can observe in the fast-moving spheres of the internet for some time and we can adapt to the world of Corporate Reporting. Let’s have a look at Corporate Reporting in general – the audience is widely diverse, the topic serious, the aim is – roughly spoken – to be innovative but trustworthy. Some trends do not support this and therefore disable themselves for good reasons. Others fit perfectly and are well used, for example, the idea of having a waterfall landing page. A few years ago, the waterfall page changed the paradigm of “everything on a landing page has to fit on the screen” completely and is indispensable nowadays.
Other trends look like a misfit on first sight – too funky, too fancy, too funny – but even if we can’t use them one to one in corporate reporting, we can get new ideas and inspiration from them. If it can’t apply on every page of the report, maybe we can use the idea on an innovative landing page, on inventive chapter entry pages, or in an outstanding magazine part. So nearly every trend is worth discussing and analyzing, and we decide very carefully which trends we want to use.
So, what exactly are the latest trends in digital design and how can we use them in digital reports? We have picked out a few examples for every trend that will give a good overview of different use cases and how to apply them to annual or sustainability reports.
Trend 1: Typography
Typography is our first trend. It faces us every day. No matter if on paper or on any digital device: it is omnipresent. Typography is a great tool to create personality, evoke emotion and set a unique tone to a website all while conveying important information. You might think now: Why is typography itself a trend? What really makes the difference is how we use typography. The very diverse use of it, is what makes it a trend to us!
General example: Octoplus
The website of the Swiss-based Octoplus Group is based on a typography concept: The website begins with a little animation that leads you to the project page. The letters, which are the initial letters of these projects, are used as a navigation tool. They are mouse sensitive which means that they react to your mouse movements. As the design is very clean it’s a nice feature. When you hold, the project page for more details opens.
You could use this kind of navigation for your magazine, for example, to present different stories. It’s not necessary to only use a letter – it could also be a catch phrase that gives a first impression.
Other examples: GSG Website Souffl Website
Report example: Clariant
Clariant also made use of typography as a design element within this year’s report concept. The online version uses bold typography through the whole report. They start with a high-contrast animation that already shows big and bold typography. On the landing page, Clariant has used the Gotham font in large font sizes for headlines, key figures and quotes. The font also does a really good job when it comes to structuring the page and setting highlights.
Other examples: Volkswagen Annual Report Telekom Annual Report
Trend 2: Vibrant colours/gradients
Colour is a design element that is predicted to be a design trend every year. Over the last months designers have used colour more boldly and strategically. Sometimes it is used to give a specific element more attention, sometimes to tell a story or to enhance the user experience, which has become a big part in design over the last years.
See in the examples how to use colour for structuring a landing page or setting highlights to different sections and contents.
General Example: Adobe
This is a massive micro site from Adobe with large sections. Each section has its own colour scheme. Colours change from light blue at the top to red to dark purple. It’s not just the solid colour – the photography also goes well with each colour. Because this is such a long page, colour helps to structure the page and tell the story of each section.
Other examples: Atlassian Website Baesman Website
Report example: Bayer
Bayer had a complete redesign and relaunched their corporate website this year. The new corporate design and identity includes a great selection of colours and gradients. The CD offers lots of possibilities to combine them and to create a certain atmosphere. One goal for the Online Annual Report was to show a variety of these colours which also match each section on the well-structured landing page.
Other example: Merck Group CR Report
Trend 3: Illustrations
You will find illustrations online in very few Annual Reports – if you’re lucky. For us it is a shame, because illustrations have a great potential compared to images. They are full of personality and emotion – more important: they give you the possibility to show more than a picture could say.
Another great thing about illustrations is that the illustrator has a lot of stylistic devices like applying his own style or handwriting, different techniques (e. g. pencil drawings or water colour) and additionally they have the opportunity to mix and combine them in a collage, for example. You can literally create the image you want, in the style you need.
General Example: Pitch tents
The company pitch tents created a website full of nice illustrations. It works really well because these illustrations are custom made and probably match the brand’s corporate design.
Other examples: Debiopharm Website Portion Website
Report example: ProSiebenSat.1
In the ProsiebenSat.1 Annual Report of 2017 you’ll find a lot of 3D elements that are illustrations as well, but in a different way. In this case, they use an animated and interactive illustration, which is actually a video. It serves as a navigation through segments as well; by clicking the plus sign you open the teaser that leads to a content page.
Other example: TUI Group Annual Report
Trend 4: Integrated video and animations
Last but not least, we would like to show you a trend that is about videos and animations. The web is the medium for everything that is moving. The ability of a web page is not to simply present information like in printed publications but to make that information move or even to interact with and impact that information to attract more interest.
I’m certain you all have noticed it yourselves: Everything that is somehow moving, is much more appealing to us and attracts more attention. This sums it up pretty well: One picture says more than a thousand words, but a video says more than a thousand pictures.
General Example: Tillamook
Tillamook uses a background video to show how easy it is to cook their cheese sauces. By scrolling the user gets the instructions which are indeed very easy – so easy that you could think: why do I need a video for that? But it is much more appealing using video instead of pictures or just a textual instruction.
Other examples: Zohra-music Website Levitpen Website
Report example: Merck
Within the magazine stories the Merck Annual Report uses a lot of little animations and a cinemagraph. The animations pop up when you scroll, and they also use a parallax effect within the images and counting numbers for figures. All these small animations and moving elements might not be necessary to transmit the content or message, but they provide the ability to “control” the users’ viewing direction.
Other examples: HUGO BOSS Annual Report
Recap
We are strongly confident that these four trends have the potential to add not only optical highlights but conceptual enrichment and value to your reports. We have chosen these trends particularly with regard to their compatibility to each other. But anyway, a design trend should be suitable to your company and corporate report. Whichever direction you choose, it is important to be aware of the impact that you can create.