Continuing the ongoing series of interviews on fantasy user interfaces, it gives me great pleasure to welcome Nawaz Alamgir. In this interview Nawaz talks about the beginning of his career doing trailer graphics for feature films, the switch he made to doing screen graphics through a number of self-initiated fantasy UI projects, and the work he did for “Bastille Day” and “Morgan”. And all of that is the introduction to Nawaz’s work on the six-part first season of “Mars” for National Geographic. The show combines documentary-style interviews on the state of the space program in 2017 with a scripted narrative of the first manned expedition to Mars in 2033. We talk about the screen graphics work that spanned over the period of nine months, what went into designing those screens and incorporating them into the narrative on set, as well as in post production.

Kirill: Please tell us about yourself and your path so far.

Nawaz: I left university knowing that I wanted to do something design-related. There were lots of options to choose from, all entry-level web design work and similar things. I ended up getting a job as a web designer at the video games company SEGA. I was there about four years.

Youtube was just started to grow, and back then around 2005 you had to have a really jazzy website. In my third year at Sega I got my hands on a copy of AfterEffects, and we started doing video work, as web sites started becoming video-heavy. I started doing web sites doing animations and video.

I remember when the first “Transformers” came out, and I saw the trailer graphics, and I was amazed. I researched the companies who did that, all of them in LA, as I never noticed that kind of graphics before. I always loved trailers, and I thought it was perfect. Over the next year I taught myself various tricks to be a trailer graphics artist, and then decided that it was time to jump ship.

At that time one of the companies, Create Advertising, opened a branch in London. There were between 20 to 30 trailer houses in LA, and only two or three in London. Long story short, I got a job there, and I’ve spent the next four years doing loads of trailers graphics. My first job was “Black Swan”, and then came “The King’s Speech”. They were just trailer graphics for the local UK market. Sometimes my graphics would go to US, depending on who took the lead.

Trailer graphics for feature films. Courtesy of Nawaz Alamgir.

And during my last year there I noticed that UI in film was kicking in. Mark Coleran was the first time I ever saw UI in film, and I kept on thinking how anybody can be so detailed. Back then there wasn’t as many resources, and I wanted to get into doing that. I knew it was pretty tough to get in.

About three years ago I left my full time job at Create and went into the world of freelancing. It got to a point that even though the company I was working for was good, I did all I could with trailer graphics. It was time for a change. My idea at the time was to work fewer hours, because at that point I had a few deaths around me which put things in perspective. I took off three months, and I’ve spent that time traveling.

I freelanced at loads of different places doing small motion design jobs as well as doing a few film titles sequences for a year, until I decided to start creating some self initiated UI and screen design projects. I wanted to build up some work to show that I could do UI work and also gain some experience from working on projects.

I did a few UI videos and put them on Vimeo, and the one that did well was FUI Echo, getting to 45K views on Behance. At the time I wanted to do two things – end title sequences and UI. They are completely different, but still related.

Self-initiated FUI Echo project. Courtesy of Nawaz Alamgir.

I messaged a couple of studios in London. It was rather generic, saying that I’m not looking for work, but I’m a big fan of your work and this is what I’ve done. And literally the next day I got a message from London based studio Fugitive Studios (who have a great portfolio of film titles) saying that they just got a UI project for a film.

This was for “Bastille Day” which is now called “The Take” because of the terror attacks in France. We did 87 different shots, all in post. Those were really generic CCTV cameras, a screen hacking the bank, CIA computers and that kind of stuff. The director said that he didn’t want generic blue screens for the CIA. He wanted white, but the problem with that is that the screens are lit already going into post, and the actors’ faces are lit blue from the screens. So you kind of have to use blue, and we went with a lighter shade of it.

Screen graphics for “Bastille Day”. Courtesy of Nawaz Alamgir.

It took me five weeks to do these shots, working with other guys at Fugitive. They loved it, and the director loved it, and I think it looked pretty cool on screen when one of the post houses did the screen replacement. That was my first job done, and literally a few weeks later they called me and said that they have another UI job for the film “Morgan”, they said that it’s a small, $5M-budget film in the same vein as “Ex Machina”.

One of the owners would go to speak to the director, and come back describing the idea of a UI that kind of lives inside the CCTV and tracks the footage. There was some UI in the film already, and we were doing the overlays and a few other shots. We did the nano-technology tracking shots, with generically looking stuff.

