I’m a massive Star Trek fan. So I’m super-excited that Jorge Almeida took some time to discuss his work on Star Trek Into Darkness — for which he was the lead designer of the UI elements. (If you’re paying attention you’ll remember this previous post with Jorge on his work for MI:4 and The Dark Knight Rises).

Q: How did you get involved with Star Trek Into Darkness?

OOOii (pronounced “ooh-wee”) created all of the user interfaces for the first film, so we were brought on to continue our work on the second. I had done some UI work on “Star Trek”, and was asked to take the lead on “Star Trek Into Darkness.” I got a chance to see the movie on Sunday. Just a great ride. I am really proud to have been a part of this film. Hopefully fans will like what we did.

Q: What was your role? Were there a lot of others involved in the design and production? What software did you use?

I was lead designer for OOOii. I oversaw the look and animation style for all of the UI in the film. We had a great team, with major contributions from Blaise Hossain, David Schoneveld, Paul Luna, and Andrew Tomandl. I also need to single out Rudy Vessup, who was my right hand man on this job. Just a fantastic motion graphics artist and a real pro.

Everything we created was done using some combination of Adobe Illustrator, Photoshop, and After Effects. Additional 3d elements were created using Maya.

Q: Was there a general design brief or design direction that you were given? What were your design influences?

For the Enterprise, production already had the full set of interface animations we created from the first film, so we were only responsible for additional UI specific to the story. It was therefore important that I maintain the style and the spirit of what was done in the first film.

Scott Chambliss was the production designer, and I loved what he did with “Star Trek.” The look of that film reminded me of some of Frank Frazetta’s classic Buck Roger’s illustrations. I would always keep that style in mind when designing. I’m also a fan of the classic LCARS interface from “The Next Generation.” While production wasn’t looking for a revision of LCARS, the curved corners and elegance of those interfaces definitely had an influence on my work.

We also had the advantage of having seen the first film and how it was cut. The action often moves quickly, so the UI had to communicate story points clearly and efficiently. When you’re spending days or weeks on a shot, it’s easy to forget that it may only be onscreen for less than two seconds.

Q: Can you describe the work that went into the UI development for the starship Vengeance?

Early on, there was a focus placed on the starship “Vengeance.” They were shooting the Vengeance towards the end of the schedule, but Scott wanted to get a clear direction before production started and other priorities took over. He provided us with some imagery to use as inspiration- most of it pretty abstract, but the shapes definitely felt interstellar. There were many overlapping circles, and cloud-like clusters. They reminded me of some of the space station research I had done. I presented him with ideas and he started to narrow it down from there.

The “Vengeance,” like the “Enterprise,” featured 4 sets of monitors that wrap around the top half of the bridge walls and act as a 360º radar monitor. Some of the images Scott had provided us felt like nautical maps, so I kept that in mind when coming up with ideas. Thinking of the monitors as windows of a submarine, I tried to make what was happening outside feel slightly ominous and alive.

Once we started testing the animations on set, Scott asked us to desaturate them quite a bit so that they would blend in better with the black interior. I really liked the effect. Here are some of the finals (the viewscreen was done in post):

Q: There’s some really interesting heads-up display work. What was involved in their design?

All of the heads-up display shots were obviously done during post-production, so we worked under the direction of Visual Effects Supervisor Roger Guyett. We presented our work regularly to Roger and VFX Producer Ron Ames for comments, and eventually they would present our work to JJ.

The entire space jump sequence was definitely a highlight for me. It was obvious from the first edit I saw that this scene was going to be a lot of fun. We were asked to create the UI for the viewscreen, the glass panel display, and for the helmet heads-up display.

My goal with the HUD was to minimize the interface as much as possible. I wanted to frame it around the actors face in a way that didn’t feel too tech. I was trying to make it feel soothing, with a steady pulse- that way the animation had somewhere to go when things get dangerous.

The projected flightpath was something they had as a rough concept in their original edit, so I just took it from there. I had seen some POV video of an olympic luger, and thought it had the right rhythm and movement to use as a starting point for the animation. I showed our 3d artist the videos, as well as some sketches I had done, and he started building elements in Maya. He rendered a variety of frames and I started combining them in photoshop until we came up with a style that production liked.

