Our application is based mostly on animated illustrations, icons and typography. It’s simple because it needs to switch between the graphics in the application and capturing images from the real world. The graphical style was influenced by simple vectorial illustrations and geometrical shapes. The use of Helvetica and Helvetica Bold complemented well this style.
Step – Through
The video above shows in detail the main interaction of the application. We recommend also to check an interactive step through because it shows better the animations of the program. It can be viewed here.
Device
Mirabilia is an application made for smarthphones with GPS, accelerometer, camera, touch screen, WIFI access and a screen resolution of 320×480 pixels. Part of our application was tested on an IPhone G3 that has these features.
Augmented Reality
Part of our application relied on the capability of the device to use augmented reality. Augmented reality on mobile devices hasn’t reached its full potential yet, but it will play a major part of in the future. Augmented reality could be implemented by retrieving users’ position using GPS and getting information from WIFI hotspots. Users can also upload information via hotspots. Examples of augmented reality and loading information on hotspots can be found here and here.
Screen design
Click to enlarge
Icons Design
Click on the image to see the icons design in details.
Mirabilia’s functions are based on icons. We decided to reduce as much as possible written parts and have also a static navigation. Using the application the user doesn’t go through different screens, the background is always the same and what changes, depending on user’s choices, are the icons drawn on this background.
When the user goes into the augmented reality he/she sees the icons according to where the camera’s phone is being pointed. Icons have a life span, this way the user doesn’t get a saturated image.
Flow Map
Click on the image to see the whole flow map.
Click here for more details on the keyword map.
Homepage | Concept | Design | Process | Code | Critical reflection | Credits | Downloads |