stadium tour cover image

The Elements

What is it?

We were tasked with creating an interactive app that would help either 8 to 10 year-olds or undergraduate students (choice was ours) learn about the periodic table and have information about the elements.

Skills used

logo design
Type design
UX Design
UI Design

Programmes used

Adobe Illustrator
Adobe Aftereffects
Adobe colour
Adobe XD

stadium tour cover image stadium tour cover image

Idea generation

When it came to generating ideas for this project, one thing that I focussed on a lot was what job the application had to do. I created a mind map and thought about the different possibilities and decided what direction it would go in. I also thought about the different functions it would have.

wireframes low spec

Responsive Work Flow

A responsive work flow can help with process and giving the project a bit of structure in terms of taking it in stages and making sure everything is covered to ensure that the project is at the best level of quality.

wireframes low spec

User Flow

Making a user flow is important for me to think about how to go about making these pages and what they might look like. It is also important to know what the user journey will be and will they be able to easily do the task they are wanting to do.

wireframes low spec


I used Kulim park and I really liked the readability of the font and how easy it is on the eyes but it doesn't take itself to seriously. I think that it suits every screen that it is used on and worked well with the curved boxes as well as the colour palette.

Colour palette

The other periodic table website resources had a big impacet on the colour palette, existing resources that were similar to mine didn't have a good contrast between the different types of elements so I used impactful main colours to improve the contrast.

wireframes low spec


This is the Logo design for the project, I wanted a wordmark as the logo because I wanted it to be straight to the point, when I asked my peers, who are of the same age as my demographic, they also liked it.

wireframes low spec wireframes low spec

layout excercise

I like to do little boxes in my sketchbook and then draw different layout ideas that I can use for my projects. This is a great way for me to generate ideas for layouts that might not be the obvious direction to go but an interesting and unique idea might come from it.

wireframes low spec

Element Icon sketch

For the icons for each element, which would be the main bulk of the visuals for the project, so it was really important to not make the boxes too busy but have enough information that they would lead the user to the content without looking for too long because I wanted it to be as easy as possible to access the information.

wireframes low spec

Element box

This is the completed icon box, as you'll see in the main pages, the icon boxes are a massive part of the visual side of the project so I didn't want it to overpower the user with too much information but instead make the information clear so that they could locate the element they are looking for.

wireframes low spec

Category page sketch

The category pages were interesting and sketching different layouts really helped me determine how the user would actually navigate through the different categories and how the elements would be displayed in the categories.

wireframes low spec wireframes low spec

Digitised Catgory pages.

These are the digitised versions of the pages. I really like the layout, it's simple and easy to understand what category is being displayed and where that category sits on the periodic table. The icon boxes work well here and I don't think these pages are too busy which was a concern at the start of the project.

wireframes low spec

Periodic table sketch

This is the sketch of the periodic table, it was noticable that I would have to do a redesign of the periodic table because at full size it wouldn't be visable and I didn't want to do a horizontal scroll so I made some layout changes to fit the Ipad screen.

wireframes low spec

Digitised Periodic Table

This the periodic table, I redesigned it a bit so that it could be used on a Ipad and not be overly stretched. When using it in the prototype (at the bottom) the size is at a good size to see everything and interact with the different element links.

wireframes low spec wireframes low spec

Element card sketches

These are the sketches I did for the element cards, I wanted to make it interesting for the user to look at and have a visual reference to the element that it is on. From my research I noticed that a lot of website are very information heavy so I wanted to use illustrations to make this more interesting and break it up a bit.

wireframes low spec

Digitised element card

This is the digitised layout of the element card, I really like the way that this screen turned out. The illustration at the top of the screen draws the user in and gives a visual sense of the element and make the element selected a bit more interesting to then learn about, I think the drop downs invite the user to find out the information and the periodic table at the bottom shows where the element is positioned in the periodic table.

wireframes low spec

The Elements prototype

Click the Image above to use the Adobe XD prototype to get a full sense of the project and to experience the users journey through out the app. I am really happy at how easy it is for the user to get the information they want to look at.

Important information

The elements that I did full element cards for are Oxygen, Calcium, hydrogen, Potassium and Titanium. Enjoy the app!