From there, it was a matter of animating the individual shots. I animated all of the shots using After Effects. I would create the animation, then put together rough comps so Roger and JJ could see the graphics in context. Once approved, I provided the flat HUD graphics as separate passes for ILM so that they could have flexibility when doing final compositing. The whole process went pretty smoothly.

Q: How did you approach the Enterprise viewscreens?

One of the major challenges in post was designing the Enterprise viewscreen interface. There were only one or two viewscreen interfaces in the first film, but in “Star Trek Into Darkness” there were several. The obvious challenge was keeping the look consistent with the rest of the bridge. Like Scott, Roger also wanted to avoid any design that felt too grid-like or text-heavy.

I don’t really have a set process for how I work. Sometimes I draw thumbnails, sometimes I just start throwing elements onto a photoshop or ae file and start mixing and matching. Generally my philosophy is to keep fixing it until it breaks, then take it back a step. I heard Iain McCaig say that in a video once. Made sense to me.

In practical UI, you are trying to give the user an elegant way to make choices. With film UI, I am trying to give the viewer the illusion of choice. I am trying to deliberately direct the viewers eye to whatever story point the director wants revealed at the time he wants it revealed. The job becomes more about illustration, especially in post where we can see how the interface is framed within the shot. We paint a small part of a much bigger picture, and our work needs to visually support what’s on screen so that we don’t disrupt the rhythm of the viewing experience.

One technique that I often use is to design in greyscale (using an adjustment layer). It reduces the composition to it’s basic values so that I can design without being distracted by color. We also often use Adobe bridge to review various concepts and composites at thumbnail size. It’s an easy way to see which designs are the most effective.

The viewscreen for the volcano sequence was one of the first priorities we had, so the developmental process took place with that interface. I began with thumbnail sketches and tried to work out compositions both on paper and in photoshop.

The volcano viewscreen quickly exposed an issue with trying to make the design too nonlinear — that we might lose the distinction between what was being projected on the glass and what was floating behind it. The view screen needed some type of framing to visually attach it to the ship and easily distinguish it from the environment. We had used translucent glass panels as border elements in the first film, so I started enlarging and reconfiguring them to break up the shape of the viewscreen. I then added and rearranged graphic elements within that framework until the interface had a balance between design and functionality that everyone was happy with.

Once the first couple of viewscreens were approved, the look took off from there. We provided the elements to ILM in separate passes so they could make adjustments and dial in the final composites with Roger and JJ. ILM, as always, did a fantastic job. I couldn’t be happier with how our graphics looked onscreen.

Q: Any final thoughts?

“Star Trek Into Darkness” did a lot of shooting in Los Angeles, so I was much closer to this production than I have been on any film in a while. We were on set a lot, so I was reminded first-hand of just what an enormous operation film production is. Multiple sets being built simultaneously. Trees being painted red on one stage, and a giant Starfleet shuttle on the next. I was humbled by the tireless efforts of our producer, Jennifer Simms, as well the playback producer Cindy Jones. They took on many of the headaches of the job and helped facilitate the constant flow of information between our team and production. This is not easy when you’re talking about creative notes one second, detailed technical issues the next, and budget issues in between- all while this giant train is in motion.

I was also reminded of just how much we depend on the playback crew on set to make our animations work within a scene. We’ve worked with Monte and the guys at Cygnet Video for years. Aside from technical issues, they are also responsible for cueing our animations in sync with the actor’s movements. Ultimately, what you see on screen is an elaborate dance between a large number of people both onscreen and off. It’s pretty amazing to watch it all come together so effectively.

Thank you.

Thanks for the interest in our work. Hopefully people enjoy the movie as much as I did.

You can see more of OOOii’s work on their website oooii.com. And Jorge has posted more of his developmental stuff on his website: jorgeonline.me.

Related posts:

1. Interview: Jorge Almeida (Lead Designer: MI:4, TDKR)
2. Star Trek: PADDs
3. Interview: Jayse Hansen (The Avengers)

