There will be a main layout to the whole app which will be consistent throughout the whole app. This will make it look consistent throughout.
I have designed the screens within a rectangle which fits onto the image of an iPhone, this was to make it easier for when I mock the app up on the presentation boards, but it also gave me a restriction for the size of the layout, I could work out the proportions of the full design from this.
This is the home screen, which will be displayed when the app is first launched.
This screen is particularly for the podcast menu, but this is the main background of every screen within the app. I chose the yellow colour because it is a bright and vibrant colour and the contrast between the yellow and black works well. I think something with a strong colour will attract people to it and make them look at the app. The logo in the top corner is present on every screen, this gives the app an identity continuously throughout. Where the title 'podcast' is present on this example it will change for each category title, but stay in this position all the time. This again gives a constant style to the app and something that you can identify when you look through it.
This is the main menu of the app. The home of the app, here you can access all areas of the app and see what it has to offer. A the app is for creative students I have made it simple, but using the icons makes it more creative and aesthetically pleasing. The icons represent the category. With this screen I have kept it simple and old by using the black on yellow, which is a tint of the main yellow colour used on the navigation. I think that this as a main screen and the first thing the user would see, sets standard to the app and you can defiantly tell what the design of it and the way it should be used from seeing this screen.
The first category is the search area by using different categories of design. On this menu you have two different options - you can search yourself by using the search bar or you can select a category by scrolling through the thumbnails below, these are shown as a hash tag and when clicked on will bring everything related to the category up on screen. The lower section of the app works by scrolling with your finger, you can scroll down and to the right - this is done like you would normally scroll on an iPhone. Scrolling the lower section reveals more categories.
From clicking on a category thumbnail or searching a category yourself, you be brought to the selected category screen, you can identify this by the category being displayed in the top right corner. The way each screen works for displaying the blog posts, is in a cascading window. All the posts have a thumbnail which are displayed in a arranged order within the screen perimeter, this creates a wall of creative images on a selected subject. Again this scrolls down and across by using your finger. To read about the post you simply click on the image. To navigate back to the search screen you swipe backwards - from left to right - and this will take you back.
The blog post screen. Once you have clicked on a post thumbnail, it takes you through to the post, which has all the post story and images etc which are within the post. This is scrolled up and down so you can read and see the full post.
Monthly archive menu. Here the user can search through the its nice that posts by months. The screen is set out in a calendar which is to play on the creative aspect and to make it more interesting to use. This screen scrolls up and down and you navigate to a monthly section by clicking on the individual box.
As you can see this is the same screen as the previous category screen, all the screens work in the same way and are seen the same. This is to make the app more accessible and easy to navigate around. The month is displayed in the top right corner and you can scroll down and to the right to reveal more post thumbnails. Clicking on an image takes you to the full post. This screen brings up everything that was relevant in the chosen month, so it will have things from every category of design.
The same post screen is used for the blog post. This agin is shown in the top right corner and it displays all the information and images of the original post.
Regular features is a section of the website which the contributors take control of. These are sections which are down to them and written by them. The initial screen of this section is similar to the category one, each feature has a thumbnail image and is displayed on the screen - this doesn't scroll as the features shown are the only ones. Again when you click on a feature image it takes you to that feature page.
Feature menu. Here all the feature screens are designed in the same way, because they have a set structure to each feature and everything within that feature is the same it is just dates throughout the layout of these sections are rigid and set to gridded structure. This makes it easier to view each post and to navigate through. The difference with these screens is that they have a small description at the top left, this describes the feature so the user knows what it is about. As the same as before you click on an image to access the full post.
This is the screen of the feature blog post. It's same as all the rest has is navigated around the same.
Events menu. This menu displays all the events that Its Nice That are involved in. It is displayed in the cascading window again, which can be scrolled down and across to reveal all the events. The section title is in the top right. To access the events information and to find out more about it, you click on the image to take you through to the information screen.
Podcast menu. The podcast is something that is recently new to Its Nice That and normally you would download them through iTunes to add to your iPod, iPhone or iPad, but a this app will be available for all three devices it made sense to include it within the app and cut out having to download them etc. Here you can access all the podcasts from Its Nice That and listen to them within the app. Clicking on the date of the podcast takes you through the the podcast player.
Podcast player. Here you can listen to the podcast. You will be given information on the podcast - which tells you what is involved in it. At the bottom of the screen is the podcast player. A simple play pause and stop button lets you navigate the podcast with the time line along the bottom, this lets you see the length of the podcast and where you are through it. You ca simply skip through the podcast by scrolling the timer along the time bar.
The last section of the app is the contact section. This section has two purposes firstly Its Nice That is available on various social networking sites, the icons are shown within this section and you will be linked to them through the specific app or Safari when you click on the icon. He second function gives details on how to contact It's Nice That, with information on how you can submit work and work with them.
This brings us to the end of the app design. I am happy with the design of the app, i think the consistency of the design throughout each section makes the app have a much more professional aesthetic and makes it easier to view and navigate through. These are all the key aspects which I wanted to address and design right as I think they are key for the success of a app. The creativity runs through the app and if I was to use it I would find it really interesting to use and to find new inspiration. I wanted it to mimic the website but in a more smart phone and user friendly environment, which I think I have achieved.
No comments:
Post a Comment