Skip navigation

2. Design

The application has been developed to be used on advanced smartphones, with HSDPA fast internet, GPS compass and high resolution widescreen touch- screen display.
For this project our reference device was the iPhone 3GS.

flash
The following prototypes have been made to allow anyone to have a taste of the kind of experience we have projected for the Magellan application. In this version the interface works with the mouse, but we managed to adapt the cursor in a way that make easyer to imagine a touch-screen approach, making it appear like the typical contact area between the screen and the finger, represented with semitrasparent white circle.
(the interactive animations are about 1 Mb each, and could take some time to load)

Captain view: in this view the system allows the Captain to follow the project schedule, plan the steps and the tasks. In the prototype only the work section is available. To access the menu click on the main boat (Captain’s boat) and click on “work”. If you get lost in the map use the radar button (bottom left) to center the view on the boat.

line

Student view: this interactive animation, developed only for the video, has been adapted here for graphic reference. The user, as soon as he opens the application, receives an invitation. The user can accept or refuse it.

processing
The Processing prototype was too complicated to embed here. For this reason we posted a screen-captured video of it. If you want to try it, you can download it from the download page.

grphics
treperttre

The navigation menus are placed on the side of the map. They slide in adding more specific informations on the main map. The main project functions are located on the captain boat, divided into work (the “to do” list) and plan (the project planner).

The map itself is an important part of the graphic mood.
Starting from Google maps, we adapted it into a more technical-nautical kind of representation, but instead of using old maps as graphic reference, we decided to move to a more contemporary style, much more linear and easy to read.

captain map small

studentmap small

Click on the maps to get the high resolution version

flowchart

preview step

Click on the image to download the flow chart in PDF.

line

Magellan | Concept | Design | Process | Flash | Processing | Teamwork | Reflections | Downloads