XING, the german LinkedIn if you like, is the leading business network in German-speaking countries with 15 million members. Like all big online corporates, the UI design of XING has grown over the years vividly in all directions. I was part of a small group of UI Designers, that decided to groom the vibrant design organism of the company and to give it a refreshed new design language.
New XING Design Language
German design done digital
Our research phase took us far into other genres of design and back into german design history. The maxim of famous design pioneers of the bauhaus or Dieter Rams "Less, but better" shaped the way we liked to approach the new design language for XING.
Less boxes, less lines, less unnecessary design helper elements. Simply said: we questioned every pixel in order to attain a clean, aesthetic and uncluttered UI.
Shaping the network to stand out against the content
We decided that we wanted to let the contents of our network to be the hero of our network. We reduced our colours in order to let the content of our clients shine. We wanted our readers to naturally understand who is acting on our network and what is part of the consumable content. That is why we decided to give our actors a unique profile image shape.
The superellipse – what makes her so elegant?
A superellipse is a shape intermediate between a square and a circle. Apple has been using the superellipse shape since iOS 7 in order to align their software with the technique of continuous curvature that they use for their hardware. The difference to a simple rounded rectangle is, that the curve of the edges does not start abruptly. This leads to a more pleasing shape to the eye as it resembles a more natural curve.
With iconography we again looked back to german design history. The iconic work of famous designer Otl Aicher for the German Olympic Games 1972 took a leading role in the process of finding a new language for our icons. Like in Bauhaus design we wanted them to consist of only simplest geometric forms. We wanted them to be both graphic and strong. At the same time we wanted to use them much less in our overall UI in order to give them a stronger voice.
XING has been using the Fira Sans Regular and Medium for a long time. However the usage was mainly characterised by an overuse of green coloured links all over the UI. The true character of Fira almost never showed, since it was rarely used in bigger font sizes. We decided to raise the contrast for the UI by allowing bigger size jumps and by introducing the Fira Sans Bold instead of the Medium cut.
XING has developed over the past two years a design system that unites UI guidelines and code in a big library we endearingly call „The Brewery“. We have been using it successfully on web and are now carrying it over to our iOS and Android platforms, while at the same time we build it on our new design language.
The XING Design Language.