Screen graphics for “Bastille Day”. Courtesy of Nawaz Alamgir.

Kirill: As we’re talking about “Morgan”, what kind of a brief did you get? Did it talk about who developed the technology – the corporation sponsoring the research or that small group of scientists on that farm, and how that affected the sophistication of the UI?

Nawaz: The only comment that the director said was that it had CCTV tracking, and that he wants it to look cool. We had a rough assembly of the film, and as we watched it, it felt corporate-y and institutional. You’re not really interacting with it.

We knew that the opening shot of the film would be some kind of a UI overlay for a CCTV. The note said that it would have two data sources for their vitals. Morgan’s throughout the whole thing should be calm and stable, while the other one would be spiking red because they’ve been attacked. That was the only brief. We wanted to make it subtle, and a bit futuristic.

This is what we started with. At first I tracked it the AfterEffects tracker, but it didn’t look right. So I literally manually tracked it, and it looks more realistic that way. It’s almost like you’re using face tracking on a phone, where it slides all over the place.

Screen graphics for “Morgan”. Courtesy of Nawaz Alamgir.

Kirill: In a case like this when you don’t have a very detailed brief, did you have multiple iterations with director’s feedback.

Nawaz: Luckily we hit it on version one. The director liked it, and in part it was also about time and budget constraints. It was already at the editorial stage at the time. Another company did the generic interfaces for the computers, and we added another layer of sophistication to it.

There was a scene that shows how the nano-technology works, and we did that. I remember watching a talk somewhere, and that guy specializes in medical CGI stuff. We got him to join us and work with us. I did some tracking, random numbers, emulated uploads. It was a real simple job to do.

Then came the end title sequence for which the director sent a single image of a DNA strand, and he said that he would like the entire sequence to be like that. His initial idea was to get the DNA samples of all the actors and put them on screen, but there was neither time nor money to do that. So we just faked it. Each card had its own DNA strand on it, and as the time continues, it loads different things. It was quite simple end title sequence. It wasn’t my first one, but it was my first major one. I was quite happy with it when I saw it in the cinema.

Screen graphics for “Morgan”. Courtesy of Nawaz Alamgir.

Continue reading »

Continuing the ongoing series of interviews on fantasy user interfaces, it gives me great pleasure to welcome Derek Frederickson of Twisted Media. In this interview Derek talks about his early days in mid-1990s experimenting with Flash on the web, the screen graphics work his company has been doing on numerous episodic cable shows in the last ten years, and the software tools he’s using and how he would like them see evolve in the future. In between and around, we talk about his work on the recently released “Independence Day: Resurgence” that bridges the world of 2016 with the alien technology left “behind” in the first installment in the franchise, as well as glimpses of Twisted Media’s work on the upcoming “The Space Between Us”.

“Independence Day: Resurgence” Area 51 monitor test. Courtesy of Twisted Media.

Kirill: Please tell us yourself and how you started in the field.

Derek: I’ve been doing the things that I do today pretty much my whole life. I’ve always been interested in design, programming and animation…and that’s exactly what you need to able to do work in this field. Back in the early ’80s when I was in my single digits, I had a TI-99/4A. I went to school to study video production, and that helped with certain aspects of shooting, and understanding the whole flow of writing, capturing an image and editing. I was also a musician, so I have a lot of audio experience.

These three things combined helped me ever since. In the early ’90s I was doing CD-ROMs, designing interfaces, interactions, movements – a combination of all of those elements. And that’s still what I do now. If we do a command center or some sequence on a phone, it’s an interactive thing.

Derek and Tony on the red carpet premiere

There’s an interesting thing about me deciding to name my company Twisted Media. It was just me, doing freelancing from time to time. And I got a random email from the assistant to Mark Franco who was the VFX producer that worked with Dean Devlin a lot. They were doing a show called “Leverage” and they were coming to Chicago, which is where I was living at the time, to do the show. And they literally saw the listing for my company in a creative directory and liked the name.

They asked me if I could do graphics for a TV show, and I was so excited after looking up the list of productions they’ve worked on, that included Independence Day and Stargate. So I wrote back “Yes, I can” [laughs]. That’s how it started. When Dean interviewed me, he knew that I was new to that field. But he also knew that the stuff that I showed him was very close to it. He recognized that I could do what was needed. And when he asked me if I could do that, I told him that I had waited my entire life to do it. I’ve worked on a lot of productions since then, and I’m now back to working with Dean on “The Librarians”.

