The initial idea of this is to be similar to the website, in which it shows the images of the VW models on one page and then you touch the images to bring up the information about it. The design to it will be similar too, to keep it consistent across the two.
To start off with i designed the different screens for the app on illustrator to the size of the ipad screen resolution - this was 768 x 1024. Which are as follow:
As you can see the app is very similar to the website, i have basically taken the website design and adapted it for the ipad, changing the layout to fit the format better. I think that is very consistent with the website and i do actually prefer the design of this compared to the website - it fits the space better and looks better being on the ipad screen.
I have designed it to be as user friendly as possibly. The first menu screen just has the 5 models which you click through to. On each page you click the image and it brings up the bigger image with more information. To get off the image and back to see all models you simply click on the screen.
You can swipe across the screen to go to the next generation of vans or you can use the menu button at the top - next to back - to access the app menu, this will let you pick from the side menu the generation you want to look at. Like i just said there is also a back button, which will take you to the homescreen.
To put this into context, i have mocked up the app screens on an ipad to show how it fits within the format and the size it will look on screen.
Open screen - this will appear when the app is first loaded. I have used the same main image as on the website except i have made it fill the page - this worked better for the app, because the image was the wrong shape and proportions to sit right within the format of the app screen.
Menu screen - access all the generations from this screen.
T1 screen - shows all models within this generation and general information along the bottom of it.
You can also see that the generation that is being displayed is shown in the top right corner.
Once you have touched the image, it will bring up a larger version like this one. This will display specific information about that VW model. To exit this screen and get back onto the main generation screen, you can either touch the screen anywhere or click the back button at the top left.
T2 screen - shows all models within this generation and general information along the bottom of it.
Once you have touched the image, it will bring up a larger version like this one. This will display specific information about that VW model.
T3 screen - shows all models within this generation and general information along the bottom of it.
Once you have touched the image, it will bring up a larger version like this one. This will display specific information about that VW model.
T4 screen - shows all models within this generation and general information along the bottom of it.
Once you have touched the image, it will bring up a larger version like this one. This will display specific information about that VW model.
T5 screen - shows all models within this generation and general information along the bottom of it.
Once you have touched the image, it will bring up a larger version like this one. This will display specific information about that VW model.
This is to demonstrate that from each main generation page you can swipe left with finger to go onto the next generation.
The other way to navigate around the app, is by using the menu button - this will push the screen to the right and reveal a menu on the left hand side - here you access all the generations and go back to the home page.
Alternatively you click the back button in the top left and that will take you back to the main menu.
I think that the design of this app is simple but very user friendly, the simple and clean design works well because of the photography based imagery used within the app and i didn't want any impact taken away from that element. I think if this was an actual app and could work properly it would be good to flick through and read, with the added interactivity of clicking onto each image it would be a good app for the users.
To put the app into more context, I had an idea that i could send a PDF file of all the screen designs to my email and access this on my ipad. I could then open the PDF and will fit to the ipad screen because i have designed it to the correct resolution and i can then photograph the app on my ipad as though it would look like the proper thing.
The images of this aren't great - it was hard to get the lighting right to get a good image of the image on the screen but then also for the rest of the image to be lit without having a massive reflection from the light. It shows what i wanted it to shows and puts the app in context with the ipad.
I am really happy that i had the time to do this and try out designing an app for the ipad. It may not be the best design and could be further developed, but i think it does exactly what it needs to. It is kept consistent with the website, so the two work together and its easy to navigate through.
I would happy to use the app on my ipad!
No comments:
Post a Comment