App and App Design research

UI ( User Interface ) – are the visual elements that the user sees on the screen. It can be buttons, images, icons, and other visual elements.

UX ( User experience ) – it’s the experience that user has as they interact with a certain app.

Wireframing – it’s a schematic guide of how the website or app is going to look like and will be functioned.



5 well designed apps:

iOS weather app


This app was made to inform people about the weather of any location. Everyone can use this app and it’s easy to control. When you open it the first thing you see is the weather of you location:


At the top there is a text with the name of your location. It’s written in the biggest size so it draws your attention. A little lower there is a slightly smaller text with the description of the weather. It gives the person a rough idea of how the weather is like. The number in the top middle shows the temperature of the weather. It’s in the largest size because it’s one of the most important things and purpose of the app.

A little lower we can see the app lists seven days of the week – from Monday to Sunday.  Today’s date has a gap between other days of the week to show more detailed information. At the left it says the highest and lowest temperature of the day. At the top of the timeline there are hours of the day, and below it we can see little icons of the weather and the temperature. The icons represent what the weather is going to be ( sunny, cloudy, rainy, etc. ) and it shows the sunset and the sunrise. By dragging this weather timeline to the left we can see further hours of the day. Present temperature is the most important which is why it’s presented in bold. Since days are brighter than nights, the day’s temperature is shown in bright colour while the night’s is darker and faded.

Below the timeline there are listed other days of the week with little weather icon on the left. It also says the highest day temperature and the lowest night temperature.

The icons are very minimalistic and understandable. Main of them are sun, cloud, moon, thunder, rain, snowflake, wind, fog and thermometer. Some of them are both combined to create a special icon to represent a specific weather (for example sun and cloud combined creates cloudy icon). Darker cloud represent that it’s night.


At the bottom we can see a little cursor and a line of dots. Each dot is a different homepage to a city or location and the little cursor shows your current location. As we can see there is no back or forward button, so to get to another page you have to swap with your finger to left of right.

The background of the page is a picture of the sky which would represent the current weather and the time of the day. If it’s night, the background always has a dark tone. On the day the background is always lighter, but the colour also relies on the weather. For example, if it’s partly cloudy (like shown in the picture) the background will have a blue light sky with a couple of moving clouds. However, if it was cloudy and rainy, the background would appear grey with animated raindrops, or if there was thunder the sky would be really dark with lightning flashing through the clouds and etc.

To create a background first they use a base colour:


Then they other assets such as animated images of the thunder, clouds etc. and the text and layout. The use of white for colour was to make it stand out from the background.

By clicking a small icon of list at the right bottom we get dragged to this page:


It lists all the cities that you have in your app and shows the time and the temperature of it. Each colour of the city also show what’s the weather like in there. At the bottom we can choose whether we can’t to see the temperature in Celsius of Fahrenheit. If you want to remove a city you swipe from right to left on the city and click delete. Little plus icon at the right allows to add more cities to your list:


Smoothies from Whole Living





Bouncing ball animation

To start off, I changed the camera settings first. I went to viewcamera settingsresolution gate. Resolution gate gives a frame for your animation and shows in what resolution it’s going to be seen. You can edit the resolution to any size. For this project I’ve been working in 960×540. I’ve also enabled interactive creation by going polygon primitivesinteractive creation. If the interactive creation wasn’t enabled, the software would create a perfect dimension cube. However, with interactive creation we can drag our shape and create it in any dimensions we want. I also was working by facing the front camera. This is how it looks:Screen Shot 2017-10-16 at 11.34.12.png

I’ve placed the sphere at the top by y axis. By clicking ‘s’ key I’ve selected all keys:

Screen Shot 2017-10-16 at 11.35.47.png

Then by selecting the 24th frame I’ve dragged the ball down by y axis and selected all keys again. Then I’ve dragged the cursor on the timeline to 48th frame and pulled the ball back up again and selected all keys. These were my main points of animation.

Now I’ve selected the ball and turned on graph editor by going windowsanimation editorsgraph editor. A graph editor is a graphical representation of interpolation between animation keys that you can modify. The window with a sphere graph appeared:


By selecting the graph I’ve smoothed out the corners and broke the tangents so it would be easier to edit the graph. By altering tangent handles you can change animation curves value and timing.

Screen Shot 2017-10-16 at 11.00.24Screen Shot 2017-10-16 at 11.00.55
Then I started distorting the sphere on the 24th frame to make it look stretched and squished by changing the scale by x, y and z axis:

Screen Shot 2017-10-16 at 11.07.58.png

After that I’ve started adding in between frames to make the animation look more natural. On each frame I’ve changed the shape of the ball to make it look as if the ball was affected by its weight, gravity and mass.

Screen Shot 2017-10-16 at 11.42.20.png






App Design

Healthy Smoothies App