Screen graphics for TV show “Powers”. Courtesy of Twisted Media.

Kirill: If you look back at 2007 when you started working on “Leverage” and your work since then, do you see any big changes in what productions expect from what you do?

Derek: It depends on what kind of a show it is. If it’s a show that takes place today, there’s been such a huge shift in our everyday lives. You look around, and no matter where you are, people are looking at their devices. So for these shows, art is imitating life.

There’s an interesting difference between the shows back then and the shows that are made now. A lot of these shows deal with the world of social media, where you can track somebody’s activity based on what they posted on Facebook. These things are mature and established, so there’s not much creative design or inventing how it looks. There’s still work to be done, but it’s such a mature playground now.

Everyone sort of knows what it looks like. We know the interfaces of Facebook and Instagram and Twitter. They are well-established. You are asked to show a character being on a social media, but it can’t be the actual thing. It is limiting, because we all know how that “looks like”. It’s not reinventing the wheel, but rather coming up with a creative way to do it. And oftentimes it looks a little weird. It’s just text on the white background [laughs].

We grew up with this in the last decade or so. This affects everyone’s lives. Consequently, when you design for it, you can’t take the viewer out of the moment and you have to take those well-established elements. You have to work with the parameters of what has come before and has been accepted.

Screen graphics for TV show “Scorpion”. Courtesy of Twisted Media.

Kirill: Is that due to production restrictions of not being able to use those branding elements without explicit permission from that company?

Derek: The clearance department is always the bane of our existence. They have to look at everything. You can’t use real usernames, for example. Everything that we make is fake. Oftentimes we call it Fakebook, because it can’t really be Facebook. We do work for “Empire” that has a lot of music gear. There’s a program that they use, and it looks a lot like ProTools, but it’s not. It’s FauxTools [laughs]. Everything has to be vetted. The design of it is copyrighted and owned property.

In a sense, working on something like “Independence Day” is so liberating. It’s not in a real world, and you can explore and make something, and it has nothing to do with today. You’re really creating a new world, and that’s where you can stretch your wings and do some neat stuff.

“Independence Day: Resurgence” alien biology research, head, interface. Courtesy of Twisted Media.

Continue reading »

In my first interview with John LePore of Perception a few weeks ago, we talked about his studio’s earlier work on “Iron Man 2”, “Avengers” and “Captain America: The Winter Soldier”. In this second part on Perception’s work, John is joined by the art director Russ Gautier to talk about their work on the recently released “Batman v Superman”.

We start with the beginning of Russ’s career as a motion designer in the late ’90s and his early explorations of Flash, and talk about the role of an art director in charge of a unified visual language of all the screens on a particular feature film. Then John and Russ talk about the cyclical nature of designing for screens in real world and in feature films, the importance of communicating the story through screens and imbuing each one with a precise purpose, comparing and contrasting the screens of Batman and Lex Luthor and how each one reflects the traits of those two characters, and the particular details of the post-production work that Perception did on “Batman v Superman”. Finally, we close with their thoughts on VR interfaces and general progress of technology in our daily lives.

Interfaces for Batman vehicles. Courtesy of Perception.

Kirill: As we’ve already introduced John in the first part, let’s talk about Russ and his path so far.

Russ: My name is Russ Gautier, and I’m the art director at Perception. I grew up in Northern Virginia and went to VCU in Richmond to get my graphic design degree. At the time at least, it was a very theory-based program which worked really well for me, because I tend to pick up the technical side quite easily on my own. So it was great to spend a lot of my education focusing on the “why” of graphic design.

While I was in school I was really interested in interactive design. I picked up Flash in the late 90’s, which I thought was the coolest thing – it was mind-blowing at the time. I saw sites like 2advanced and the early version of GMUNK’s portfolio (the one with the guy dancing in the onesy and all the animated elements), and decided that’s what I wanted to do: crazy animated interfaces. So I dug deep into Flash while in school.

It was a pretty experimental time back then. There were no standards really. UX was not really a thing. There wasn’t as much concern for usability, at least in what I was being exposed to. People were doing crazy things with interface design, and in hindsight many of them were awful, but they did offer a great playground for ideas.

