From Black to White: iA redesigns


After covering a high percentage of newspaper sites in Switzerland and redoing DIE ZEIT, iA moved to the other very challenging side of the online news spectrum: With we updated one of the big players in the red top press industry.


As of now, counts 124 Million page impressions, 7,9 Million visits and 1,3 Mio unique clients per month. Its printed sister Die Kronen Zeitung, commonly known as Die Krone, is Austria’s largest newspaper. It has an average daily readership of 2,970,000, which corresponds to 43,7% of all newspaper readers in Austria.

Strict Boundaries

As you will see, unlike Tages-Anzeiger and ZEIT ONLINE, the Krone project had very strict technical boundaries. Due to the very challenging time schedule, we could only make minor changes to the basic grid and the teaser definitions are pretty much the same. We had to focus on 1. optimizing the grid, 2. cleaning up the page structure and 3. improving readability and visual impact.

But let’s cut to the chase--in this post we’ll do a before-after comparison of the start page. Move the mouse cursor on and off the image to see the changes (the following illustrations all have the same mouse over functionality):

Move the mouse over the picture to see how it looked before.

1. Optimizing up the Grid

The grid was only slightly adjusted for the two lateral columns. All columns now have the same width which makes all teaser modules usable throughout the whole site. Giving the navigational column more space makes the menu more scannable and gives the brand more weight. In order to break the monotonous teaser grid of the old design we organized in the main content area in an asymmetric pattern.

Move the mouse over the picture to see how it looked before.

2. Cleaning Up the Page Structure

The most obvious changes happened above the fold. The header now uses whitespace instead of wasting it. The navigational elements are close together. Our changes:

  1. Group similar elements together and simplify the structure.
  2. Use consistent systematic font definitions.
  3. Less but bigger main teasers.
  4. Weather and search move to the upper right corner, where they are expected.
  5. The date is on top of the content, close to the brand.

Move the mouse over the picture to see how it looked before.

3. Improving Readability and Impact

The obvious change was to move from black to white. But we also eliminated redundancy in the navigation and optically structured it so the different groups and sub groups become more obvious. Other changes are:

  1. now is on brand and doesn’t look like advertisement anymore.
  2. We set visual anchors with red boxes to guide the eye.
  3. We gave the page more hierarchical structure by making important teasers bigger, less important ones smaller.
  4. We increased font size as much as possible (we couldn’t change the module size).

Move the mouse over the picture to see how it looked before.


There is much more to be said and still a lot to be done. For now, we are looking forward to see how develops with the new design guidelines and--most importantly--how it all plays out for them in terms of traffic.

* * *