Boeing 100 - UI Design

Here is a video piece created to celebrate the 100th anniversary of Boeing. Though this project is not exactly an example of an interface design, it does provide inspiration that's very relevant. The video showcases some beautiful imagery and examples of data visualisation, simulations, and infographics.

The overall theme and design style is based on a digital-simulation look with references to blueprints and wireframes. If this design style was applied to an interface, it would create a look that would be suitable to a very advanced UI and something scientific or mathematical.

The design is beautiful, you can pause the video at any point and be presented with a visually stimulating frame. The key outtakes would be the blueprint designs, the wireframing and the background information noise.

Blueprint design

This just looks stunning! I really love clean shapes created by the thin lines and varying line weights. Adding the shallow depth of field may have helped a lot too. We often see simulations in FUI design, but this is one of the most visually attractive examples I've seen. Perhaps it's because it doesn't just look like the basic shaded version of a 3D model, and instead is treated like a blueprint illustration. This really caught my eye.


This also blew me away! Having these beautifully detailed 3D models overlaid with these thin glowing wireframe outlines created such vibrant and visually rich images. It probably helps that the aircrafts have such lovely contours and complex shapes. The fighter jet shots are by far my favourite. The colour choices are worth mentioning too, they're nicely saturated and they complement each other well.

Background information noise

Here I'm referring to the background noise, the little dots and marks scattered around the screen. They help create the illusion of complexity, you can imagine each one holding lots of detailed information, that you just can't see because they're so far away. Besides adding to the aesthetics of the completed shot, they also offer information about space and depth. I think this was an excellent addition and really completed the look.

Image gallery

Congrats to the team for an awesome project! Look forward to seeing more :)


Client: Boeing
Production Co / VFX: Aggressive / Loop
Creative Directors: Alex Topaller, Dan Shapiro, Alex Mikhaylov
Executive Producer: Dan Shapiro
Art Director & Design: Alex Mikhaylov
CG Supervisor: Max Chelyadnikov
Modeling: E.D.Satan, Valentine Sorokin, Roman Senko
2D Animation: Vladimir Tomin, Alex Frukta
3D Animation: Dmitriy Paukov, Roman Senko
Editing: Dan Shapiro, Alex Mikhaylov
FX TD: Nikolay Lvov, Daniil Rybkin
Matte Painting: Dmitriy Ten
Rendering: Max Chelyadnikov
Compositing: Max Chelyadnikov, Roman Senko
Production Manager: Dustin Pownall
Storyboard Artist: Anton Antonov
Sound Design: Wesley Slover
Sound Design (Dir Cut): Echoic

Link to Behance page

Hitman: Agent 47 UI by Territory Studio

Here's a glimpse at some of the UI work from Hitman: Agent 47 by Territory Studio. The film showcases examples of mobile screens, interactive glass, scopes and a range of screen graphics.

Overall the designs appear to be split into two distinct styles, one for Agent 47's equipment and the other for the syndicate's. Both depicting a modern covert feel, but the syndicate's UI show glimpses of a slightly more advanced and complex system.

Some shots worth checking would be the car tracking scene, the sniper scope, Agent 47's briefcase and the syndicate director's office.

Car tracking

This is one of the longer UI sequences in the film and part of an action packed sequence. The colour scheme and lighting of the 3D map is really attractive. The map elements are a nice reddish/purplish grey set upon black, which helps punch out the red elements of interest. The sequence is easy to follow and the little animated transitions are quite neat.

Sniper scope

The sniper scope looks clinical and what you'd expect from a professional hitman. It feels like a modern military weapon, and completely believable.

Agent 47's briefcase 0:29

Although this appears only momentarily, it's one of my favourite pieces. It's a briefcase Agent 47 uses, which opens up with a small satellite dish and multiple screens. Both the physical form and the digital displays look great. It instantly feels like a piece of advanced equipment that is only available to spies or in this case an advanced hitman.