I love my new Sonos system. It took me a while to understand what it offered and why I might want it, but now that I’ve got it, I just want more. So – it was pretty cool to discover that Sonos has been (quietly) periodically sponsoring interactive installations that feature their technology…

Right now at the Museum of the Moving Image is the installation Sonos Playground Deconstructed. Designed by Aramique (concept and direction), Red Paper Heart (art and code) and Fake Love (technical design) [p.s. all three of those sites are worth exploring], Sonos Playground is a kind of minimalist interactive immersive music video environment. Visitors can select a song and interact, using Kinect motion capture, with the environmental motion graphics. It’s pretty cool. (And part of the larger exhibit Spectacle: The Music Video which I think I need to visit tomorrow!) There’s a detail-rich article about the piece over at The Creators Project.

But Sonos has sponsored more… Missing was an interactive installation at the Sonos Studio by The xx (music), Kyle McDonald (software), Aramique (production) and Matt Mets (robotics). The Missing installation included 50 robotic Sonos players that, via a Kinect-based interface, follow the visitor’s movement as they walk through the space.

It’s great to see a firm like Sonos commissioning small studios to create such interactive pieces. Bravo. (Now if only they’d update the design of their iOS apps.)

(Link via @gmunk. There’s more info at CreativeApplications.net on Playground and Missing.)

Missing (software configuration)

Missing

Playground

Related posts:

1. Music Discovery and Organization
2. Los Angeles Museum of the Holocaust
3. Vampires and Night Birds

More great work from Bradley Munkowitz (aka GMUNK) — this time a reel of GFX work from the film Oblivion. Take a look:

The vimeo page as well as a page on his own website gives plenty of details on what’s what.

A nice overview describes the “Graphic Language stressed functionality and minimalism while utilizing a bright, unified color palette that would appear equally well on both a dark or bright backdrop.” and the bonus that, because the design team worked on all the UI designs they succeeded in “establishing a consistent graphic language that rendered all the interfaces with a loverly cohesion rarely seen in them massive-budget Sci-Fi productions.”

There’s plenty of detail on the Light Table UI, the Bubbleship UI, and the heads-up displays — good reading, as well as fun to scrub through the video and zoom into the still images to see the precision here.

Update: There’s also this fascinating video talking about how many of the UI graphics were filmed live, and with GMUNK talking, and showing, lots of how the graphics were composed. (Think: grids!)

“Super-ninja on the grid!”

Related posts:

1. Process Videos
2. Interview: GMUNK (TRON: Legacy)
3. Interview: Jorge Almeida (Lead Designer: MI:4, TDKR)

Multiple screens in real space…

This looks interesting. From Oblong comes Greenhouse, a creative coding toolkit for spatial interfaces.

One of Oblong’s founders helped design the gesture interfaces of Minority Report. And much of the firm’s work has been developing tools to make such gesture-based interactions more common place. Their g-speak platform enables multi-user, multi-screen, multi-device, spatial, networked applications.

But g-speak was created when such gesture and spatial input was expensive and rare. Today, with technologies like Kinect and position-aware smartphones, such input is relatively easy and inexpensive. So Greenhouse offers an easy way for developers to create g-speak applications and, I’m sure, integrate them with other creative frameworks.

Greenhouse is designed to support the creation of interfaces with seamless user interactions across multiple non-adjacent screens. Instead of designing for one large window, you can design for multiple surfaces in space.

The Greenhouse site includes some getting started help, reference documentation, and community links. It’ll be great to see the ways in which multi-screen applications can really feel like they’re in a shared common space. Very exciting…

Related posts:

1. Oblong and Before
2. Oblong Mezzanine
3. Sketching in Code

The first is the site KnobFeel. It’s a collection of “reviews based purely on the feel of the knob.” And it’s genius because, for so much industrial design, it really is the subtle tactle qualities that influence our experience using things. And the knob is often this primary point of user interaction. I fell in love. It may be strangely porn-like, with it’s non-verbal audio and awkward camera angle, but it’s a great way to communicate how the device feels. Plus there are short written reviews that explain what works or doesn’t work about each knob design.

