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