BÄM, einen FWA – Site of the Day Award für 100 Jahre Rittersport! Wir freuen uns riesig und haben auch ein paar Zeilen über das Projekt verfasst.

BOOYAKASHA LASER BÄM, we received a FWA – Site of the Day  Award  for one of our latest Project – 100 Years of Rittersport. We are happy like little teddybears and wrote down some lines for you guys about the project.

Zum 100-jährigen Jubiläum der Marke RITTER haben wir gemeinsam mit Kolle Rebbe das Special „100 Jahre Ritter“ realisiert. Die erste Herausforderung des Projekt war, eine Parallax-Seite zu erstellen, die keinerlei Einsatz von Plug-ins benötigt (sprich „Flash-Free“ ist – die Debatte ob/wie die Seite mit Flash besser gewesen wäre sparen wir uns an der Stelle).
Um dem Inhalt der Seite etwas mehr Leben einzuhauchen, haben wir über den räumlichen Parallax-Effekt noch einzelne Bereiche und Elemente mit Animationen versehen.

The requirements of the site were that it would run native without any plug-ins (namely Flash) and include a parallax effect. Besides the parallax, we added animations to key elements to bring new life to the site.
For the 100-year anniversary of the brand RITTER, we created – together with Kolle Rebbe – the Web special “100 Years of Ritter.”

HTML5 ist zwar in jedermanns Munde, aber die Performance und die Funktionalitäten, die man benötigt, sind in den vielen Fällen nicht Cross-Browser/Device einzusetzen, wenn die Zielgruppe unter anderem IE7+ nutzt.

Um die Animationen zu realisieren, hatten wir mehrere Wege ausgetestet. HTML5-Videos waren zu schwerfällig (vor allem wenn eine Vielzahl auf einer Seite eingebunden werden muss und innerhalb eines Hovers starten soll), GIFs waren von der Bildqualität, Weichheit der Alpha-Channels und Kontrollierbarkeit nicht zu gebrauchen. So kamen wir auf Spritesheets.

Everyone’s talking about HTML5, but the performance and feature one requires are not cross-browser/platform as of yet, especially if your target audience is still using IE7.

We tried out several ways how we could go about doing the animations. HTML5 videos were too slow (especially if over 50 are included on the page it should still play on hover, and not feel like a video), GIFs don’t match the picture quality and don’t have true alpha support, so we ended up using sprite sheets.

Wir haben die Animationen in After Effects erstellt und als Bildsequenzen exportiert. Um uns die größtmögliche Flexibilität zu erlauben, haben wir mittels FFMPEG und PNGQuant ein kleines Tool entwickelt, das die Bildsequenzen in Spritesheets umwandelt, diese komprimiert und auch direkt den Javascript-Code erstellt, sodass die fertigen Animationen begutachtet werden können. Mit dieser Vorgehensweise konnten wir die optimalen Einstellungen finden und Änderungen vornehmen, ohne jedes Mal wieder alles neu zu schreiben.

Die so erstellten Sprite-Animationen sind gut kontrollierbar, da man Frames einzeln anspringen kann, und benötigen kein extra Plug-in. Allerdings gibt es Nebenwirkungen: Da hier keine Teilbilder gespeichert werden, entstehen größere Dateien als bei  der Erstellung von Videos.

We created the animation in After effects and exported these in picture sequences. To allow us the greatest flexibility, we created a little tool with the help of FFMPEG and PNGQuant, which stitches the sequence together, compresses it, and outputs the finished javascript and HTML code so the animations can be previewed and tested directly in the browser. This allowed us to tweak the animations very quickly, without rewriting the code until we had the settings just right.

Auch für die Erstellung der 100 Jahre Ritter-Timeline haben wir uns ein kleines Tool gebaut, das uns half, den Parallax-Effekt zu erstellen. Da über 150 Einzelelemente nur schwer individuell bewegt werden können, haben wir diese auf Ebenen aufgeteilt und die Ebenen einzeln verschoben. Im Tool konnten wir aus Photoshop heraus alle X/Y-Positionen sowie die entsprechende Ebene, in der das Element auftauchen sollte, einpflegen. Des Weiteren sind hier auch die Tooltip-Texte und Tooltip-Positionen etc. vermerkt worden. Generiert wurden die HTML-, CSS- und JS-Teile der Timeline, sodass wir nicht mehr einzeln im Code Änderungen vornehmen mussten.
Zur Rittersport 100 Jahre