This app will help you to learn and discover about smoothies which can help you to improve your health and add more variety to your drinking juices.

Audience: It’s for people who live a healthy lifestyle and takes care of their health on a daily basis. Age can be any.

Main idea: This app will have a big smoothie collection and you can choose which one to make. It will have different recipes for different smoothies. It will also show what ingredients contains them and will teach you each ingredient’s benefits and why it is good for you. (For example, the smoothie contains turmeric. By clicking on it you can learn everything about this ingredient. For example, ‘Turmeric dramatically increases the antioxidant capacity of the body’ and etc. )

Advise on illness: It will also advise you which smoothies to drink if you have a certain illness. (For example, you have a cold. You put that in an app and it will suggest you which smoothies are good for this exact illness and why. For example, ‘this smoothie is good for cold because it has ginger, lemon and honey’ and by clicking on the ingredient you can learn more. ‘Ginger is good for a cold because it helps to flush out toxins from your body and boosts your blood circulation.’ and etc.)

Your profile: You have your profile. In profile, you can add your created smoothies and name them as you want. You can see other people profiles too and follow them to see what kind of smoothies they’ve created. You can like or comment on smoothies and discover different recipes.

Homepage: The homepage will contain seasonal smoothies available only on a certain season.
It will also show most popular smoothies created by other people.

Filtering: You can also filter the smoothies you want to see (for example, you can choose to see smoothies only with apple juice and etc.) and you can choose your allergens or the ingredients you don’t want in your smoothie so the won’t appear in your homepage.

Similar app research:

FitMenCook app

It’s a healthy recipe app for people. The aims of the person creating this app were:
A) Food should be easy to prepare and affordable
B) Food should be vibrant and tasty, never boring
C) Preparing food in advance is important
D) Following a, b, c helps you achieve your fitness goals

My app is similar to this one because the smoothies would be creative, never boring, affordable and would help you to achieve your health and fitness goals.

Screenshots of ‘FitMenCook’ app:
Screen Shot 2017-10-09 at 14.02.25

At the bottom there are categories of recipes, shopping and etc. We can see that you can browse recipes by the ‘tags’ (for example vegetarian, low carbs, etc.) which is similar to my idea of ‘filtering between smoothies’. There’s a ‘favourite’ category in which you can save your recipes that you like the most. In shopping category you can add reminders and lists of what you need to buy for your recipes. In ‘community’ part you can share your recipes with others, and it’s what I want to do in my smoothie app. However, in my app you will also be able to like and comment them. Most liked and commented smoothies will appear on the homepage for everyone.

The colours used for this app:

Screen Shot 2017-10-09 at 13.58.42

The colours look earthy and natural. Perhaps it’s because the recipes meant to be healthy, natural and organic. That’s why they chose the colours matching with the content.

The app audience seems to be for grown up people who care about fitness and pay attention to what they eat everyday.



Game research

Sonic Rush


Sonic Rush is a side scroller/platform type game released in 2005. This used to be my favourite game as a child.

The player controls either Sonic the Hedgehog or Blaze the Cat, who differ in terms of special abilities. Gameplay consists of moving quickly through levels, collecting rings and defeating enemies by jumping on them. The player collects rings as a form of health. When they are attacked by an enemy, their rings bounce in all directions. If they are hit by an enemy and have no rings, they lose a life. Levels in the game are divided into “zones”, each consisting of two acts of normal gameplay then a 3D boss battle.  During boss battles, Blaze fights Doctor Eggman. The game features a special stages can access via certain handles in order to obtain the Chaos Emeralds. The emeralds can turn thoughts into power and can be used as a weapon. . When the player completes both Sonic and Blaze’s stories and collect all the Chaos Emeralds, they can access a final story.


Blaze the Cat is somehow pulled from her native dimension into Sonic’s world. Her world had seven Sol Emerald – similar to the Chaos Emerald – but they were stolen by Doctor Eggman. She then makes it her goal to retrieve them. This is where Sonic meets her. While she is searching for the Sol Emeralds, Sonic is searching for the Chaos Emeralds, which have been stolen by Doctor Eggman Nega, Eggman’s alternate counterpart from Blaze’s dimension. They later meet Cream the Rabbit. After Eggman kidnaps Cream, Blaze goes after him while Sonic takes on Nega. Sonic collects the last of the seven Chaos Emeralds and meets Blaze, who fails to protect the Sol Emeralds. Sonic and his friends help Blaze realize the meaning of friendship and she turns into Burning Blaze. They fight Eggman and Eggman Nega and defeat them. The two worlds are restored, forcing Blaze to return to her own world.




Rayman is a side-scrolling platform video game published in 1996.