The post Visceral Apps and You by Rob Foster gives a really nice explanation of why certain apps hold our attention and give a “rush of emotion” when we use them… design details! Things like the pull-to-refresh that’s become standard in so many apps. He highlights a couple great examples: 1) with Clear the “build-up and release” and kinetic qualities of editing lists; and 2) with Path, the little clock arms that spin as you move the timeline, the parallax scrolling on the user’s page, and a delightful red plus button.

It’s all about attention to detail. And Little Big Details, which has been around for a couple years, is full of examples UI elements that show how designers have really considered their particular users. Here are a couple examples:

British Gas – iPhone app has a button to turn on the camera light when submitting a meter reading.

SoundCloud – When looking at the console log, you’ll see output for joining their team.

All worth a look.

For an example of an interface where the detail actually hurts the design, Make It So published an analysis of the cigarette dispenser in The Fifth Element. For something which is supposed to discourage smoking, it’s full of triggers that remind the smoker about smoking and when they can smoke next.

from “The Fifth Elemement”

Related posts:

1. Microsoft Gesture and Display Research
2. Oblong and Before
3. LuminAR

Microsoft Research recently held TechFest 2013 — an event showcasing research projects from Microsoft Research’s labs around the world. And, although the event’s website requires Silverlight and isn’t the easiest thing in the world to navigate, it’s worth a look — it’s full of all sorts of future-looking research and explorations. (Or – use their own cheat sheet with quick links to project videos.)

Body Avatar (video) is lets users create avatars using a Kinect-based interface. It’s a great way for users to create 3d avatars using themselves as the starting point. From there, it’s easy to add more arms, tails, strange extras, and then decorate the avatar with paint. It’s a kind of 3d-modeling from within the shape you’re creating. Really cool.

In Toward Large-Display Experiences there are some interesting glimpses at how people can interact with large displays — both using just the display, as well as with second screens. There are examples of also using a special “pen” although, with a Kinect recognizing that the users are doing, I”m not sure I understand the need for it.

SandDance (video) is a large-scale data visualization tool that lets users go beyond the initial impressions, and discover the real meaning in the data. Plus, with a second-screen, multiple views can be manipulated simultaneously.

There’s lots more stuff to explore on the site. It reminds me of watching student thesis presentations — research explorations that are ripe for real-world use.

Related posts:

1. Digital Natives
2. Microsoft Gesture and Display Research
3. Manual Deskterity

I just realized that I’ve been collecting food-related links. I think it may have started with Why Menus Suck + Other Deep Thoughts on the Food Tech Revolution. In the post, Dave McClure starts with the premise that “menus suck” and then goes on to offer some opportunities to improve the restaurant experience. The most simple is to include pictures on menus — something I always joke about at restaurants, half worrying that it’ll turn places into Denny’s. He then details more interactive/digital options such as keeping track of favorites, ranking and reviews of dishes, the ability to better interact (ie. request the check) with the restaurant’s staff. They’re not bad ideas, and they speak to an industry which hasn’t yet been transformed by technology — although so much of his anecdotes are based on miserable dining experiences I worry about where he’s eating.

Dish.fm seems like a step towards what Dave is asking for. It’s an iPhone app that lets you find the highest rated dishes at nearby restaurants. Powered by reviews from sites such as Yelp and Foursquare, it aims to help users find the best things to order. And with the right amount of personalization it could be pretty powerful.

For people in the food industry, this experiment from Food Genius IDEO Labs looks interesting. It’s aim: “serve up real-time data to industry insiders hungry to get ahead of food trends. Their key ingredients: food-related data from Facebook, Twitter, Yelp!, and other social web services—information like people’s favorite dishes, trendy new ingredients, and red-hot flavor pairings.” The video below doesn’t show too much, but it looks like fun…

One recent app that try to improve the ordering experience is Livmenu which lets you watch videos that show how each dish is prepared. While it’s great to see the work that goes into amazing meals, I can’t imagine the videos at Taco Bell or McDonald’s would be very appealing. Besides, at higher-end restaurants, I think customers would prefer to have the waiter provide the service of talking about the dishes, rather than stare at a screen. If you read reviews of great restaurants, the service is a big part of the draw. For example, look at these reviews of The Stork Club and 21.)

