Building a
Publisher Brand

From 2008 to 2011 I used to design the brand DCTP - a company developing programs for German television.

This case study shows how I redesigned the brand, improved visual communication and brought a bunch of products to the market - designing co-branding with Spiegel, Neue Züricher Zeitung and BBC.

Together with the agency "Schnee von Morgen" I designed the web-TV of DCTP.
In 2010, we won the "Lead Award" as the best in it's category.

Scroll down

Scroll down

Branding Brand elements and guidelines

Logo redesign
Grid and sub-brands

Being the first designer working in the company for some time, I had to redesign the fundamentals. I built sub-brands for the products of DCTP, constructed the logo in a grid and defined an exclusion zone:

Logo of dctp Grid of dctp logo Exclusion zone of dctp logo
Corporate word-mark of DCTP
Logo of dctp.tv Grid of dctp.tv logo Exclusion zone of dctp.tv logo
Corporate word-mark of DCTP.tv

Brand colors
Screen and print colors

Defining a set of colors and the frequency they appear in a layout.
Products in different media needed to be designed, colors for different screens and different types of papers had to be defined consistently, like newspaper and high glossy papers.

Layout pattern
Consistent look

A simple composition pattern makes layouts look coherent across different formats and medias. It gives a basic information hierarchy, locating elements like the logo in a consistent manner.

Generic Layout Pattern
Newspaper with advertisement Advertisement 'König Einsam' Layout pattern for newspaper advertisement
Newspaper advertisement
DVD-Set DVD-set 'Mensch 2.0' Layout pattern for DVD-sets
DVD-set cover
Website Website item Layout pattern for website items
Item on website

Interface Design
WebTV with live-stream and media center

Outline drawing of a desktop screen
Homepage of dctp.tv Topic-page of dctp.tv grid view of dctp.tv list view of dctp.tv
Screen-shots of DCTP.tv

User Interface design of a WebTV platform. It included a live-stream, a media center, a shop for DVDs and a news section.

Interaction concept
Two modes in one interface

Users switch between watching video and browsing content. The interface offers two different modes, always focusing on what is relevant.

Mode 1 - Player
Mode 2 - Navigation

Information architecture
Content and menu structures

The information architecture maps all relevant parts of the navigation, functionality and content types. It describes the hierarchy and connections of contents. From it derive menus, page types and the site layout.

Information architecture of DCTP.tv
Information architecture of DCTP.tv
Information architecture of DCTP.tv - large view

Grid-based layout
Structuring the screen

I set up a grid system to place element in a structured way - guiding the eye and simplifying the layout.
DCTP.tv was designed as a desktop-only, flash-based website. Therefore I decided for a document grid providing flexibility to arrange different types of pages.

Layout with grid

Blueprint for modules
Detailed specification of the layout

As a briefing for the production I documented the behavior and exact layout in blueprints. The modules shows one of ten layout modules.

Blueprint for a module

Packaging design
DVD-sets with co-branding

Examples of iterative evolving DVD-designs

Conception and design of a range of DVD-sets for a co-branding of different European publisher brands, like SPIEGEL, DCTP and NZZ. Creating and implementing guidelines that are still used today.

Design pattern
Consistency in a range

I defined a set of generic layouts to define position, color, of elements in a DVD-layout.
The picture shows the pattern of the DVD-cover with an example.

Generic layout Example cover

Scale pattern
Consistency in different formats

The DVD-sets needed to fit different brands and different formats. Therefore I developed a pattern that describes how the layout adapts to different formats. The picture shows the scalability of the cover.

This approach describes how the layout is adapted
to different production sizes.
Thank you for your mail

Hello Johannes,

I was just looking at your website and I think we should talk about
.

You can answer me by mail:

Regards,

P.s.