Syndicate director's office

The syndicate director's office is a curved white room with various interactive surfaces built into the interior. It effectively creates an environment for a different kind of villain, one that's not overtly evil but instead the head of an evil corporation. Less of a villain than a businessman. There's two main interfaces in the office, the glass wall and the tabletop. Both help emphasise the advanced nature of the syndicate's technology.

If I were to scrutinise these as practical interfaces I would question the choice of having either one. The glass wall display although would be very useful to the director, feels too public for my liking. I would imagine the director of the syndicate would like a little more privacy on the things he's looking at. The trouble with a glass display like this is that anyone on the other side of the glass can see everything the user is doing. But I understand the appeal from a filmmaking point of view.

The interactive table is also questionable. With so much emphasis these days on office ergonomics, a table like this would wreck havoc on the user's posture. It seems interactive tables like these are great for standing and collaborating but not so much for long time use. It would have been ideal for the UI team to work together with the set design team to create a more suitable environment but from what I gather a lot of the UI work was done retrospectively, after the footage was already shot. The designs on the screens themselves are lovely!

Video conferencing could also be an issue. Normally a camera is positioned on the screen so that the video captured would be as though the user is making eye-contact with the receiver on the other end. In this case the footage is on such an angle that the receiver could be potentially looking up at the director's nose. Or if the camera was higher up, the director wouldn't appear to be looking at the person on the other end. But does the audience really care about this? Probably not. Does it affect the outcome of the film? Not sure. As practical applications it might be an issue but from a film making point of view, it's probably not as crucial.

Head over to Territory Studio's site to check out the montage, it's really a cool project! Congrats to the team!

Image gallery

Batman vs Superman: Dawn of Justice - UI Design

Here's a look at the recent UI work on Batman Vs Superman: Dawn of Justice, by Perception and G Creative. Quite a lot of design work was required for the film, which included UIs for Batman and Lex Luther, Wonder Woman's laptop, drone POVs, show packages and a few other miscellaneous bits and pieces.

Batman UI

The design of the Batman OS feels like a stylised military UI, whereby it's quite technical and detail heavy, but also very polished. The colour choices reflect his brooding personality, and contrasts nicely in his dark surroundings.

Lex Luther UI

This operating systems feels way more corporate and is purposely designed as a polar opposite to Batman's UI. It's what you'd expect from a regular consumer based OS, but with indulgences like texture and drop shadows. It's as if the design was specifically created to fit Lex Luther's personal preferences. It definitely has personality and isn't afraid to show it. A lot of operating systems lean towards minimalism, it's a safe choice as there's less to hate. Lex Luther's OS on the other hand, doesn't feel like it cares whether you hate it or not, as long as Lex likes it.

Concept designs by G Creative

Here's some initial concept work from G Creative, it's interesting to compare these with what eventuated on screen.

Make sure to check out the triangular rocket launcher scope and the drone HUDs, they were amongst my favourite designs of the set. Awesome work by the Perception and G Creative teams!

The Hunger Games - Mocking Jay UI by Cantina Creative

Cantina Creative have shared some of the work they did for The Hunger Games: Mocking Jay. There is an On-set GFX reel (above), an extensive behind the scenes video (below), as well as a VFX reel (further below).

The behind the scenes video is definitely worth watching. It provides a detailed walk-through of the work, and also offers useful insights into the thought process and challenges of such a project. The video is broken down into sections such as On-set GFX, playback GFX and interactive GFX. I really like their explanation of On-set graphics, that they should be considered part of the production design, and treated as a prop rather than a hero. They are not meant to be scrutinised from up close, but instead should be associated with the environment. This helps explain their approach to the design style, which preferred bold, bulkier designs over delicate details. 

Cantina Creative were tasked to create a consistent design language to populate the screens within the base where everyone is hiding out (District 13). There are different areas to the base, which had their own style but overall it followed the same global language. The video used words like Soviet, Militia, Bauhaus and angular to describe the design, which sums it up well.