The Smart Tasting prototype (from Think Big Factory) aims to augment the entire dining experience — creating a kind-of interaction between the chefs and the diners. Projection screens and tables show the cooking process, provide background information, and generate ambient experiences to enhance the meal. It feels a little overwhelming, and perhaps a little impersonal — but for a foodies, looking for a focused dining experience, it could be a scalable way to give more diners access to more.

A while back, the NYTimes published an article on how food has replaced art as high culture. In it, the author talk about the rise of foodie culture:

Foodism has taken on the sociological characteristics of what used to be known … as culture. It is costly. It requires knowledge and connoisseurship, which are themselves costly to develop. It is a badge of membership in the higher classes… It is a vehicle of status aspiration and competition, an ever-present occasion for snobbery, one-upmanship and social aggression. … Nobody cares if you know about Mozart or Leonardo anymore, but you had better be able to discuss the difference between ganache and couverture.

But the author also worries that we are now treating food as an art. “A good risotto is a fine thing, but it isn’t going to give you insight into other people, allow you to see the world in a new way, or force you to take an inventory of your soul.”

Related posts:

1. Novelty Dining in London
2. Interative Gastronomy
3. genes@CO-OP

For example, a map of the area is useful. But a flat, non-interactive, PDF?

Here is content that’s provided via a webpage.

But the combination of Surface and browser interface elements is overwhelming.

And I’m not sure how many users would be able to figure their way out of this situation…

Yikes.

Related posts:

1. Novelty Dining in London
2. genes@CO-OP
3. Interative Gastronomy

Interface from “Alien.”

I’ve been collecting these links — hoping to do some posts on them — but, never getting around to it. Because they’re starting to get stale, thought I’d post them simply as recent and interesting  links.

The changing face of computers on screen is an interesting post on how computers have been portrayed in films — and the transition of them from physical objects with lots of buttons and controls to digital objects with touchscreens and gestures. “The human was typically portrayed as intruding on the computer rather than using the computer. None of which, of course, reflected where computers were actually heading.”

At the end of the year there were lots of top-10 and future prediction lists. A couple worth reading include:

• From Creative Applications there was the 10 Best and Most Memorable Projects of 2012 — which included the beautiful “The carp and the seagull“
• The BBC posted their Guide to the next 150 years which predicts that high resolution bionic eyes are on sale in 2019 and that ou can upload the contents of your brain to a computer in 2021.
• And FastCompany’s 16 of the year’s best ideas in UI design is full of of-the-moment design innovations.

“The carp and the seagull”

Three principals for the future of gaming includes a discussion about Ingress, an experimental mobile game from Google. And goes on to explain the principles underlying it.

In this interview with Ray Kurzweil, he talks about his new position at Google and a project to better understand the information that Google contains. “We want to give computers the ability to understand the language that they’re reading.” (More here.)

This film, on the history and founders of Arduino, is charming and Italian.

I’ve posted before about how smaller firms are often better able to develop innovative designs. And this post on What brands think of agencies contains interviews from the client-side that supports that belief. Related is One theory about why the tech startup scene is boring right now – a post that decries the current climate of incremental improvement, and argues that we need more disruptive ideas to get everyone excited again.

Related posts:

1. Very Recent History: 15-Mar-11
2. Very Recent History: 16-Feb-11
3. Very Recent History: 26-July-12

I haven’t done a post on the visual design of an interactive designer for a while — but discovering Jongmin Kim’s work gave me reason to do so. Jongmin is an interactive designer from South Korea currently living and working in New York, and his work is beautiful.

FFF (for “Form Follows Function”) is his collection of HTML5 experiments. Beautiful and playful, each is inspired by a favorite thing of Jomgmin’s. The site even got featured in FastCompany.

His portfolio site has a great method for exploring his photos based on location and time.

And his blog is full of other, similarly intriguing, projects. I especially liked finding his iOS app “Desk” that lets you look at photos of desks and the surroundings of other designers. (It reminds me a lot of an old favorite book of mine: “Tokyo Style” with its intimate views into peoples homes.)

Definitely scroll through the past projects. It’s inspiring work. And great to see he’s getting press and awards, too.