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

The Grays by Henry Hobson - HUD design

The Grays is a tension filled short film by Henry Hobson which is beautifully shot and features a really cool HUD. The suit itself feels very vintage and textural and I love this contrast with the very modern HUD. Lucky for us, we get to see quite a bit of the HUD and it is exquisite.

The initial boot-up sequence is nice, there's a subtle backlight that flickers on whilst all the elements slide into position smoothly. There's readouts on either side of the helmet that both use fixed column widths. This really looks great and forces an interesting balance of scale, which also sets the visual hierarchy of elements. Realistically this would be a tricky constraint to work around but for this instance it makes for a very unique arrangement. The HUD design is very distinct and relies on neatly locked up typographic elements.

There's a shot near the end where you can see the readouts from the inside of the visor. This gives you a taste of what it would be like to experience this HUD, and it looks brilliant. The readouts are easily readable and look really sexy from up close. I also absolutely love when the colour kicks in, you get to see shades of red and pink, which are vibrant and so pretty to look at.

Check it out, the film itself is so beautifully shot and the HUD is a real standout.

Miles - Proof-of-concept short film

Miles is a short film created by Oliver Daly as a proof-of-concept to help fund the creation of a feature length version. The story focuses around Miles, a teenage dirt bike rider and co-stars M.A.X, a robotic canine-type animal, which references DARPA's BigDog.

Territory Studios (Jupiter Ascending, Guardians of the Galaxy, Avengers: Age of Ultron) was approached by Daly to help design M.A.X's machine vision, as well as some military control room screens.

M.A.X's HUD view is quite interesting in that it's set on a solid black background. It's as though M.A.X experiences night and day the same way. This arrangement allows the director to guide the audience's attention to particular points of interest very quickly, whilst at the same time portraying M.A.X as a very task focused machine.

The way M.A.X sees humans and objects is very fun. It's depicted as a fleeting impression of shapes created by layers of topography, depth mapping data with artefacts and all.

The rest of the UI elements are created with detailed line work and built upon neatly structured grids. I particularly love the topdown map shot with the minimal layer of typography over it (see first image in the gallery below).

There's a definite style to the military screens. It uses a limited colour palette and features precise details and tiny readouts that are balanced by the occasional large scale number or letter combination. Some of the details from those shots are brought to attention in the end credits, where they're presented with a shallow focus making them just gorgeous to look at.

Great work by the team at Territory!

Miles proof-of-concept film

VFX breakdown

Image gallery

Tom Clancy's Ghost Recon Phantoms UI

Here is the trailer and gameplay footage to Tom Clancy's Ghost Recon Phantoms. It's a game that focuses on advanced warfare and as such features some futuristic military HUDs and GUIS.

The trailer is created by Antibody and features some really polished and cinematic visuals, as you would expect. Antibody are consistently pushing out strikingly beautiful work. I really love the treatment of the title frames and the ambient glitches that surround them. There's a lot of nice animation details if you look closely.

The main UI elements come in the form of holographic visuals and minimal AR, and there's a distinct style to it. They use thin, precise lines with light bloom which make everything look like they're made from lasers. There's something about a red laser light that looks so striking. I absolutely love the map tracing sequence (0:43). I love how each marker has a line that extends upwards as though it's being projected by a laser from above, aesthetically this is very interesting. It's great also how these lines penetrate surfaces. I also really like how the markers link up when they're in close proximity to each other, something I noticed on the gameplay footage too. Antibody have done a great job to inject a sense of drama to this map scene, you can feel the tension between the red and blue even within this diagram view.

Gameplay footage

I was surprised to see that the gameplay footage included a lot of augmented visuals. It's interesting to see and experience how this actually impacts performance in the field. The environment scan as a feature is really cool, the way it's visualised is great too. I love how the wave of cyan sweeps through and rides the surface of the walls. That is my favourite feature but in the video you will also see ambient AR and some drone vision (4:28) too.

Check it out!

E3 2015 - HUDs and GUIs

E3 2015 (Electronic Entertainment Expo) premiered a tonne of new and exciting game trailers. Here is a collection of the ones that feature HUDs and GUIs worth mentioning.

Check it out, there's some cool stuff in there.


Mass Effect 4