They've done an amazing job on this, and I definitely appreciate it even more after watching the behind the scenes video.

Check it out!

Ps. Keep an eye out for the HUDS+GUIS icon :)

Behind the scenes commentary

VFX Reel

Image gallery

Hyper-Reality by Keiichi Matsuda

Hyper-Reality is a concept film by Keiichi Matsuda, as part of an ongoing research-by-design project dealing with technology and the future. It is a future vision but more of a cautionary one. It shows an almost dystopian outcome where the world has potentially gone too far with virtual reality.

I really love the way in which he's presented this idea. The film does a great job of visualising an over-cluttered virtual reality, through it you're able to experience the sensory overload, and the overwhelming sensation of this undesirable future, mostly because it's shot from a first-person point of view. The audio is also excellent in supporting this.

The film is very clever and tackles numerous virtual reality scenarios and UI challenges. There are designs for video conferencing with real-time translations, wayfinding UI, notifications, Augmented Reality traffic warnings along the roads, but also spam and annoying popups. It is a literal depiction of real life intertwined with the internet, and it's not a pretty one, but one that's gone off the rails.

There are so many beautiful details and ideas in this film like the shopping cart price display for your actual physical shopping cart and the frosted glass effect, where the physical environment gets blurred to allow for legibility of the UI. The final interaction of drawing the cross to join Catholicism is brilliant too, the UX/UI is perfect for that, what a great touch!

What an interesting and clever project. Make sure you check it out!

Cantina Creative - GFX Reel

I just stumbled across Cantina Creative's GFX Reel, and it is full of brilliant work! There's lots of great detail in some of those shots that I ended up hitting pause about a hundred times :)

The reel is made up of several shots showcasing everything from HUDs, environment scanning, touch interfaces, security access UI to central command screens. It's a testament to Cantina Creative and their ability to continually create new and unique UI. It's easy to see when it's switching between different projects because of the distinct mark of each design.

It also reminds you that they are the wizards behind so many great FUIs. The work is phenomenal, just seeing the level of polish on the animations gives you an appreciation for the level of detail that goes into each project.

Check it out if you haven't already. Beautiful work.

Image gallery

Batman - Arkham Knight UI

Here are some UI examples from Batman - Arkham Knight. There's actually quite a lot to show including the development reel, concept reel, wrist-mounted hologram, and the mission select wheel.

The development reel shown above is by Spov and includes a variety of different interfaces including control room systems, HUDs, maps, corporate systems, as well as some their initial research examples!

It features some beautiful visuals and animation sequences. It's nice to see how the design style is able to stretch across so many different forms. Each of the different examples feel like they're from the same world or OS. The design language and details are consistent throughout.

Keep an eye out for the HUDs in the first half of the video, they are particularly nice!

Awesome work by Spov.  

Concept reel

The concept reel focuses on what looks like the interfaces from the Batcave. The design style is a mix of minimalist aesthetics with lots of data, which gives the impression of an organised yet complex modern interface. The style is demonstrated through various security based applications including fingerprint scanning, voice recognition, eye scanning, maps and 3D diagrams. The monotone look also adds to the no nonsense approach of the overall design. The sound design should also be mentioned as it really adds an extra level of personality to the UIs. Really nice work!

Wrist mounted holographic video

Here's an example of a diegetic UI that Batman uses to 'Facetime' people. It's a holographic video that's projected from his wrist or rather his forearm. It works fine but it looks a bit awkward. It would be better if it was projected from his wrist, which would allow him to angle it anyway he pleases. Being on the forearm, you're quickly limited by angle and it also appears quite close to his face.

Mission select wheel

Here's a video that demonstrates the mission select wheel, which allows you to highlight points of interest as you glide over the city. The style of the UI elements features a lot of glows and vignettes. There are no hard edges or frames, everything bleeds out in a glow. This helps make the view feel more open and spacious as opposed to boxed in.

