Home

Archives

Categories

Tags

Admin

Twitter feed

Blog

April 10th, 2012

Behind the scenes – Only, The Liberation

1

This project came to life through a carefully planned production, a highly devoted and united team and some wonderful clients who dared to give us the freedom to create The Liberation the way it turned out.

ONLY – The Liberation

The concept development
When Uncle Grey first approached us we instantly felt that their ideas where straight up our alley – the brief featured a great portion of interactive storytelling and refined execution. What could be more exiting we figured. The original idea developed by Jimmy Blom (Executive Creative Director at Uncle Grey) and his team was quite to the point – a film about three girls entering a small quite town causing mayhem, messing with the locals, then getting kicked out of there. Plain and simple storytelling with a great ambition to entertain and inspire and to get the brand message and attitude across.

Since the main component for the experience was going to be live action film, we needed to have a director aboard that could share our ambition for the project but also tell the story in the right way. That is why we went for the reputed and talented director Christoffer Von Reis. Based on what he had done before we knew that he and his team had the right spirit to make a shoot like this happen.

Together we shaped creative alliance to plan the next steps, where the relations between us, Uncle Grey and Camp David became more and more integrated, just like it should be endeavoring a challenge like this.

The first steps focused a lot around the tonality, and mood for the film. We saw references like this, this and this and they triggered the creative process immediately in the right direction. Even if the original idea had a lot of American road-movie attributes we where afraid that would become to cliché if we just went in that direction. The client also communicated that it should feel less Americana and have a more universal feel to it. Overall we worked with a lot with references and moods to get the right visual tonality.

mood

Some early mood references

Early in the process we also spent considerable time to establish the right amount of user interaction. We wanted the users to feel absorbed by the story and not being forced to click at certain points to break the illusion too much. And at the same time not loose them. So to get the right balance it took a lot of testing and playing to make it function they way we wanted from a user experience perspective.

Comp 1 (00541)

The script
Together with Jimmy and Christoffer we wrote and refined the script. We tweaked it so that it could be played out from a local girls point of view. To follow her perspective; from the way she reacted to when the rebellious girls from out of town entered her reality – suggesting moral dilemmas – to when she decides to join them in the end, is an illustration of liberation and not getting too stuck with conformism in your life. Something we believed that the target audience hopefully would find somewhat relatable and inspiring.

Here’s a storyboard that Christoffer Von Reis put together:

script

Some shots from the shoot:

5

12

14

16

13

9

8

7

6

3

4

8

9

6

14

5

4

11

1

The art direction
We kept the design minimal to get as much focus on the movie as possible – and that’s a challenge in itself. The design went through a few different stages during the project. Before we had shot the movie it started out quite complex and detailed, and when we had shot the movie we stripped away most of it to lift the movie which is and should be the hero. It’s easy to over-do things in the beginning when not all the elements are in place, it’s important to constantly review the work to see how it has changed during the course of time and see what doesn’t work anymore. In this case the client was very flexible and understood what was best for the project even though a design had already been signed off earlier on.

3

4

9

For the garment names in product view we wanted a hand written style, something that felt a bit naive, almost as if the girls was the ones who had drawn them. Early explorations of the handwritten type:

typography

Putting it all together
The movie can be paused in every frame. When in pause mode, a high-res image fades in and we place hotspots on pre-defined tracking-points over the clothes. We used some automated scripts in After Effects to simplify the process. First we needed to know the exact frame where the user pauses, which can be tricky when dealing with playing encoded flash movies since you can’t rely on the player heads position to get the exact frame number. So we found this method instead: http://nikohelle.net/2011/11/25/as3-perfect-video-sync-with-embedded-frame-numbers/. A binary code is added in an extended strip at the bottom of each video. Then we can read that number and mask and hide the strip. To store all hotspot positions we used another script. So now we could just animate the points, one layer per piece of clothes with a layer-name set to a corresponding id. This could be done either by hand or with motion-tracking. Run the script and all data is exported to XML. Simple, yet effective.

Pinterest-functionality was also added, so when you pause a movie, each garment in that scene is dynamically loaded into hidden containers and available to the Pinterest image-scraper when clicking the “pin-it”-bookmarklet. The high-res frame is also available as a regular, but dynamically changed pinterest-button up in the right corner. Every frame and product the user explores ends up in the grid in the end.

Screen Shot 2012-04-12 at 12.58.22 PM

People posting content on pinterest.com from the site

The sound production in The Liberation turned out to be pretty complex just to make it work the way we wanted it to. We wanted a seamless experience throughout so even if you paused the movie it shouldn’t feel like it all just came to a stop. Here’s a write up from Dinahmoe, our sound partner, about the adaptive sound and how we did it.

Partners
Agency: Uncle Grey
Director: Christoffer Von Reis, Camp David
Post production: Stopp
Artist/original music development: Lune
Adaptive music and sound design: Dinahmoe
Back-end development: Agigen

Launch project

March 1st, 2012

Behind the Scenes – Vodafone Netguys

Netguys_applescreen_bigB
netguys_tvc_2

Direct link – Vodafone Netguys.

