Interaction - Bachelors

Brisbane Urban Heat Visualization

trophy Awarded

Brisbane Greener Future is an interactive data visualization experience which allows users to understand the relationship between trees and heat in our urban environments.

Joshua Hayes

navigating the website

design process

01. Figma Prototype

Draft concepts for the website were originally designed in Figma and allowed me to develop a more clearer vision of what I wanted for my final prototype. This concept demonstrates some of the core functional and aesthetic elements I wanted to include in a fully realized design such as the map, user-interface, backgrounds, scrolling behaviour and interactive timeline feature.

02. Creating the Map

I chose to use a hexmap as the stylistic basis for my interactive map in my final prototype. This was designed in Illustrator and then was divided up into groups / layers representing the different electorates around Brisbane. Colours were then applied which represented the level of both tree coverage and urban heat. The file was then exported as an SVG to allow me to edit and animate the hexagons in code.

03. Going into Visual Studio

I created some basic layout and formatting in HTML within Visual Studio and really focused on nailing down all the core elements that were going to be integral to my final design. These priorities consisted of the map, UI elements such as the timeline and map legend, menu navigation, logo etc. In addition, I also started referencing the Javascript libraries I wanted to use such as GSAP and D3.js.

04. Creating Styling

With most the HTML markup finalized, I added styling in CSS and tried my best to replicate the styles designed in my earlier Figma prototype.

05. Animating with GSAP

To animate the transitions between maps and the more smaller micro-interactions, I utilized GSAP as it was much more efficient and easier-to-use than CSS to create really complex animations. I used GSAP in combination with a function from D3.js to animate the colour transitions within the hexagons using a data-attributes I had appended to each shape, representing the percentage of tree-coverage and as well as the added heat in degrees. Timeline animations were also then animated with GSAP based on the users’ scrolling behaviour.

06. Creating the Logo

The logo was first designed in Illustrator and was then imported in to After Effects with all the layers and text still in-tact. In AE, I was able to create a basic loading animation which lasts only a couple seconds. This was then exported as a Lottie file using the bodymovin plugin. This lottie file was then added to the code and used GSAP to play the animation after everything on the page had been loaded.

outcome

prototype

This interactive prototype is still only a concept in its current state so there will likely be bugs and other issues when navigating through the space. It is best recommended that you only use Chrome to test out the prototype; previous user-testing has revealed that most animations and other functions tend to break in Edge and other internet browsers. I cannot also speak to the level of responsiveness in the design. I have tried my best to make it responsive for most display dimensions but of course, there will most likely be issues here and there. If you do encounter any problems, please reach me at joshahayes01@gmail.com and I will try my best to resolve it. Thank you so much!

View Prototype

Joshua Hayes

Josh is an interactive designer and visual communicator passionate about realizing digital forms and designed experiences that can help build and affect real positive change in our communities. In the future, Josh hopes to become a better multidisciplinary designer and strives to work within a variety of different design projects that offer new opportunities and ways of engaging with audiences.