The wheel itself looks nice in the way it animates in. The image in the middle also looks great when there's a villain or character inside it. The animation style is quick and helps draw your eye to important areas of the screen.

Image gallery

All in all, the project feels huge but has been handled really well. The outcome is awesome. Well done to the team and make sure you check it out!

Insurgent UI

Here is a UI reel for the film Insurgent by motion graphics artist Duncan Elms, as well as some images from Lead designer Anna Fraser.

The design offers lots of flowing lines and shapes that make it look like a holographic circuit board. The shapes themselves resemble the grid format of a circuit board and the collections of dots also support this. Whether they meant it or not, it's what I find most appealing and interesting about the design.

The interface appears to be styled in a way, which allows the user to understand the information by gauging the overall movement of the indicators rather than reading direct data. It's the overall impression of the data that gives you an understanding of it's status, rather than it's specific details and values.

The design of the handheld device is interesting too. I like that it's a physical tool rather than being completely digital. The claws are very ominous and surgical looking, making it feel intrusive and invasive. It think it's more memorable this way.

Worth checking out!


Visual Effects by: Animal Logic VFX
Visual Effects Supervisors: Paul Butterworth, Kirsty Millar
Visual Effects Producer: Jason Bath
CG Supervisor: Matt Estela
Lead Designer: Anna Fraser
Motion Graphics Artists: Duncan Elms, Sam Scopelliti, Sam Hoh
CG Artists: Elias Atto, Aevar Bjarnason, Patricio Alejandro Ducaud, Damien Lam, Timothy Major, Tamas Molnar, Jonathan Ravagnani, Mike Thomson
Compositing Lead: Alex Fry
Visual Effects Coordinators: Ilona Blyth, Tu Nhi Lam


Star Wars UI

Here's a look at some of the UI designs from the various Star Wars films. Blind have shared some screens featured in the latest instalment Episode VII The Force Awakens. There's also a tumblr site dedicated to the UI from the original films and a supercut edit of all the UI from Star Wars: Episode IV A New Hope. Let's not forget the prequels, which have a different style altogether.

The UI from The Force Awakens is inspired by the original films so they have a similar aesthetic. The prequels however seem to have taken a different approach, as they have for the overall art direction. From the vehicles to the buildings, the costumes to the sets, George Lucas took a fresh approach to the franchise, which was his criticism of the new film. But I personally love the lo-fi aesthetic of The Force Awakens, both from a story continuity stand point and film aesthetic.

Star Wars: Episode VII The Force Awakens UI

I think it's safe to say The Force Awakens sits very comfortably within the world and art direction of the original three films. The UI design is evidence of this. The screens shared here by Blind feel like they could easily be slotted into the originals.

There's similarities in the linework and colour palettes, and even the typography and numerals are a nod to the original art direction. It also looks as though some of the screens are displayed in CRT monitors just like the originals, which give the screens a really wonderful finish.

The design team have done an excellent job extending this style to new screens and adding new levels of complexity and detail whilst staying true to the world. It feels believable and familiar.

User interfaces from the original Star Wars

The HUDs and GUIs in the original three Star Wars films are really interesting. The designs are reminiscent of the era, but they are designed particularly well and the production team were really pushing 3D computer graphics technology at the time.

Here's a tumblr site dedicated to the UI from the original films.

I've always been so intrigued by this particular interface. It appears to be physical yet animated. I really don't understand how it works but I swear I've seen it before in the 80s. If anyone knows of what this type of technology is called, please comment or email us!

Star Wars: Episode IV A New Hope - Supercut of interfaces

Here's a supercut put together by UI/UX Designer Dino Ignacio, of all the interfaces featured in Star Wars: A New Hope.

UI from the Star Wars prequels

