The Periodic Table of BIM

Main skills used:

HTML5
SASS
jQuery
JavaScript

The original version of The Periodic Table of BIM was available as a poster at events where my colleagues were giving presentations. However, a microsite was seen as a better way to present the idea and would allow more scope for additional information.

The initial work was done by one of my colleagues, with me taking over development and relying on him for some design guidance.

The first thing I did was implement a Bootstrap layout to ensure that the site would be properly responsive as the early version had several issues. I also added the tile flipping animation to make the desktop version more visually interesting and less static.

Clicking on the “read more” link opens a carousel of colour coded information pages which replicate the tile that was clicked and, unsurprisingly, provides additional information on the topic.

In order to make the sections of tiles more obvious I also added the tile highlighting feature whereby when the user places their mouse over an element in the key at the top right, the corresponding tiles would be highlighted.

While the addition of Bootstrap had made the site more responsive, it was still difficult use on mobile devices so I decided to repurpose the key that was provided at the top of the page and turn it into a menu.

Clicking a heading would scroll the page to the start of that section of tiles and the key would stick to the top of the page as an expandable menu. A floating button to scroll back to the top of the page was also provided.

To further assist mobile and tablet users I added jQuery Touch so they could page through the additional information by swiping left and right.

This mini-project taught me a lot about working quickly in a small team to achieve a goal, it also gave me a lot of confidence in both my development and design abilities.