Huds & Guis

We’re back for 2014!

HUDS and GUIS is back!

Hope everyone had a nice break!

There’s already been a lot of great stuff in 2014, and it looks like there’s going to be some awesome HUDs and GUIs headed for the big screen and small screens later in the year.

Stay tuned as the first post of the year will be out soon! Good to be back :)

Goodbye 2013

Wow, another year has crept up on us! This was great year for HUDS+GUIS inspiration, we’ve seen some really amazing projects and it has been a particularly huge year personally.

Just want to say a huge thanks to all our regular followers and those who have visited the site. This site is purely a labour of love and hopefully a way to help out the community if only in a small way. I hope you’ve found something on here that has inspired you or found useful.

Thanks to those who have reached out or emailed me, I have read every single email, but I’m really sorry that I don’t have time to email everyone back (there’s just not enough hours in a day!)

I wish everyone a safe and relaxing holiday break! We will be taking a well needed break and will be back next year pumped for an exciting 2014!!!

Here’s the end of year recap of the posts we did in 2013….
Displair – Interactive vapour screen
Justice – New Lands Retro UI
The future of firefighting – C Thru Smoke Helmet HUD
Gold Runner
Halo 4: Forward Unto Dawn opener – data spheres and holograms
Continuum – Sci Fi interfaces
Oblivion – Interface Design
Design of ‘The Avengers’ – Interface designs and HUDs
IRON MAN 3 : HUD + GFX Process reel
Multi Touch DJ Light Table by GERGWERK
Tom Clancy’s The Division – Interface Design
Dr Easy – machine vision
Watchdogs – Hacking UI
Europa Report – Space UI breakdown
Car Game Interfaces – Bumper UI
Splinter Cell Blacklist – Interface Design
Showcase 5 – Retro car dashboards
Star Trek Into Darkness – Touch interface & HUD
Continuum Season 2 – Visual Effects Reel
After Earth GFX Reel
Ender’s Game – UI Design
Hawken: Mech HUDs
Star Citizen – Developing the HUD

Also, recently Ash Thorp was kind enough to invite me to have a chat on ‘The Collective Podcast‘ about HUDS+GUIS and about other stuff. You can check it out here…
Collective Podcast chat with Ash Thorp

See you next year!

Star Citizen – Developing the HUD

Star citizen is a crowd funded space simulator from the creator of Wing Commander, Chris Roberts. It looks like a really cool project, and reminds me of an experience similar to Star Wars KOTOR where you get to navigate through space and travel to different planets. Cloud Imperium Games, the game’s developer, have released a video showing the development of the spaceship HUDs, featuring lead UI designer John Likens, who has previously worked on The Avengers and Iron Man 3.

There were some interesting things that I got out of the video. Firstly, I love how John references the ship’s design when developing the interface and HUD for it. It’s a really fantastic way to marry the two up to make the two feel like they belong together. Secondly, I like the reference to how FUI in games is different to FUI in films. In games, the FUI has a functional requirement for the user, so usability is a major consideration. In saying that, it still has way more flexibility than a real (non-virtual?) project. No one needs to develop the technology to display a hologram, so you still do away with all those technical restraints.

The other thing I liked about the Star Citizen HUDs was the ability to customise the colour scheme of the interfaces. A great piece of functionality, particularly for players who are colour blind. Lastly, I like that they are developing individual styles to distinguish the ships by their particular ship manufacturers.

Looks like an awesome game!

Check out Inside Cloud Imperium Games: Developing the HUD

Hawken: Mech HUDs

Hawken has been a project I’ve been following with lot’s of anticipation, ever since I first came across it’s early gameplay footage. I immediately fell in love with the art direction. The Mechs and the world they exist in is so gritty and beautiful. The world looks futuristic but in a dirty and pieced together way and makes me believe it’s been inspired by anime in some way.

Here is a Pinterest board showcasing some of Hawken’s Mech HUDs and cockpits. It also turns out that our friend Ash Thorp has been involved in this project as well, contributing some interface work and UI elements for the HUDs, which is also up on the board.

I really enjoyed seeing the cockpits vary from different Mech designs. The HUDs themselves are very consistent across the Mechs, and use a precise, military inspired style. I think the use of yellow as an accent in the colour palette is really clever, as it helps make the designs look very functional. I think the Mechs and the world itself is designed in a similar way, where the focus on function creates a sort of beautiful ugliness. They could have easily gone down the route of having complimentary colours and subtle differences, but I think I’m attracted to the clashing of primary colours.

