Go to ThinkParametric

Creating Interfaces for Data Visualization with Human UI for Grasshopper

Human_UI_Logo_Image_01

As Grasshopper and parametric modeling techniques are becoming an increasingly important part of the design workflow, there´s an emerging problem that comes when different parties or stakeholders wants to interact with this models.

Although parametric models provide a vasts amounts of information and efficiently automate enormous amounts of tasks, Grasshopper definitions are not an ideal medium to communicate information.

The reason being that most likely different parties involved don´t have the knowledge of navigating complex definitions and fiddle with wires and code which prevents them from adequately inform their expertise into the project.

That is when Human UI comes handy !! A Grasshopper plugin that allows you to create clean interfaces from your definitions that allows everyone to interact with your models quickly and retrieve information in a valuable manner.

Learning how to create this interfaces is what our next course of Interactive Interfaces for Data Visualization with Human UI is going to be all about.

Lesson 1_Edited

First, we are going to learn the basics of the Human UI plugin how does it work and how to start adding basic UI elements into your interfaces.

Lesson 2_Edited

Then we are going to start adding outputs to our interface and hook them directly with our grasshopper definition. In this case, we are going to be able to control several parameters of a massing volume. This will allow us to interact with our Grasshopper geometries in real time without having to use Grasshopper’s parameters.

Lesson 3_Edited

After that, you are going to learn how to start displaying pertinent outputs being generated in Grasshopper directly into your definition such as 3d Geometry or charts containing relevant information like floor heights or surface areas for different architectural programs.

Lesson 4_Edited

We are going to go deeper by teaching you how to create custom outputs, in this case, will create one that will display a section of our massing, and we will add a controller that will help us specify at what angle we want our section to be created.

Lesson 5_Edited

Then we are going to cover some basic aspects of UI design layouts, and you’ll learn how you can organize your whole Interface using containers. Finally, we’ll cover how to further edit your interface by editing different aspects like colors, sizes, margins, fonts etc..

Learning how to create Interfaces of your definitions will bring much more value to your work as you´ll be creating an asset that more people can interact with increasing the ROI your work.