Making of “Build with Chrome”

display-lego-google-original-bitar-1
LEGO GOOGLE CHROME REALTIME3D WEBGL DESIGN BUILDER

North Kingdom project — This spring I was involved in a really fun project for a Google Maps and LEGO® as a Art/Design director with focus on the build section. The whole concept is about you building LEGO creations on a map of Australia (LEGO turns 50 years in Australia this year), where you claim your own spot on the map. It´s called “Build with Chrome”. I have always been a huge LEGO fan so it was a great project to be involved in! The result was pretty OK, specially the “builder” that rocks big time with an amazing programming solution, but the limitations of how we could use/hack the Google map pulled down the result a little, I think.

Direct link — Build with Chrome
More information — North Kingdom

build-mode

A rough mock up by Alfredo Aponte, our User Experience Designer. He was the guy solving the seemingly impossible.

not-lego-digital-designer

LEGO Digital Designer is a program you can download for free to build complex LEGO models. A program that became a close reference about what we was going to build. However, this program was in our eyes to complicated and to hard to use, so our focus was to make our “builder” much more easy and playful to use.

lego-iso
klas-lego-wip-2

Klas Kroon, our programmer and the brain behind the builder, made lot of different prototypes and developments. These prototypes helped us to early see what we could do and not. The client described his work as ‘like Christmas morning waking up to see what North Kingdom had delivered next’.

Having recently worked with particles, my mindset was set to that.. So my initial idea was to treat the LEGO bricks as particles or several particles makes up a brick, etc.. The idea is to use a sprite/particle of the smallest brick and so on. 1 vertex = 1 sprite. So this is not “real” 3d, but more isometric/ortographic, no perpective. Here´s the first test, so you can see what I mean:

One of the early ideas was to have some sort of terrain variation, here´s a test of that:
(Mousedown and drag left/right to rotate, arrowkeys to pan)

Isometric 5 (flipped)

… So I tried with the more classical approach, that is more on par with the LEGO Digitial Designer, which is really nice, but it’s more advanced and more “cad” than what we were aiming for here.
Builder 2

One that tested autosaving with local storage.
Builder 4

Klas Kroon, North Kingdom

Read more about his explorations around this project at OutsideOfSociety — Build with Chrome

lego-google-_rob-skiss-2
lego-google-_rob-skiss-3

Above are my first mock ups on the same screen. We all wanted a very simple solution regarding “the builder”, therefor I thought a clean open design would match that idea when we also had Google to think about. Some big juicy LEGO bricks would make it more playful and interesting, we still want it to feel LEGO right?

lego-screen-2

Final interface design by Jonas Eriksson.

google-chrome-anim

We also did a LEGO version on the Google mnemonic; a 3 seconds 3D animation. Conceptually; very simply idea with a Google logotype explode into LEGO bricks that would go around its core, but it was for sure little tricky to get correct. Above you see my rough direction of how I saw it would work.

lego-build-anim-big
lego-animatic-stills

Mathias Lindgren, our 3D artist, put it alive in 3D Studio Max.

A Google Reader Starred Item

Making of “The Jack Boxer” (Daybreak)

iphone-jack-boxer-northkingdom-app-att-designchapel-design
iphone-jack-boxer4

NORTH KINGDOM PROJECT — “Daybreak 2012, a transmedia webseries by Tim Kring (Heroes, Conspiracy for Good), launched on May 31st with the release of the first of 5 weekly chapters of the webseries on Daybreak2012.com. Along with the Daybreak 2012 website, the Jack Boxers app was also released for both the iPhone and Android smartphones, along with an accompanying website, We Are The Jack Boxers. The purpose of both the app and the website is to enlist help for the cause of the Jack Boxers, who are fighting the forces of darkness and bringing the Truth to light.”Wired Magazine

The “Jack Boxer” app is in the story built by an underground organization with the same name. The app is mainly a way for them to communicate securely using text, image and audio messaging. The “Jack Boxer” is found in Daybreak, which is a web TV series deeply integrated with an immersive digital layer. It’s a continuation of a sidetrack from the tv serie “Touch” with Kiefer Sutherland.