Here's a montage of the UI featured in the Star Wars prequels. These designs have a very different look and feel to the other films, and a lot of it has to do with the colour palette. It also uses a lot of irregular shapes and angles, which makes it feel alien but less mathematical as the other films do. The video does an excellent job highlighting the detail of the designs.

We're back for 2016!

It's been a particularly busy start this year, so we're having a bit of a late start for 2016! I've personally been busy working on an indy game, as of late last year so I've been rearranging my time to fit in HUDS+GUIS. But don't worry, cos there's already been a huge amount of inspiration ready to be posted here, and we'll try to cram as much in as possible!

Keep an eye out for our first post coming soon!

Hope everyone has had a nice break and a good start for the year so far. Woohoo! Good to be back :)

End of year round up 2015

Again the end of another year has crept upon us. This has been an incredibly busy year and we've seen a lot of amazing HUDs and GUIs.

Looking back on this year's posts, there's been a good mix of games, films, practical applications, and future visions. There has also been a good number of short films too, which is encouraging to see.

Here's the recap of the posts from 2015, starting with the last post.

SPECTRE - 007 UI by Rushes

Here is a UI reel for the latest James Bond 007 film Spectre. It has been released by Rushes, an award winning VFX company based in London, who had been working on the project over a 13 month period.

They were tasked with creating sequences for over 300 screens and across 23 scenes in the film. The expectation was to deliver designs that had a high level of realism and authenticity and depict a relatively accurate account of near-future technology. They have done this through a mix of 3D and 2D and some beautiful examples of data visualisation.

Rushes have approach this with a complex design, when I say complex I don't mean that it's hard to comprehend or convoluted. What I mean is that there's lots going on, as opposed to a minimalistic design. The screen designs feel busy, it feels like there's lots of little things at work, lots of tasks happening in the background. But it's not distracting, it just helps sell in the realism. You would expect an intelligence agency system to be dealing with large amounts of information. What they've done is explore various ways of visuallising information exchange and have established an ordered approached to analysing it.

I think they've done a great job. There are also some really beautiful diagrams and graphs in some of those screens. The Cape Town topography map and the x-ray of the hand is particularly attractive visually. Most of the work feels technical and almost scientific, but the hand is very organic, and the bright green veins look really striking.

Check it out, it's some really solid work!

Image gallery

Furious 7 by Cantina Creative

Cantina Creative have generously released some breakdown videos detailing their work on Furious 7. The video above is the UI reel, and the videos below show a more in-depth look at how these were developed.

A lot insights are shared in these videos and I particularly liked hearing about the thinking process involved in the creation of each scene. From considering the different permutations of the Gods Eye to the way the LiDAR light sweeps to make it feel like the drone is hunting.

They also discuss ways of working fluidly within a large team through creating modular systems, which also helped facilitate the client feedback process. There's a lot of great industry insights here, so make sure you check them out.

God's Eye Design

I loved how the team visualised the process of the God's Eye thinking and crunching through vast amounts of data. The system of the God's Eye is organised but not neat, a lot of the processing is done rapidly and through hacking, and this was reflected in the animation and design of the visuals. It gets things done without worrying about looking pretty, and I get that from watching the video.

LiDAR Overview

This video goes through the LiDAR effect which is used in the drone POV shots. It talks about the steps involved in the process and outlines some pitfalls to look out for, along with other valuable tips from a studio with loads of experience. It then goes into a bit more detail into the software they used like PFTracker, Cinema 4D, and Plexus in AfterEffects.

LiDAR PFTrack Demo

This is basically a crash course in PFTrack, and uses a scene in Furious 7 to demo the process. They go through in quite a lot of detail about the tracking process and steps needed to set up the scene.

Pixel transition effect

This video is very close to being a full tutorial. Alan Torres designer and VFX supervisor walks through the process of creating the pixel transition effect in AfterEffects. The approach is quite clever. Once creating this effect, it can be applied in so many ways. Instead of designing transitions for each shot, the team can take this pre-established effect and apply it quickly, which also helps with consistency.

