marcusschaeferinteractivedesigner

edenspiekermann_ homepage

Branding and design agencies SpiekermannPartners (Berlin) and Eden Design & Communication (Amsterdam) merged in the beginning of 2009. The new website had to be trilingual and uses the CMS ExpressionEngine.

Early draft

In the early stage we considered different concepts how the website could look and behave. Amongst others was this version with a big image on the homepage and horizontal slides that I created.

Single project view

As edenspiekermann_ has tons of great work to showcase, we quickly decided against effects where they are not useful and worked towards a simple but classy style presenting the high quality of the work in both the visual and technical way.

Projects grid view

While keeping everything simple and elegant we needed to find ways to organize the large amount of data. At this point of the process I was responsible for a large part of the data infrastructure.

Projects grid view

Creating several templates and different views like in the projects section was also part of my responsibility

Blog

People

A full rundown of Porsche`s new 911

It was a great experience to help firstborn`s design team on this project. The micro site provides a full rundown of Porsche`s new 911.

3D Camera Animation

One of my responsibilities was to create the camera animations for transitions between the 4 different features. I started in C4D but finished them in 3DMax.

Early draft

In this early draft for the site concept I tried to work with DNA like connotations.

Driving experience

We tried different ways to visualize the driving experience while keeping the car in the same place. This background display was one of them.

Close Up

This is a close up from an early draft I made. There are several close up`s in the Draw Your Road section of the the final micro site.

Preloader

This is one of my drafts for the DNA preloader

The final web site

The final web site

VB Top Ticket globe

For the Top Ticket promotion VB gave away 5 great trips with Australian celebrities. Each trip was represented by an island on the VB Top Ticket globe.

2D and 3D animations

I was responsible for the animations on the site which were created in 2D and 3D. This included transitions from the globe to the islands and back as well as several animations for ambient and hover states.

Mark Weber`s Monaco island

In a playful environment visitors can explore every trip with it’s details and choose the Top Ticket they want to win.

Building Kostya Tszyu`s island

Kostya Tszyu`s Las Vegas island

Warnie`s London island

Mick Fanning`s Hawaii island

The Living End`s Japan island

3D-Design for the 9 holes in the FedEx Cup game

For the FedExCup microsite nine fake sites were created to place ad banners that are the actual online golf game.

The gopher in C4D

The gopher was one of the obstacles I modled and animated for the 9 holes

Obstacles

There were several other obstacles I had to create like an UFO a caddy and an eagle

Wedge

I modeled three Golf clubs for the game.

Putter

Different swings had to be animated for each hole

Driver

Control your credit

The online game shows users the dark place a bad credit can put you in and offers to learn the basics of maintaining good credit by exploring the hotel.

3D design

To achieve a realistic look for all scenes and perspectives of the online game the rooms and most of the interior was created and animated in 3D using Cinema 4D and Adobe After Effects.

Older or newer

I tried different aging stages for the objects in the aquarium to find the right look.

Fliping books

Some of the animations I had to create, like a flying, flipping book sounded easier than they finally were.

3D 3D 3D

Even if they were inconspicuous most objects were created in 3D to get the realistic and consistent style we wanted.

The final web site

The final web site

The final web site

One day I want to...

Everybody dreams of things they want to do one day. This mashup site brings you a bit closer to them. Just type in your wish and a media panel will open to show content from several sources like youtube, digg or google maps.

Animations

My job was to create the animations and transitions for this microsite.

Preparation

I created and animated some of the elements in 3D before I imported them into flash.

The final web site

The final web site

navigate fast and easy

Smart Touch is designed to navigate fast and easy through the increasingly bulked structure and functions of mobile touchscreen devices. Even though navigation by tapping the screen is supported the user can slide on the screen to navigate faster.

Fibonacci numbers

Although the device is completely navigable without sound – it is an optional interface element that can help the user to navigate faster and get more information about the files or functions. All motions in the Smart Touch interface are based on the Fibonacci numbers which give them a natural flow.

Icons

These are some of the icons I created for Smart Touch.

Mapping a Nokia 6233

To understand the structure of standard mobile devices I mapped the most important functions of a Nokia 6233. This is a part of the map.

Pelican Uppercase

The perforated foam of a pelican case inspired me to cut out this 3D bitmap font.

Action Type

The idea was to create a typographic toy to show children different types of fonts.

Action Type isometric view

Using Action Types as base models, several random fonts can be constructed by interpolation.

3 Fonts

The 3 dimensional letters consist of three very different fonts – Actiontype Bold, Actiontype Light and Actiontype Serif (slab serif).

MacG. Type

My neighbour forgot his multi function tool in our kitchen. I started playing around with it and (surprise, surprise) tried to create a whole alphabet with the sentence “typography can be a multi function tool” in mind.

MacG. Type

Raketentim

This bitmap font is based on little crosses that are arranged on a 2×2 pixel grid.

Form follows function

Dessau Deparment of Design of the Anhalt University of Applied Sciences asked for a new website. The design is very minimal black & white.

Submenues

As the menue needs a lot of submenues and most new users search for definite content it is important to make everything well arranged and easy to find.

Javascript based prototype of the time line

For the existing Melnikov House website a simple and easy to use time line had to be developed to visualize a large amount (100+) of events and keep the possibility to update the time line with present and future events.

The final time line

The final piece uses Flash instead of AJAX and also offers the possibility to browse through the years as well as the single events. Clicking on an event makes the slideshow available and to reach future events the time line is draggable.

Art and environment homepage

The Federal Environment Agency asked for a Corporate Identity and a website for “Art and Environment” where they support artists which are concerned with sustainable and environment related art.

Core requests

Two core requests for the website of Kunst und Umwelt – Art and Environment were web accessibility and the possibility to be used multilingual. For the Art Project of Tino Sehgal a micro site had to be created.

Code and Design

I contributed to the site design and was responsible for the coding as well.