Another tool was written for the 100-year timeline. As the timeline includes more than 150 separate elements, which we didn’t want to move individually for the parallax, we merged these elements onto several layers. To help us find the right starting point and the speed, we first transferred the X/Y positions of the elements from Photoshop into our tool, and could then easily change positions and speed of the elements without going into the code every time. The tool renders out the final HTML, CSS, and JS for us. We can also easily add tooltip texts in multiple languages and attach videos without having to search through all elements.
Visit Rittersport 100 Years

Kristian und Jonas haben es nicht ausgehalten, spontan die Boards ins Auto gepackt und sind nach Montafon gedüst. Vor Ort haben sie sich direkt mitten rein gestürzt und den gigantischen Nike Park erkundet. Sie verfolgten die Action hautnah und konnten endlich mal mit den weltweit verstreuten Projekt-Beteiligten persönlich anstoßen.

Als sie nach zwei sonnigen Tagen im Schnee zurück in der Agentur waren, redet sie aufgeregt wild durcheinander. Bis Kristian unterbrach und meinte, es mache kein Sinn alles zu erzählen, das müsse man sehen!

In diesem Sinne, ziehts euch rein:
Nike Chosen Sessions – Photo Roman

Webdesigner Mag – Issue 195

Wir flippen aus! Das englische Magazin “Webdesigner” berichtet in seiner Rubrik Design Diary über unsere Arbeit bei demodern. Ganze zwei Doppelseiten Making-Of zu unserem Webspecial nikechosenseries.com. Sobald wir eine Freigabe haben, stellen wir euch den Bericht als PDF zu Verfügung. Wer nicht warten kann, bestellt die aktuelle Ausgabe einfach online oder ihr lasst sie euch einfach – so wie wir auch – von Freunden aus London mitbringen. Vielen Dank und Grüße nach UK! Und jetzt zieht es euch rein.

We’re totally stoked! The UK magazine “Webdesigner” just released a four pages design-diary-feature about our webspecial nikechosenseries.com. As soon as we get our hands on the PDF version, we will publish it here for download. For those who can’t wait, just order the recent issue online or ask a friend – as we did – who’s going to pick up an issue during his next London trip. Many thanks and all the best to the UK. Check it out now!

Das Mag bekommt ihr hier:
www.webdesignermag.co.uk

Die „Nike Chosen Sessions“ sind das große Finale des Video-Crew Contests und der Chosen Series. Für das einwöchige Event schufen wir eine Website, die anhand einem Zeitstrahl alle Aktionen chronolgisch darstellt und den User so eine Woche lang mit Content live vom Geschehen versorgt. Ein besonderes Highlight ist das mit Facebook verknüpfte Live Ranking, welches den Usern ermöglicht Ihren Favoriten zu unterstützen und in die finale Auswahl des Wettbewerbs zu wählen.

The “Nike Chosen Sessions” are the grand final of the video crew contest and the “Chosen Series.” For the one-week event, we built a website based on a timeline, which supplies all the content chronologically to the users. A special highlight is the facebook-linked live ranking, which enables the user to support their favorite Rider and vote for him or her in the overall final of the contest.

http://www.nikechosensessions.com/

Für die neue Kollektion von TWO THIRDS bekamen wir eine Auswahl von Bildern aus dem Lookbook der Spring/Summer-2012-Kollektion zur Verfügung gestellt. Da sich die Ästhetik dieser Bilder ruhiger, kontemplativer Momente – wie man sie nur am Meer erleben kann – bedient, entwickelten wir daraus die Idee, eben diese Momente als Kollektionsfilm erfahrbar „einzufrieren“.

For the new collection by TWO THIRDS we were given a selection of images from the look-book for the spring/summer collection for 2012. Because the aesthetics of these images go for quiet, contemplative moments – as they can be experienced only by the sea – we came up with the idea of making these very moments a “freeze-frame” experience for the collection movie.

