2016 Wrap Up!

It's the end of another year and we've seen heaps of amazing work in 2016. So much that we couldn't fit it all in and will have to save some for 2017!

The UI of 2016 showed a lot of depth, I feel the work across the board has matured a lot from previous years. You can sense that FUI is becoming more familiar. There's a lot more work around to draw inspiration from so you can see it beginning to be pushed further in this year's work.

I'm very excited to see what 2017 brings! One thing's for sure though...I'm proud to announce that HUDS+GUIS is currently putting together a book project that will help those wanting to break into the FUI industry, featuring contributions from some of the best in the industry! That's all I can say for now but join our email list to learn more about it!

Thanks to all you guys who have followed and supported HUDS+GUIS over the years (our HUDS+GUIS family!), and all those who have joined us recently! I cannot express how grateful I am for your support. I wish you all a safe and happy holiday break!

I'll see you in the new year!

Jono Yuen

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

Dr Strange - Medical UI Design by Spov

Not all FUI is about creating grand interfaces for alien ships and space suits, sometimes it's about creating screen graphics for things like mobile phone screens, dialogue boxes or in this case medical procedures.

Here is a montage of the medical screens created for Dr Strange by Spov (Batman - Arkham Knight, Call of Duty: Advanced Warfare, NeuroScouting).

This is a really great example of how much detail goes into these screens sometimes. I'm so glad that Spov has shared this, as it allows us to see the effort required to accomplish the look of the final shots.

Overall there is such a high level of realism to the designs, that you could easily pass them off as real medical interfaces. None of the real medical screens I've seen personally look as good as these. Spov have done a great job maintaining authenticity in the designs whilst making them look modern and visually attractive.

Detail

I love the detail of the anatomy. Particularly the shots with the hand, I don't think it's possible currently to get scans of the anatomy with this much clarity and detail, with the ability to isolate areas of interest. That in itself makes the UI look advanced and at the same time visually interesting.

Animation 

It's also worth pointing out the animation. I love the subtle animations that appear over the brain sequences. If you look closely, they move very precisely and the animation shows restraint. There are no distracting elements, only calm movements, much like the medical procedure itself.

Colour palette

There are a few colour schemes here for each of the different screens, and they are all really nicely considered. Firstly the white brain scans with the purple glows are very striking, the supporting colours are quite nice too and together create very stark yet luscious images. Next, the predominantly greyscale palette with the muted red highlights create a very technical, bare-bones look. Finally the hand operation screens feature greyish and blueish backgrounds with muted highlights. I thought the chosen highlight colours were unusual choices, but really suited the design's flat style. I personally love it and think they were very mature choices.

Image gallery

Check it out, Spov really did an amazing job on these!

Call of Duty - Infinite Warfare UI by Ash Thorp

Here is the latest UI work for the upcoming instalment of Call of Duty, Infinite Warfare by Ash Thorp (Ender’s Game, Total Recall). It is the first time the franchise has ventured into space, and as such introduced the need to design a whole new suite of HUDs and GUIs.

As you can imagine, this could have taken many forms, but I’m so pleased to see it manifest itself in Ash’s capable hands. Included in this project are a number of startup screen designs as well as various HUDs and GUIs. The design aesthetic has even continued into the start screen designs and as a result the UI design style has become the encompassing look and feel for the game.

What I really love about these designs is that Ash has obviously attempted to create something new. The end product is unique, and has a strong distinct character, which brings to mind a world that’s a cross between Ghost-in-the-shell and Metal Gear Solid.

Boot-up screens

These are a series of boot-up sequences that relates to a particular character or machine the user has selected. Here are just a few choice images, there is much more over on Ash's site.

According to Ash, these were inspired by the designs and body lines of concept designer, Aaron Beck's characters (see below, images from Aaron Beck's blog).

With regards to the boot-up screen designs, I like how they start as strong, relatively minimalist thin lines that build up in layers to become more rich and complex. It’s really interesting to look at the details that make up each design. Each one uses slightly different element styles and formations, which give it it’s own personality. Some are like chemical structures whereas others are more like circuit diagrams.

The designs are very clean, organised and symmetrical making them feel more like artwork than something functional. The varying colour palettes are used nicely to distinguish the different concepts. I particularly like the subtle colour palettes that favour more muted colours, which work equally well if not better than the high contrast palettes.

You can see Ash has played with shapes as another way to differentiate the designs, changing from hexagons to octagons to change up the weight, and then moving to completely irregular shapes to push it even further

This is a very good example of how you can use recurring elements and create different looks by the way you arrange them and by altering them slightly. These frames are quite a rich source of inspiration.

