Huds and Guis

http://hudsandguis.com/

Dr Easy – machine vision

password: cantor

 

This is an unusual clip, it’s a faux research clip from ‘Monad Life Science’, and it’s part of the marketing campaign for Shynola’s film Dr Easy. I love this kind of extra content, it’s a nice way of providing a back story and builds on the world of the film, making it more believable. Prometheus did this previously with their Weyland Industries investor site and David 8 product video and who could forget ‪Peter Weyland’s 2023 TED Talk‬.

 

What’s interesting here is that the designs aren’t meant to be finessed and user friendly, but instead low fi, un-polished and believable. As far as I can tell, the film is set in a time where artificial intelligence and robots are still a relatively new development. So what you see here is examples of tracking data and raw looking machine vision. The goal here is to not make anything look too far fetched.

 

When people design programs it’s focus is purely functional, markers, symbols and indicators are there to help with developing the program and not for aesthetics. So here, the design is almost backwards, in that it’s trying to mimic the visuals that you’d see built into a program at its most basic functional level.

 

I love the look of the motion vectors and the tracking dots, it reminds me of the hair dynamics in 3D programs and Kinect software development kits.

 

Check it out

Watch the Lab Test video password: cantor
Watch the POV overlay test
Check out the full short ‘Dr Easy’ by Shynola

Tom Clancy’s The Division – Interface Design

I can’t tell you how excited I get when I come across cool UI in games. Not only do you get to see the interface in action, but often you get to interact with them. The latest thing that’s got my heart pumping was the trailer to Tom Clancy’s The Division.

 

Here’s a breakdown of the things I liked about The Division’s UI:

The main character HUD
Beautifully designed, instead of framing the screen with game information, the UI is incorporated into the environment creating a more immersive experience. The game HUD is anchored to the player and on a slight angle, which helps with the illusion of being part of the environment. I love the subtle movements it makes as the character moves and how it immediately stops as the player pauses to look around. It adds to the tension of the game.

Holographic Wrist UI
Great example of a diegetic interface (see article Dead Space 2 – Diegetic Interfaces), this features a carousel type UI that wraps around the character’s wrist. I really like this concept, it looks fantastic and I can imagine it being very useful. The only thing is I’m not sure how the character scrolls through different options though, but maybe it was better for the game experience not to worry about it.

 

You can see other examples of wrist mounted UIs in Final Fantasy (HUDs Collection), Continuum (‘Brain Control’ clip). and the Mass Effect games feature the ‘Omni tool’.

Holographic map
This was so unexpected! It’s an idea that was also seen in Iron Man 3, but in this example the hologram is scaled down for navigating. It allows the user to navigate through the city from the perpective of a giant, which feels like such an intuitive approach. I also love the look of the map and how it animates out and the audio that comes from selecting different points of interest.

 

Another cool feature is shown further in the video, where the main character happens by a map in the police station, which he scans and updates his map automatically.

Way finding
Throughout the world, street names and interest points are subtly labelled by floating typography, which enhances the feeling that the game is situated in a ‘high tech’ world. What’s more is the progress bars and action elements like when the character unlocks the strong box, makes it feel like your whole world is an interface.

 

It’s quite a nice way of forming the game’s narrative without having to rely on traditional ‘out of game’ UI. Everything that carries the story along looks like it plays out in the game’s environment.

 

Not only do I like the UI featured in this game, I haven’t mentioned how amazing it looks. The atmosphere, the frosty breath, the environments, the action make this game look like such an engrossing experience. Can’t wait to try it out.

 

Check out The Division trailer

 

Thanks to Allan for sending this through!

 

Multi Touch DJ Light Table by GERGWERK

This is a really cool project, which demonstrates how advances in UI and technology can be translated to music.

 

This is a senior project by Kansas City Art Institute student Gerg Kaufman (AKA GERGWERK), which aims to digitize the traditional equipment used by DJs to enhance mobility. Through the project he’s explored how to maintain all aspects of the job required by a professional DJ, such as engagement with the crowd and the ability to control the interface without needing to look at it. He’s managed to do this using a series of clever hand gestures, which feels natural to a practicing DJ.

 

Apart from being nicely designed visually, what I really like about this project is that it uses unique gestures to replace the tactile nature of the turn tables.

 

Check out the Multi Touch Light Table by GERGWERK
Check out more process images here

IRON MAN 3 : HUD + GFX Process reel