By the time I graduated I had enough knowledge and experience that I got hired to teach a web design class at VCU while working as an interactive designer at a local design shop. Around that time I discovered motion graphics, got myself copies of Maya and After Effects and started playing with more 3D and VFX. After a couple years I quit my interactive design job and shortly after got picked by the Martin Agency. I spent three years there doing motion design and animation, and with lots of support from the Executive Producers and many other fine people, started what would eventually become Hue & Cry. It was just a small internal design and animation department within the agency back then, and now it’s a proper motion design and animation studio. It was a great experience for me to help build the team there.

In 2012 I moved to New York City. I was doing freelance work here, and in early 2014 Johnny contacted me after seeing my reel. We talked about me coming to work at Perception, and I started a couple months later. It’s been a fun couple years!

Kirill: What is the role of the art director on these productions?

Russ: My job is primarily to establish and keep a consistent style and design language throughout the course of a project, to provide team leadership, help present and sell the ideas to our client and, of course, get my hands dirty designing, animating and compositing. Sometimes I play the role of TD as well. It’s a small shop so I wear a lot of hats around here.

Interfaces for Batman vehicles. Courtesy of Perception.

Kirill: It feels like every new generation of designers rediscovers things that were already known, sometimes decided ago. We’ve had this phase of heavily textured skeuomorphic design, and now it’s all about precise grids, white space and typographical rhythms, where the world of digital design is rediscovering what has been established in print over hundreds of years.

Russ: You’re right, each generation seems to discover similar things, but they bring a bit of their own history and perspective along with them. The next ten years are going to be very interesting, as we’ll have the generation of kids that grew up with the Internet. I didn’t have the internet until I was 14, but kids coming up now have never known a world without it. We’re going to see the younger generations of designers come with such a different perspective on the world. It’ll be interesting to see what they bring to the table creatively.

In a way we are going in circles, but each cycle brings with it a perspective that wasn’t necessarily there before. It’s always evolving.

John: Steering it towards interface design, I think that every designer has to be weary when these waves of trends come. The biggest one recently was the anti-skeuomorphic push two or three years ago. It’s good to be aware of these things and to monitor the waves that are taking place. But any time somebody uses them as a strict bible, it’s a recipe for failure. You overcommit to it. When iOS made its jump to anti-skeuomorphic, it seemed that it lost a lot of little nuances that really helped with the usability. People had difficult time understanding which elements were tappable.

It’s good to be aware of these things, but you have to take it all in moderation. Some of the most beautiful interface design that I’m seeing nowadays embraces certain aspects of flat design standards, but is also comfortable letting in a bit of lighting and depth. You seem them blended at the right ratio, and it can create beautiful nuances and satisfying results.

Screen graphics for “Batman v Superman”. Courtesy of Perception.

Russ: I think that the design style machine is very reactionary, but there’s a degree to which those ebbs and flows even out over time. I think of design trends like plucking a string: it starts changing dramatically at first, swinging one way and then back again. But over time we come to an equilibrium where people aren’t as reactionary – at least until the next pluck happens. It doesn’t have to be strictly skeuomorphic or strictly anti-skeuomorphic. It can be something that toes the line and makes something appropriate for your client and their audience/users.

Kirill: Do you see similar cycles in what feature productions ask you to do?

John: It’s a really interesting area as far as trends are concerned. There is a distinct cottage industry of FUI artists, and we all are very closely very aware of each other’s work. It’s a great and positive community, and everybody is excited to see where everything is being pushed.

I would say that the majority of our clients, particularly in film, are almost unaware of that community and that cycle. Some reference the existing vocabulary of film user interface, going back in history to Star Wars or even before that. Why would futuristic interfaces ever be anything other than glowing blue shit?

We’re starting to see more deviations away from that, and it’s relieving for us. But you always see it as a conscious hazard when you’re working on these projects.

Interfaces for Lex Luthor screens. Courtesy of Perception.

Continue reading »

It’s a rare thing to see a television show that dares to challenge the status quo of how stories are told and to explore new ways to bring stories to our lives. While “Black Mirror” has only given us seven episodes in its two seasons so far, each episode was an unbelievably bright star that shone light on how the evolution of technology can change our lives as individuals and as a society, in excitingly positive and terrifyingly negative ways at once.