Aber wie macht man das? Die Antwort war naheliegend: Es sollte ein Raumgefühl entstehen. Dazu müssen als Erstes die Bilder in perspektivische Ebenen aufgeteilt werden. Man trennt, einfach gesagt, den Vordergrund vom Hintergrund, damit man diese unabhängig voneinander bewegen kann. Hierzu sei angemerkt, dass die Photoshop-Funktionen „Kante verbessern“ und „Inhaltsensitives Füllen“ eine echte Zeitersparnis bringen.

But how do you accomplish that? The answer was obvious: We had to create a feeling of space. At first the images had to be divided into perspective planes. The foreground is – to put it simple – separated from the background so that they can move independently. Hints for this kind of work are the Photoshop functions “refine edge” and “content-aware fill” which work frighteningly well and are real time-savers.

Für einen ganz speziellen Effekt – mit FreeForm – haben wir für die Einstiegssequenz der Strandszene noch eine Tiefenmap erstellt, die definiert, welche Teile eines Bildes vorn und welche Teile hinten sind. So erzeugt man relativ einfach mit einer Kamerafahrt den Eindruck einer bewegten dreidimensionalen Szenerie.

For a special special effect on the beach scene – with FreeForm – we had to create a depth map that defines parts of an image to be in front and parts that are in the background. So we created, relatively easily, a travelling camera movement to provoke an impression of a moving three-dimensional scene.

Die in Photoshop vorbereiteten in einzelne Ebenen aufgeteilten Bilder haben wir dann als Kompositionen in After Effects importiert. Mit dem JSX-Plugin pt_Multiplane (auch sehr zeitsparend) haben wir dann die Ebenen entlang der z-Achse in den Raum hinein verteilt, so dass sie nur aus genau einer Kameraeinstellung das Originalbild wiedergeben.

The images were prepared in Photoshop using individual layers, we then imported into After Effects as compositions. With the JSX plug-in pt_Multiplane (also very timesaving), we then distributed the layers along the z-axis into the depth of space so that they reflect the original image only from one camera angle.

Jetzt galt es, die Kamerafahrten so zu planen, dass die Animationen zwar das Gefühl der Bewegung vermitteln, aber dennoch nicht ihre zweidimensionale Natur verraten. Die räumliche Wirkung haben wir dann noch durch einige strategisch im Raum angeordnete schwebende Partikel und wandernde Blendenflecke so verstärkt, dass fast ein Gefühl von Superzeitlupe entsteht.

Now it was time to plan the tracking shots of the camera in order to create the feeling of movement without revealing their two-dimensional nature. We then emphasized the spatial effect with a couple of strategically placed floating particles in space and travelling lens-flare effects, so that there was almost a feeling of super-slow motion.

Das brachte uns auf die Idee, den Akteuren selbst auch noch Bewegung zu verleihen: Mit dem Marionetten-Werkzeug ließen wir die Figuren sehr langsame Bewegungen ausführen, die man in normaler Abspielgeschwindigkeit zwar kaum wahrnimmt, die im Gesamtzusammenhang aber einen großen Teil des Effektes ausmachen.

This gave us the idea to also give the protagonists themselves movement: With the puppet tool, we added some really slow movements to the actors, which are hard to see at normal playback speed but which added a great deal to the full effect.

Die Auswahl der Musik („Cornered To The Cusp“ von Butcher The Bar) trägt natürlich auch ihren Teil dazu bei, die ruhige Atmosphäre der „eingefrorenen Momente“ zu vervollständigen.

The selection of music (Cornered To The Cusp by Butcher the Bar) contributed its part to ensure the peaceful atmosphere of the “frozen moments.”

TWO THIRDS SS12 Collection

Was für eine Ehre. Das CUTOUT Magazine, meistverkauftes Design & Pop Culture Mag in Malaysia, führt uns in der Liste der 10 besten Interactive Agenturen für Ideen. Es scheint sich wohl bis nach Süd-Ost Asien herumgesprochen zu haben, dass mit “Sounds of Hamburg” und der “edding Wall of Fame” die beiden meist ausgezeichnetsten Online Projekte 2010 und 2011 aus unserem Hause kommen. Aber lest selbst, denn in ihrer aktuellen Ausgabe, die seit letzten Freitag erhältlich ist, gibt es dazu noch ein Interview, dass wir mit CUTOUT geführt haben. Da wir nicht davon ausgehen, dass ihr das Mag im Abo habt, hier für euch ein paar Screenshots und Auszüge aus dem Interview (leider nur in Englisch).

