App Concept Development

Name of the app:

Cyclesphere

This is the development part of the app after I have digitalised all the work and started to figure out what things fit together with different colours and and slightly moving things around.

Main Weather Page

Main Page Dev 01.png

This is the first page I created on photoshop with the menu button on the top left, the weather and current time and location in the top half of the page and on the bottom half I would of put the information for the current surface in the area to tell the cyclist how the surface was like and what to becareful of. However, I realised that it looked to plain with not enough space to put much information so I decided to change the bottom half.Main Page Dev 02.pngIn this part of the development, I made an extra section at the bottom and putting the main bike logo on the bottom half of the page to give it more of a monochrome and a better aesthetic look with the sign showing the wind direction to the left of the bike and the current type of surface texture on the road. I then added 4 sections which would include the weather for the next four days.

main-page-dev-003

 

As there werent enough sections for the weather, I added 3 more sections under it and addign in the weather, which day the the weather was located in and the average temperature during the day. I also added the log out symbol at the top right of the page as it would link to the sign in page.

Main Page Dev 04.png

I decided to change the font to a thiner and more simple font to see if the aesthetics would be better on the page but i dont think it gave the same effect as the fotn that was bigger and thicker which is why i decided to stick with the thicker font.

main-page-miami-dev-02

 

This is an example of another location on the weather page. I chose Miami as the location with a time being at sunset as it gave a vibrant colour which made the page look aesthetically pleasing. The terrain was also dry which meant I used the dry terrain symbol and explaining to the user in text what the surface would be like.

Add Weather Page

Location Page Dev 01.png

This is the first location page I created. It was quite a simple design with lines that flipped horizontally as each box went down while also slowly fading out with the “+” button on the left side of each box to allow the user to add a location into each box. However, as I recieved feedback from the other students in my class and doing some research, I realised that it didnt look very aesthetically pleasing in comparrison to other professional apps.

location-page-dev-02

In this design, I made the text for the heading slightly smaller so it didnt have to squeeze into the top of the page with the “+” button next to it being white to match the colour of the font. The boxes for the text to go in was the a bit larger so the text and image could stand out more with the box being filled with a black colour that was slighly transparent which also faded out to the right. I decided not to fill the whole page with boxes as it made the page looked to cramped and I wanted to to be quite a simple design. In addition, when I created the “Login Page”, I found a good image with vibrant colours which made the app stand out. I then decided to add the background to the pages which did not have the main weather page in it but other pages that didnt not include a certain type of weather. Furthemore, the user could press on the “+” button which would lead them to the search page where they would be able to search for different locations and add them onto the page.

Search Page

search-location-page-dev-01

After clicking on the “+” button, it would locate the user to the search page where they can choose a location that they want to add by clicking on the search symbol. There is a back button on the top right to bring the user back to the location page after they have searched for their location. I was pleased with the first digital design for the search page and did not think much could be added onto the page as I wanted it to look quite simple but professional.

Login Page

login-page-01

This was my first design for the login page. I decided to make a large circular profile with 2 boxes for the login and password to go inside. I then added a “sign in” box to bring the user to the main weather page with the colour of the box being the background colour of the sun.

login-page-dev-02

For the second design I made the circular profile smaller so it did not fill up the page too much with only a line for the login and password section with the symbol of a person and a key on the login and password section to let the user know which line is which. I then changed the look of the “sign in” button to a circle wit ha arrow inside it to suit it with the simple monochrome look around on the page. Furthermore, I blurred the background to make the while lines look sharper and stand out more against the background.

login-page-dev-03

On this design I changed the circular profile and added the app logo inside it instead of the user picking their own image. However, I might keep the white gradient look to it as it suits more with the page and makes everything look simpler.

login-page-background02

This is a gif I created using photoshop using my final idea for the sign in page.

Logo for Cyclesphere

This is the main logo design that i came up with. I first started off with creating the left logo with a simple monochromic design with the sun on the top of the screen. I then decided to add a bit of colour to the background as the backgrounds for the pages in the app have quite vibrant colours so i decided to add a sunset gradient as a background with a black boarder. I think I would make the right logo my main logo as it stands out more with its bright colours.

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