It brings me great pleasure to have an opportunity to speak with Gemma Kingsley who was in charge of defining and creating the screens that exposed the technology of “Black Mirror” in episodes such as “15 Million Merits”, “Be Right Back”, “The Entire History of You” and “White Christmas”. In this interview she talks about her career as a graphics designer and art director, the variety of productions she works on, and the ways to describe how technology can evolve in our lives without having that depiction overtaking the main story line. Gemma also dives deeper into the details of what went into creating the screens for each particular episode, as well as her thoughts on the pervasiveness of social media in our daily lives.

The screens of “White Christmas” episode of “Black Mirror”. Courtesy of Gemma Kingsley.

Kirill: Please tell us about yourself and your path so far.

Gemma: I do motion graphics, as well as art department graphics and art direction. I used to work at a TV news station doing motion graphics, and then I completed master of art in production design for film and television. After that one of my teachers offered me some work in the feature film world. I took that job, and from there continued working on various drama productions.

Kirill: What do you do as a graphic artist on a feature production?

Gemma: Sometimes I do motion graphics, especially if it’s a smaller production. On larger productions I usually do props, anything from designing tents and ship sails on a film like “Pan” to things like parchment letters for “Dracula”. On that movie they wanted the set to be a part of the story, with old wall murals from Romania. The production designer has asked me to design the wall murals into the sets of the monastery and the chapel and castle. If you look at the backgrounds of those sets, you can see the wall paintings and murals, and that’s what I did there.

The screens of “White Christmas” episode of “Black Mirror”. Courtesy of Gemma Kingsley.

Kirill: When you talk with people and they ask you what you do for a living, are they surprised to hear that everything needs to be designed?

Gemma: I find they are surprised at how much work goes into it. A lot of the time, especially with features, they don’t realize that copyright is a major issue. You can’t just take products and use them, especially if you’re talking about famous brands. You might approach a company to use a brand of theirs, but if the storyline doesn’t reflect well on it, the brand will simply say “No” because it puts their brand in a slightly negative light. So even though they would get marketing from having been seen in a big film, they usually say “No” unless it’s being shown in a very positive light. You usually have to make up a new brand that is similar, but is not actually that brand.

Kirill: As you work on these productions, who do you work with in your immediate professional vicinity?

Gemma: If I’m working there as a graphic artist doing props, it’s with the art director or the set decorator. They contact me and ask me to come and work for them on that particular production. And if it’s something like “Black Mirror”, I work as a separate entity and not through the art department. There it’s more about post-production work, even though I start before the production starts filming. I usually work with the writer, director and production designer. You work through it into the post-production, even after the art department has wrapped.

The screens of “Be Right Back” episode of “Black Mirror”. Courtesy of Gemma Kingsley.

Kirill: Do you do anything professionally outside the world of feature film and episodic television?

Gemma: I work at Sky Sports which is a major sports channel in the UK and Ireland. I do motion graphics for them. Working from production to production takes a lot of hours, and you have a lot of responsibility. I like to take a bit of time out, and work for Sky Sports where I don’t have to work six days a week. I’m finishing a job right now, and then going back to Sky Sports. It allows me to still earn the money while I don’t have to work very long weeks. They allow me to be flexible with my schedule.

It allows me to refresh myself until the next big job that comes along. The hours are very long, and it’s a lot of hard work. It’s very rewarding, but very tiring as well. When you finish, you kind of want to rest for a little bit.

Kirill: Where do those hours go when you’re working on one of those bigger productions?

Gemma: It depends on the job. If I work as a graphic artist in the art department, most of my time is spent in the office. I also go out to the printers to make sure that the prints are exactly the way I wanted them, on the correct paper and with the right look. Sometimes I’ll be on the set, measuring and looking with the set decorator or the production designer. We’ll talk about what it is that they want to put in certain areas, so that I can see what I’m filling. Sometimes, when you’re there, you see what they may not see immediately in my field.

On “Black Mirror” I was in my office the majority of time, and then I went on sets to show the actors what it was they were supposed to be doing. They don’t see the final graphics, so they don’t know what it is that they are supposed to be doing. If I’m not there to do that, the raw material ends up costing too much money to fix. The animations that I’m doing on those screens needs to match what the actors are doing, and it makes my job easier and more cost-effective for me to be on set rather than trying to match motions the actors are doing after the fact. We are both on the same page then and it’s choreographed correctly.

The screens of “The Entire History of You” episode of “Black Mirror”. Courtesy of Gemma Kingsley.

Continue reading »