Weather app evaluation

WeatherSpace

 

 

 

These are the final app interface designs that I have made. The app has a space theme which I have carried throughout the interface such as moons, sun icons and galaxy backgrounds.

The first 3 screens are an hourly forecast, weekly forecast and a menu screen. To create these menus I used Adobe Photoshop. For the backgrounds of each screen I used a picture of the weather condition such as a storm, rain and for the profile screen a galaxy themed image. On photoshop I put these images on a lower opacity so that when I made a coloured gradient, the images would still be visible from being on a lower layer. The galaxy background did not have a gradient behind it, but I still put the image on a lower opacity so that the text on the menu would be more visible and so the user would not get overwhelmed by the background. The gradient colour suits the time that the app is showing such as orange and purple to represent a sunset.For the app itself I used the font ‘Source Sans Pro’ on its ‘Light’ setting. This fonts typography is futuristic looking which fit the space theme of the UI. The font also makes the user interface cleaner looking as its thin layout makes the interface seem less over-crowded with information.

hourly-weekly-profile

This is the design for the various extra weather conditions which appear after swiping up on the today screen to show conditions such as overall temperature and wind direction. They were made on Adobe Photoshop where I used a circle as the base for each planet. I duplicated a circle shape,  and then with the lasso tool I traced around a wave pattern on the circle which I had later used a gradient to colour it with.

capture

capture

These are the screens for the screen that shows the weather for the present day. These show the different weather conditions such as rain, sun and thunderstorms as well as the time, location and temperature in degrees. I have adjusted the colour gradient to suit the time of day e.g. pink to suit the morning contrasting with purple for the night. As this is the screen for the whole day the planet icons are scaled up slightly in order to draw more attention to the temperature for the whole day. The menu button stays in the same place on every screen in order to keep a constant layout throughout the interface. This is also to avoid a confusing layout interface e.g. if the menu buttons were to move position each screen the UI would lack continuity.

appsssThis is the final logo for the app. I made this logo using Photoshop. I used a galaxy background for the background and the cloud, and included a saturn-like design that I made using a circle shape and then using the transform tool to make it appear like saturn’s ring.  I included a sun, rain and lightning icon to make it clear to the target audience that it is a weather app. The placing of the cloud and the saturn makes it similar to a cloud appearing behind a sun-like planet.

Untitled-2.png

This is the colour scheme that I have used throughout my app,which contains the main colours that I used the most. I used mainly cool colours such as the blues and blacks with a combination of warmer colours like pinks, oranges and the white. In my opinion purples and blues are colours that are linked to space as they are futuristic-looking. The white was used primarily for the text to make sure the user is able to see and read the text so that it stands out against the darkened backgrounds.

screen-shot-2016-11-09-at-10-08-12

If I was to improve any elements on the app,  I would have used a thicker font, as at times the font could have a thicker stroke to make it easier to see if it is placed smaller on the page. The planet designs such as the sun, moon, and saturn would have more of a design on them except just a grey circle; doing this would mean that the app would have more of  a personality, and would brighten up the screen a bit more.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s