A very short glimpse of a gesture and touch-controlled interface and a holographic interface. Although it's a short sequence, the design elements are tight. The design uses lots of small details across a huge surface which instantly gives the interface a feeling of precision and complexity. The transitions are smooth and I like how the screen liquifies on touch.

Skip to 0:43


Need for Speed

This is the in-game UI and it is sexy. There's a lot to appreciate here. Firstly I love the overall treatment of all the elements, there's a slight glow or bloom which makes everything look slightly illuminated. The elements are also ghosted onto the footage (no solid bases) but because of the strong contrast and because they're anchored into position whilst the camera is moving furiously, the UI is easily readable. The animations are purposeful and helpful, which is crucial for a racing game that demands intense focus. The checkpoint markers are also well considered and easily noticeable. I love that they've gone minimal and just used type. I'm not a fan of overt badges or icons, as it pulls the user out of the realism of the world, and reminds you that you're in a game.

Skip to 2:54


Hollowpoint

This trailer features a HUD and various UI elements. The style is very technical and features lots of glitches. The distortion on the type elements and the subtle transitions are quite nice. The helmet is very interesting too, instead of a single visor it is separated so each eye features separate holographic displays.


ReCore

This features one interface and it's a holographic UI that scans the user's hand. It's a nice polygonal web-like design and I love how it protrudes out and how it sticks to the fingers as the hand leaves. 

Skip to 2:17


Ad1ft

This features a single space suit HUD. It's fairly minimal and symmetrical. What appealed to me was the two curved vertical lines. They are quite unusual and are instantly interesting to me. I wonder how this would be beneficial though, as humans are used to referencing straight lines. Regardless, I really love the view of space through this lens though, it feels so clean and unobstructed.


Deus Ex: Mankind Divided

There's a few short glimpses of UI in this clip. The main one to look out for is the x-ray vision at 1:27. The yellow and the orange elements look so graphic and is a nice contrast to the rendered visuals from the rest of the game.

Skip to 0:47

Google Project Soli - Micro-movement gestural UI

Google’s Advanced Technology and Projects group (ATAP) are exploring ways to revolutionise the way we interact with devices. They have just released information about Project Soli, which uses a sensor that can track sub-millimetre motions in high speed, incredibly accurately.

With a lot of gesture-based interfaces, we’re used to seeing lots of wide sweeping movements, Project Soli on the other hand focuses its attention on tiny movements.

There are many ways a human hand can interact with objects, many ways to apply pressure, twist, flick etc. The human hand can be very precise and capable of exceptional finesse. Project Soli aims to capture this as a way to interact with technology.

The examples shown in the video are fantastic and makes it simple to understand the potential of these gesture controls. I love how natural it feels, and that many of the actions have a haptic feedback.

This is very promising project and big step towards making interfaces that work cohesively with inherent human behaviours.

Thanks to Allan MacKinnon for giving us the heads up on this one.

yapZj6.gif
0529_soli_2.gif


Destiny UI

Destiny is a multiplayer first-person-shooter video game, developed by Bungie (the guys behind the Halo franchise), and the UI featured in the game has been gaining a bit of praise online lately.

The two main things that make the UI unique is the use of a free moving cursor and the design aesthetic.

Free moving cursor

For a long time, console games have favoured menus that require the user to navigate through options step by step, using the analogue stick or directional pad (D-pad). Destiny, however, introduces a cursor that the user can move freely around the screen.

This gives designers more freedom in the layout of the UI. Interactive elements can now be positioned anywhere on the screen and the user will still understand how to access those items. Previously, you would have to either keep the interactive elements in close vicinity to each other or make sure there's visual cues to relate to the user how to step through to items that are positioned far apart.

This approach is also very helpful in games like Destiny that have very comprehensive menus. Using the stepped method would just be tiresome, it would require too many steps before arriving at what you want, or even worst, finding out that's not what you wanted. The stepped method just isn't great for deep menus, it doesn't make sense to have to step through multiple tiered menus just to explore what options are available. However, it is completely fine for shallow menus.

The Destiny UI also makes use of tooltips that appear as you rollover items. Because Destiny is so dense in content, this is a very elegant way of hiding content and allowing the user to control what information they want to display. This avoids having to fit everything onto the screen at once and tooltips of course work perfectly with a free moving cursor.

