design

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.

15033569833_a327c79601_b.jpg

 

5 well designed apps:

iOS weather app

ios10-weather-app-icon.png

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:

unnamed.png

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.

ios_weather_icons_1x.png

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:

iOS-7-iPhone-Backgrounds-PSD-Free.png

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:

unnamed.jpg

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:

unnamed-2.png

Smoothies from Whole Living

175x175bb.jpg

 

 

Advertisements

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:

screen-shot-2017-10-16-at-10-59-48.png

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.

 

 

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

Single/Multi-player

 

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.

 

1

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).

 

x

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:

snowhite

 

Game level ( the pond ):

level

Evaluation of “London Festival of Architecture” poster

 

These are my final poster and alternative designs:black_poster22 2.jpg
lloyds_poster6 2.jpg
SaintPaulsPoster4 2.jpg
Evaluation:

In my opinion, this first poster style is a little bit “futuristic”. I’ve made this poster using only photoshop. This poster overall didn’t take much time to do, but the most time I’ve spent on was the text. Firstly, I had to download the font from the website and then I edited it to make the text stand in the right place. The “fading away” effect on lines was made with a brush.
I cut out the building from a picture and added some filters and adjustments on it so it’s only black and white and looks less realistic. When I put the building on a black background I used a black brush to cover the sharp edges. I also used a white brush to make the white lines on the building stand out more.
The second poster took the shortest amount of time to make and I think it looks quite good. I had a hard time deciding which one between these two should I make my final poster. On this one I used Illustrator and Photoshop programs. I used Illustrator to make vector shapes of Lloyd’s building and then I copied these objects to photoshop:
lloyds.jpg After that I put a green background on it.
I downloaded the font from the website and duplicated the layers of text to add that “duplicated” text effect.
The third one took me the longest time to make, and, in my opinion, it doesn’t look too bad. However, for me this poster is the least appealing of all these three.
I cut the building out of a picture and added some effects and adjustments to it. I duplicated the churches and made a shadow copies behind them. I had to cut a triangle and duplicate it many times to make a line. Later, I added the same picture of St. Paul’s Cathedral in the corners and made it transparent. The font was downloaded from the website.

Poster comparing:
The main difference between professional work and mine is that the professionals’ works look more clean and flawless. For example, in the first poster if you look closely on my work you can see the imperfections on the lines, they are not as straight as they should be. I also think that I could have made the building in the first poster look better so it would look more professional ( for example, create a vector shape of it in Illustrator like I did on the Lloyd’s building ).
Similarity of my work and professionals might be the font. Professionals don’t use the fonts that are available on Photoshop and look up for more interesting ones just like I did.

The Idea:
My idea on the first poster was to have the main object of my poster as a popular or well-known London’s building, because the name of this poster is “London Festival of Architecture”. I wanted to make it look a little bit futuristic because the architecture is becoming more and more modern. On the second one I wanted it to look a bit “Art Deco” but with a modern building. I got inspired making this kind of poster by doing the research on other Art Deco posters. On the third one I wanted to do something different than the previous two so I made a poster with an older building. I wanted it to represent and remind the architecture of the past. At first I even tried adding an old looking font to it, but it didn’t work very well.

Tools:
Photoshop:

  • Brush (for shading some lines and hiding sharp edges)
  • Lasso tool and Polygonal lasso tool (for cutting out the buildings from images)
  • Gradient tool (for doing the background for the second poster)
  • Text box (for text)

Illustrator:

  • Pen tool ( for creating shapes )

My thoughts about my work and the project:

I think that was an interesting project, but I didn’t spend enough time on it. I feel that I could have done better if I had organised everything and had a plan since the start of the project. I’ve been doing the tasks and they’ve have been confusing at first. Checklist for submission helped a lot, I think if we got that at the very start it would have been easier to organise. I made the most work on my sketchbook before the deadline (such as creating coloured drawings, etc.) and got way more many ideas on how I should have done the poster, but there wasn’t enough time anymore. However, I can’t stay I’m not happy with the result I have now, but I know that I could have done it better.

 

Composition

These are the composition types for a poster design:

Rule of thirds

Imaginary lines are applied on the image and divide paper into thirds. The main subject is applied by aligning it on the guide lines and intersection points, placing the horizon on the top or bottom lines.
Screen Shot 2016-12-12 at 10.48.19.pngScreen Shot 2016-12-12 at 10.48.28.png

Golden Ratio
Golden ratio can also also be called Phi Grid.Golden Ratiodivides a frame into three rows and three columns of equal size, resulting in 1:1:1 vertically and 1:1:1 horizontally
Screen Shot 2016-12-12 at 10.49.05.png

Circular composition
The circular formation draws the eye inward into the image. It is made up of a continuous curve.
Screen Shot 2016-12-12 at 10.49.32.png

Triangle or Pyramid composition 
In this composition, the subject’s body forms an upright triangle shape, with the head in the top centre and body expanding below to form a wide base.
This has a solid base and will show stability. It also has Height and Strength.
Screen Shot 2016-12-12 at 10.50.12.pngScreen Shot 2016-12-12 at 10.50.18.png

The Radii
Connection lines meets in the centre and and expansion lines leaves the centre. These lines have the eye led into the picture.
Screen Shot 2016-12-12 at 10.50.58.png

The L or rectangle
This makes an attractive frame. That frame or rectangle can help to frame a main subject in the picture.
Screen Shot 2016-12-12 at 10.51.34.png

Z composition layout
The Z layout is when you place the items that you want the audience to see first along the top of the Z. Then audience will naturally follow the path of the Z. The goal is to place important information at the end.
Screen Shot 2016-12-12 at 10.52.28.png