I started on paper after deciding on my ‘Only murders in the building’ themed app design. I had a few ideas that I ran by Kyle and then landed on the building idea.
I wrote down some of my ideas (see image above). Initially I was going to develop a monster themed app but I felt as though it had already been played out and wanted to go with something a bit different.
Minecraft was also a big source of inspiration at the beginning, especially since I love playing the game and making fantastical houses and structure; this lead me to move my focus towards building and architecture which in turn reminded me of the incredible architecture, illustrations and set design in my new favourite show ‘Only murders in the building’ Now obviously this is not kid appropriate but I still like the cleverness of the name so I decided to adapt it to ‘Only elements in the building’ which would then becoming my whole theme. I continued to sketch and note down some quick ideas and the design just sort of started taking shape. I wanted to bring in a bit more about the actual periodic table so I wanted to design the building in the same shape as the periodic table.
I wanted to make it an immersive and engaging experience for the kids so I thought that I could draw little windows that showed an element character peering out of for the kids to tap and explore or meet the element as it were.
I then started to do some visual research for inspiration for the artistic style. I of course drew some inspiration from the tv show ‘Only murders in the building’ but I also took a closer look to the set design, promotional posters for the show and some of the artwork. I researched the artist and her name is Laura Perez (A Spanish artist) I really enjoyed her work and her playfulness with shadows. I talk about this in a lot more detail as seen in the image below.
One day after class I found this building near the campus that has a little light display set up where the colours change in a pattern – this fit with the inspiration the show game me and further highlighted this idea of being eye-catching and engaging; again I go into a lot more detail in the image below.
I remember watching 101 Dalmatians as a kid and how much I enjoyed the scenery and the artwork in the movie in spite of its muted colours; I want to draw and engage the users (kids) attention but I don’t want to have to rely on only using very bright colours as it would change the theme I am perusing so seeing more muted and realistic colours being successfully used here made me think of doing this as a sort of challenge to myself. I also wrote down some thoughts on my sketchbook while researching (see image below).
From this my sketches began to take shape along with the initial designs of the building. I started thinking of maybe creating an archway entryway that looked sort of like a tunnel of sorts; kind of like you see around Belfast. I was not however sure of how I would make this work as it would require a lot more transitions when prototyping it and at this point I had spent too much time on my portfolio and placement applications – Time management is something I really need to work on and this project showed me that.
Below are some more ideas and sketches.
I started thinking of the flow of the app and the screens that would need to be created. I also started considering branding for the app and wanted it to fit in with the elements in the periodic table as a sort of hint or tribute in a way.
I also decided to create human characters in Stan Lee fashion with their first names starting with the letter their element name starts with, eg Hydrangea Hydrogen. I also started considering making my characters inclusive so kids could feel represented and seen when playing the game. I didn’t want anyone to feel alienated so I kept this in mind.
I created my title for the app in the style in which periodic table elements are presented in a box. It felt playful while still providing a call back to its original sources – You can see the Figma process by clicking on Part 2 below.
Apologies in advanced for leaving the price sticker son but I hate the sticky feeling books get after taking the stickers off.
Another great source of research were these books I got on the periodic table. The one of the superheroes informed my character ideas and reinforced the idea of how to name my characters.
I liked how the character was presented and then the element block.
The book below was great for finding information that I knew was reliable on the elements. I also really liked the cover.
This book was a bit of an impulse buy but it paid off. Not only is the content laid out in a very successful way but the use of simple illustrations really works in well with the information without retracting from it – This is how I want my information pages to be.
Now it was time to jump into Figma, I have attached below the 3 Figma files were I did most of my layout work and such. I did my illustrations in procreate but in hindsight I think if time had allowed I would have made them less flat, maybe a bit more interesting also?
Working in Figma was not a challenge as I generally enjoy working with this software, it was however frustrating at times keeping up with the flow of my prototype links and with the disorganized chaos happening within my files.
Figma design files:
I started off by adapting some of the building designs in 101 Dalmatians and making it my own and while I really liked the outcome, I simply did not have the time to complete a whole building in this style; it was also becoming hard to work out the logistics of hoe I would design the sides and again time was not on my side so I had to simplify.
This was my simplified solution to my previous problem. It did however loose a lot of its charm and character and in all honesty I was not happy with it but thought it was what I had to do so I pursued this design.
I then started thinking of possible backgrounds for my lettering and tried to blur the image of the entryway to give a hint of what was to come. I however ended up deciding not to use this idea as it simply did not work out as well as I had imagined it would.
These are my characters. Now looking back I think that my last character was the most developed one. There were shadows and layers to it, it just turned out better – it was the last one I drew up. Looking back I would draw the rest of the characters in the same style as I did for Aluminium.
After a feedback session I realized that my project was simply not up tp the standards so I went back to my original illustration and pursued that angle again. These are the illustrations I did to improve the look and feel of my app/
After creating the building block (lol) for the bottom part of my building I decided to continue with that style and add the normal range of elements behind the illustration I made above as in the periodic table itself the bottom 2 layers of the periodic table are separate from the rest.
I really liked how it turned out and after I was done with it I felt a lot more confident about the look and feel of it.
I played around with colour for quite a bit but decided to go for a dark navy background and add some snow details to set the scene,
I really like how my building turned out but if I was doing it again or had managed my time better I would have spent more time conducting some user research and worked on my character illustrations more – make them less flat.
Click here to use my prototype.