Designing an app was really interesting to me, as I had never worked in Illustrator before. Being able to learn how to create shapes and vector graphic art was really eye-opening and a whole different mindset to what I was previously used to. We were given a choice of three themes for our app: fitness, student cooking or weather. I chose to create a weather app based around cartoony characters to help children read the weather forecast and also understand the nature and science behind it too!
At first, I wasn’t sure of whether to base my app around cooking or the weather. I knew that the icon and aesthetics of weather apps was something that appealed to me more from a designer’s stand point, but at the same time I thought that creating funky food icons would also be really fun. So I brainstormed ideas and sketched out rough designs for both themes and eventually settled on creating a colourful weather app targeted towards children, teenagers and young adults. I wanted to do something character based because I knew that was a strength of mine when it came to creating and designing. Having colourful, personified characters is also very popular and appealing trend towards the younger demographic, as it makes subjects and themes more relatable and human. (literally!) Personification made things easier to understand whilst also being fun and imaginative.
After finalising my idea, I moved onto researching mobile apps and looking at their icons as well as analysing their navigation and how certain design choices were made to fit with whatever function the app focused on. For example, with photo editing apps obviously the main part of it is the photo itself, so that takes up the majority of the app display. With my weather app, the main focus is obviously the weather so the main information such as the day’s temperature is the largest feature on the screen. The mascots were the other main feature, so the two components share the homepage as main text and main image. I also looked at other aspects of app navigation and incorporated basic, yet effective principles from good UI designs. I learnt that the simpler the navigation, the better – and using the touchscreen to your advantage made your app feel more natural and smooth to use. I also observed some really poorly designed apps and made notes on what shouldn’t be done when designing an app. For icons, I looked at the use of symbols and basic vector graphics to give a clean, professional and simple look to your app icon and that squashing text onto a 120 x 120 dpi canvas was a bad idea. (Resizing text to such a tiny scale would make it impossible to read as well as make it look awfully clustered and blurred.) The various elements of app design that I researched really helped me gain a better understanding to my own app’s design.
After researching, I began drawing and designing and redesigning my app details until I reached the final design. I first drafted out a navigation map of my app and story-boarded the pages, fleshing out the layout and movement of the whole app. I did my best to keep it simple and straight forward as possible so that any children or young person would find it easy to use. This mindset continued onward into my character designs too. When I made my initial sketches for my characters I knew that they were a little too complex to recreate in a program like Illustrator that heavily relied on manipulating with basic primary shapes and lines. So I kept on redesigning the mascots until I got a result that was fun, but easier to recreate digitally later on. I researched designers called Brosmind in order to help me come up with a simple art style.
Once I had planned and designed all of my app elements in my sketchbook, I scanned them in and used those drawings as a base to work on in Adobe Illustrator. It took me several weeks to eventually come round and complete making all of the icons and characters and it was a huge learning curve. I went in knowing only the bare bones of the program, but persevered with it until I finally came out knowing it pretty much inside out. It took me a while to understand it’s unique creator mindest, as working with vector shapes and lines wasn’t something I was familiar with at all. But after mastering the pen tool and pathfinder function, creating my mascots became progressively easier.
After exporting the final mock ups of my app pages, I was introduced to the program Game Salad. I used this program to create a very basic interactive display of my app, importing all of the individual components into the program before then creating scenes and adding basic events and actions using the interface’s drag-and-drop-system. I couldn’t make things too advanced as I was limited with what the program would allow me to do without digging into expressions and specific coding. But I programmed enough to have the basic page navigation working and even have some elements rotating on scene!
Overall, I am very pleased with the outcome of this project and have learnt an awful lot about Adobe Illustrator and app design. The digital colours and simple Illustrator designs really helped flesh out the look of a simple, yet fun and interesting children’s weather app. In addition to the Game Salad programming demonstrating an example of how the final app would actually function, I think the overall project turned out really well in the end and I am very happy with the results I achieved.