Interface Design Exercise | Design a Travel App for iPhone + Android
This exercise is good for designing interactive interfaces for all screen applications.
Objective: To give students an overview of the design thinking process applied to creating an interactive interface.
Based on your assigned persona outlined below, develop a travel app for the iPhone or Android.
In this exercise you will need to do the following:
1. Name the travel app
2. Organize the content:
– Group content by topic
– Refine topic groups
– Map out the groups in a hierarchical flow chart
3. Sketch out three screens/scenarios
– Home screen w/navigation
– 2nd level screen w/navigation
– 3rd level screen w/navigation
Define what happens on each screen
All work will be done on paper.
- Identify at least 3 types of information that may go on this screen
To share information with others
2. Anonymous Jones
40 years old
Married w/two teens
Lives in San Anselmo, CA, works in San Francisco
Access to different airlines’ mobile sites for pricing information and booking
Access to general information about different countries
– Identify at least 3 types of information that may go on this screen
To share information with others
For my final project I am proposing doing a video game based on bike messenging.
You are a thrill seeking bike messenger. Your job is to pick up and deliver important packages that need to get to there destination quicker than a rush hour minute. You’ll have to deal with oblivious pedestrians, treacherous street car tracks, uncaring dispatchers, all while you life (and Job) are on the line.
To do this I first sketched out some ideas on paper, while using fonts from my Suitcase Fusion 3 collection. This allowed me to work independently of constraints of using special effects in software applications, while still lending the library that is available from using technology. After that I traced the one I liked best several times so that I had multiple copies of the word to experiment with. I did a little more research using a Google image search for the word “shred” for some more inspiration. I then found an inspiring one at http://www.imposemagazine.com/bytes/2011-is-going-to-shred. Then I applied the same technique to one of the copies I traced using pencil and scissors, after that I felt comfortable going into Adobe Illustrator CS5 and using the “merge” pathfinder tool to complete the project.
For my mid-term I chose to do a WordPress style template website based on http://www.astrobie.com/page/Capricorn.aspx for basic reference and content.
For my color palette I used tertiary (pg 208) colors based on the image of the blue Saturn, which is Capricorn ruling planet.
I used Canata One from Google fonts as my typeface. Its a modern serif bodoni font, which is the easiest to read on long passages (pg 237). Google fonts was a great tool because it lets me choose my fonts like Suitcase Fusion does and is easy to embed in HTML and CSS.
I centered the heading text as conveyance to bring attention to the headings. I have the rest of the text flush left for easy reading (pg 246)
The layout is based off a simple 3 column format (pg208)
The logo of the sea goat is a vector that I made with the pen tool in Illustrator from an image that is common on google searches but were all of low quality.
Conclusion: I had a good time doing this project. I wish I had started it on time and was more on top of my studies this term because I would have done something different. But I am pretty happy with how this turned out. From here I can only improve.
Image of Saturn in the header is from http://space.desktopnexus.com/wallpaper/213656/ which is a really cool website for finding images of outer space.
Image of sea goat on the home page is from http://astrologyunboxed.com/2011/01/21/how-to-seduce-a-capricorn-man/
MLK and Drew Brees text taken from Wikipedia.