Web design and data visualisation for the Max-Planck Institute for Metal Research

Introduction

MAPLogo

The Max Planck Institute was divided into the “Institute für Physik” and the “Institute für Werkstoffwissenschaft” up until 1996. In 1997 this division was abandoned and renamed “Institute für Metallforschung” headed collectively by a board of directors.

In 2002 all departments moved into the new annexed building in the Seestrasse in Stuttgart-Büsnau. With this transformation of MPI, the company wanted to brand a new corporate identity with the launch of a new website.

 

Business identity

With their relocation, the Max Planck Institute required an online platform that would inform visitors about the department for metals research and assist visitors with navigating the new facilities.

Inclusive in the website’s design and information Architecture, it was necessary to build information design for the content areas, where I helped in creating the contact pages, time lines, and seminars.

 

Approach

The information Architecture and layout design had already been created. I worked with MPIs corporate design guidelines to ensure that logo treatment and consistency in color was guaranteed.

The website design had to be optimized for a screen resolution of 800 x 600 px, and had to be built to run on the browsers Netscape and Internet Explorer.

 

Process

I created high-fidelity mock-ups directly in Photoshop templates.

Workflow
I began by first drafting visual content, such as road maps and diagrams for data visualization, in Macromedia Freehand, which I would later bring to Photoshop. However, the initial step caused diagrams to appear blurry. I then decided to design directly within Photoshop and create all diagrams in the context of the new site’s look and feel. While a slower process, the greater benefit was the ability to immediately evaluate results and narrow a selection from there.

 

Diagrams

Testing the color palette on a high fidelity mock-up to evaluate look and feel of bars.

Testing the color palette on a high fidelity mock-up to evaluate look and feel of bars.

Testing various ways of enhancing diagrams with typographic embedded values, and treatment for a legend.

Testing various ways of enhancing diagrams with typographic embedded values, and treatment for a legend.

Diagram with legend treatment.

Diagram with legend treatment.

 

Diagrams that visualize data points were required for several areas on the website. The final diagram with legend treatment provided users with an array of information. Users could learn about a number of dissertations and research conducted at the institute from previous years, the amount of distribution of students within Germany and abroad, and the total of those distributions by degree.

In creating diagrams, some innovation was required for visualizing the data to relay contents of each diagram effectively. My efforts were restricted in that the screen estate in the content area limited use of diagrams that contained lots of data points with extreme diverting values.

In order to maintain consistency across all diagrams and tables, I used bars as representation form, and gave them a 3D look, to make them appear more interesting.

There were tables with up to seven categories of data points.

I utilized a color scheme that dominated the site’s look and feel yet harmonized the color used in MPI’s logo and corporate design.

Besides visual representation of color schemes, bars, and grids, each diagram had to have a treatment for a legend that would enable its readers to identify the displayed values. In some cases the diagrams had to be accompanied by their raw data in tabular form. In such an instance, I adjusted the color scheme with bright colors to ensure legibility of all content.

 

 

Design

Contact

MPI-andfahrt-color-draft

 

mpi-Anfahrt-download

I created an underlying grid consisting of vertical and horizontal grid lines, and included a 45º diagonal grid on top of it, in order to display diagonal running streets.

When the diagonal grid distorted the map, making it too difficult to read, I achieved a better result by breaking the diagonal grid where it made sense.

To accommodate international web visitors with requirements different from locals, I created a second map that revealed a larger area.

For abroad visitors, I repurposed the design of the first map, removed all information related to public transport, and highlighted the route one needs to take when traveling by car. In addition I removed all color from the map so it would use only gray values, since most people have black-and-white printers.

The contact page contains the physical and post address along with phone numbers. Besides contact information, I provided a road map that informs visitors how to get to the Max Planck Institute by car and by public transport.

A download link provides visitors with PDF of a road map and details for arriving MPI by car.

For the creation of maps, I used the input of those delivered by MPI.

My approach was to simplify the map to show only the most relevant information. The color palette for the map is reduced to the MPI petrol, black, and a tint of black to convey a gray color for buildings and other important landmarks that help guide orientation. The color palette also contained the dark green used by Stuttgart’s public transport system, and a blue used for the German highway system.

 

mpi_farb_3d_diags-Anfahrt

 

Events and seminars

MPI offers a rotation of events and seminars. I created a section dedicated to their program, which gives visitors an overview of upcoming events.

When clicking on an event’s link, a pop-up window appears and allows users to access the event’s details.

64.1_mpi_vorlage_veranstalt

The content separates with background color and lines for improved readability. Lastly, I applied tints of black, and MPI’s corporate design color petrol for alternating rows, which makes the presentation visually more appealing.

Links are underlined, and detailed information is presented in a pop-up window.

61.4_mpi_vortrag_thema

 

History timeline

I designed the timeline of MPI’s important figures with access from the left side of the main menu. The timeline is organised in four columns, with figures listed in chronological order. Starting with the earliest entry at the top, visitors can scroll down to see all MPI key persons.

64.1_mpi_vorlagendatei_3

mpi_persoenlichkeiten

 

Summary

My contribution was in the successful launch of the MPI website that coincided with relocating all departments into a new annexed building. I designed seven diagrams and four tables containing data points, and provided guidelines for future reproduction. I produced a history timeline for visitors to view key MPI figures over the years. Lastly, I created two maps, including a printable version with description, for the site’s contact page.