What an honor! CUTOUT magazine, the biggest-selling design & pop culture magazine in Malaysia, lists us as one of the top-ten interactive agencies for ideas. Perhaps word has reached Southeast Asia that “Sounds of Hamburg” and the “edding Wall of Fame” – two of the most rewarded online projects in 2010 and 2011 – were both made by us. But please read for yourself. Because CUTOUT magazine interviewed us for their recent issue, which has been available since last Friday. As we imagine not everybody subscribes to CUTOUT magazine, here are some screenshots and excerpts from the interview.

The Interview

CUTOUT: Tell us about demodern.
DEMODERN: demodern is a German design studio specialising in digital projects. It was founded in 2008 by designers. The name demodern comes from the idea of not beeing a slave to the zeitgeist but creating things with an independent mind. That’s what we think demodern is all about – designing for reasons other than coolness. We try to find relevance in our design, right up to the last programmed pixel. Our studio is riddled with all kinds of specialists who work together as a team from start to finish, always seeking for the best possible result. We believe that each project has its crucial 10% which determines whether it is average or mind-blowing. demodern keeps an eye on this 10%. Always.

CUTOUT: What is the concept behind www.wall-of-fame.com?
DEMODERN: The Wall of Fame is a live interactive canvas for visitors to watch other draw in realtime or even pick up a pen themselves. The idea behind it is to replicate the fascination of bringing sketches and artwork into a digital format but with a touch of reality – meaning no undo, no erasers, no unlimited pens, no forms or fixed models. On top of that, you get the opportunity to work on the same art with likeminded designers/illustrators from all parts of the world. In the end it’s not one single sketch that fascinates; it’s the constantly growing artwork that impresses.
The heart of this website is specially built for Edding with a ’sketch management system’ that allows administrators to see each stroke seperately. You can see who’s sketching, what he’s drawing and also what visitors share. That means we can reconstruct the website from the very first line up to the last dot. (Agency: Kempertrautmann)

CUTOUT: What sites are very good at promoting interactive design principles?
DEMODERN: www.steep.it - Single serving sites are great. This one explains easily how important relevance is.
www.wetransfer.com - Some websites are more about talking than helping. WeTransfer is simplicity at its best. Nice design combined with usefullness.
www.ro.me - ROME, an interactive film by Chris Milk is a project that shows that each mind-blowing project needs a team of enthusiasts. Breaking down barriers and never stopping until you find a solution is what it’s all about.

CUTOUT: Is there a digital community in your area which you interact with?
DEMODERN: The German digital design scene is a small family. When you meet people from different agencies, you start talking about common colleagues, recent projects and who’s working on them. A nice site on German design is designmadeingermany.de. Another huge family gathering that we participate in yearly is the European OFFF Festival (www.offf.ws/2012).

CUTOUT: Give us a tip on making interactive design website.
DEMODERN: This we learned from the presentation of North Kingdom. They call it the F.U.C.K. principle – F.U.C.K. stands for Functionality, Usability, Cosmetics and Love. We at demodern totally agree with that. No project without one of these points. Always try to look at your design from the sidelines and ask yourself if what you’re doing is really cool. Does anybody understand the navigation? Would you love something like that? And so on. We believe that trying to think that way already makes you a better designer.

www.facebook.com/CUTOUTMAG

Anlässlich des neuen Produktlaunches des LunarEclipse+ 2 schufen wir ein kleines aber feines Productspecial für unseren Kunden Nike und dessen Markenpräsentation innerhalb des Runners-Point-Brandshops. Von der Konzeption über‘s Design bis hin zur Entwicklung, reizten wir die Plattform-spezifischen Möglichkeiten und Rahmenbedingungen voll aus und schufen somit eine außergewöhnliche Brand-Experience innerhalb eines Partnerstores. Ein zweiteiliges Video-Intro mit aufwendigem Motiondesign, erstmalige Verwendung vollflächiger Backgroundfotos mit Javascript Partikelanimationen und interaktive Produkt-Highlights, erwecken das Special zum Leben und schaffen es, klassische Image-Präsentation und digitales Einkaufserlebnis nahtlos miteinander zu verschmelzen.

