App navigation & Layout inspiration

App navigation & Layout inspiration

Bellow is a rough map on how the app would behave and navigate. 
The starting point would be the Image off the Mclaren Mercedes MP4-28, the way in which you navigate would be by clicking on the part off the car you want to find more about, a new page would then display a cropped and focused image off the element in question, a second click would add text to the image, a 3rd click would take you back too the main image off the car in most cases.

On the survival cell, engine. and wheels the user can go deeper into the deconstruction and explantations of the elements of the race car so corresponding clicks off the element would load another image and so on and so forth. 

To highlight elements that could be zoomed into and focused on for information expansion I will do something similar to the game Forza for the Xbox360. Display a little icon highlighting areas for interaction. 

To help inspire my layout I have included a selection of simple layout examples with basic use of type & image. I have also included a selection off illustration examples to inspire my image making element off the design process. The images off the F1 car will be illustrated by me, initial thoughts at this stage are to create drawings with simple lines to emulate a very mechanical feel that also simulates blueprint instructions. This is very fitting giving the app is for describing technical details and elements off the car. 

The app needs to be very easy to navigate with no distractions so I looked at a few blogs for inspiration as I feel there minimalism within the layouts is perfect inspiration for my app through there ease of use and focus on the designs/images they present and promote. Both these blogs, typetoken and newgrids follow a generic black and white scheme throughout with the navigation bars contrasting the vast white layouts with black boxes to highlight the selection. This use off black and white and  feelings off clarity and crispness is something I am going to use through my design process. I will probably use a sans serif typeface to maintain this crispness and with it been on screen I feel sans serif outweighs the legibility and readability off serifs due to the resolutions on varying phones been higher or lower than others things need to be kept crisp, clean and simple. 

This example of branding found on AisleOne.com by swedish designer Joakim Jannsson is a beautiful example of how centre aligned typesetting can work perfectly giving the right frame and type editing. This will be the starting point for the orientation on my app, or there about and will inspire my type layout, the spacing off the lines and the combination of tight and wide tracking creates interesting contrasts through a design that initially looks simple and minimal but has many fine little details in there once admired and examined. This is something I would like to do. Theres also an interesting combination off different fonts and uppercase and lowercase glyphs but I will maintain consistency and just stick to one typeface family. Again the black and white scheme displays clarity and crispness. I also love the vector logo, the combination off a circular element with very linear and angular type elements again creates a nice contrast and in terms of hierarchy draws your eye right into the logo which would have been the intention due to the logo been what the viewer remembers the most. The use of line art will be a main inspiration in the illustrations to keep with this blueprint influence within the composition   

Bellow is an example of Valentin Breynes branding off The Museum of European and Mediterranean Civilizations  and is how I plan on creating my imagery, it looks like a very accurate pencil drawing. Ignoring the type and layout on this design and focus on the image, this is were I want my main focus to be until the type is brought in through the interaction of the user. To recreate accuracy like this i plan on making pencil drawings and using fine liners and keeping everything greyscale but maybe experiment with one single element off color throughout the whole design on each page.