3D UI Part 2: The Aesthetics
This is the second post in a three-part series about designing 3D interfaces. Check out my first post on where 3D UI is heading and the third post on 3D UI systems.
When interaction and visual designers take the time to understand and master the new visual techniques at their disposal with 3D UI (cameras, lighting, shadows, materials, and physics), really exciting and delightful things can emerge. We’ve been collecting a tiny fraction of the great work out there and see various trends emerging with designers getting creative with the extra dimension. What’s important about these examples is that it becomes clear that 3D has broken through as a viable graphic styling language and is being adopted widely in marketing, promotion and cutting edge UX design.
I trained in Graphic Information Design before Interaction Design, so there’s a part of me (the Tufte indoctrinated part) that wants to boil everything down to its clearest, purest form to make it more understandable, communicative and effective. However, when creating experiences for consumer software applications, we are often tasked with more than just simply communication. We are asked to move the needle on excitement, animation, branding language and many other variables. 3D is certainly not going to be a panacea for interaction designers or visual designers but when done right, some beautiful and uniquely digital styles can be very effective.
I’ve identified three distinct visual trends we’ve noticed with 3D, I call them chunky fonts, shiny horizons, and dioramas.
Chunky fonts use 3D typography as the primary visual content. I’ve seen some great examples of this all over the place, (some great inspiration here and here). In making the fonts work visually, it helps to chamfer the edges of the extruded font to get a nice edge light. Lighting is key to making the font work in 3D, so designers resort to something called ambient occlusion rendering, which gathers shadows in every nook and cranny of the font. High-end shaders (reflections and sub-surface scattering) and 3 point lighting help make the front face of the font the visually dominant component. Part of the appeal of 3D is making things appear to be physical and touchable objects, an idea that is gaining in importance with the rise of more natural user interfaces.
This second style has been in vogue in the software industry for a little too long in my opinion. Perhaps it started with Coverflow or the Matrix scene where they order guns in the preloader environment. You know it when you see it, an infinite horizon with reflected objects just beneath. This style has been used everywhere from the Mac OS taskbar to the Xbox 360 NDE. It has become so commonplace that PowerPoint 12 included the automatic floating reflections as a canned styling effect. Still, while it’s a bit passé, it works and is (to these eyes) undeniably attractive. The reason it works so well visually is that the ground plane immediately establishes a sense of physicality and dimension, which makes content look special, almost touchable.
Dioramas are like highly crafted little ‘sets’ of models staged to look hyper-real or cute and cuddly, physical, dimensional and realistic right down to the tiniest details. I’ve seen this style become a fixture in marketing materials, especially motion graphics. One common aesthetic technique is to use a collage style with found objects, paper stencils, even hand-drawn assets. It takes the geeky edge off the sometimes excessively garish shiny metallic computer graphics.
Little Big Planet is a visual feast of a game for the PS3. The little sack guy plays in a wonderland of found objects, which behave with amazing physics. This game has won every art award the game industry has to throw at it.
One of the fundamental differences between 3D and 2D is (maybe obviously) the camera. In 2D we have the ability to move the objects in the view around, but only in 3D can we also move around the objects. This small detail conceptually makes a big difference to interactive 3D design and can potentially get us into a world of trouble with producing a simple to understand, easy to use interactive 3D navigational models.
If you want to get really good at this, you should invest in a cinematography book as film and photography concepts are incredibly relevant to many aspects of 3D CG. Some simple interactive techniques that we’ve seen work well are really subtle camera movement breathing and panning/tracking, two techniques that make a static screen state become more interesting.
Lighting and Shadows
Of all the tricks to master in designing for 3d, this is the one topic you really need to understand. Even simple cubes in 3D can become really amazing when you know how to manipulate the lighting and shadows. Tutorials abound on 3-point lighting because conceptually it’s the same as lighting for normal photography and film. If you understand the concepts of key, fill and edge lighting, you’re set.
Materials and Shaders
Next to lighting, and intimately tied to it is the idea of materials. What you need to understand is that real-time materials are more complex than simple textures. With that, shaders are a deep science, but in real-time computer graphics engines (mostly games) there are almost always custom shaders written to render aspects of a scene. From an art direction perspective, scene shaders are how you can tweak the overall aesthetic of your CG.
Aesthetic effects like depth of field, blur, bloom and glow are all examples of sophisticated shaders. Most of these are the subtle secret sauce that will make 3D come alive in real-time. Depth of field effects in an interactive context can provide users with a sense of what literally has focus.
Physics engines simulate what happens when multiple objects hit each other, are tied together, spring loaded, attached to one another, etc. They simulate mass, velocity, friction, inertia, gravity and other forces so that dynamic interactions between objects and environments can be created. This dynamism is really well-suited to some kinds of interactive applications (certainly entertainment), but can be also applied to more subtle elements of the user experience, especially with regards to animation. Watch this to see the full range of state of the art, real-time physics effects (cloth, springs, collisions, explosions etc).
Aliasing is what happens when you see the little, jagged lines that appear to stair step on diagonal edges of polygons. Antialiasing is the smoothing of the jags. Of all the factors about real-time 3D, this one can be the most distasteful aesthetically. Most modern video cards can overcome this, but normally the antialiasing has to be manually turned on by the user. One advantage of high dpi screens (especially mobile devices) is that the pixel dots are so close together that optically your eye doesn’t notice non-antialiased edges as much.
Working in real time 3D is a workflow headache. Geometry, lighting, shaders, animation, and physics can bend your mind around a whole set of new production challenges that are immensely time-consuming. Most of the 3D tools I know of are squirrelly, feature-bloated monsters, wildly esoteric from a UI perspective and designed for people who seem to have infinite amounts of time to spend playing with the tools. If you are embarking on a real-time 3D interactive extravaganza, give yourself triple the amount of time you think it would normally take you to accomplish something in 2D. The mantra should be: real-time 3D stands for 3 x Duration and 3x Difficulty and 3x Demanding.
While the technology needed to do high-quality, real-time 3D with all sorts of incredible lighting and shading effects does exist (we see it daily when we look at games), there isn’t a good engine or toolset for building the UI. So even if you understand and have mastered all the topics above, you are basically SOL when it comes to making it dynamic and interactive.
Check out the rest of the series on 3D UI:
3D UI Part 1: Where Are We? Where Are We Heading?: I talk about the current state of 3D capabilities and where the industry is headed.
3D UI Part 3: Useful? Usable? or Desirable?: I address some simple truths about what seems to work, what doesn’t work and why, and what seems to put people off.