Scientific Information Design Gets the Ultimate Upgrade.
Earth’s Alchemy explores the intersection between web design and 3D animation through the lens of the Periodic Table of Elements. In this personal project I rethink the traditional and create an experience that fuses information design with modern day browser capabilities. This skill building project is progressive in nature, but totally worth the look.
An exercise in design, technology, and science.
Keeping one's design skills sharp is a moving target. With the proliferation of new techniques, technology, and design aesthetics, there’s always an opportunity to create an experience that pushes the limit.
Since I’ve always had a passing interest in science, creating a project based on the Periodic Table would enable me to learn a good deal about Earth’s elements and at the same time, share that information with others who may have similar interests.
As I see it, part of what makes the Periodic Table (arguably) boring, is what it looks like. I wanted to explore design’s impact on holding interest and spurring engagement by rethinking this highly recognizable scientific artifact.
Unlike the product design challenges I solve for my clients every day, this project begun with only self imposed requirements; requirements that no less were needed in order to ensure the project’s success. Add to that the necessity to research the atomic elements that the site would include. I spent about a week identifying these items, understanding how the Periodic Table works to help better structure the website, and writing copy to create a bespoken experience for viewers.
Translating the Table of Elements into a website
The Periodic Table of Elements are a collection of all of Earth’s known elements. There are 118 of them; they’re divided into 7 rows and 18 columns. The elements in these rows and columns share similar properties. This helped inform the structure of the site because I knew I wanted to create a condensed experience, using only a portion of the elements from the table. I decided I’d use one element from each of the 18 groups.
The structure is simplistic in form; one long scrolling page. In this way, the user can focus their attention on the information being presented. Of course there may be times when a viewer may want to look at or go to a particular element. When this is the case, a full screen menu can be opened at any time.
Modernizing the traditional
To start, the experience eschews the traditional table design where the visual focus begins with an element's atomic symbol, and instead serves a distinctive three-dimensionally animated representation of the element (more on that later.) Beneath this, the user experience and interface are streamlined in their appearance and function, yet add the detail necessary to inform and inspire the viewer.
The atomic element cobalt animates into frame.
Displaying metals versus non-metals
Even having opted to display one element from each group on the table, a large portion of the elements could have the propensity to look similar since they’re either metals or gases. Knowing this, and to further enhance the visual interest of the design, I crafted most hard elements from a solid geometric shape. For example, titanium (shown below) is a sphere; the smaller exploded pieces move in a similar direction to reinforce the motion of the animation. In the cases where an element is a gas, like krypton for example, I used objects found in science labs to contain them.
Metals and hard elements exploded from geometric shapes.
Gaseous elements contained inside laboratory objects.
Color and typography
This project is a thoughtful amalgam of art and science. My goal was to educate the viewer on Earth’s elements but to do so in a way that wasn’t boring. As a nod to the scientific and technical side of things, I chose to use a more academic looking serif font, paired with a bold sans serif for lengthy copy to modernize things. The colors all share a relatively muted palette to allow the eye the rest needed when looking at a screen full of color. I limited my use of colors to a few combinations and used those throughout the set of 18 elements.
It was important to me to design a unique, simple, and stylish navigation menu. To this end, I mirrored the basic design of the site but interspersed vertical items. The menu serves to direct users toward a scientific element of their choice, but to also inform the viewer about the purpose of the site, and to prompt anyone interested in working with me to drop me a message. I accentuated the verticality of the design by darkening each menu column when the user hovers over it.
Vertical menu items interspersed between columns with hover effect.
Paramount to any web project these days is the mobile version. The responsive counterpart to the desktop website maintains all of the visual style, but suppresses the functionality of the animations; instead using static images. This afforded the viewer the option to see each atomic element without the requirement of having a fast internet connection.
Modeling & Animation
As I mentioned above, I selected one element from each group on the Periodic Table (as groups on the table share similar characteristics.) Doing this was a sound starting point to ensure I’d have the best ability to create distinctive and engaging visuals. Careful selection of which atomic elements I’d include combined with deconstructed geometric forms, and objects commonly found in scientific settings were the perfect backdrop.
Some elements were modeled, such as the calipers shown below, while others used booleans and fractures to turn solid shapes into smaller disintegrating pieces; like the atomic element itself, titanium.
Titanium; hand-modeled calipers with boolean and cell fracturing for atomic element.
Carbon; hand-modeled tweezers and atomic element.
Sulfur; hand-modeled plus boolean and cell fracturing.
Animation—less is more
Based on my experience, when it comes to animation, less can sometimes be more. I kept the length of the animations to 1 second and added scaling and directional motion to each atomic item.
To prepare the animations for incorporation into the web development phase, I exported the files from Blender, then imported them into Adobe After Effects where I was able to use a plugin called Bodymovin’ to create json files.
Titanium, carbon, and sulfur animations.
For the record, I consider myself a product designer first, and all other creative titles second. That said, I think it’s important to be able to take a concept from idea through implementation, at least on some level. Moreover, I had a strong idea about how I wanted to treat the interactions and other subtle motions on the site. Small details that would otherwise seem unimportant are actually quite the opposite; the sum of all those little decisions can make or break a project. By doing the development I had the chance to fine tune every detail to the best of my abilities.
To put it briefly, Webflow is a browser based prototyping and web building tool aimed directly at designers. At first blush one might think of it as a typical web builder, but it’s drastically more capable than that. I like to think of it and use it as another tool in my toolbox alongside Sketch, Photoshop, Illustrator etc.
Since the site is one long scrolling page one of the primary features I wanted to incorporate was scroll snapping. That is, where the browser perfectly frames the content when you scroll. In my opinion, targeting the viewport height and tasking the viewer with scrolling and stopping a specific point is not ideal. And so, a few lines of code that I picked up from the web aptly resolved the concern.
Scroll snapping made it easy for viewers to center up each section of the site.
I knew Earth’s Alchemy would be bandwidth intensive since the elements are high-quality animated 3D models. Add to this, the Bodymovin’ plugin I used to create json files increased the filesizes quite a bit. For this reason I found it necessary to implement a preloader.
I designed a preloader that occupied the entire screen to keep the user entertained and (hopefully) distracted from the time it would take to load the site. From a technical standpoint, the preloader is simply an interaction that is triggered on page load, with a predetermined duration—enough time for the browser to load at least some of the larger animations.
An “on page-load” interaction serving as a basic preloader.
Perfectly timed animations
The site consists of a series of sections that share the same visual premise; a vertical grid with content placed in varying locations per section. As I mentioned, the 3D animations were first created in Blender, and exported as json files from Adobe After Effects using the Bodymovin’ plugin. Getting the perfect mixture of animation length, speed, and quality required rigorous experimentation that I was able to do myself since I was the one developing the site.
That's a wrap
Head on over to the live site using the link below to get a first hand look at how it all came together!
At the end of all of this I was able to create a comprehensive web experience using some of the latest techniques and design aesthetics; because of their progressive nature, some of the methods used don’t behave flawlessly in every browser. At any cost, it was important to me to push the limits of my abilities and the software that delivers the experience.
I begun the development portion of Earth’s Alchemy by trying my hand at using CSS grid. Going in, I wondered if this approach would serve the project best as the overall structure of each portion of the site adheres to a similar grid. I struggled for about a week trying to learn CSS grid and its use-cases. After more insight I determined that flexbox would achieve the result I wanted more precisely.
With every new project I create there is so much to be learned. However, to narrow my findings down to one lesson it would have to be that of integrating 3D animation into a web project. In the beginning I didn't know how bandwidth-intensive a project like this would be. Moving forward, I’m better prepared to envision and execute projects similar to this with even more confidence.
Freelance Product Designer
©2005-2019 Jonathan Patterson | Iteration V4