It’s Friday! Und wie jeder Kölner weiss, ist dieses Wochenende unsere letzte Gelegenheit noch mal so richtig abzuclubben, bevor die ganze Stadt mit dem roten Pferd am Trömmelsche parat steht. Ein paar engagierte Mitarbeiter haben sich daher nicht nehmen lassen ihre derzeitigen Lieblingstracks in einer weiteren demodern-pulse Playlist zusammenzutragen. Das Motto der Playlist ist unschwer zu erkennen – viel Spass damit!
2013 – Worauf wir uns freuen
January 10th, 2013 | Published in Uncategorized, What's up
In diesem Jahr gibt es viele Innovationen sowie neue Produkte aus den Bereichen Entertainment, Gaming oder Elektronik. Wir freuen uns auf viele spannende Gadgets und können es kaum erwarten sie endlich live zu erleben und auszuprobieren. Hier ein paar kleine und große Highlights aus diversen Bereichen welche 2013 für uns sicherlich zu einem spannenden Jahr machen werden.
Steam Box
Neben der kommenden PS4 und Xbox 720 kann man sich auf die von Valve geplante Spielkonsole freuen, welche auf Linux Basis die bereits erfolgreiche Online Gaming Plattform sinnvoll ergänzen soll.
Hochflexible Touch Sensoren
Erste hochflexible Touch Sensoren sollen auf den Smatphone und Tablet Markt kommen. Größer, heller, gebogen und ohne Kanten. Fast jede Form ist nun möglich, so sind sie fast überall einsetzbar. Die ersten Sensoren sollen wohl im zweiten Halbjahr 2013 verkauft werden.
Produktvideo: http://www.youtube.com/watch?v=Q_qscdL-qwI&feature=player_detailpage
Crysis 3
Wird grafisch mit Sicherheit wieder Maßstäbe setzen. Der Trailer und die ersten Screens sehen auf jeden Fall verdammt gut aus.
Aktueller Trailer unter http://www.youtube.com/watch?v=2qFLtnSqS6Y&feature=player_detailpage
SimCity
Fast jeder kennt den Klassiker und hat mit Sicherheit schon viel Zeit damit verbracht riesige Stadtlandschaften zu errichten. Die Neuauflage als MMO wird uns bestimmt auch wieder viele schlaflose Nächte bereiten.
Spieleseite: http://www.simcity.com
Eye Tracking Bedienkonzept
Die Steuerung mit Augenbewegungen hat es zur Marktreife geschafft. Tobii REX präsentiert ein fertiges System. Wenn es tatsächlich benutzbar ist sicherlich eine geile Sache!
http://www.engadget.com/2013/01/06/hands-on-with-tobii-rex-a-peripheral-that-brings-eye-tracking-t/
Nvidia Shield
Eine Handheld Konsole von Nvidia mit ordentlich Rechenpower, WiFi, Touchscreen und Android als OS.
Mehr dazu hier http://shield.nvidia.com
Microsoft Surface Pro
Entgegen der aktuellen Tablets ist das Surface Pro mit Windows 8 und einem Core i5 ein vollwertiger PC sowie Tablet in einem.
Mehr hier: http://www.techradar.com/reviews/pc-mac/tablets/microsoft-surface-pro-1123800/review
4K OLED TV
Auf der CES 2013 hat Panasonic einen 56″ OLED TV mit 4K (3.840 x 2.160 Pixel) Auflösung vorgestellt.
Bei Samsung und LG sogar mit gekrümmten Oberflächen für einen leichten Panoramaeffekt.
Die meisten neuen Fernseher der großen Hersteller werden nun auch endlich einen Browser beinhalten und manche evtl. auch neue Bedienkonzepte wie bspw. das Eye-Tracking im neunen „TV of the Future“ von Haier’s.
Mehr hier http://www.gamestar.de/heimkino/news/fernseher/3008322/ces_2013.html
Die dazu passenden Filme kommen auch, daher hier neben Django noch zwei vielversprechende Titel für 2013.
The Lone Ranger
Disney´s Western mit Johnny Depp und Armie Hammer vom „Pirates of the Caribbean“ Regisseur Gore Verbinski
Trailer: http://www.youtube.com/watch?v=JjFsNSoDZK8&feature=player_embedded
John dies at the End
Die Horror-Komödie von Don Coscarelli mit Paul Giamatti schaut sehr unterhaltsam aus.
Trailer: http://www.youtube.com/watch?v=Vy83MPk7Wpg&feature=player_embedded
Fazit
Da diese kurze Liste ja nur ein paar der vielen spannenden Releases in 2013 aufzeigt, kann man gespannt sein was uns noch erwartet. Es schaut auf jeden Fall sehr vielversprechend aus, und falls es einige der genannten Innovationen und Technologien tatsächlich auf den Markt schaffen, haben diese auf jeden Fall das Potential einiges zu bewegen. Es bleibt spannend!
*Blink* *Woosh* *Beep*: Interfaces in Sci-Fi Filmen
January 10th, 2013 | Published in Design | 1 Comment
Wir kennen das aus jedem guten Science-Fiction Streifen: Raumschiffe mit künstlicher Intelligenz, in die Netzhaut integrierte Head-Up-Displays und durch Fingerschnipp projezierbare Hologramme. Alles versehen mit einem extrem schnieken User Interface mit vielen bunten Lichtern und umherrschwirrenden Bildern – aber dennoch unglaublich einfach zu bedienen. Je wilder, desto futuristischer. Als Zuschauer blicken wir meistens gar nicht durch, was der Protagonist da gerade mit seinen Händen fuchtelt. Aber das ist auch egal, denn es sieht verdammt cool aus.
Manchmal stellt man sich dann die Frage, ob die Zukunft wirklich so aussehen wird. Sind diese Interfaces innovativ und richtungsweisend? Oder sind UIs in aktuellen Sci-Fi Filmen genauso nutzerfreundlich wie heutzutage Microsofts Powerpoint?
Ich sehe was, was Du nicht siehst.
November 27th, 2012 | Published in Design
Ein Designer beschäftigt sich von Hause aus natürlich grundsätzlich immer mit dem Thema Wahrnehmung und deren Wirkung. Es stellt sich ziemlich häufig die Frage: Wie universell sind die Regeln der Farbharmonie und wie universell ist die Wirkung auf den Betrachter, die sich aus der Auswahl bestimmter Farben ergeben? Die These: Wahrnehmung hängt von unserer persönlichen Erfahrung ab. Klingt banal, wirkt sich aber tatsächlich auf unterschiedliche Aspekte der Gestaltung aus.
Aus eigener Erfahrung habe ich schon des öfteren eine Art Nord-Süd-Gefälle der Farbwahl ausgemacht. Scheint es im Norden als angenehm zu gelten, sich in einem hellen eher warm beleuchteten Raum aufzuhalten, bedeutet das im Süden – wo es geografisch bedingt eher etwas wärmer ist – ein schattiges Plätzchen mit eher kälteren Lichtstimmung aufzusuchen (PKWs haben in wärmeren Regionen z.B. einen schwarzen Himmel). Außerdem gibt es auch sehr lokal kulturell gefärbte Eigenheiten, wie die Vorliebe der Schweizer Eidgenossen nur (oder am liebsten) rote Buttons anklicken zu wollen (solche Eigenheiten findet man in A-B-Tests im Online-Marketing heraus). Diese Vorliebe ist der Einzelperson selbstverständlich nicht bewusst, sondern ergibt sich aus einer rein quantitativen Beobachtung.
>>>
Startup Hipness
November 22nd, 2012 | Published in Concept
Im September verbrachte ich ein Wochenende in unserer schönen Bundeshauptstadt, um einen ersten “richtigen” Einblick in die deutsche Startup-Szene zu bekommen. Auf meinem Programm standen der Betapitch im Berliner Coworking-Space Betahaus und ein Besuch beim Photo Hack Day, initiiert vom Berliner Startup EyeEm.
In unserer Branche kann man es nicht vermeiden kann, mit Startups in Kontakt zu kommen: Ob als Kunden, die ihren ersten Web-Auftritt in Auftrag geben, in Form von unabhängig entwickelten Apps – siehe Instagram – die sich auf dem eigenen Smartphone sammeln, durch Freelancer, die ihr eigenes Unternehmen gründen, oder in den alltäglichen Artikeln auf Techcrunch, Mashable oder FastCompany: Startups sind ein nicht mehr wegzudenkender Teil unserer Industrie. Einige treiben Innovationen und öffnen neue Geschäftsfelder, andere besetzen erfolgreich eine (manchmal neu geschaffene) Nische, und die große Masse – eben auch eine zentrale Eigenschaft der Startup-Szene – verschwindet wieder in der Versenkung.
Es gibt es immer mehr Überschneidungen zwischen der Arbeit von Agenturen und Startups, und ich habe mich gefragt, was es von den Startups zu lernen gibt. Continue reading →
The Montblanc Worldsecond
November 6th, 2012 | Published in Cases, Ideas, PR, What's up
Für die Luxusmarke Montblanc entwickeln und realisieren die Kölner Digitalexperten ein globales, App-basiertes Fotoprojekt, „The Montblanc Worldsecond“.
Köln/Hamburg, 01. November 2012 – Wäre es nicht schön, die Welt für einen Moment „anzuhalten“ und zu sehen, was Menschen in verschiedenen Ländern in ein und demselben Augenblick erleben? Der globale Fotowettbewerb „The Montblanc Worldsecond“ für die Uhren der Luxusmarke Montblanc macht das möglich – mithilfe einer außergewöhnlichen App für iPhone und Android.
Mit der App kann jeder Besitzer eines iPhones oder Android-Geräts seine ganz persönliche „Worldsecond“ als Foto festhalten. Das Besondere: Die App verewigt eine Sekunde im Leben ihrer Nutzer dank eines zentral gesteuerten Selbstauslösers weltweit zum exakt gleichen Zeitpunkt. Dazu informiert ein Countdown, wann genau es zum automatischen Auslösen des nächsten Fotos kommt. Die Teilnehmer müssen lediglich zur richtigen Zeit ihr Handy bereithalten, die App öffnen und ein Motiv auswählen. So entstehen Aufnahmen in ein und derselben Sekunde, die den Augenblick einer ganzen Welt widergeben – eben die „Worldsecond“. Insgesamt hält die App 60 verschiedene Sekunden zwischen 1. November und 31. Dezember 2012 fest.
Die einzelnen Sekunden-Schnappschüsse werden jeweils auf die Kampagnenseite worldsecond.montblanc.com hochgeladen. Hier kann jeder User die Fotos durchstöbern, eigene Galerien mit seinen Lieblingsmotiven gestalten und diese mit Freunden über Facebook, Google+, Twitter, Pinterest oder per Mail teilen, sowie die von Montblanc in der Schweiz gefertigten Uhren erleben. Um die Teilnehmer auch international zu erreichen, wurde die App für die jeweiligen Märkte adaptiert: Im chinesischen Raum stellt „Sina Weibo“ den wichtigsten sozialen Kanal für „The Montblanc Worldsecond“ dar.
Die Gewinner belohnt Montblanc Anfang 2013 mit hochwertigen Preisen.
Idee und Konzeption der „The Montblanc Worldsecond“ entwickelte die digitale Designagentur demodern mit der Montblanc-Zentrale in Hamburg. Darüber hinaus entwickelten die Kölner Digitalexperten auch die App für iPhone und Android und sind für die Gestaltung und Umsetzung der Kampagnenseite sowie einer Version für das iPad verantwortlich.
Über Montblanc
Schon seit über 100 Jahren widmet sich Montblanc den Traditionen bleibender Werte und exquisiter Handwerkskunst. Die kompromisslosen Grundsätze für Design, Stil, Qualität und handwerkliche Ausführung erlauben es Montblanc, einzigartige Objekte herzustellen, die als begehrte Erbstücke von Generation zu Generation weitergegeben werden. Das künstlerische Markenzeichen, der Montblanc-Stern, steht für höchste Qualität – der absolute Gipfel im Bereich Luxus-Schreibgeräte, Uhren, Schmuck und Lederartikel sowie Düfte und Brillen. Die Marke hat sich selbst zu einem dauerhaften Engagement zur Förderung der Exzellenz durch kulturellen Fortschritt verpflichtet. Montblanc hat seine Wurzeln in der Schreibkultur und sieht daher eine besondere Verpflichtung zu eigenem kulturellen Engagement. Das Unternehmen leistet durch verschiedene internationale Aktivitäten einen kreativen Beitrag zum kulturellen Leben der Gegenwart: Montblanc schreibt selbst ein kleines Stück Kulturgeschichte.
Über demodern
Als unabhängiges digitales Designbüro mit Sitz in Köln erschafft demodern seit 2008 innovative Kommunikation für das digitale Zeitalter. Unter der Führung von Kristian Kerkhoff, Alexander El-Meligi und Thomas Junk Kunden betreuen 17 fest angestellte Mitarbeiter namhafte Kunden wie Nike, Konami oder Lemonaid.
Für ihre Arbeit erhielt demodern bereits zahlreiche internationale und nationale Preise, darunter Gold beim ADC Europe 2010 für „Sounds of Hamburg“, zwei Goldene Löwen in Cannes 2011 und zuletzt Gold beim New Media Award 2012 für die „Wall of Fame“ von Edding.
Wer von euch hat sich nicht schon mal gefragt, was eigentlich passiert, wenn Menschen auf der ganzen Welt etwas zur exakt gleichen Sekunde machen? Zum Beispiel ein Foto. Dann könnte man die gesamte Welt für einen Moment einfrieren und man sieht, was Menschen in verschiedenen Ländern in ein und demselben Augenblick erleben. Das globale Fotoprojekt „The Montblanc Worldsecond“, das wir konzipiert und umgesetzt haben, macht das möglich – mithilfe einer App für iPhone und Android.
Mit dieser App kann jeder Besitzer eines iPhones oder Android-Geräts seine ganz persönliche „Worldsecond“ als Foto festhalten. Das Besondere: Die App verewigt eine Sekunde im Leben ihrer Nutzer dank eines zentral gesteuerten Selbstauslösers weltweit zum exakt gleichen Zeitpunkt. Dazu informiert ein Countdown, wann genau es zum automatischen Auslösen des nächsten Fotos kommt. Die Teilnehmer müssen lediglich zur richtigen Zeit ihr Handy bereithalten, die App öffnen und ein Motiv auswählen. So entstehen Aufnahmen in ein und derselben Sekunde, die den Augenblick einer ganzen Welt widergeben – eben die „Worldsecond“. Insgesamt hält die App 60 verschiedene Sekunden zwischen 1. November und 31. Dezember 2012 fest.
Die einzelnen Sekunden-Schnappschüsse werden jeweils auf die Kampagnenseite worldsecond.montblanc.com hochgeladen. Hier kann jeder User die Fotos durchstöbern, eigene Galerien mit seinen Lieblingsmotiven gestalten und diese mit Freunden über Facebook, Google+, Twitter, Pinterest oder per Mail teilen. Um die Teilnehmer auch international zu erreichen, wurde die App für die jeweiligen Märkte adaptiert: Im chinesischen Raum stellt „Sina Weibo“ den wichtigsten sozialen Kanal für „The Montblanc Worldsecond“ dar.
Auch ihr seid herzlich eingeladen mitzumachen. Ladet euch die App auf euer Handy und wartet auf das Ende des Countdowns.
Jede Sekunde zählt! Viel Spass.
Download iPhone App | Download Android App | Experience more on worldsecond.montblanc.com
Think visual!
September 7th, 2012 | Published in Concept, Ideas, Making Of
Ideen, Ideen, Ideen. Jeder Kreative geht täglich auf die Jagd nach Ideen. Unzählige Kreativitätstechniken regen die grauen Zellen an. Man versucht, den Kopf zu überlisten und abseits der ausgetretenen Pfade auf die Suche zu gehen.
Gar nicht so einfach. Budgets, Technologien, Trends, Erwartungen & Umsetzbarkeit bremsen die Gedankenreise und löschen nicht selten einen Funken, bevor er entfacht werden kann.
Kinder haben es gut. Sie kennen keine Grenzen in ihrem Denken. Ein Auto kann fliegen. Unsichtbar machen – kein Problem. Ein Pappkarton reicht für die Reise zum Mond und in Null-Komma-Nix ist man ein Pirat.
Aus purem Neid auf Kids mit Laserpistolen, die auf Tigern reiten, entstand die folgende “Technik”. Ziel ist, wie ein Kind in Stories und Welten zu denken – auf Phantasiereise zu gehen und sich NICHT mit Mechaniken, Technologien & Trends zu befassen. Idee & Story zählt … alles andere ist nur Vehikel.
Visual Thinking ist das perfekte Hilfsmittel, nicht nur um die eigene Phantasie anzuregen, sondern auch um in der Gruppe auf Reise gehen zu können.
Genug gesagt, im folgenden Praxisbeispiel haben wir mal einen möglichen Weg zu einem Ideenansatz anskizziert:
Dieses Beispiel zeigt die Kombination aus kindlicher Phantasie und Visual Thinking. Statt gedanklich um eine App zu kreisen, wurde direkt der ersten spontanen Eingebung gefolgt – “Was wären coole Skater-Superhelden”. Was hat das mit der App zu tun? Eigentlich nichts, aber es eröffnet eine spannende Welt voller Anregungen und Inspirationen, frei von irgendwelchen Grenzen.
Hier wird der entscheidende Vorteil von Visual Thinking klar: Der Phantasie wird Leben eingehaucht. Wir sehen die Charaktere vor uns und haben direkt ein Gespür für ihre Fähigkeiten und ihre Welt.
Wenden wir die Erkenntnisse aus unserem Phantasie-Trip auf unser eigentliches Ziel, die Skater-App, an, entsteht ein möglicher Ideenansatz. Als netter Nebeneffekt haben wir auch gleich ein unterhaltsames Chart inkl. Tonalität, welches für jeden schneller erfassbar und verständlicher ist als Flowcharts, Mindmaps, Tabellen oder ewig lange Herleitungen.
Konami – Castlevania: Lords Of Shadow
July 16th, 2012 | Published in Cases, Making Of, What's up
Zusammen mit Konami haben wir zwei Teaser-Sites für die beiden neuen AAA-Releases der “Castlevania: Lords Of Shadow”-Reihe entwickelt.
Die Seiten gingen parallel zum jeweiligen E3-Presserelease in fünf Sprachen online und featuren exklusives Material zu den Games. Neben den Trailern sind das unter anderem Concept Arts, Hintergründe zur Story und weitere Goodies, auf die die zahlreichen Fans des Vampir-Klassikers lange gewartet haben.
In association with Konami we developed teaser sites for the two upcoming AAA-releases of the ‘Castlevania: Lords Of Shadow”-series.
The pages are available in five languages and feature exclusive material about the games. Apart from the trailers the sites contain concept art, story background and other goodies, which were highly anticipated by the numerous fans of the vampire classic.
Das Augenmerk im technischen Aufbau der Seite lag vor allem auf größtmöglicher Kompatibilität und Performance auf allen Browsern. Für die animierten Hover-Effekte im Concept Art-Bereich kam die JavaScript-Bibliothek CreateJS von Grant Skinner zum Einsatz, mit der die in Flash erstellten Assets direkt als Canvas-Elemente exportiert werden können.
So waren wir in der Lage, im gleichen Workflow ohne Mehraufwand sowohl Browser mit Canvas-Unterstüzung zu bedienen als auch direkt passende Flash-Fallbacks, z.B. für den Internet Explorer, zu erstellen.
Focus in development was on maximum compatibility and performance on all browsers. For hover effects in the concept art section we used the JavaScript-library CreateJS developed by Grant Skinner. With it, assets created in flash can be directly exported to HTML canvas elements.
Thus we had the ability to create content for all browsers with canvas support as well as generate the needed Flash fallbacks (think Internet Explorer…) in the same workflow without any additional hassle.
In gleicher Weise verfuhren wir mit den weiteren Effekten der Site. Je nach verwendetem Browser und dem Ergebnis der feature detection wurde die Seite individuell angepasst dargestellt. Am Ende der graceful degradation stand die Version für mobile Endgeräte, in der beispielsweise das erwähnte Concept Art-Feature in simplem HTML dargestellt wurde.
Die größte Überraschung in der Performance-Abstimmung lieferte dabei ausgerechnet das iPad. Während das iPad 2 die Seite samt aller Animationen problemlos darstellte, zeigte das iPad 3 hin und wieder Ruckler bei den Scroll-Effekten zwischen den content sections. Die wesentlich höhere Auflösung des Retina-Displays scheint nicht nur Vorteile zu haben.
Similarly the other effects were integrated. Depending on the given browser and feature detection the site would be rendered individually to give the best user experience. At the far end of this concept of graceful degradation the version for mobile devices was optimized for speed, so for example the aforementioned concept art feature was rendered in simple HTML here.
A great gap in performance occured, very surprisingly, between the different versions of the iPad. While the iPad 2 would the display the page with all animations and effects with ease, the iPad 3 didn’t run all that smooth during some scroll effects. It seems the new high definition retina display has some drawbacks as well.
Die Ergebnisse sprechen eine deutliche Sprache. Innerhalb von 24 Stunden hatte die Seite 2.500 Likes auf Facebook. Insgesamt verzeichnete die Page drei Wochen nach Launch schon über 500.000 Pageviews.
Zur Site Castlevania: Lords Of Shadow 2
Zur Site Castlevania: Lords Of Shadow – Mirror Of Fate
During the first 24h after launch the page garnered over 2,500 likes on Facebook. On the whole the pages had more than 500,000 PIs three weeks after launch.
To the site Castlevania: Lords Of Shadow 2
To the site Castlevania: Lords Of Shadow – Mirror Of Fate
FWA für 100 Jahre Rittersport
April 24th, 2012 | Published in Cases, Making Of, What's up
Für das 100 jährige Jubiläum der Marke RITTER haben wir gemeinsam mit Kolle Rebbe das Special “100 Jahre Ritter” realisiert.Die Anfangsanforderung an das Projekt war eine Parallax Seite zu erstellen die keinerlei Einsatz von Plugins benötigt (sprich Flash-Free ist).
Um dem Inhalt der Seite mehr leben einzuhauchen haben wir nicht nur den räumlichen Parallax effekt umgesetzt, sondern einzelne Bereiche und elemente mit Animationen versehen.
HTML5 ist zwar in allermans munde, aber die Performance und Funktionalitäten die man benötigt sind in keinsterweise Cross-Browser/Device einzusetzen wenn die Zielgruppe unter anderem IE7+ ist.
Um die Animationen zu realisieren hatten wir mehrer Wege ausgetestet. HTML5 Videos waren zu schwerfällig (vor allem wenn eine vielzahl auf einer Seite eingebunden werden muss und innerhalb eines Hover’s starten sollen), GIF’s waren von der Bildqualität, Alpha Channels und kontrolierbarkeit nicht zu gebrauchen und sind letztendlich bei SpriteSheets geendet.
For the 100 year anniversary of the Brand Ritter, we created – together with Kolle Rebbe – the webspecial “100 Years of Ritter”.
The requirements of the site were that it would run natively without any plugins (namely flash) and include an parallax effect.
Besides the parallax we added Animations to key elements to bring new live to the site.
Everyone’s talking about HTML5, but the performance and feature one requires are not cross-browser/plattform 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 to laggy (especially if over 50 are included on the page it should still play on hover, and not feel like a video), GIF’s don’t match the picture quality and dont have true alpha support, so we ended up using spritesheets.
Wir haben in Aftereffects die Animation erstellt und als Bild-Sequenzen 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 kompromiert und auch direkt den Javascript Code erstellt um die fertigen Animationen zu begutachten.
Somit konnten wir die perfekten einstellungen finden und änderungen vornehmen ohne jedesmal wieder alles neu zuschreiben.
Die so erstellten Sprite-Animationen sind gut kontrollierbar, da man frames einzeln anspringen kann und benötigen kein extra plugin. Nebenwirkungen sind größere dateigrößen als in Videos da hier keine teilbilder gespeichert werden.
We created the Animation in Aftereffects 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 real quick, without rewriting the code until we got the settings just right.
Die Spritesheets were easy to control, allowed us to implement hover effects and didnt require an external plugin. The file sizes are obviously bigger then those of videos as we can’t compress motion into key-frames and B-frames.
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 einzelne Elemente nur schwer individuel 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 wo das Element auftauchen sollten einpflegen. Des weiteren sind Tooltip Texte, Tooltip Positionen etc. vermerkt worden. Generiert wurden die HTML, CSS und JS teile der Timeline, sodas wir nicht mehr einzeln im Code änderungen vornehmen mussten.
Another tool was written for the 100Year Timeline. As the timeline includes more then 150 inviduell elements, which we didnt want to move individually for the parallax, we merged these elements onto several layers. To help us out 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.
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
Nike Chosen Sessions – Photo Roman
April 20th, 2012 | Published in PR
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
Previously
Apr 12, 2012
Magazin Feature – Nike Chosen Series
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 [...]
Mar 29, 2012
Nike Chosen Sessions
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 [...]
Mar 21, 2012
Frozen Moments: TWO THIRDS Spring/Summer 2012 Collection Movie
Frozen Moments: TWO THIRDS Spring/Summer 2012 Collection Movie
Mar 6, 2012
CUTOUT: Ten Best Interactive Agencies For Ideas
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 [...]
Feb 24, 2012
Runners Point Nike Brandshop
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 [...]
Dec 14, 2011
Andreas Roth – Online Portfolio
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 [...]
Dec 12, 2011
Lemonaid – Storelocator
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 [...]
Dec 7, 2011
NIKE Chosen Series
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 [...]
Making the world different
This is our Ministry of Information Affairs. What ever we do or say in this world will be displayed here. So don't keep up reading this stuff. And if this is still not fast enough for you, do not hesitate to write us via email and ask for the very latest reports. Always online, demodern.