The guys at Cantina Creative have been busy! Here’s a process montage of the HUDs from Iron Man 3, which gives you a closer look into the detail of the designs as well as an insider’s look of how they were developed.

 

There were a lot of new things featured in this latest installment of the Iron Man series. For example, it was really interesting to see the scene featuring the external HUD as I had previously wondered how the Iron Man HUD would actually appear beneath the helmet so this was a unique glimpse of what’s happening under the hood.

 

The introduction of the shelf device within the HUD design of the main suit was cool too, as it served like a stage for all the signals and information to play out on and created a sort of anchor or reference point for all the other graphics.

 

Of course I also love the customisation of the different HUDs for each of the different model suits. That would have been a hell of a lot of fun to design! The curved lines in the MK33 Silver Centurion suit was a stand out for me, it was very different to previous Iron Man HUDs that we’ve seen.

 

So are you sick of Robert Downey Jr’s face yet?

 

Check out the Iron Man 3 HUD + GFX process reel
Here’s a great article on the VFX of Iron Man 3 by fxguide

Design of ‘The Avengers’ – Interface designs and HUDs

Wow! The Avengers did not disappoint, it was the entertaining blockbuster it was anticipated to be. What’s more, it didn’t disappoint in the way of featuring a tonne of HUDs and GUIs, and elaborating on what we loved about IRON MAN 1 & 2 thanks to the team at Cantina Creative!

IRON MAN HUD

Check out the IRON MAN HUD Montage

 

Fantastic! There’s nearly 2 minutes in total of screen time purely in the IRON MAN HUD! The beautifully crafted, heavily detailed designs were created by the super talented Jayse Hansen.

 

It is sooo cool that a designer was allocated to purely focus on the HUD design. The detail that he went through is amazing, to put so much research into something is inspiring. As Jayse put it “I basically taught myself how to fly using whatever I could find: books, videos and flight simulators”

 

It was really interesting to hear that designing for stereo (3D) meant that everything was in focus and clearly readable. Great for effect but unfortunately that meant he had to make sure everything on the screen had a function and could not simply be decoration. You could argue that this was a good thing as it meant the designs had purpose and would be more authentic. It’d also push the design to make sure everything was properly considered.

Just check out the breakdown on Jayse Hansen’s site. The detail is truly inspiring.

 

My favourite things about the IRON MAN HUD:
1. How the elements animate on different layers in 3D, sexy!
2. All the circular reticles, and when they expand and come in from different depths
3. When the HUD swipes around to switch to ‘battle mode’. AWESOME!

Stark Tower UI

Check out Stark Tower UI

 

This is a short scene but it has some interesting sequences to note. It mainly involves hologram displays, and the cool part comes when Stark reaches in and grabs the 3D cube and looks at it in detail, a concept that was introduced in the IRON MAN films.

 

Another great moment is when Stark flicks the screen interface to display exploded content on holographic screens around him. A really cool take on the traditional ‘full screen’ mode but in a spatial setting.

Helipad screen UI

Check out Helipad screen UI

There’s some really nice scenes on the Helipad that feature touch screens, most of which are transparent.

 

The look of transparent screens are just so attractive. I love the vibrancy and detail of the content, it really helps make it look believable and functional.

 

Some nice moments involve Banner and Stark throwing content between two separate screens and collaborating instantaneously. I also like that the director positioned Banner and Stark on opposite sides of the screen during an important dialogue. It looks great and highlights the possible benefits of having a transparent screen, like being able to see each other through the content and the ability to interact from both sides.

 

Finally, I wanted to mention how much I enjoyed seeing the different personalities of Banner and Stark and how that translates in the way they interact with the interfaces. Stark is very fluid and nonchalant, and on the other hand Banner is gentle and precise. Full credit to the actors.

What a fun movie!

 

Watch the IRON MAN HUD montage
Check out the Stark Tower UI sequence
Check out the Helipad screen UIs
Check out Jayse Hansen’s breakdown of the work

 

Credits
VFX: Cantina Creative
Marvel VFX Supervisor: Janek Sirrs
Stereo Supervisor: Wes Sewell
Cantina VFX Producer: Sean Cushing
Cantina Creative Director (and HUD master!): Stephen Lawes
Cantina VFX Supervisor: Venti Hristova

 

Cantina Creative Design and Animation team
Jayse Hansen
Jonathan Ficcadenti
Alan Torres
Navarro Parker
Sang Shin
Asuka Ashizawa
Takashi Takeoka
Sarah Blank
Lukas Weyandt
Leon Nowlin