Real-Time in Design

Introduction

Whether it's graphic design, user interface design, architectural design, or stage design, the faster you can get an idea to iteration, the more you can refine it into a quality product. Unfortunately, a design team rarely gets to see their end product in its final context. The packaging, the software application, the building, and the stage needs to be completed before they know whether they hit their mark. After the design has been completed by the builders it's finally observable first hand but, by then, many necessary changes can't be made because the may take too long to re-render or re-develop. Wouldn't it be nice if the graphic design team could test the application their graphics will be on and see the application update with every change they make instantly? Or the architecture firm could sit inside the building while they are designing it? These techniques are possible today, and the key to this is real-time technology.

Design process graph pulled from Stanford d.school.

Design process using real-time applications. This allows for faster iteration cycles and fluid motion between define, ideate, and prototype with less costs of time or resources.

Real-Time in Stage Design

Real-time technology allows us the ability to build in context and iterate more with this context in mind for a better product in less time. For Psycho Jelly, these strategies are immensely beneficial when working on a concert or performance. If we need to quickly see variations for video or lighting compositions for the best performance or what the audience will see from different angles 10ft, 50ft and 150ft away, we can view them in real-time without waiting for renders. For interactive installations, real-time applications allow us to see what the user experience will be and see how our changes affect that user experience every second we make a change to refine a better product in less time. These simple tools not only help with design, but they are also the final product running the show or installation, saving us time in quality assurance of the application by testing it in tandem with design. Having design and development working together, we can iterate faster to refine our tools for the design while also designing with the final context in mind.

Text for content may not fit for every stage the same. Testing a variety of video mappings to make sure it fits properly before having the content created is a great example of where being able to pre-visualize the context comes in handy.

Real-Time in Graphic Design

Over the last 30 years, the introduction of computers has propelled graphic design to work faster and use fewer resources. Computers have taken us from using typewriters, changing out individual letters and ink to get different fonts and colors, to being able to make these changes in seconds without wasting ink or paper. There suddenly became more time for the designer to focus more on finding better ways of the design of the page(and screen) with no expense of materials or time. A new problem arose through this: we have so many options we have no way to work through all of them to find the best one. In a scenario you might be able to relate to, Jon Gold makes a case in his post Decalarative Design Tools how this can be hindering for a junior designer, JD, when given a simple task by his Head Art Director, HAD:

The time it takes JD to create each variation and spray mount it to foam or align all of them in a Photoshop file consumes the designer's time immensely, but the actual “designing” is the time yet to be spent reviewing all 20,736 combinations. If given a minute each design to go through this process it would take JD 14.4 days non-stop!

Being both a design and developer, Jon Gold created a clever solution not currently available in Adobe Creative Cloud or other standard professional applications. In a few clicks, his application allows the designer to choose what variations they want and display all of them in seconds. The designer can then review any amount of them simultaneously, with the only limitation of the speed of the eye and mind. Reviewing these designs non-stop for 1 minute per 16 options would take 21.6 hrs. Jon's real-time application shortens a 14-day straight process to less than a day for a 1,550% increase in productivity! That’s 15.5 times more ability to refine the product and take that junior designer's eye to a senior designer's eye without him developing a caffeine addiction or eye twitch.

Frank Lloyd Wright and his chief draftsman, John H. Howe, drew this image of Fallingwater in 1937.Photo: The Frank Lloyd Wright Fdn, AZ / Art Resource, NY / Scala, Florence. © ARS, NY and DACS, London

Real-Time in Architecture Design

Before the use of computers, most architectural designs were sketches that took teams of artists to draw and hand-deliver to be able to share concepts with stakeholders. If there were a mistake or confusion on the placement of something, the recreation of reference for a better understanding would delay the project. Then computers came along and gave us the ability to do digital pre-visualization. These were photo-realistic stills out of applications like Vray that could be created and shared easily, but the reference was still 2D rendered images, and the product would be 3D space. Building the design of a physical space where people will spend large amounts of time inside of from just a photograph is developing out of context and leaves a lot to the imagination. The lack of that one dimension meant more time and resources were needed to make sure design concepts were fully understood before things were built.

A walk-through video by aghasoltanov on how to create a architectural rendering in 3Ds Max and Vray.

Today, the use of real-time applications have allowed architectural firms to pre-visualize their buildings from any angle at any given time in 3D. As easy as starting up a video game, an architecture firm can sit with the stakeholders and walk through an already built photo-realistic simulation of the full building. As shown below, architectural firms use these real-time applications in VR to take stakeholders and designers right into the building to see first hand the design and development. Want to see what it will look like in an individual room when it's raining? Or maybe just right after the rain finished and the sun is setting? A click of a button and a twist of the knob and you’re there! With these real-time applications, stakeholders and designers can design with everything in mind and iterate faster over these designs in ways that are not currently possible in other standardized professional design software like Vray or those found in Adobe Creative Cloud.

Bryan Howard using Unreal Engine, a gaming engine, to create a real-time virtual architectural demo.

Conclusion

Using the advancements in real-time technology to work beyond the limitations of those of the past can allow us to iterate faster with a clearer idea of our end product. These will come more and more into play as media today goes beyond paper and screens to augmented and virtual reality where anything can be a screen. Designers will be able to understand the experience of the user first hand better as the context becomes less traditional. Working in this way means developers and designers may be working more in tandem, creating better iterative workflows while utilizing the best of both worlds for better products.

Real-Time in Stage Design

Real-Time in Graphic Design

Real-Time in Architecture Design

Further Readings

Conclusion