Creating the first screen

IMG_1261

For the students to appreciate how an app is built, I decided to start from the top-down: layout out the top-navigation menu, then determine what function each menu item should perform, and then create the features of each menu item.

We already had what the major functions that app can do; now we needed to create a way to select each associated screen. The kids started off by suggesting navigation menus similar to what they were used to one the iPhone. There were three major suggestions:

  1. A vertical scrolling menu, icons on the left, title on the right – like most iPhone apps such as Contacts
  2. A grid layout of icons – like the iPhone home screen
  3. Different rectangular and square tiles of icons – similar to the Windows Phone
  4. Horizontal scrolling tab bar at the bottom of the screen (like in the iPhone Phone app, but with scrolling)

Some choices had obvious downsides, so I asked each student to critique the layouts they didn’t like. The problems with the grid layout (#2) was that once you included a title, only about 4 icons would show. The problem with the tile layout (#3) was that we couldn’t decide which tiles should be big, and which should be small. They liked the horizontal scrolling bar at the bottom, but that’s fairly difficult to implement on an iPhone (and doesn’t follow iPhone standards), so I discouraged it.

The final vote was 9 for #1, 4 for #2 and 0 for #3.

This blog describes how 5th-8th grade students helped build the free iPhone/iPad/iPod app WishToList; info at WishToList.com
320-39-rev4-iphone

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s