IXD301 Elements Project – Icons and Ui

Icons

Last year for my travel app I want to make a fun and engaging icon set and came up with the idea of giving them cute faces and making them little characters in order to give the app even more character. I’m still really fond of this idea and so when thinking about designing for a kids app, I thought about how well this concept could work for this project as well. Designing these sort of cute character icons in this context means that I can up the cuteness and since it’s on a larger screen I can add more detail. Also bigger eyes!

Some Research

I learned all about icon design in last years IXD104 module of Imaging and data visualisation so I feel pretty confident that I know what I’m doing when it comes to iconography. I do visit this complete guide to iconography for a wee brush up though.

Before getting into designing a set of icons for my app I felt it was important to do a bit of research on what’s important to consider when designing icons for children specifically.

I found this article with gave me a good insight into designing icons for kids…

The article is a tad dated but it still hold up which is great since it’s the only one I could find on icons for kids for the life of me. One of the main takeaways it’s important to consider a specific age range, mine being 8-12, since the things you need to be mindful of with toddlers are drastically different from 10 year olds.

Inspiration and Influences

Here are some of my influences and the places I looked for inspiration…O

Pinterest

I took to my trusty icon inspiration board and a board I put together full of kawaii style cartoony faces primarily on cute pudgy little animals and also things that typically don’t have faces drawn on to them which is exactly what I’m about to do here.

 

Dribbble

I looked for examples of iconography done for games and kids apps on dribbble and found some interesting examples just scrolling through. Now I will present you what is essentially a dribbble photo dump of some of the icons I thought were really cool.

 

Kawaii Illustration

One of my biggest influences for designing these icons is kawaii illustrations and aesthetics. I guess in a way Japanese and generally East Asian styles of contemporary  illustration has a way of influencing my design work often with out me even realising. This is probably because I grew up watching tons of anime and reading tons of manga and have a huge appreciation for pop culture around that side of the globe . I’m also generally a big fan of cute things and Japan in particular has an abundance of cute cartoon characters to adore. What immediately comes to mind when I think of Kawaii illustration is Sanrio.

Designers

I also took inspiration from the iconography and illustration work of specific designers like Vic Bell, and Justas Galaburda among others.

Sketches

Here what I did in my sketchbook…

Digitisation

After I sketched out my ideas, I digitised the icon designs in illustrator first before eventually transporting them to XD where they become an integral part of my Ui.

Ui

Research

I learned a lot about the principles of User Interface design in 1st year but for this project it’s time to take it further and look more specifically at designing for a particular user group.

Based on the user research I’ve done I know that my target audience of kids aged around 8-12 are much more capable of easily picking up new interfaces simply from recognising similarities from other apps. Because of this, the way you would design interfaces with this group would be quite different from how you would design for children younger than that.

Here are some of the resources I found that helped me understand how to go about designing interfaces for kids aged 8-12…

Inspiration and Influences

One of my biggest influences for Ui design comes from my favourite mobile game Utapri Shining Live. I this game has some really nice interfaces and I think when doing initial sketches, i subconsciously modelled my ui after this game.

My interface design is primarily just based good Ui layout trends I have noticed as someone who likes to play video games while also considering what is appropriate for a 8-12 year old audience.

As well as that though, I also found this great blog which gave me lots examples of mobile games with great interfaces from dribble.  This one is good too.

My brother plays a lot more mobile games than me so I asked hime what his favourites were and had a look at the Ui in those too.

 

After receiving feed back on my icon and Ui design, I have decided to remove the big setting icon and either get rid or have it smaller scale on the launch screen. I have also decided to add a little sandwich menu to the top right next to the currency.

Sketches

Here’a a look into my sketch book an the ui design I’ve come up with…

Digitisation

Once I had my icons ready to go I started to block out the basic Ui elements up in my prototype on XD. Here is what I ended up with…

After receiving feed back on my icon and Ui design so far, I have decided to remove the big setting icon and either get rid or have it smaller scale on the launch screen. I have also decided to add a little sandwich menu to the top right next to the currency.

Leave a Reply

Your email address will not be published. Required fields are marked *