Image gallery

Not only is the work great, but it is fantastic that Cantina Creative have decided to take the time and effort to share the process with everyone. It is great for the UI design community and especially for those starting out. So a huge congrats and thank you to the crew at Cantina Creative!

Sid Meier's Civilization Beyond Earth

Recently I stumbled upon the latest instalment of Sid Meier's award winning Civilization series, Beyond Earth. The game is set in the future and involves space travel so naturally the trailers feature glimpses of FUI. Below are three trailers each with different UI featured.

Announce Trailer - "A New Beginning"

The UI in this trailer is my favourite of the three. What's great about the UIs in this trailer is the finish on them. The lighting and post production really make the UI look polished. The subtle glare on the surfaces help give the screens texture. The design of the console and the bevelled frames around the screens is a really lovely touch. It's nice to isolate each readout screen with a physical frame rather than have them all on one flat screen. It separates the different layouts without having to add more elements on the screen to divide each section.

I also really love how the type is introduced by a pair of lines as a way of getting your attention prior to the text appearing. The UI in this trailer is a really good example.

Rising Tide Cinematic

This trailer features some simulations and a large table display. The design is very clean and neat. The screen designs are quite technical but still minimalist and the linework is very confident.

Intro Cinematic – “The Chosen"

This one features only a tiny bit of UI, here's a link to skip straight to the UI.

Image gallery

LG OLED - Future Vision

LG have released this future vision demonstrating the potential of OLED (Organic Light Emitting Diode) technology. In the same vain as Microsoft and Corning, this clip shows a variety of applications and how they can enhance our lives. The clip features curved touch screens, transparent screens, interactive video walls, a smart watch, car UI, a car HUD, smart glasses, rollable displays, convex displays and even an interactive cast :)

A lot of neat ideas are presented here but there were three in particularly that were really interesting to look at in detail.

Smart watch as a universal controller

The video shows two instances where a smart watch is used as a primary controller. The way it is demonstrated makes it look much more convenient than using a smart phone. The process feels more natural, you don't need to reach in and fumble with a large phone rushing to get it out of a small pocket. But as you can see in the image, the small screen real estate is the biggest issue, for legibility, touch targets and content space. Perhaps there will be standardised guidelines to restricting content on it, like Twitter's 140 character limit. 

I really love the example where the man in the car taps his smart watch to the window and initiates a video conference. It feels right and I like the theory that any surface can become a display. Perhaps a display behind the front seats would allow the man not to have to crank his neck for longer calls, but of course it wouldn't capture people's imagination as much as the window. Which is a major role for a future vision piece, not only to be a product demo but something that inspires and excites imagination.

Tiling displays

Screen Shot 2015-10-22 at 11.42.32 am.png

The tiling displays in an interesting concept, whereby any two displays would have a level of content awareness to be able to automatically communicate with each other. I love the look of the flexible displays, it really looks incredible and highly futuristic. It's like magic, where a sheet of paper could have all these advance functions without having any of the hardware driving it, visible.

This digital paper approach is so intriguing and I would imagine it could cut down paper waste dramatically.

What I struggle with is how the flexible displays work with the tiling display. The process is interesting but I've struggled to find a tangible benefit to it. Would it not be easier to have a screen-sharing experience and just send content from the table to the wall? I find the scrapbook-like peeling and sticking process to be very appealing but I wonder how it can be used effectively? The demo with the architect near the end of the video doesn't help. We see him sticking a large flexible display around a cylindrical pillar, which is cool but what if you wanted to add more layers, would you start piling them on top of each other? Then what would happen if you wanted to remove one of the earlier layers? I'd imagine throwing content from a screen-sharing experience would be much more effortless and manageable.

That being said the video does demonstrate the technology, and it's potential, so huge kudos to them! I guess it's up to others now to find ways to harness this potential.

Large scale interactive walls