The game is based on the concept behind the  Netguys TVC, filmed in London 2011, for the German market. Vodafone’s services are visualised and communicated in a fun way by 4 guys that follow you everywhere and makes life easier for you. The 4 guys symbolise the network bars found on most mobile phones to indicate full connection.

— The question for us was; what should we do? And how? The time was very limited.

game-world-illustrator3

The client asked for a simple and engaging web-based game and we wanted to push the boundaries for that by looking at a 3D solution so we got our inspiration from games like “Canabalt” and “Mirror’s Edge” for iPhones. The image above represent the first day work on the visual, trying to figure out what we will actually will see. We know the game would be in 3D, but we had to get our ideas down on paper.

— Graphic profile

NetGuys-Logotype_thumbnails
NetGuys-Logotype_concept

To get a better idea of the games graphic profile we also created a logotype for the game. When the characters cloths had a retro design we wanted to create a logotype with a 8-bit feeling but in a modern twist…

x_Netguys_Poster_Concept_Rob_1123_with-grain

… however, in the end we have to use their own font “Vodafone Rg”.

— Environments

Collection-World_-netguys_2
Roof_02
world_

When we created the world, we needed to think of three things: it needed to be dynamic, it needed to be light and it had to be stylish. The solution for the dynamic part was to create the blocks separately, as you can see on the image above. When we had to think about the compression we couldn’t use to much textures, therefore we come to use very simple pattern on buildings which gave a very stylish feeling, which we liked very much.

Netguys_applescreen_bigA
netguys_screen_8
netguys_screen_2
netguys_screen_7

Final environments.

— Programing

netguys-2
Street_01
Blocks_01

The game is dynamic 3d game utilizing the hardware acceleration introduced in Adobe Flash 11. Here below can you see some WIP testes done during the first weeks;

The very first “ugly”-versions to test the game play:
http://demo.northkingdom.com/vodafonenetguys/dev/gameplay_prototype/
http://demo.northkingdom.com/vodafonenetguys/dev/gameplay_prototype2/

Animationtest:
http://demo.northkingdom.com/vodafonenetguys/dev/anim/

Blocks test:
http://demo.northkingdom.com/vodafonenetguys/dev/blocks/
http://demo.northkingdom.com/vodafonenetguys/dev/blocks2/

Game:
http://demo.northkingdom.com/vodafonenetguys/dev/game3/ (First playable version)
http://demo.northkingdom.com/vodafonenetguys/dev/game5/ (Halfway version)

— Characters

netguys_tvc_0
character_netguys_a
Netguys-characters-final

The characters we developed was of course based on the real characters from the TVC. We had to create two version of them; one set for the game and one set for the intro movie.

Netguys_applescreen_bigAoB_2

Read more about the project here.

February 29th, 2012

Product concept – Next generation table tennis table

main6_Lab-Royale-Table-Tennis-1000px

“Waldner” – the next generation ping pong table, is made with an advanced computer system integration. The table has a multi-touch surface, which responds to human touch and real world objects, like ping-pong balls. The table is also equipped with Siri voice recognition that monitors the game along with a Mac Pro 12-core computer. That means the table is very intelligent; it sees, feels and hears the game. You can even discuss a ball with it to improve your ping pong skills or argue about a point.

hit-Lab-Royale-Table-Tennis-1000px
interface-Lab-Royale-Table-Tennis-1000px
dator-Lab-Royale-Table-Tennis-1000px

“Waldner” is a product concept made by Design Director Robert Lindström. Read more about the table on his blog.

February 27th, 2012

Jury work

The award show season started and we are glad and honored to be part of a couple of juries out there. Being in a jury is a great way to keep up with new and innovative work and get lots of inspiration. You also take a bit of more time to reflect and discuss exciting ideas than you normally would. In a way, it also helps to review your own work in new ways. Last but not least it also feels nice rewarding colleagues in the industry who fight hard to make amazing work happen.

Robert Lindström, Daniel Ilic, Jakob Nylund

From the left: Robert Lindström co-founder and Design Director, Daniel Ilic Creative Director and Jakob Nylund, Senior Art Director.

Daniel will be judging The Webby Awards and be part of the Cannes Lions Cyber Lions jury. Robert will be judging The D&AD Awards and also sits in the digital jury for our own Swedish award show Guldägget/Golden Egg. Jakob will be judging the really cool Visuelt competition in Norway.

Tävlingar

Make sure you keep an eye the winners out there. Our subjective objective opinions might have affected the outcome…

January 16th, 2012

Winner of FWA People’s Choice Award 2011!

FWA_PCA2011
For the third time we are part of winning FWA People’s Choice Award – one of the finest acknowledgements in the interactive industry.

Working with 3 Dreams of Black was an amazing team effort and a result of true collaboration. So many great minds worked hard together cross borders of both expertise and disciplines; spread across the globe we formed a rare creative joint venture that brought Chris and Aarons wonderful visions to life.

Part of the goal was to move and inspire the creative community. Therefor it feels extra good to receive the FWA PCA 2011.

