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

(Shortened by editorial team)

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

Für den Regisseur Andreas Roth, alias andyred, haben wir ein kompaktes Online-Portfolio gestaltet und umgesetzt. Das Design orientiert an abstrahierten Filmstreifen, die sich horizontal und vertikal bedienen lassen. Zudem erreicht man dank flacher Struktur, alle Inhalte schnell und einfach. Das Besondere ist, dass wir anders als üblich auf Kategorie-/Übersichtsseiten verzichten. Denn, mal ehrlich, wer benutzt diese z.B. bei youTube? In der Regel navigiert man dort über die Related-Content Spalte oder die Suchergebnisseite. Darüber hinaus lassen sich die Projekte navigieren und filtern, ohne den aktuellen Film zu unterbrechen.
Das Ganze haben wir in HMTL programmiert, damit die Seite plattformübergreifend funktioniert – bei so netten Java Scripten, kann man ja auch gerne mal auf Flash verzichten.

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?

„Es war wie  immer eine Freude für eine Marke wie TWOTHIRDS zu arbeiten.“

Neue Ideen für spannende Herausforderungen. Obwohl die Marke inzwischen etwas erwachsener geworden ist, bleibt das Erbe der Nähe zum Meer noch immer spürbar.

Unser Hauptaugenmerk im Motion Design galt auch dieses mal der Entwicklung eines außergewöhnlichen Looks. Die Farbkorrektur sollte – da es sich um die Herbst/Winter Kollektion handelt – eine herbstliche, kühle Stimmung transportieren. Das Gefühl eines frischen, aber schönen sonnigen Tages sollte entstehen. Die optischen Eingriffe lassen die gleißende Herbstsonne in jeder Sequenz spürbar werden. Auch die Unschärfeverlagerungen entstanden komplett in der Nachbearbeitung.

Strand und Felsen: eine schöne Art den Herbst gemütlich anzufangen. Hier die neue Kollektion.

Anlässlich unseres dreijährigen Bestehens haben wir, bzw. unsere Kreativetage sich was Feines für alle Freunde, Supporter und Fans einfallen lassen. Unsere exklusive und hart limitierte Special Edition an feinen Shirts und Jutebags mit Ton-in-Ton stealth-Print gab es exklusiv auf unserer Sommerparty zu erwerben — Für alle daheimgebliebenen haben wir uns entschlossen die wenigen noch vorhandenen Exemplare unters Volk zu bringen und euch die einmalige Gelegenheit zu geben, diese hier gegen eine Spende von 20,- je Shirt bzw. 10,- je Tasche (inkl. Versand) zu erwerben.

T-Shirt black/black: 20,- Größen: M(sold out) / L / XL
T-Shirt grey/grey: 20,- Größen: M / L / XL
Jute-Tasche black/black: 10,- Größen: One-Size

Bei Interesse schickt einfach eine Mail mit eurem Wunschartikel, Farbe sowie Größe und gewünschter Zahlungsweise (Überweisung, Bar bei Abholung) an info@demodern.de oder kommt einfach vorbei!

Bäm! Beim Durchblättern der aktuellen Page stießen wir hocherfreut auf den oben abgebildeten Artikel, welcher die Wall-of-Fame auf einer Doppelseite im Kontext der anstehenden Cannes-Lions featured.

“Eddings Wall of Fame, war eine dieser Seiten, die bei irgendwem in der Agentur aufpoppt und sofort dazu führt, dass sich eine Menschentraube um den Rechner bildet” (Zitat Jens Schmidt, Juror in der Kategorie Cyber)

Sowas hört man doch mehr als gerne! Doch zu früh freuen wäre für alle Beteiligten unangebracht, da sich auch etliche andere hochkarätige Projekte die Gunst der Jury erhoffen — es bleibt also spannend und wir halten euch auf dem laufenden!

Yeah! While browsing through the current issue of German Page Magazine we delightedly stumbled across an article featuring our latest interactive project “Wall of Fame” in the context of the forthcoming Cannes Lions. Jens Schmidt, jury member of the cyber category says that this site, when popping up on somebodys screen, makes a bunch of people immediately come by and watch what’s going on. That’s good news for sure, but we won’t count our lions, excuse me, chickens before they’re hatched, knowing that there are plenty of other fabulous projects also fighting for glory in this award show. So it keeps the story gripping and for sure we´ll keep you posted on all the latest news. Stay tuned!

Wer zuerst kommt, malt zuerst!

Im Auftrag von Kempertrautmann haben wir für den Stifthersteller edding ein Webspecial umgesetzt, bei dem junge Talente und professionelle Illustratoren/ Künstler aufeinandertreffen sollen.

Die Wall of Fame ist eine interaktive Live-Zeichenfläche, auf der die Besucher in Echtzeit anderen beim Zeichnen zuschauen oder selbst den Stift schwingen können.