What particularly stood out for me were the frames that had parts of the UI shaded in, which sort of verged on pattern design. I was surprised how well the flat shaded areas could work for an interface. Quite often we’re used to seeing glows and vignettes, but perhaps this flat shaded style actually looks more modern in my opinion.

HUDs

These HUD designs are great, I'm really drawn to the unexpected mix of large and small elements and the experiments to completely change the shape of the reticle to move into more rectangular designs.

It's really helpful to see the original vector designs before seeing them with colour, distortions and effects applied to them. It gives you a hint at the process involved and the how these frames are put together.

I was pleasantly surprised to see such a complex looking HUD that includes lots of little marks and details scattered around the screen. It’s interesting to see that when the design is composited into live footage, most of those details fade back. I would really love to see how camera movement would affect the visibility of those too. Would they become distracting or would they add welcoming detail to the overall feel?

Overall I think the UI designs for Call of Duty: Infinite Warfare are fantastic! Each design has a unique look and feel yet still remaining as a cohesive whole. There is lots of experimentation and plenty of new ideas in those designs, so it's worth checking out closely if you haven't already.

There is a whole lot more on Ash's Infinite Warfare page: Visit Ash Thorp's project page
See more of Ash Thorp's work on his site: Visit Ash Thorp's site
Ash also has a UI design course online: Visit UI and Data Design for Film

Credits

Client: Infinity Ward
Art Director: Thomas Szakolczay
Design: Ash Thorp
Animation: Alasdair Willson

New Balance spot by Loop

Here's a short spot for New Balance shoes featuring baseball player Robinson Canó, by Loop. The sign off mentions that the shoes are 'Designed from player data' and that is exactly what's demonstrated in the clip. We see Canó go through the motions of preparing for and completing a home-run hit. The spot focuses on the nuances of the shoe and how it caters specifically for the needs of a hitter.

The spot does a really interesting job of visualising the data. They've introduced different ways of analysing information, using all sorts of graphs, which on close inspection doesn't give you many clues into what it's analysing but as a whole it works. It feels busy and complex, but it feels like it's been organised into a digestible format and therefore giving it a sense of authority and professionalism.

I love the design style of the UI. Firstly the colour palette is strong, the vibrant greenish-yellow, supported by the occasional white, set against a dark background is really striking. I like that the yellow is not a solid and flat colour either, instead it varies slightly. The dull yellow, which looks like a less opaque version of the highlight colour is nice too, as it offsets the highlight colour but is not dull enough that it feels dirty. The splash of the fleshy pink also compliments the palette well.

Special attention should be paid to the animation, as it is superb. I love the way the elements transition in and out. I think it had to be interesting because the UI animation was doing a lot of the heavy lifting, taking up at least 15 secs of the whole spot.

Even though it's short, there's a lot of inspiration that can be taken from this. Great work by the crew at Loop!

Here's a link to a another clip for New Balance by Loop that features some GUIs but not as much as the first. I think it is worth sharing too.

Image gallery

Surface Studio - Introducing the Surface Dial

Microsoft have just announced a new product called Surface Studio, which is like a desktop tablet. Besides being impressed by the shear size of the touch screen, what's more interesting is it's use of peripherals.

Available to purchase separately is the Surface Dial, which allows the user to control by pressing it like a button or turning it like a dial. It can even be used on the screen itself, and that's where it gets interesting. Once on the screen, the user can activate a UI that fans out around the dial. The user then has access to a number of interfaces whether it's a colour wheel, ruler or even to control settings, which you can navigate by turning, much like the early generation iPods. The user can even use it in conjunction with a Surface Pen, adjusting settings as you paint or draw.

Being a designer and illustrator that works predominantly on a Wacom Cintiq, I can see the benefit of this arrangement. It's not very natural to have one arm holding a stylus up to the screen and the other arm lower down on a keyboard for long periods of time. Having both arms on the screen seems more ergonomic. Having access to the colour wheel instantaneously also saves you from needing to move your pen hand around all over the screen.

What's interesting and something we've discussed in the past and predicted is the resurgence of tactile controls. Human beings naturally respond to touch, you lose an important aspect of control without haptic feedback. Even the latest iOS updates for iPhone include better use of haptic feedback. That was the potential disadvantage of touch UIs, gesture controls and interactive holograms. Having haptic feedback allows the user to fine tune their movement and force, allowing a much larger range of control. It's the same with flat keyboards verses button keyboards.

I for one am really excited to see Microsoft moving towards this trend. The touch screen era is well and truly established, now it's time to improve upon it.

Check out the official Surface Studio site here.