For the final element to this project I decided on creating an App. I had wanted to include this in my original planning, however with time restraints I didn't think I'd get onto it, but I am happy that I have as I think it will really tie everything together and finish the whole project off to make it well rounded and show consideration into all sides to the convention.
The idea is that the App will work as a guide around the convention, showing all the events available, and allowing the user to create their own plan, read about the events and set reminders.
Realistically I won't be able to show the full App in the submission boards, so I only need to do the important pages which show the majority of the Apps functions.
Main Pages
Events page - A list of all the events
Planner page - the users individual planner for both of the days
Single event page - A brief description of the event & all timings for this event
With the App I wanted to follow the same design that I had been for the Event Programme in having black with white text. I also wanted to integrate the red colour into the navigation bar as I think this contrasts well against the black.
Following the Event Guide, I want the Event imagery to be in the purple tint. The exhibition imagery would be full colour.
The main idea is that the App will be easy to use, so there will be a top navigation bar with the page heading, a back button and a menu button. The bottom navigation bar will be split into the two main sections - Events & Planner - allowing the user to flick between the two as they please.
Each individual even will have a plus button so the user can easily add it to their planner. In contrast to this, on the planner, each event will have a cross button so the user is able to remove it.
Initial idea:
Following what was stated above, I created three pages to show off the basic layout that I wanted to move forward with. I created two variations of the Event page, one where the user can click between Saturday and Sunday, and the second where they just scroll down to see Saturday events first, and Sunday events below.
At this point the overall layout is something I am feeling quite positive about, however I am a bit unsure on the execution that I have got right now. I wanted the two tabs at the bottom to differentiate from the tabs on the page, but have found it quite hard to do so. I also dislike the use of the red line on the Events page, however without it, there wouldn't rally be any clear indication to the section below. With this, I have decided to move forward with the scrolling idea instead as I think it works better in this style of design.
I then mocked these up to include the imagery and onto an iPhone view.
While I think it does look better mocked up, I am still unsure of the design and feel that it is very dark and doesn't look as good as it could. I feel that the black on white looks a bit amateurish and doesn't look as professional as it could even though it follows the previous designs created for print. This is mainly down to the colour usage.
I then decided to scrap this use of white on black and move forward with using white as a background colour instead as it is lighter and will be a bit easier for me to work with in terms of the way the colours work together. I also want to simplify the icon buttons as well.
Moving forward with the white instead of black, I also decided on incorporating two grey colours, one dark and one lighter. The darker colour will be used instead of black so won't be as harsh against the white. The lighter grey would be used for the tabs as the unselected tab.
I started by redesigning the Events & Planner pages. The selected bottom tab is red, with the unselected in the light grey as said previously. For the days on the Planner, the selected will be in the dark grey, with the unselected being in the light grey. This differentiates it from the bottom tabs which are fixed, and differentiates it from the top navigation bar as well. I also simplified down the icon buttons, removing all unnecessary detail.
I find that this lighter design seems so much simpler and professional, especially as it looks a lot more fluid and softer than the harshness of the white on black. The use of the light grey lines between options works really well in creating a subtle divider.
Following this design, I created an individual Events page - deciding to continue to use the two day tabs instead of scrolling through them all. I also created a variation to show what would happen when the plus is clicked.
I think the much lighter design works much better for this page as well, and the sections of the page are very clear to the user.
I then created a page to show what the exhibition/gaming pages would look like. These will be different as there aren't set times for these and they run for the entirety of the convention. The layout of these are slightly different, with the option to add this at the top of the page and all the information below it. For exhibition pages, there would also be a small selection of imagery for the user to flick through to decide if it is something they want to see. The user will select the plus sign and be able to choose the time in which they want to go to it.
Following this, I created the tab that would appear when the menu button is selected. The content for this is something I considered carefully and for a long time, figuring out what the user would actually want and need at the event.
I decided on three main features and a couple of smaller features for the user.
The first main feature is the ability to set reminders. This is so that the user can create an alarm for certain events on their planner to tell them when it is time to go.
The second feature is a digitised floor plan map. The idea is that the user is able to flick through the floor plan and be able to see where they need to go.
The third feature is a live feed for the user. Some of the events will have limited access, so the live feed allows the user to still experience as much of the convention as they can if they have a period of time without an event.
The smaller features is the clock so they can see the time. Along with this there is the current and next events so the user knows where they need to be at the current time or for the next event.
Another small feature is the ability for the user to have their own profile image. This adds a bit of personalisation to the App.
To differentiate from the red navigation bar, I decided on the dark grey as the top bar for the menu tab. As well as this, a dark filter has been placed over the page below to fully show the tab being opened.
Following this I created the log in page for the App. I decided on the background being the imagery used on the posters, with the logos at the top and two simple boxes to fill in at the bottom.
On the completion of this page, I mocked all of the pages up onto iPhones to include the imagery.
Overall I am really pleased with the outcome of the App and think that it is definitely a stronger element to the brief and really ties everything off nicely. While I was initially a little concerned that the change from black to white would differentiate the designs from the others, I do think that the approach worked well in creating a professional looking App which is easy to navigate and looks decent too. I think with the imagery in, it does link more to the rest of the designs so I think it still works with all of the other work and does show the versatility with the direction of designs for the brief as a whole.
No comments:
Post a Comment