Ziel war vor allem durch Haptik, Look und Sound-Design an das analoge Zeichnen so nah wie möglich heranzukommen. Daher auch die bewusst begrenzte Anzahl von Stiften (8) und kein Radier- oder Undo-Feature, da der edding schließlich auch in der realen Welt ein permanent Marker ist.

Die technische Herausforderung bei dem Projekt war vor allem ein performantes Zeichnen und Navigieren zu ermöglichen sowie  ein intelligentes Load- und Filemanagement für die sehr umfangreiche Map zu entwickeln (ca. 320.000 Files und 15.200 Ordner).  Die Multiuser Umgebung inklusive Live Chat und Webcam ermöglicht ein Flash Media Server, der kontinuierlich alle Besucher mit Echtzeit-Daten versorgt. Durch eine umfangreiche Share Funktion (Facebook Connect/Twitter/Email) kann man direkt auf der Wall Stellen markieren, teilen, weiterleiten, speichern und posten. Bereits in den ersten drei Tagen verbuchten wir allein über Facebook 10.000 unique Hits und 5.500 Drawings. Also ran an die Stifte, so lange noch Platz ist!

Hier gehts zur wall-of-fame

Wer zuerst kommt, malt zuerst!

Im Auftrag und in Zusammenarbeit mit kempertrautmann haben wir für den Stifthersteller edding ein Webspecial realisiert, bei dem junge Talente und professionelle Illustratoren sowie Künstler aufeinandertreffen.

Die Wall of Fame ist eine interaktive Live-Zeichenfläche, auf der die Besucher in Echtzeit anderen Nutzern beim Zeichnen zuschauen oder selbst den Stift schwingen können. Ziel war vor allem durch Haptik, Look und Sound-Design an das analoge Zeichnen so nah wie möglich heranzukommen. Daher auch die bewusst begrenzte Anzahl von Stiften (8) und kein Radier- oder Undo-Feature, da der edding ja schließlich auch in der realen Welt ein permanent Marker ist.

Die technische Herausforderung bei dem Projekt war vor allem ein performantes Zeichnen und Navigieren zu ermöglichen sowie  ein intelligentes Load- und Filemanagement für die doch sehr umfangreiche Map (ca. 320.000 Dateien und 15.200 Ordner).  Die Multiuser Umgebung inklusive Live Chat und Webcam ermöglicht ein Flash Media Server, der kontinuierlich alle Besucher mit Echtzeit-Daten versorgt. Durch eine umfangreiche Share Funktion (Facebook Connect/Twitter/Email) kann man direkt auf der Wall Stellen markieren, teilen, weiterleiten, speichern und posten. Bereits in den ersten drei Tagen verbuchten wir allein über Facebook 10.000 unique Hits und 5.500 Drawings. Also ran an die Stifte, so lange noch Platz ist!

Hier gehts zur wall-of-fame

First come, first served with a pen!

On behalf and working together with kempertrautmann we implemented a web special for the pen manufacturer edding, a platform for young talents and professional illustrators to meet and create! The Wall of Fame is a live interactive canvas for visitors to watch others draw in real time or even pick up the pen themselves.

The technical challenge was mainly to facilitate a high-performance drawing and navigation as well as to develop an intelligent load and file management for the very large map (about 320,000 files and 15,200 folders).

The multi-user environment, including live webcam and chat was made possible through a Flash Media Server, which continuously provides all visitors with real-time data. We implemented a share functionality (Facebook Connect / Twitter / Email) where people can directly mark places on the wall to share, forward, save and post. Within the first three days, we already registered more than 10,000 unique views and 5,500 drawings only through Facebook. So grab a pen for as long as there is still room on the canvas.

Check it out on wall-of-fame.com

NIKE 6.0 und demodern leiten den Winter ein. Denn seit dem 1. November kann jeder Facebook User in einem speziell dafür entwickelten App abstimmen, wo die Nike 6.0 Stairset Battle Tour stoppen soll. Neun Länder machen mit. Neun Stairsets gibt es zu vergeben. Aber nur eins von drei Resorts pro Land bekommt den Zuschlag. Also los geht’s, votet kräftig mit! Besser noch: Markiert euch gleich die Tourtermine im Kalender und kommt NIKE 6.0 und auch uns an den neuen Stairsets besuchen.  Solltet auch ihr ein Interesse daran haben, wo die Karawane stoppt: Hier gehts lang zum Voting! Bis zum 30.November werden noch Wünsche entgegengenommen.

NIKE 6.0 and demodern greet the winter. Using a specially designed app, every Facebook user is now capable of voting for the next stop of the Nike 6.0 Stairset Battle, starting November 1st. Nine countries participate. Nine stairsets to vote for. But only one of three spots per country will capture the victory. So, get up and place your vote! Better still, mark all tour dates in your calender and join NIKE 6.0 and us at the new Stairsets. If you care to know where the caravan stops next: Take part in the voting! Requests will be accepted until November 30th.

NIKE 6.0 STAIRSET BATTLE TOUR