Somewhereville Week 7: Fixing Problems, Making An App Icon, Map page, Transport Page and Weather Page, and Preparing For Handing In

Continuing Problems

I’ve had a couple of really annoying problems going on this week to do with Adobe Illustrator. One of them is that some documents will not open even after I’ve saved and go to reopen them again and the other problem is in the image below. If one document has too many clipping masks or too many high quality images in clipping masks then it says it can’t preview it. So I’ve had to work around these problems and even recreate certain documents sometimes.


Last Week’s Problems Fixed

Section Page

After dealing with the problems of my attractions page and the link to the about page I had to change up a few things. First I had to find a way to fit the cuisine section link but I knew if I added another link the whole page would be too cramped and wouldn’t look good. So with this in mind I got rid of the Photo Gallery as it was more of an optional thing and replaced it with the cuisine page. I did some shuffling to make sure the Cuisine page was below the Accommodation Page but also changed the title from “Cuisine” to “Dining” as I felt it was more appropriate. I also changed the of the about page from “A Coastal Getaway” to “About” so the audience would know where and what the introductory/about page was. What you see on the right is what ended up being my final image for the app.

section pages2.jpg

Attractions and Dining Pages

After deciding to scrap the combination of the attractions and dining I had to recreate both pages. For the Attractions Page I simply change the title of the Locations Page design and change the wording of “Shake to Shuffle” into “Shake to Select A Random Location” to make this form of navigation more clearly understood with what its  goal is.

attractions pages.jpg

From here I just copied the same layout as the attractions page and made it into the dining page. However, it was noted at the beginning of the assignment that we don’t have to make every page if certain pages are similar to others, so in the end I didn’t end up including it as there was no need to but it gives you an idea of what the page will look like.

Cuisine Page2.png

Map Page

After choosing a map design for last week and the changes I made with the sections this week I had to change how my map would be split. Originally it was split into the categories of attractions and accommodation:

map screen1.png

but now it is split into 4 separate categories of Locations and Events, Dining, Caravan Parks and Hotels, Motels and Units. To keep consistency I used the button designs of the  section page as the buttons to toggle through the different maps. I also included a whole screen option which can be navigated to by press the “Full Screen” button or tilting the phone sideways. Below are the final images for these pages as they didn’t take me too long to figure out how I wanted them designed.

maps pages.jpg

I also added a map to the Riverwalk Markets page which is the only thing I’ve changed on it since I last tampered with it. I wanted the map to tie back to all the different locations that you can look up so on each page the map that shows where that specific location is will be clickable and will take the user to the map page of the specific category it is in. Also this is what the Riverwalk Markets Page ended up as for the final image.

Riverwalk Markets Page.png

Transport Page

For the transport page I am splitting it up into Car (Home Vehicle), Buses and Planes which from the Paper Prototype I have to change to the word “Flights”.  Layout out wise I reflected on the attractions designs when I was trailing the two categories idea which in turn worked out quite well. At first I had the category buttons the same size as the other buttons within the app but enlarged them only slightly to fill the page up.


I began creating the Home Vehicle part of transport which I wanted the show distances from Capital cities to North Haven and how long the trip would take. I also wanted to include a link to google maps so the user is able to click on the interactive GPS guide that it has to give the user a path to follow. I finished this page and realized that I didn’t have to do it after re-reading the brief and that I had to do a public transport schedule instead, but at least it gives you an idea of what the page would look like.

home vehicle Page.png

I used the table design however as inspiration for the schedule that I created which I chose to do the Bus schedule as it was easier than the flights schedule making it better time management wise. The only difference was creating 2 tables, one where their buses leave from Port Macquarie and another where the buses leave from Kendall. It was pretty simple and straight forward to make as I copied the layouts from pages I already created.

bus Page.png

Weather Page

In the brief it said to include the yearly averages of your chosen location. This is what I started with using the Home Vehicle Page for inspiration, representing the different seasons through the clipping masks.

Weather Page.png

However, alot of other apps have the weekly temperature included. So to give my app some more in depth detail I decided to include this in my weather section. But I didn’t want it set up like the transport page because I felt there was no need so I just added 2 buttons at the top of the page where people can change between the two. I also made it so that in the weekly/today section you could click on any of the days and it with show you the predicted weather. I used the following icons as inspiration for my own. These were the final images to go into the app.


weather pages.jpg

App Icon

But how would they get into the app in the first place?? I had enough time to design an icon for the app and was tossing between using the icon or clipping mask I experimented with a few ideas and couldn’t choose between two so I placed them on an iphone home screen image and chose the better looking one which ended up being the final image for the app.


app icons.png

iphone screen1.png

iphone screen.png

Putting It All Together

Now that I have all of my images I just had to add the to Invision and edit the transitioning and add hotspots where buttons would be which was simple however the tough part was that in Invision it includes the section at the top of an Iphone that shows the time, battery, signal etc so I had to go through each of my images and add extra white space at the top of my pages as well as move the blue section at the bottoom of some pages to make it all fit on the screen which took up some time but I managed to get it done and its ready to.

Planning For Hand In Presentation

As I was making the pdf for my in class presentation I noticed I have to include my flowchart and with all these changes I’ve had to remake it so I thought I would put it up for you all to see.



Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s