So the idea of using a free moving cursor in Destiny is a good one, it's an elegant solution to it's unique requirements.

Flat design

I was quite surprised when I first saw the design of the UI, I expected like most games for the menus to be heavily rendered or very non-intrusive. Instead a lot of the UI is based on flat design, very similar to Metro design (Microsoft's type-based design language). It's a style that's very common in web design nowadays and became popular during the rise of mobile browsing. The reason being that designers became very conscious of performance and the limitations of mobile download and therefore avoided the heavy use of images in a design, and instead using flat colours and live text.

This quickly developed into it's own style, and naturally evolved into a style that leaned on animation to bring it to life. Destiny's UI is an example of this and relies on animation to help explain the behaviour of the UI, and allows motion to provide meaning. For example it uses an animated glimmer on interactive elements to subtly show updated items (unread items), rather than add a badge or unnecessary design elements.

It works surprisingly well with the look of the game, it's clean and let's the beautifully rendered images shine. It's not overcooked with detail, so the UI is very utility friendly. It's modern and relevant to this time.

Congratulations to the team involved (credits at the end of the video). It's really exciting to see such an emphasis being placed on the UI in games (see Dead Space 2 for another example), it is so important and a major part of the game itself.

Check it out

Avengers: Age of Ultron UI by Territory Studios

Territory Studios (Guardians of the Galaxy, Jupiter Ascending) have just released a UI reel showcasing their work on Avengers: Age of Ultron. It's really well put together, showing lots of great closeups of the details and animations. It's a quick summary of the enormous amount of work produced for the film, which included over 200 screens / animations, totalling to 80 minutes worth of unique animations.

In it you can see the clear distinction between environments, overall the approach to the elements are quite similar but the design and colour schemes vary deliberately between the different characters.

Lucky for us, Territory have also shared a host of videos and images that allows us to have a closer look at how some of the shots work.

My favourite would have to be the Fortress UI. I love the scanning animation that goes across the arm diagram in the second Fortress clip below. The arm itself looks great with the flickering patches of green and the subtle circular outlines framing it. I like the idea of the overlapping sections in the third Fortress clip too. It looks as though zooming into the section reveals detailed diagrams relating to that specific area and zooming out allows you to see a broader context of it overlaid on another section. I think that's a really neat idea and visually interesting too.

Closely followed by Dr Cho's UI because of the vibrancy of the colours. Everything has a wash of blue over it, with highlights of magenta and a deep blue, there doesn't seem to be any hints of true black or white. I also love the way the table layout works in the first Dr Cho clip. It looks authentic and feels scientific, you can easily imagine what each of those cells could represent, for me it looks like something to do with DNA or chemical levels, and that gives it enough of an illusion of realism for me. The body scan in third Dr Cho clip also stood out. I like that the body is made up of many fine lines. It makes me think that it's using state of the art equipment, because of the speed of which the scan wipes over the body and how it's able to scan all that detail and even speed up toward the end of the process, even though I don't even know what any of those lines represent.

Have a good look, there's so much work here, which has been done over a long period of time.

Congrats to Territory Studio on such a mammoth project and a big thank you for sharing!

Dr Cho UI

Banner UI

Stark UI

Fortress UI

Leviathan Lab

Images

Also check out this interview with David Sheldon-Hicks, creative director and found of Territory Studio over at Inventing Interactive.

The Prototype Trailer - Machine vision HUD

Here is the trailer for The Prototype, directed by Andrew WIll, launched in 2013. It features a humanoid robot and it includes several clips of it's machine vision HUD.

The HUD design is filled with elements and various bits and pieces to make up a reasonably complex design. It's interesting to see that 2 years after this trailer was released, we've seen a trend towards more minimalist interfaces (see Oblivion, Call Of Duty: Advanced Warfare).

I like those extra bits of ambient detail, it makes the design feel slightly foreign and as though there's a lot of calculations going on. It also works well for the fact that the robot is supposed to be a prototype. Perhaps the final version would feature a more minimalist HUD?

The eyes of the robot are quite cool, I like how they light up and adjust like a camera lens, and when you're taken into it's POV, it marries up neatly. The designers have also done a good job making the interface easily readable, you can tell quite quickly what the robot is doing.

The grading is quite nice too, it's good to see a bit of green in there as opposed to the oppressive red seen in the Terminator machine vision. The bloom effect on some of the elements is also a nice touch.

Overall it's a really nicely designed HUD with lots of personality.

Check it out!

Watch the The Prototype Official Teaser Trailer

Halo: Nightfall UI

Halo Nightfall is a live-action feature-length film (split into a 5 part series) that features lots of stunning visual effects by Nvizible (Edge of Tomorrow). Here is a montage of some of the HUDs and GUIs shots from the series.

The reel features closeups of wearable displays, screen designs. and HUDs.

The illumination of the forearm display on the body armour is really cool. The cockpit display is equally nice, I particularly like the really saturated colour palette.

But I was immediately drawn to the helmet HUD designs. They are so uniquely designed and visually striking. It's really nice how the HUD animates on, it feels so light and thin, and reminds me a bit of the slide out animation from the GI Joe HUD.

I love seeing the helmet HUD from the outside and seeing those thin luminescent lines almost framing the contours of the face. I also love that the helmet features so much glass, and gives the HUD so much breathing room. More close up shots can be seen over at Christopher Abbas' site.

Really beautiful stuff! Check it out!

Check out Nvizible's Halo: Nightfall page
Watch the Halo: Nightfall UI/HUD reel by David Bauer
Check out the concept designs on Christopher Abbas' site.

Call of Duty: Advanced Warfare

As the name suggests, Call of Duty: Advanced Warfare features lots of technologically advanced military gadgets and weapons. As a result we are treated to a variety of HUDs and GUIs!

The following clips are game cinematics produced by London based studio Spov (see previous post Neuroscouting). Overall, there's a really strong cohesive style. There's some really strong consistent elements that hold these clips together. The line work is very neat, there's lots of grids and rectangular shapes but they've managed to do this without the layout becoming too 'boxy'. The typography and colour palette is also really nice. I'm especially drawn to the strong contrast of the green-yellow highlights against the blue lit background.

Throughout the videos, there's a feeling of complex data being presented in a simplified form. This has been achieved with a minimised colour palette with accent colours. The animation also does a great job of leading the eye and adding meaning. There's a good balance between making the story points easy to understand and creating a sense that they are legitimate military briefing screens.

On top of this, they've even managed to make it look visually attractive. The 'Crash' video is great example of this. I love the way they've demonstrated the strategic attack point in Rio Gallegos, how all the lines branch out to the different targets and how the target name tags appear just after the radial pulses. They've made something that's potentially quiet bleak into a beautiful infographic.

I also really like the very clean drone HUD seen at the end of the Lagos clip, especially the subtle tracking dots, and thin light lines. There's a lot of nice subtle animation in there but not too much that it becomes cumbersome. Awesome work by the team at Spov!

Lagos

Crash

San Francisco

Here's some other clips in the collection
Irons Estate
Greece UI

 

Showcase 6 - VR

Virtual Reality is making a massive impact right now. Since the Kickstarter success of the Oculus Rift, the development of VR has accelerated dramatically. As expected, there's quite a few VR headsets in development right now. Here's a quick look at a few.

Microsoft Hololens

The Hololens is Mircrosoft's recent contribution to the VR offering. It's a bit different from other VR headsets as it's half VR and half augmented reality. The Hololens bascially tries to emulate an interactive hologram (see Iron Man), but requires you to put on a headset, so it's not quite it in the true sense. It is powerful though, unlike Google Glass which augments a flat layer of information to your vision, this maps 3D objects into your environment. When you put on the Hololens, essentially you can interact and walk around 3D forms, that appears integrated to real surroundings. The interactions come from gesture and voice commands.  In their promo video they show examples of the types of applications this would be useful in and some are quite powerful.

One application is in industrial design, whereby you can have a realistic representation of your concepts in a 3D space, at the right scale. This allows you to rapidly prototype concepts without having to make expensive physical models, and allows you to adjust on the fly. This is very much like the Iron Man example.

Another is screen sharing for instructional purposes. Microsoft have touched on the usefulness of AR in the area of education and instruction, as seen in their Manufacturing Future Vision way back. The example in the video shows a woman fixing a sink, whilst someone in another location is guiding her through it with 3D diagrams. This is a bit clunky, since the man's experience is completely 2D. But what would be better is if she was assembling something like Ikea furniture, where all the instructions are built into the parts, explaining what goes where and how to put it together.

This concept isn't completely new and is similar to T(ether), an experimental interface from MIT Media Lab (2012), but this is the first time I've seen it in a neat working and marketable form. It looks very promising.

NASA is also using it on their exploration of Mars, which demonstrates how powerful and useful this technology is.

Oculus Rift

The one that really jump started the evolution of VR. They've recently started Oculus Story Studio, which is committed to exploring the potential of VR in cinema. There has been quite a lot of hype around storytelling in VR and it being the next big thing in cinema.

This introduction video talks about the possibilities and challenges involved. Most interesting was the idea that 'cuts' in film was a technique that was developed to allow the film to change scenes and locations. In VR the problem with cuts is that it either disorientates the user or gives the sensation that you're being teleported. It becomes disruptive when you're trying to immerse the user in an alternate reality. So how do you tell a large story that involves multiple locations or multiple time frames? Do you have to be a participant in the story? Seems like there are a lot of interesting challenges and would be a lot of fun working through them.

Oculus Story Studio are currently creating 5 films told in VR. Very excited to see where it goes.

Other notable VR headsets

Samsung Gear VR (powered by Oculus Rift)
Sony Project Morpheus
HTC Vive
Carl Zeiss VR One
Avegant Glyph
Razer OSVR
Google Cardboard
 

Microsoft's Productivity Future Vision 2015

Like the previous Future Vision projects by Microsoft (2009, 2011), this latest instalment continues the same 'a day in the life of' structure, and follows a scientist as she and the people around her interact with new technology. This is a great way of tying in tech demos with real world relevance, and really humanises complex technology solutions.

Highlighted here are the three concepts that really caught my attention.

Scuba Hololens

This is featured at the very beginning of the clip, and shows our scientist scuba diving underwater. We see various augmented graphics tethered to real world objects, that you can swim around, which is the real power of the Hololens. She uses this extra layer of AR for way-finding via route markers, identifying species of plant-life, capturing and saving content, screen-sharing communication, as well as adding extra layers of complex information to her regular tasks.

This is the perfect application of the Hololens, where you're in an environment that already requires you to wear a mask. This extra layer of technology makes the experience safer and more efficient. You only have so much time/air before you have to surface from scuba diving, but this allows you to make the most of every dive.

'Smart' bracelet

I love the concept where you can change the design of the bracelet by 'absorbing' a pattern from a nearby textile, like a chameleon. You can already change the background image for all your devices by taking a photo and setting it as wallpaper, but this is a more beautiful and intuitive way to do that in less steps.

The joining of multiple bracelets for more screen space was a real treat, it makes so much sense and the way they demonstrated that was fantastic.

The gesture control was very interesting too. They opted for wrist and finger gestures over touch input, probably more so to demonstrate capabilities than for true usability. It looks great and it got me excited but under further scrutiny, I'm not entirely convinced. I've never been a fan of moving the interface as a method of interaction, ie. tilting devices, I feel there's a small element of disorientation when you do so. Particularly for this bracelet, there's no distinction between rotating your wrist to select an option and if you were just wanting to look at a different area of the screen.

I do love though, how it acts as an access key to gain entry into spaces, as well as how it can be flattened to become a handheld remote. Very cool.

Digital chalkboard

This is a good idea, I've always found taking a photo of a whiteboard/chalkboard to save information to be very clunky. Having a digital chalkboard, I'd imagine, would give you the ability to save and undo. Also I can imagine having an option to auto-format the board to neaten up your layout too, which would be extremely helpful (like you do with your desktop or code).

Another benefit of going digital is that you can move and rearrange things. Instead of copying it down, rubbing it out, rewriting it to give more room for other things, you should be able to just select it, resize it and drag it to where you want. Other ideas would be to use fonts over illegible handwriting, so everyone can read it, or even being able to translate it to other languages. Also the screen space could be scrollable, so that you don't have to have pages, but if you were to continue a train of thought or formula, you could just drag the canvas down.

Conclusion

Hats off to Microsoft for continuing this project. This is a great evolution of the previous versions and introduces new and relevant ideas based on evolving technologies. They really offer a tantalising glimpse into a possible future and that gets me really excited.

Other honourable mentions in this video would be the giant 'Cintiq' table (I'd love one of those!), screen sharing, the home video (facetime) wall, and the interactive hologram thrown in there for good measure.

Make sure you check it out, it's a six and a half minute clip full of ideas.

More info on Microsoft's official page

Check out the previous versions here:
Watch Microsoft's Productivity Future Vision 2011
Watch Microsoft's Productivity Future Vision 2009

 

Jupiter Ascending UI Reel by Territory Studio

Territory Studio (Prometheus, Guardians of the Galaxy) have released this UI Reel showcasing their recent work on Jupiter Ascending.

There's also an insightful interview with Territory's Founder and Creative Director, David Sheldon Hicks, over at The Creators Project.

Overall the UI feels very elegant. There's a good mix of structure and organic elements. As a result the design looks sophisticated, and only slightly technical, as necessary to navigate through space, but also very natural and pleasing to look at.

This has much to do with the key element in the designs, which are these vibrant, flowing isometric lines that are said to be inspired by weather maps. As with weather maps, I love how the movement and arrangement of these lines are able to communicate how invisible forces are moving. This obviously fits in perfectly with the task of visualising cloaked spaceships and wormholes. As with topography, it's fascinating how people can get so much information from just the formation of a series of lines. It's a really unique (and visually appealing) way of communicating data. Not only is it visually appealing, but it could actually be a more efficient way of consuming spatial information than a set of data readouts.

What was also interesting about this project was that the visuals were projected onto the glass panels within the set, rather than integrated during post-production. This has become more common nowadays, with company's like Compuhire, who worked on this project. This allowed the UI design to be incorporated into the set in real time, and adjusted on the fly. As a result, the director has more control over the whole shot, and have the consideration for the UI within the context of the shot, rather than afterwards. Oooii also made use of interactive playback graphics for Star Trek and Star Trek: Into Darkness.

Check it out!

Check out the Jupiter Ascending UI on Territory Studio's site
Check out the interview with David Sheldon Hicks over at The Creators Project

2014 Round up

It's time for the last post of the year!

Looking back on the year, it seems we've had a good mix of articles. We've explored work from Taiwan, Brazil and Korea, and hopefully we get to see more from other countries next year. We've checked out FUI and practical examples, retro and modern design, imaginary products and real products.

With each year we see this area of design mature and it's been a pleasure documenting this and watching it happen with you guys.

We've also had a long overdue update to the site. It's been a massive year for HUDS+GUIS and for me personally.

I've had a lot of great interactions and conversations with you guys. Massive thanks for visiting and supporting the site. Also thanks for everyone that emailed and contributed inspiration for this site, and those writing just to say hi.

Now it's time for a much needed break! Merry Christmas everyone, and I hope you guys have an awesome holiday break!

See you in the new year! Wooohoo!

Here's a recap of the posts we did this year...

Rolls-Royce - The future of ship intelligence
Edge of Tomorrow - UI Design
Simian UI Montage
NeuroScouting by Spov
Continuum Season 3 - HUDs and GUIs
Guardians of the Galaxy UI Design - Territory Studio
Push 'Strength in Numbers' - Data Visualisation
Pacific Rim - Holographic UIs
Her - Invisible Technology
Shake You Body - Pepsi Taiwan
Alien: Isolation - Lo Fi Sci Fi
Captain America: The Winter Soldier UI
Deus Ex Human Revolution UI
Cisma: Criolo "Duas de Cinco"
2NE1 Come Back Home music video
Wearables - Android Wear & Nymi
GM ELMIRAJ Concept car UI
Ender's Game - UI Breakdown
Robocop (2014) - UI Design

 

 

Rolls-Royce - The future of ship intelligence

Rolls-Royce have invested a lot of money and resources into seeing how technology can help make the shipping industry safer and more efficient. It's quite inspiring to see a project of such scale and imagining how much of an impact this initiative could have.

The videos themselves are fantastic, for someone who knows little of the shipping industry, it's quite easy to grasp the concepts being presented. A few of the key points that I quite liked was the use of Augmented Reality, situation awareness and personalised configurations.

Augmented Reality

It's very obvious in the videos how useful this could be. The scenarios in which they've decided to use AR are very intuitive and sensible, and a lot of it focuses on predicting behaviours. Showing projected pathways, allows the user to see things before they happen, and therefore constantly be a couple of steps ahead of the current situation. Having positional indicators with realtime information on distance and timing, gives the user a comprehensive map of traffic flow. Therefore ships are able to manoeuvre around obstacles and avoid collisions, way ahead of time. My favourite application though, was the transparency view. With all the data collected, the AR overlay allows a user to see through the ship's cargo containers, which would normally obstruct the view of a passing ship below. All great applications of AR and excellent examples of using technology for tangible benefits.

Situation awareness

This was specifically demonstrated in the 'Future of tug bridge controls' video. The example shows that a captain and a deck hand can both share the same view of a situation, and therefore allowing them to be on the same page, whilst being on different ships. Not only that but the captain can interact with this shared visual and essentially point to what he/she's referring to in real-time, and guide the deck hand visually, along with verbal communication of course.

Personalised configurations

Well this one's pretty obvious, but there are a lot of benefits to this. It's not just about adjusting your chair to the height that suits you, but for a ship controller it seems there are so many things you have the adjust for. This is particularly useful for people being at the controls for long periods of time, as well as people of different sizes. Particularly when safety's concerned, controls need to be suited to the user, just like driving a car, your mirrors need to be adjusted to suit you. I love that it's all automated and customisable and I can see this being applied to airplane pilots or in fact any situations involving a driver.

Check it out, it's great to see UI/UX design attributing to practical real world benefits.

Thanks to our friend Allan MacKinnon, for sending this through!

Watch 'Ship Intelligence for cargo vessels'
Watch 'Ship Intelligence for platform support vessels'
Watch 'Future of tug bridge controls'

Edge of Tomorrow - UI Design

Here’s a glimpse of some of the UI work from Edge of Tomorrow, which is part of a larger body of work from Nvizible’s Autumn 2014 Showreel.

There were a few things that bugged me about the film but overall I really quite enjoyed it, particularly seeing Tom Cruise playing a character that’s out of his depth. The movie takes place in a grungy type of future, and didn’t feature as many UI shots as I had expected (not necessarily a bad thing). But the bits that were there were worth checking out.

Firstly the hologram table was quite nice. It’s very common place now but the style of it reminded me of a cross between Avatar and Final Fantasy but at a smaller scale. I would have liked to have seen it used more purposefully. Personally, I didn’t think Tom Cruise really needed to see the holograms of the Alpha and Omega, or that it proved particularly useful in his mission. What made more sense was the scene where he’s planning his strategic moves, which was cool. Regardless the designs were very tightly executed.
Secondly, I wanted to point out the suit HUD. The style looks like something you’d expect to see in a current fighter jet HUD, but a simplified and slightly modernised version of it. I liked seeing the unusual looking enemy targeting reticle too, which was like a hash symbol and looked very video-game-like.

Check it out if you have a chance!

Check out Nvizible’s Autumn 2014 Showreel featuring Edge of Tomorrow.

 

Simian UI Montage

Here's a short UI montage featuring work from an upcoming independent short "SIMIAN", that shows off a lot of space screens.

It features semi-complex screens that's fixed on a grid system, and uses a lot of thin line work similar to the approach used in Oblivion.

What caught my eye was the the soft glows on the UI that give it a luscious and almost retro look to it. But having the thin, clean lines, and complex shapes keep it looking modern.

I also liked the layering of UI, and the offset red and cyan layers that give it an anaglyph look.

Look forward to see how these screens get incorporated into the film!

Watch the Simian UI Montage

Check out the breakdown here

NeuroScouting by Spov

Here's a short clip I discovered by London based studio Spov, titled 'NeuroScouting', that deals with sports science and data analysis.

The clip shows different ways of visualising the data that can be collected to analyse sports performance. The sequencing of the data elements does a good job of leading the eye around and establishing visual hierarchy. The little dot elements help a lot, as it draws the eye into position before unpacking information or triggering events. Using a limited colour palette helps too, and having an accent colour to highlight items.

It's also nice to see the variety of different approaches to visualising tracking information such as hip rotation, hand position, as well as speed and power.

Check out the NeuroScouting clip by Spov