While researching Hawken I soon noticed that the HUDs in Hawken were a topic of lots of debate. I stumbled on this thread on the Hawken forums, in which some passionate members have taken it upon themselves to design suggestions for improving the HUDs. So cool to see!

If you don’t manage to play the game, make sure you check out the videos on their site. Seeing the first person view from the cockpit is really fantastic, the HUDs really come to life, and the framing of the screen makes for a really exciting experience!

Check out our Hawken: Mech HUDs Pinterest board.

***UPDATED***
Q&A with Ash Thorp

Ash was kind enough to take some time out of his crazy busy schedule to answer a few questions on his involvement on Hawken. Thanks to Ash for shedding some more light on this project!

1. What was your goal with Hawken?

My goal was to try and nail as many design and concept objectives for the team as I could with the limited time I had.

2. How did you approach this project?

I really love the look and feel of the world that the team at Hawken created. I also love the concept of free to play and how they are building a community of followers and fans. So for this project I tried to focus on matching that level and giving them a level of fidelity to help blend in with the ui of the game. My main objective from Khang Le and John Park was to expire some menu and game ui options. They wanted something with more refinement to give their game a more polished look. I took all the notes in and decided on a very clean and simple grid based militant design system with muted colors to match the world of Hawken. The massive effort they put into the art and design of the world was so great I didn’t want to clutter it up with a crazy amount of UI. I provided them with 2-3 different options from the concepts I built along with various HUD options.

3. Did you have any concepts or ideas that didn’t make it to the final stages? If so, would you care to elaborate on them?

Sure! I had a very interesting idea on how to animate the overall entry point and feel of the player into the game. My ideas were a bit vast and their awesome design team were a bit far ahead for a total rebuild. Along those lines I had a few really interesting animation ideas for the HUD and concepts that would have been fun to explore. All and all I think I was off and on Hawken for 5-6 days just giving the team concepts and ideas to maybe think about. Time is usually the deciding factor of where things go and how far we can go with building out concepts.

I would like to thank Khang Le, John Park and the rest of the crew at Adhesive games for having me along for the ride. You guys rock!

Ender’s Game – UI Design

The incredibly talented Ash Thorp has updated his site with some of his recent UI work on Enders Game. There, you will find a large collection of various stills from the film and from development. It is an excellent opportunity to analyse and appreciate the detail that went across a variety of different applications.

When looking at the designs, they are all very organised and structured, and looks as though all elements are anchored to a grid. This, along with the spacing and arrangement gives a very neat overall look, and with a lot of even angles and shapes, it feels almost mathematical.

I also recently stumbled across a really cool interview with Ash over at ART of VFX, which you can check out here. One of the most interesting points from the interview was the question about his biggest challenge on the project, in which the response was “staying in love with it”. Not in the negative sense, but more from the challenge of continuing momentum and maintaining emotional investment for over a year. I’m sure most designers can identify with this, I certainly can and it really resonated with me since I had never heard it articulated like that before. Great designs often come when the designer gets into a sort of flow, strengthened by enthusiasm and a momentum of energy. It was quite unexpected to hear that that was the biggest challenge on the project. He must have figured out a way to tap back into it and stay connected to the project, as the outcome is immaculate.

Can’t wait to see the UI in action!

Check out Ash’s UI work on Ender’s Game
Check out his ART of VFX interview

After Earth GFX Reel

Here’s a GFX reel of some of the UI work done on After Earth.

It’s an interesting experience seeing montage reels like this as it displays the visuals without the original sound or voice over. In doing so you can concentrate on the movement of the elements and rely on them solely to demonstrate their functions. This is a really good example where the animation and movement of the elements have a lot of character and purpose, and the viewer can put together an idea of what they do.

There’s a distinct style in the treatment of the After Earth UI. It prefers gradients and LED glows, which takes the hard edge off the line work and creates a sort of clean and soft look. This is helped along by the use of transparent and curved surfaces. Unlike a lot of technical styles that often use grids as a holding device, they’ve completely steered away from using carriages and backgrounds and in doing so continues the clean, soft approach.

A good comparison would be to look at the interface design in Avatar. Both feature medical diagnostic screens that appear on transparent panels. But you can really see the difference in the soft-edged glow approach verses the hard edges of the Avatar UI.

PS. The X-ray shots look fantastic!

Watch the After Earth GFX Reel
Compare it with the Avatar UI