Sketches & Wireframes

As part of my 301 modules, we were given the task of designing an educational app. We had the option of designing for a child or an undergrad. I choose to design for a Child, I made this decision based off of the fact that it would be more illustrative. I choose this option to better my illustration skills. To start this project I began to sketch some ideas out that I could use within my app. The sketches above were all based off things that contain various elements on the periodic table.

I then started to plan the layout of the app. This began with sketching the wireframes of each page out and testing what layout works best. Above are the sketches that proved to be the most successful during the user testing. This design is all based around one main page that has access to all other resources.

Icon & Colour pallet

Once I had completed my sketches I then moved on to developing the icon and colour pallet. To start I began by researching potential colours that I might use for my apps pallet. During my research, I came across a website that did a study on how kids react to various colours. Within this study, it was clear that kids responded to yellow and blue the most, blue gave a calming effect while yellow gave a happy feeling. After I had chosen my colour pallet I then started to develop the icon. for the icon, I decided to use the face of the avatar that welcomes the user to the app.


After I had finished developing the icon and the colour pallet I then began to digitise and illustrate my sketches. Above are the welcome, intro and homepage. once the user has opened the app they are greeted by the apps avatar Albert, from there they are taken to the intro page where he asks the user if they know what elements we have in our bodies. Once the avatar has finished the user is taken to the homepage where they have the options to learn about 6 different elements that we have in our bodies. From the homepage, they also have the option of keeping track of what they've completed.