Due to the new product launch of the LunarEclipse+ 2 we created a small but mighty product special for our client Nike and their brand presentation within the Runners Point brandshop. From concept over design to development, we exhausted the platform-specific possibilites to the max and created an extraordinary brand-experience within a partnerstore. A two-part video intro with elaborate motiondesign, first-ever use of fullwidth Backgrounds, enriched with javascript particle animations and interactive product hotspots, breathe some life in and help to get a twist between classic image presentation and digital shopping experience.

Nike Brandstore at Runners Point

ANDYRED.COM

We’ve designed and developed a compact online portfolio for the director Andreas Roth, alias andyred. The design idea based on abstract film stripes that can be navigated horizontally and vertically. The flat information architecture provides short clickways and a comfortable way to navigate through the portfolio. We decided to simplify the userflow by using no category-/overviewpages. Honestly, who uses them on videoplattforms like youtube etc.? Everyone navigates via related-content-column or search engine result page. Furthermore you can navigate and filter all projects without stopping the current video.
Based on HTML using javascript animations, the page works on all plattforms and feels as dynamic as a flash page.

Für den Fairtrade-Limonaden-Hersteller LemonAid & Beverages GmbH haben wir einen kleinen aber feinen Storefinder für die Marke Lemonaid entwickelt. Mithilfe der Google API ließen sich die bestehenden Daten aus Googlemaps inkl. angelegter Orte in die gewünschte Form gießen und können weiterhin über die gewohnte Google-Maps Oberfläche gepflegt werden. Die Karten wurden selbstverständlich an die Marke entsprechend angepasst und mit einer simplen Navigation kombiniert. Insgesamt ein kleines, aber sehr spannendes Projekt. Denn wir hatten Gelegenheit, in die Tiefen der Googlemaps API einzutauchen: Sehr inspirierend.

SHOPS.LEMONAID.DE/

This time we’ve developed a compact store finder for the fairtrade-lemonade-manufacturer LemonAid & Beverages GmbH and its retail brand Lemonaid. The use of the Google Maps API allows us to import location-data of predefined places and the corresponding maps. These maps are rebrushed inside the store locator  to meet the brand directives of their products. The client is still able to use the Google Maps application to service the locations. It was a small, yet very interesting project and we’ve even discovered more inspiring possibilities for further projects.

Ok, der Schnee lässt noch etwas auf sich warten, nicht aber NIKEs alljährliche Snowboard Events – diesmal im Rahmen der NIKE CHOSEN Kampagne. Worum geht’s? NIKE zieht mit der CHOSEN SERIES durch Europa und sucht den ultimativen Snowboard Nachwuchs, um einem Fahrer den Traum der Träume erfüllen zu können: lebe ein Jahr wie ein Profi, reise dem ewigen Winter hinterher und mache nichts anderes als snowboarden. Wenn das mal nichts ist!
Und damit auch niemand die mit Snowboardlegenden angereicherten Tourstops verpasst, kamen wir ins Spiel. Seit dem 1. Dezember findet ihr unter nikechosenseries.com und allen relevanten NIKE Facebook Seiten sämtliche Infos über die CHOSEN SERIES und die jeweiligen Tourstops. Alles handgemacht, mit Liebe designt und Herzblut programmiert.
So Freunde, jetzt aber nicht nur zugucken, sondern mitmachen. z.B. Am 4. Februar auf der Zugspitze. Na, wer ist dabei?

NIKECHOSENSERIES.COM

Still waiting for a little more snow but not for NIKE’s annual snowboarding events – this time within the framework of the NIKE CHOSEN campaign. What’s it about? NIKE tours through Europe chasing the ultimate up-and-coming snowboarding talent, offering them the chance of a lifetime: live like a pro for an entire year, following the everlasting winter and doing nothing else but snowboarding. Tight, eh?
Therefore NIKE asked us to set up a digital communication hub to assure that nobody misses the tour stops crammed of living snowboard legends. Starting from 1st Dec you will find all information regarding CHOSEN SERIES and its tour stops on nikechosenseries.com as well as all relevant facebook pages. All handmade: designed with love and programmed with blood, sweat and tears.
Now quit your gawking, follow your snowboarder’s heart and join the tour stop e.g on 4th Feb/Zugspitze. Who’s up for it?