The player character is the titular Rayman, who must travel through six worlds to free all of the caged Electoons, six cages of whom are located somewhere on each level. Rayman has the ability to walk, crawl and make silly faces. Each level is divided into several maps, each of which is completed when Rayman reaches the “!” sign at the end. The player is given a certain number of lives, which are lost when Rayman takes too many hits or falls into water or a pit. Scattered around each level are small blue spheres called Tings. If the player controlling Rayman picks up 100, he gains an extra life and the counter resets to 0. When the player loses a life, he loses any Tings he has collected. Tings can also be used to pay the Magician, a character found in certain levels, to enter a bonus stage, where Rayman can win an extra life. The player also comes across a variety of other power-ups and bonuses. At the end of each world, Rayman must defeat a boss enemy.


The Great Protoon maintains peace and balance throughout a valley that is Rayman’s world. One day, the evil Mr. Dark steals the Great Protoon, leaving the Electoons, small beings who gravitate around it, vulnerable to Mr. Dark’s forces, who have captured the Electoons in cages. Rayman must free the Electoons and recover the Great Protoon to restore the valley’s balance.[2] Betilla the Fairy, a guardian of the Great Protoon, frequently interacts with Rayman as needed to give him additional magical powers along his journey.

Rayman character design
The Rayman game hasn’t stopped developing throughout years. Now there are different types of games with this character, even in 3D. I’m writing about this character design because I think it’s quite interesting.


We can see that the character has no legs or arms, but that doesn’t make the character look any worse. The main parts of the boy are head, torso, and feet with palms. I think it’s a really simple design and it’s easier to animate it. What you need to have are only different images of face expressions, hand, hoodie and hair movement.


Final Fight


Final fight is a side-scrolling beat-’em-up video game originally released as an arcade game in 1989.

Final Fight can be played by up to two players. Before the game begins, the player chooses between the three main characters: Haggar, Cody, and Guy. Each has his own fighting style and attributes. Health gauges are displayed for both player and enemy characters. The controls for Final Fight consist of an eight-way joystick and two buttons for attacking and jumping. By pressing certain buttons on joystick you can perform different combos. The player can also perform jump attacks. Pressing the attack and jump button allows the player to perform a special attack that strikes all surrounding enemies, but will drain a small portion of the player’s health. Final Fight consists of six stages or rounds and two bonus rounds. At the end of each round the player will face a boss character.


The game is happening in Metro City in United States. The city’s crime rate reached alarming levels. Since the election of pro wrestler turned politician Mike Haggar as the new Mayor, Metro City was changed and cleaned up drastically. However, the Mad Gear gang would not go down so easily. Under the leadership of the businessman Belger, the group attempted to bribe Haggar with a large payoff to keep him from going after them, which Haggar refused. The Mad Gear responded by abducting his daughter Jessica. When Haggar found out about his daughter’s abduction, he decides to take his fight against Mad Gear. Seeking additional manpower, Haggar recruits Cody, an expert fighter and Jessica’s boyfriend, as well as Guy, a ninja in training and Cody’s good friend. Together they fight against Mad Gear to rescue Jessica and eradicate the gang.

Super Mario World


Super Mario World is a 1990 platform video game developed and published by Nintendo.

Super Mario World is a platform game in which the player controls Mario or Luigi from a side view. The character moves by running, jumping or flying. The game has 96 levels. The majority of the game takes place in these levels with obstacles and enemies, by running, jumping, dodging or defeating enemies. The player is given a certain amount of lives, which are lost when Mario is attacked by an enemy, falls into a pit or lava, or runs out of time. Each world features a final stage with a boss to defeat. There are also a lot of power ups like “Super Mushroom” and “Fire Flower”. There is also a Joshi dinosaur which Mario is riding. The dinosaur can eat the enemies. 


Mario and Luigi agree to take a vacation to a place called Dinosaur Land, where there are many types of dinosaurs. When Princess Toadstool disappears Mario and Luigi are trying to find her and encounter a Yoshi dinosaur. He says that his friends were kidnapped too. Mario, Luigi, and Yoshi set out to save Princess Toadstool and Yoshi’s dinosaur friends, exploring Dinosaur Land for Bowser and his Koopalings. Mario and Luigi continue to follow Bowser, defeating the Koopalings in the process, and save all of Yoshi’s dinosaur friends. They eventually make it to Bowser’s castle, where they fight him in a final battle.



Pac Man is an arcade game developed by Namco and first released in Japan in May 1980.

The player controls Pac-Man through a maze of various dots, known as Pac-Dots, as well as four multi-colored ghosts: Blinky, Pinky, Inky, and Clyde. The goal of the game is to consume all the Pac-Dots in a stage in order to proceed to the next one. The four ghosts roam the maze, trying to kill Pac-Man. If any of the ghosts touch Pac-Man, he loses a life; when all lives have been lost, the game ends. Near the corners of the maze are four larger, flashing dots known as Power Pellets that provide Pac-Man with the temporary ability to eat the ghosts and earn bonus points. The enemies turn deep blue, reverse direction and usually move more slowly. When an enemy is eaten, its eyes remain and return to the center box where it is regenerated in its normal color. Pac-Man was designed to have no ending – as long as at least one life was left, the game should be able to go on indefinitely.