“The Daybreak main story unfolds in five, roughly ten minutes long episodes shown on daybreak2012.com and fox.com. But the story doesn’t end there, rather the opposite. On websites and via the smartphone app, the viewers can explore different fragments of an exciting and complex journey. The Jack Boxer application lets the audience be a part of the main character hunt to succeed with his mysterious mission. The app together with jackboxers.com lets fans dig deeper into the Daybreak experience. Much deeper.” — Monterosa

The project was a close collaboration with Monterosa Stockholm who impressed me a lot with their expertize and focus on details! They did an amazing job! A true creative technology master piece!

————————

Download — Jack Boxer app (iPhone)
Download — Jack Boxer app (Android)
Watch episodes — Daybreak

Read more about the project & making of — North Kingdom (coming soon)
Read more about the concept — Wired Magazine
Watch “Touch” — FOX Broadcast

————————

dashboard-jackboxer-daybreak-app-design-north-kingdom-designchapel

I have personally been hooked by iPhone apps since I bought my first from US 2007. Today, 5 years later, I have finally designed my first app. And yes, it was so fun I always had imagine! The app was described by someone as a “James Bond app for geeks”, which is pretty true. I have I rendered the images you see here in Cinema 4D with screenshots from the app.

The only brief I had designing Jack Boxer, was to make old school user interface with a fresh tweak. We wanted a look and feel of a site/app run by a major Unix hacker. This old retro style was perfect when the production time was pretty tight. The challenge was still to make an unique style.

THE DASHBOARD (above) contains a real time 3D globe surrounded by a glass dodecahedron. Underneath it we have a graphic frequency EQ in two layers. One measuring microphone input and the other connected to the pentagon hair cross that sits on top of the globe. Built in pure OpenGL on iPhone and Unity3D on Android.

jackboxers-and-daybreak_designchapel_northkingdom1

Two websites, one story. Jack Boxers (the game) & Daybreak (the story). The app is also found in the Daybreak episodes by BBDO and Tim Kring, which is an immersive and interactive entertainment experience presented by AT&T.

Images below are taken from these episodes:

daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-21
daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-41
daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-5
daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-6

One of eight sections is the RECORDING and SOUND EDITING TOOL. The sound editor let users change the playback direction and playback rate. This way they can find hidden messages within audio clips that’s almost impossible to hear otherwise.

daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-7
daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-8
daybreak-2012-tim-kring-northkingdom-app-design-dodecahedron-10

The FREQUENCY ANALYZER is another tool built to find messages, this time hidden in series of frequencies. The Jack Boxers have mapped a number of characters to tones/frequencies enabling messaging via sounds that can be found anywhere. The scanning for frequencies are represented by a dynamic point cloud.

jackboxer_screens-copy

My workfile where I have collected all my design in an “Art Direction Overview Map”. For me, this was the only way to get a picture of what I was doing. To see how everything worked against each other. The time I had for this was super short, so it helped a lot the design was pretty simple. The feeling had to be an old computer system combined with a new, hi-tech technology. Most of this stuff was created during one hectic week.

northkingdom-at-monterosa-jack-boxer1

A snapshot from my iPhone at Monterosa. On my left side is Carl Rung, Creative Director at Monterosa, going throu the latest updates via an Apple TV. Danilo Boer, Art Director from BBDO New York, and Marcus Ivarsson, Creative Director at North Kingdom are sitting on the other side table.

jack-numbers-and-logotypes-1
doda_numbers

From the shape of the dodecahedron I created some clean and simple digits and logotypes.

ikoner-jack-box-2

The system icons. I wanted them as simple and clean as possible, but still interesting.

jackboxers-findthetruth-blog-tumbrl-designchapel-northkingdom

I also designed a very simple blog for Jack Boxes, based on a tumblr theme.

flash-animation-jack-boxers

Before entering the Jackboxers blog, I have animated a boot up sequence of their computer system. A very short and very simple animation made in Flash, but still very fun to do. And with some cool sound effect it turned out quite cool I think.

You can see the animation on my dev link as well.

——

jack-boxer

Download — Jack Boxer app (iPhone)
Download — Jack Boxer app (Android)

A Google Reader Starred Item

1 / 1
1