Initial Situation

The existing website was mostly outdated and far behind what one would call an appropriate outlet for a company with such a high demand for professionalism and unique solutions. A prolific and lively process, involving the client and a small network of marketing heads and developers, provided a sound basis for relaunching the corporate website and introducing the new corporate design.

Shot of paper work and prototyping / wireframing process

Content Architecture

Main goal was to reorganize and sort a wide range of available products and services, while creating navigation structures and tools to make this huge ammount of content accessible and tangible for the sites audience. Considering existing design guidelines, Pro Video’s business divisions Broadcast and Conference Technology where re-introduced and provided the basic framework for the sites content architecture and navigation concept.

The front page features a dynamic flash application and a layout characterised by catching simplicity and clarity

Interface & Screen Design

Much of the early stages of this project where spent on creating rough sketches of possible walk-throughs, flows and usage scenarios that could affect the final interface and design. This paper work was a solid basis for developing first visual prototypes in form of detailed wireframes.

Referring to the following process of testing and examining important accessibility, usability and branding aspects – final content modules and elements where elaborated and refined. After further iterations of previously developed prototypes and strongly focussed on visual language, typography and layout, a coherent interface covered by a reduced, yet emotive design was created. (relaunch date still to be announced)

Collapsible sitemap element placed below the main navigation for quick content access and overview

Consistent design and coherent identification of Pro Video’s (main) business divisions Broadcast and Conference Technology

Logo * construction details

Color Palette & Typography

Excerpt of identity presentation & design guidelines

Screen Design

Main task was to analyze and rethink the existing website’s structure and to develop a new approach of making available contents more accessible while improving the sites usability. In a second step the look & feel got a complete overhaul based on already created prototypes and the magazines’ given style guidelines.

Exemplary screens illustrating the wireframing process

Front page featuring modular layout and maximum flexibility in design for various forms of magazine content

The new “magazine” – core feature and interface for browsing available contents chronologically, by popularity or content type

Huge variety of (content-) page types underlining the flexibility of the design solution

Individual landing pages and marketing tools gained special focus during concept and design process

Redesigned logo and mark reflecting business context and brand attributes

Logotype and mark * construction details

Color Palette & Typography

Screen design draft for presentation purpose

“raster-noton . archiv für ton und nichtton” is meant to be a platform – a network covering the overlapping border areas of pop, art and science. Emerged from the fusion of the two labels Rastermusic and Noton (in 1999) they realize music projects, publications and installation works. common idea behind all releases is an experimental approach – an amalgamation of sound, art and design. Read more at raster-noton.net

Main idea was to create a virtual representation of raster-noton’s artistic output since 1999 which manifests itself in a multifaceted back catalogue consisting of more than 70 releases by now. The result is a generative visual form, that utilises simulated and behaviour-driven organic structures embedded in an interactive environment.

In addition to it’s visual part, the software was designed as an interface to interact with Cycling’s Max/Msp to provide several ways of creating generative (sound) compositions based on the contextual relations between individual releases and elements within the labels catalogue.

Sign and visual structure

Based on their structuring function the catalog’s “series” are representing central clusters within the form and are shaping the basic structure of the generative sign. Each released item / format is represented by an element within the basic shape, while contextual relations between individual releases are displayed through pre-defined ring-objects and resulting combinations.

Visual parameters of containing elements and ring forms are displaying specific qualities of unique releases (i.e. playtime, format: CD, vinyl, catalogues & books) as well as their relations to each other (same artist, same release year, same series, etc.).

Generative form

The dynamic form is based on a flock simulation containing all release items from the labels catalog – each of them presented by a unique element within the swarm. In random temporal intervals a single release is selected by the system itself and the relations to all remaining element are displayed through uniquely defined rings objects.

In combination with surrounding series elements the emerging rings forms are shaping the visual appearance of the generative sign whose underlying structure and content are continually changing with each newly released item.

Print-design mockup for presentation purpose

software – user interface

In addition to it’s formal structure, the sign can be defined as a floating map, which is abstract and concrete all at once. Graphic forms are replacing / representing real objects, which are organized within a dynamic mapping and can be perceived spatially and temporal through associative exploration.

software – software interface

Direct communication between Java application and Max/Msp is enabling participants (performers) to retrieve contextual relationships within the release catalogue as numeric data that can be used for controlling and triggering sound and visual generating software. These data / signals are receivable within simple network structures – creating a collaborative layer for multi-user performances.

Generative Composition

The acoustic layer is utilizing the same relationships between single catalog elements, which are now translated into sonic structures. The series clusters are shaping random, yet unique rhythmical patterns while relationships between released elements are triggering generative sound synthesis and manipulating sound attributes such as envelope, grain, frequency and stereophony.