Sound in 2D animation


2D animation

The soundtrack

To create music for this animation I was using garage band.
First I uploaded a track of forest sounds. Then I played the music keyboard to create a melody.

Settings for the piano:



Creating the music:



At the end I’ve added some thunder and rain sounds to connect to the animation and atmosphere of it. I’ve also changed some settings of fading in and out:



The music mood:

At first the melody is kinda cheerful and happy. Then the music becomes a bit slower and gets into the gloomy mood. For example, the sounds in 0:33 show that the girl was feeling  cheerful but got the realisation of being left out, which represent her feelings of getting lost and scared. Then the thunder and raining sounds come up, which show how she feels. After the sad part at 1:07 there are uplifting sounds again which represent hope. At this time she expects for something to happen. However, the hope wasn’t real and the music ends up with sad, “down-going” sounds, which represent disappearance and the vanishing.

Stop-motion animation:

The soundtrack was made with garage band using a piano and bell instruments. The link to the audio:

Fairytale game

FAIRYTALE: Snowhite and Seven Dwarfs

Writer: The Brothers Grimm

Published: 1812


Plot of the fairytale:

Queen asks the magic mirror who is the most beautiful in the world and the mirror’s answer is always Snowhite. She commands the guard to kill her in the woods, but he doesn’t. She wanders to the forest and found a little house in which she asleep. The dwarfs find the Snowhite and they become friends. When the queen finds out the Snowhite is alive, she comes to her as an old lady to give her a poisoned apple. She eats it and dies. However, the Prince comes and awakes the Snowhite, and they get married.


Game treatment:

Audience: 16+

Devices: PC/PS4

Type: Action/Strategy/Fantasy



Story and game mechanics:

The games starts when the Snowhite is in the woods. The atmosphere is dark and gloomy. She finds herself laying on the grass. She sees that the guards are chasing and trying to kill her.


The aim is : to escape the forest alive

Gameplay: exploring the forest and environment by doing quests and interacting with animals to get power and materials to make a weapon and knock the enemies off.


By doing quests animals can provide you different materials which you can merge to create a weapon. You can combine different materials to create different kind of weapons, since you need to counter different types of guards. (For example some guards use magic so you would need to create a weapon with magic resist to win a fight, or some guards are very “tanky” but their attack damage isn’t big, in which case you would need a weapon with attack speed and etc.)


For doing bigger quests Snowhite could also gain magic powers which could help her to win the fight. (The magic powers could be rooting enemies so they couldn’t move, or blinding them etc.)


The quests given by animals could be finding some type of items, in where you have to explore the forest. There will be different environments and landscapes, you might need to swim in the river or fly on the large birds. Sometimes you could encounter bad animals such as wolves, trying to kill you too.

There would be a lot of parts of the game, but these are going to be from the beginning, middle and the end of the game.



Snowhite is in the forest which is nearby the castle, gloomy and dark place, its rainning. Not many good animals around, Snowhite has to use rocks and branches to get away from the guards. She gets deeper in the woods where the rain stops and it becomes more peaceful. She discovers the world of animals which behave like humans (each has their own personalities).



She discovers a pond which has magical aura around, the atmosphere is relaxing and mystic. There are small spirits flying around which she could talk to and heal the damage taken from the guards. (The Snowhite has 1000health and if it drops below that, she has to start over from the last checkpoint. She can increase the health by doing the quests etc.) However, she hears the wolves come and she has to fight


Last part

In the last part the Snowhite has to fight the queen (the boss). The fight would happen on a tall cliff with beautiful landscape and sky. Snowhite needs to have a big variety of weapons and magic powers since the queen can change her form. The player needs to use strategy to how and when to use certain weapons and powers and when to defend themselves to win against the queen. If the player didn’t do enough quests he won’t be able to win the last level since he doesn’t have enough weapons.


Each level should have beautiful and high quality imagery.

Game artwork:



Game level ( the pond ):


2D and Stop Motion animation TASK4 – Animated Alphabet


First animation

I changed the animation type from cut out to drawn stop motion. Cut out took too much time and I wasn’t able to finish to I chose to draw it.

At first I’ve created an alternate animation just to have something, which didn’t take a lot of time (around 30 minutes).

This one had a different plot: a little drop flew around the paper and it became a small angel which blew a kiss.

I used a pencil on a simple white paper and was shooting with a phone camera:

1st frame

2n frame

3rd frame

4th frame

5th frame


The camera wasn’t positioned in the same place and you could see previous erased drawings on the paper which makes this animation look not professionally made.

This animation was made out of 60 images.