IXD 301
Designing with content.
Elements Project.

For the Elements project, we were tasked with designing and developing a website for the periodic table of the elements. I decided the design a simple interactive website, with primary focus on interactive elements in order to navigate through the information.

I wanted to produce a design that was minimal and functional, in order to produce the best user experience.

Main Design Elements

I started by creating a graphic that would become the main website background, being inspired by scenes of space and the similarities of the macro and micro universes.

The background contained the main colour schemes for this project, consisting of variants of blue, a nice contrast against a crisp white typeface.

I wanted to showcase the elements using a filter grid and navigation, allowing the different elements to be sorted depending on category. The main element items, which linked to the individual element information, were then setup on a simple flexible responsive grid format, which different colours indicating the different element categories.

The Element Grid

The element grid itself is built with isotope.js, a simple javascript plugin that comes with a pre-built grid in html & css. I then customised the grid to the design styles I was looking for, replacing the colour scheme and typography, as well the responsive css properties.

I also added hover.css to each of the element boxes, creating a small bobbing effect as part of user interaction on the website.

The Navigation

The navigation comes pre-built with isotope.js, and its own css properties. I changed the layout and style of the navigation to best suit the website, as well as adding hover.css animation as a micro-interaction for the user to know which element category that are on.

The tabs then filter through the elements based on pre-defined data categories and css classes, with the main element items disappearing and appearing based on filter selection.


I decided on crisp typography for the website, knowing that the content will be displayed as white against the dark blue background colour scheme.

For the main headings, I discovered a typeface named ‘Kanit’ which I felt worked really well with the colour scheme, and fit with the design on the site.

For the body text, I used the ‘Raleway’ typeface, which is a really crisp sans-serif typeface, and it seemed to pair perfectly with the ‘Kanit’ headings.

I wanted the text to be legible again the dark colour scheme and so it was really important on deciding which typefaces to use, but I think I made the right decision. Both font families are available from Google Fonts.

Animated GIF

With the main index for the site designed, I then looked at the layout and content of the individual element pages. One of the main features wanted to add was an animated gif, produced on illustrator and after effects. I’ve been working to improve my after effects animation skills and felt this was an appropriate asset to create for the website.

I recreated the atomic structure of each element in illustrator, imported into after effects and animated the sequence. I then exported this sequence, imported into photoshop in order to produce a transparent GIF file, and then imported in an online gif maker, in order to create an infinite looped animation, as I found I was not able to do this in photoshop.

Main content

I built the body of the website with Flexbox Grid, which I found to be a really nice and flexible Flexbox framework. This allowed me to build responsive and fluid layouts really easily within the pages. I attempted to construct the element filter using Flexbox on initial development, but found issues with conflicting the with the isotope css properties. I decided to opt to modify the filter grid CSS properties instead on creating new ones, as I felt the overall design and development had been met with the isotope.js CSS structure.

The content for the website was taken from a few different sources including text & data from The Royal Society of Chemistry.