ERROR!!

Please activate JavaScript

You need Adobe Flash Player 10 to view this site. Click the Link below to download the player.

Get Adobe Flash player to see the Portfolio of Johannes Tonollo

Person responsible within the
meaning of the Press Act

Johannes Tonollo
Sodtkestrasse 12
10409 Berlin, Germany

Johannes Tonollo - Portfolio

Gods Engine

Interaction, Installation

Gods Engine is a multi-touch table application for exhibitions. The Gods Engine allows the visitor to see behind the curtain of the GreekÕs mythologies in a playful way. The visitor slips into the godÔs role and is able to interact with the citizens with special abilities via gestures. The visitor decides whether to be a good or evil god, but It is important to keep the moral balance. If you spoil the citizens theyÔll turn decadent, get lazy and fat. On the other hand, if you are too evil they will be afraid of you and hide. The changing environment is an indicator for the success or failure of the interaction. (Partner: Tobias Friese Matthias Dittrich) - The visitor slips into the godÔs role and is able to interact with the citizens with special abilities via gestures. - The changing environment is an indicator for the success or failure of the interaction.

Opener Screening

Motion

The opener was created to open up a screening by the study path for camera (avmk) from the Beuth Hochschule Berlin. ten short-films were presented on a screening called "Kurz Film Rolle". The viewer gets prepared for the show and is introduced to the study path. He gets an impression of what to expect. Since the interplay between light and shadow is important for the work with the camera, it finds place as a key visual for the whole project. - The opener reflects the work behind the camera with the interplay between light and shadow. - Type appears: "audio", "visual", "Media", "Camera".

Titles Screening

Motion

Next to the opener, part titles were created to guide through the program in a visual manner. They separate each film from the other, without breaking the mood of the screening. These sequential titles consist of distinctive elements of the running movies. People seem to act in front of the screen. The silhouettesÔ interactions introduce the upcoming title. - People seem to act in front of the screen. The silhouettes' interactions introduce the upcoming title.

Green Scenery

Motion

This short film shows the effects of colors and their influence on the human's behavior. It deals with the ambivalent effects of gray and green. The color gray is well known for its calm, silent and neutral presence. These attributtes stand for monotony and solitude. Those associations lead to a calm and slow motion by itself, which reflects a person's state of mind. In contrast to this, green is a vivid and joyful color. It can activate a person's consciousness. (Partner: Martin Wirschke) - Gray: The actor lives in a gray everyday routine. He collects gray cubes, that draw his attention on his way. - Green: In his green dream world he realizes that the gray cubes are able to absorb the green vivid colors. - Gray Green: Back in the gray everyday routine he spreads the different green color tones to vivid the gray scenery.

Emergency specs

Interaction

According to the health statistics, far too many people die because of failure to render assistance in an emergency. The potential helper is too afraid of doing something wrong. We have designed the Emergency Specs to assist properly while handling an emergency situation in order to take the helpers fear and uncertainty. The user gets all relevant information via Head-Up-Display automatically and can easily follow the step-by-step instructions. The Emergency Specs are a device that could find place in the first-aid-kit for cars or public places. (Partner: Tobias Friese) - The user gets all relevant information via Head-Up-Display automatically and can easily follow the step-by-step instructions.

Type in Motion

Motion

Illustration of an acoustic input via typographical motion. The focus of this type animation is the motion within a conversation. This motion ought to reflect the character of the conversation typographically. The fundament for this was a scene from the movie Starwars.

Touch Panel

Interaction, Prototype

The concept of the Touch Panel was developed for "Recaro Aircraft Seating". For controlling the passengerÔs seat, the passenger uses a handheld device that can be stored in the seatÔs armrest. It ensures a handy accessibility and a direct view to the handheld from each position. The software menu is limited to three options. The low hierarchy and reduction of control elements enables an easy interaction with the seat and prevents an overflow of information. It is easy to switch between the functions to adjust the seat individually. (Partner: Fedor Glasenapp, Andre Ostrowski, Matthias Dittrich, Tobias Friese) - The handheld device can be stored in the seat's armrest. It ensures a handy accessibility and a direct view to the handheld from each position.

Light Cubes

Interaction, Prototype

The basic idea for the Light Cubes is to portion light haptic and intuitive. The conventional way of switching on light is an everyday problem. Even though light-switches seem to be simple in usage, it is a very abstract process. The Light-Cubes make the light haptic and intuitive to adjust. A simple rule: the more cubes at one place, the brighter the light. The color of the light can be changed by turning the cubes sidewards. The colors of the cubes get mixed. Easily, the user can set his individual light-intensity with the fitting ambient. (Partner: Matthias Dittrich) / The cubes communicate with each other to adjust the lightÕs color.

Fillin the Gaps

Interaction, Installation

With this installation concept we tried to fill the gap between reality and digitality. It is an augmented reality installation for an exhibition that can be walked trough. We have tried to create an awareness for the topic real-digital. The visitor interacts with the topic based information. There is a contrast between real (static) and digital (flexible). The digital layer is visible through interaction with a cellphone. To get all the information the visitor needs to see both, the real and the digital layer. (Partner: Christopher Warnow) / The digital layer is visible through interaction with a cellphone. To get all the information the visitor needs to see both, the real and the digital layer.

My Mail

Interaction, Motion

My Mail is an e-mail client with a focus on the connection between communicating people. The personal and digital relation to friends has priority. Therefore, the user only receives messages from his friends-list, to avoid annoying spam messages. The reduced GUI highlights the user's content. Because of that each contact hat a personal and individual appeal. The first concern was to create a single-window application, without the need to switch between frames. At the same time the application should fit the content. For that reason dynamic lists are used to show even longer e-mails in a useful and clear way. / Content is king.

ExiViz

Interaction, Installation

ExiViz is a concept for an interactive ambient information visualization of an exhibition in the ÈPergamon MuseumÇ in Berlin. ExiViz visualizes place and time of the exhibits. By visualizing place and time of the exhibits the visitor can easily follow the contextual changes within the exhibition. The visitor follows a predefined path from exhibit to exhibit. So the distance between place and time of several exhibits can be visualized. The visitor can see the pictographic visulization of the exhibit. By following the predefined path contextual information are visualized to give a sense of time and place.

Meaningful Transitions

Interaction, Motion

Meaningful Transitions is a website which was created in context of the Interface Design Bachelor's degree at the FH Potsdam 2011 by Johannes Tonollo. ÈMeaningful Transitions - Motion Graphics in the User InterfaceÇ deals with the use of animations in software user interface. This website documents transitions in a clustered way to show at which place transitions can be a helpful extension to the static user interface, because of cognitive benefits to enhance the user experience. Categories: Meaningful Transitions have the purpose to communicate the process of the interaction and the structure of the user interface. They focus on specific events, or explaining the user's interaction by animation. All transitions are clustered in 6 categories in order to differentiate the certain field of use. The aim is to present a scaleable collection of existing transitions. The transitions are documented in an abstract visualization to explain their purposes and filled with concrete examples. The close look at a transition offers the field of use, the mental model, the consistency, the cognitive benefit and the illusion. motion principles: ÈDoes your animation have weight, depth and balance?Ç [De Cock 2011: S.16] Disney's Twelve Basic Principles of Animation is a set of rules that defines a realistic impression of a motion with the basic laws of physics. Some of these principles have great relevance for the animations in the user Interface.

Google Analytics Alternative