What this video does well is introduce how we can implement displays within environments. There's several examples of this and they really give you a sense of what it could be like, and they've done it in a subtle way. It's not adverts everywhere like the shopping mall in Minority Report. Instead it's subtle wallpaper with the day's temperature, or way finding content. At 0.59, the video shows how you can change the entire mood and character of an environment and how dramatic this can be.

The classroom scene is a good example of this as well. I think it's a pretty accurate prediction of the future, where blackboards are replaced by large scale interactive white boards. At the end of the class instead of cleaning the blackboard, the teacher could record the entire lesson to store or share. So instead of lesson notes you could record all the demonstrations and the explanations along with it.

Image gallery


The one last thing I have to mention is the interactive cast. Although I can see how a display would be useful, in this instance showing an x-ray view of the injury, I feel the interactive portion to be very strange. I would imagine someone with a fractured arm would probably not want someone tapping on the cast constantly. Even in the demo, the kid's arm seems to be rattled by the forceful jabbing of the doctor's button pressing.

The display itself and the colourful design on the cast, I think is really lovely, but using the cast as a keyboard seems really flawed and kind of silly.

Overall though, there are some great ideas in this video, which makes me excited about the future. I like that they've used restraint and presented a 'liveable future' like the movie her. It's a future that isn't too far fetched or intrusive, and one I would totally welcome.

Check it out!

Retro UI - Decrypt by Peter Clark

Here is the short film 'Decrypt' by Peter Clark, created as part of the Adobe Mentorship Project. It's an experimental film about the possible afterlife of technology.

The film features some really beautiful retro looking UI and it doesn't rely on typography to do this. Instead you get this from the choice of linework and shapes as well as the post effects and animation style. The 'two hands' screen for example uses primitive lines and shapes to depict the hands, whereas nowadays you can be so much more detailed. Little touches like that can help build the illusion. Basically it helps emphasise the technical and graphical restraints or the past.

The bootup sequences for each of the shots show how this retro look can be accentuated through animation. The slow building of shapes reflect how the screen elements and colours slowly came to life in monitors of the past. The limited colour palette and fluctuation of shading also help in contrast to the huge colour range available today.

They are just really nicely crafted, check it out!

Image gallery

You can find more behind the scenes info on Peter's site

Grey Goo - Sci-Fi interfaces

Grey Goo is a Sci-Fi strategy game, which features three different factions: Humans, the Beta and the Goo. As far as I can tell, most of the technology showcased is from the Humans and the Beta (the orc-like guys). Axis Animation is the studio behind these clips and the UI reel and concept images are by Martin Aggerholm, who was tasked to build, animate and design the UI. I was lucky to chat with Martin briefly about his involvement in the project, and he was able to share some nice insights into the development of the UI.


Martin was given the concept art to set the initial direction and built out everything from there. From that he was able to see what goes where and which shots were important in driving the story forward.

The camera for all the scenes were locked off by the time Martin got involved. As such the differentiation of focal points and background elements was pre-established.

The Humans: UI

According to Martin, this required the most work as it was the vehicle for most of the story-telling. He mentioned that the direction of the style benefited from Director, Dana Dorian and Concept Artist, Jon Beeston's input particularly since there were a step removed from the UI design world.

The interfaces from the human faction are predominantly holograms. The main one featured is the holographic map that's set on top of a round table. I love the graphical elements that's wrapped around the rim near the top of the map, it helps frame the interface and makes it feel like the UI is housed within a large cylinder. It's nice that the elements are floating without a base grid, it creates a very spacious and clean display and because they are anchored to the cylindrical surface it's kept neat.

The other interface to note is the controls to the large robot from the Launch Trailer. Again they are holograms but they are controlled by a standing user via two circular interfaces. This reminds me a lot of the Pacific Rim UI, but it's a lot less complex. Instead the design continues with the clean, glassy look characteristic of the human's UI.

