Building Graphic Interfaces in Grasshopper

NBBJ Releases Open-source Human UI Plugin to Make Computation More Accessible to Designers and Clients

February 3, 2016

Design Computation has changed the way the AEC industry approaches problems. Parametric modeling and BIM environments like Grasshopper and Dynamo allow computational experts to automate modeling, analysis and fabrication through a set of variable parameters; this has changed the design process by providing detailed generative and analytical feedback to projects in near real-time.

Unfortunately, it has historically been difficult or awkward to share these computational tools with a wider group of designers, not to mention clients. Current tools generally require the expertise of a design computation specialist to get up and running, and they offer little to no capacity to build user interfaces for the purposes of sharing or presenting to clients.

Over the past year, we in NBBJ’s Design Computation practice have been tackling this problem by developing a rich ecosystem of infrastructure to deliver internal tools at scale, so that any designer in the firm can use and understand them, and even present them to clients with clarity and confidence. Today, we are releasing a significant piece of that infrastructure as an open-source project for the industry — Human UI, a Grasshopper plugin that allows users to build custom user interfaces that make their tools accessible to anyone.

Picture1In other words: Human UI makes your Grasshopper definition feel like a Windows app, by leveraging the power of Windows Presentation Foundation (WPF), a graphical subsystem for rendering user interfaces in the Windows environment. Create tabbed views, dynamic sliders, pulldown menus, checkboxes and even 3D viewports and web browsers that look great and make sense to anyone — including designers and clients with no understanding of Grasshopper.

The initial release of Human UI is accompanied by a few simple examples to get you started, but we have developed sophisticated user interfaces with these tools at NBBJ and will slowly be rolling out more advanced examples. We also look forward to opening up the development to the community and seeing what new features and paradigms we can add.


Why Human UI?

“My sabbatical at the tech startup Flux gave me a deep appreciation for how the software industry approaches problems of scalability, and I realized that we, as designers, had a lot to learn from an industry that has already solved a lot of these problems,” says Marc Syp, Human UI’s product manager. “When I returned to NBBJ, I immediately set to work trying to augment our project-focused delivery approach with a product-focused delivery approach. That is, in addition to highly custom, focused computational work, we should make computational products that look great, are well documented, can be installed with ease and are a pleasure to use. Most importantly — we want to make tools that can achieve scale, tools that are generalizable and can produce value across a wide swath of projects.”

Andrew Heumann, a design computation leader at NBBJ, had already been tinkering with building custom interfaces in standalone C# scripts for a few internal tools, and it became clear that this approach could be turned into a plug-in for modular custom interfaces. “We immediately saw how powerful it was to pair our sophisticated computational tools with equally sophisticated user interfaces, but it was complicated and extremely time consuming to build each one from scratch,” he told me. “We realized that if we could make the process of building the UIs as simple as building the tools themselves, we could radically expand the adoption and usefulness of our tools.” Over the next year, the team pushed the development of the plugin repeatedly by iterating on dozens of complex tools, making it easier and easier to build, customize and reconfigure user interfaces quickly in the Grasshopper environment, with no code required.

SimpleExample3_smThe result is Human UI, which we are now using around the world to build professional-looking “apps” that are used in design charrettes and client meetings. The difference between the old way and the new way is stark. It used to be that one would “fake” a user interface by grouping controls on the Grasshopper canvas and writing a few labels to define interface sections, but the default sizes, shapes and appearance of the Grasshopper controls were limited.

The new paradigm looks “real,” it looks professional, because it is based on the same technology that powers native Windows application interfaces. This means that almost anything that you can do in a Windows interface, you can now feasibly do in a Grasshopper interface. Human UI already includes familiar “app” interface objects like text boxes, pulldown menus, checkboxes, radio buttons and tabbed menus. It even has a 3D viewport and an experimental web viewer that you can embed into your own interface. And this is only scratching the surface.


Why Open Source?

One of the reasons we are open sourcing Human UI is that there is a lot of opportunity for development, and we think the community can help make this plugin a lot more powerful, really quickly. We also feel that it’s something too valuable to keep under lock and key. We want the community to benefit from this as well and see it as a way to advance the discipline of Design Computation in general.

Many leading architecture firms dedicate copious resources to the internal development of technological solutions to improve workflows and augment day-to-day tools — but much of this development energy never makes its way beyond the walls of the firm to improve the industry at large. The Grasshopper online community has been a notable exception to this rule, with individuals and firms alike freely sharing tools and plug-ins they’ve developed. Coders from NBBJ have already released a number of popular plug-ins, including Human, Lunchbox, Heron, Shutterbug, Tree Frog and Leafcutter (in partnership with

We are committed to open sourcing significant tools for many of the same reasons as “big tech” — first, to give back to the community and industry, but also to rapidly evolve our core technologies, showcase our continuing position as an industry leader and attract the most talented computational designers to join our culture of innovation.

We are excited to continue this commitment to evolving the technological landscape of the AEC industry with the release of Human UI, and look forward to engaging with the community to help build a new, more powerful user interface paradigm for design computation tools.


Banner image courtesy of William Warby/Flickr.

All other images courtesy of NBBJ.

Share this:  envelope facebook twitter googleplus tumblr linkedin
Follow nbbX