A big thanks to everyone involved making this happen: Chris, Aaron, Doob, Sandra, Thomas for giving us the opportunity. Special thanks to Branislav, Eskil, Bartek, Micke, Klaus and the rest of the guys involved pushing the limits. Full credits here – each and everyone on that list deserve a shout out for being so dedicated.

Also a huge thanks to all the people who voted.

We are all super happy and amazingly proud.

Read more about the project here and about the award at The FWA here.

December 22nd, 2011

Certificate design: FWA Mobile Of The Day

FWA-mobil-award-620-px

Earlier this year we got the honor to design four FWA awards certificates. FWA has also a Mobile Of The Day (MOTD) award which we now have designed and delivered to FWA.

(Vodafone BufferBusters is our first MOTD by the way.)

fwa-awards-north-kingdom-2
fwa-awards-north-kingdom-3
fwa-awards-north-kingdom-4

Test prints on the earlier certificates; SOTM (Site Of the Month, SOTY (Sity Of The Year), PC (People’s Choice) and SOTD (Site Of The Day). FWA have a gallery on their website where people can upload and show their awards.

fwa-awards-north-kingdom

The famous FWA digital award ribbons are vectorized and placed in the lower right corner of the prints.

The basic idea was to make something that would look good on your wall, and even better, if you would have a collection of several certificates. The typeface and the design are taken from the FWA digital award ribbons, which made me start thinking of knitting, which also looks like pixel art in a way. Both knitting and pixel-art is handcrafting, which matched the idea perfect since the winners of FWA awards are filled with both love and care for the craft.

December 16th, 2011

Typography workshop with Hyper Island students

IMG_8971 copy

I had the pleasure of holding a lecture + workshop about typography with the IAD students over at Hyper Island Stockholm earlier this week. We talked about the history of type and some basics when it comes to creating a typeface – what to think about, what tools to use and so on. The task they were given in the end was to create a typeface in 24 hours. I’ve included some of the creations in this post, but make sure to look at them all at http://hypertypography.tumblr.com/!

North Kingdom is very involved in the eduction over at Hyper Island. We love to share our knowledge and help the next generation of creatives. Our creative director Daniel Ilic helps Hyper Island to tailor each years educational programme and earlier this month our IA Alfredo Aponte held a lecture about interactive interfaces and how animation can be used to create a better experience. (the presentation can be seen a bit further down on this blog.) Robert Linström, our Senior Art Director and co-founder, did an inspirational talk about the work we do and how we do it. In January our technical director Daniel Isaksson will do a talk and hold a workshop about technology. Apart from lectures we are also mentoring the students. We meet up with them in smaller groups discussing the work they are doing and giving them feedback and how they should move on.

You can read more about Hyper Island here, http://www.hyperisland.com/

Versaler

Niklaz Lönnqvist- Pumps and skinny jeans

hypertypography.tumblr

Feeling Horny Alphabet

hypertypography.tumblr-1

Luis Carlos Marques

hypertypography.tumblr

Reidun Solvik

3

Antonio Ceballos

tumblr_lw9cose6Aw1r8sl2l

Sara Frank

tumblr_lw9cein7th1r8sl2l

Pauline Säll

December 5th, 2011

An evening with North Kingdom

Last month we were invited by Autodesk in London to come and speak about who we are, what we do and how we do it. From Autodesk’s perspective it was of course interesting to show how we use their software 3ds Max and Maya in creating rich and engaging content for mobile, the web and installations.

3D and motion graphic has been one of our five core competences since the start and is an important tool for us in our work in creating immersive storytelling for our clients.

You can see the whole presentation here in two parts:

An Evening with North Kingdom (Part 1)

An Evening with North Kingdom (Part 2)

November 18th, 2011

UX Talk // Enhancing Experiences with Animation

Last week I was invited by Henrik Wrangel from Doberman to give a lecture about interactive interfaces and how animation can be used to create a better experience for his Interaction Design class at Hyper Island. In return, I was happy to accept the invite and was eager to explore the idea further because I wanted to challenge the reasons why animation is even needed.

So, I spent a few days breaking down the topic and quickly landed on some fundamental elements about design, cognitive behavior, and natural human characteristics. Before I knew it, I found myself flipping through old notes from Donald Norman’s book, Emotional Design. In the end, everything began coming together as I knew I wanted to address the topic from the product’s personality perspective and how we as humans naturally behave.

As you can and may see… I had a lot of fun with the topic. I just wish their was an easier way to capture all my thoughts and discussion points outside the deck for you to follow because I use the visual slides as supporting content to what I was discussing, acting out, or improvising with the audience. So, I tried to add a “closed caption” aspect on some pages to help explain a few points. Furthermore, some pages have small titles at the top that point to hyperlinks if you wish to see the full video reference.

November 9th, 2011

British Heart Foundation – The Hope Tank

1

We recently helped our friends over at Glue Isobar London to produce a charity site for the British Heart Foundation. A zebrafish can repair damaged pieces of their own heart if it gets damaged, and scientist believe that if we study them they could make that possible for humans too, which would save thousands of lives. So support this great cause and add your own zebra fish to the fish tank and spread the message of hope!

Add your own zebrafish

2

3

Some behind the scenes:

skiss

storyboard

fish2

fish