The colour palette used in the human's UI is primarily blue, green and yellow and is a lot more colourful than the Beta's UI.

The Beta: UI

The alien interfaces from the Beta race are noticeably different. I love this exploration of alien UI, particularly when you see them interact with the interfaces.

From the outset, Martin didn't want a simple changeover in typography, instead he re-approached the design through the line-work and the use of shapes. Taking cues from the initial concept art from Weta, particularly the bulky tattoos, which helped shaped the whole visual identity.

The alien interfaces may not make sense to us but it feels like it makes sense to the user. Even though the symbols and shapes have no meaning to us they do appear to be communicating a message visually though the animation and sequencing. I really love this, just as we would design interfaces to be intuitive to a user, the team have created intuitive interfaces for an entirely imagined alien user. It's an interesting challenge given that the users have three fingers and four arms

It's interesting that, regardless of language there are certain visual cues that carry though. For instance, it's clear to see that some motions automatically indicate a warning. It's interesting to explore the possibility of interfaces being so intuitive that it doesn't need to be translated into different languages, and uses animation and colour to bridge this gap.

Grey Goo - All Cutscenes

Grey Goo - Launch Trailer

Image gallery

The UI design in Grey Goo is really special. Make sure you check it out!

Thank you again to Martin Aggerholm for sharing his insights on the project :)

Here's some useful links:

Grey Goo Interface breakdown on Martin's site
Grey Goo Launch Trailer
All cut-scenes compiled into one video
Axis Animation's site

Halo 5 - Guardians Cinematic UI

Here is the opening cinematic for Halo 5 - Guardians, by 343 Industries and AXIS Animation. The majority of the UI shots appear in the first half of the video during the briefing scene (reminds me of a scene from Final Fantasy).

There's some short glimpses of a wrist-mounted UI but most of the UI is centred around a circular floating podium that projects holographic screens and images in 360 degrees. I quite like the curved displays and how they are constantly rotating and drifting. I also love how the windows rearrange to prioritise content.

It's really weird to think of a canvas in 360 degrees, how would this actually work? Do the four soldiers have set standing positions so that they're looking at the screen most relevant to them? Or is it more like a museum exhibit where you stand where you want and areas are divided into different content types around the circle? Should the screens not drift then? Lot's of interesting questions come from scrutinising the interface in more detail.

Further in the video there's a shot of a holographic terrain map, which is really cool. There's something about a 3D map that is so appealing to me. Perhaps it's because it provides so much more information that a flat 2D map. For example when the trajectory lines appear, you can see the exact location of each of the landing points as well as the height and arch in between. Something much more difficult to convey in a 2D map.

The animation of the UI is nice and tight, from the way the screens rearrange to how the whole interface packs and unpacks, it's really well done.

Check it out!


The Martian - UI design

Here are two trailers from the upcoming movie The Martian. They both feature glimpses of the UI design from the film.

The design style is a balance between complex and clean. You would expect screens from NASA to be crammed full of information, telling you as much information about an event as possible. The design touches on this but presents it in a digestible form. The layout structures are neat and adhere to tight grids. The design focuses on clarity and pairs back the flashiness and clutter.

The design is very refined, every element is neatly aligned and padded out. It looks almost mathematical. There's minimal use of icons, but where they are used, they are used well. The icons feel scientific and cleverly designed, they feel like they have purpose and meaning rather than being fantastical and decorative.

The overall design approach feels like a good example of restraint. It relies on typography, layout and minimal uses of colour to do the grunt of the heavy lifting. The use of very small type in some areas helps give the impression of a technical workspace. It highlights of one of the benefits of FUI design, not needing to adhere to minimal legible font sizes and certain accessibility standards. In other words you can get away with a bit more, and use elements like type as a device to communicate overall feel rather than present true content.

This is an example of a very tight execution, hopefully it's an indication of what to expect from the full movie. Really looking forward to it now!

ARES 3: The Right Stuff Trailer

Image gallery