Mobile Smartphone Interface Design

Objective - Design a game interface for a mobile smartphone that utilizes the design principles while taking into consideration the rules for mobile design. You will be working in Illustrator to create vector graphics.

Combining the principles of design and the design elements of
line, shape, texture and color create a splash screen for a game
for the smartphones listed below (iPhone4). You must choose one of the games provided (see #1 below). Pay attention to readability, design and functionality. Your buttons should resemble buttons not just flat shapes (tutorials below).

Hint: Stay away from the use of serif fonts for small type as it
may break up due to the bitmapping. Also make sure there is
ample contrast when using color in type to insure readability.

You will be working in Illustrator.
It will be easiest to have one Illustrator file with separate layers for your image and button experiments and final design (8.5 x11")
and a separate Illustrator file for your thumbnails (17"x15").

Specifications:
• The final design must fit the iPhone 4 (640 x 960 pixels) and
one other smart phone. Sizes are indicated in Device Central.
• Colors must be rgb only
• Design Must include the following:
..... Name of the game
..... Buttons (use any shape)
..... Graphic elements or illustrations only (no photos)
• Final design is placed in a smart phone using Device Central(see tutorials below)

Process:
1. Choose an existing smartphone app.

2. Research the app to understand it's objective.
- search for app in App Store
- Google apps

3.Open Illustrator and
Experiment with different images for the game.
Before you design, Google images - smartphone apps to
get some ideas.
Your images should be different from what is used for the existing game.
- create your own images in Illustrator
- use Live Trace in Illustrator to create vector art from a photograph
...... Live Trace Tutorial
...... Tracing Artwork in Illustrator CS5 tutorial
- explore free stock photo sites that have vector images
..... Dreamstime
..... Vector Art.org
..... Vector Portal.com

4. Open Illustrator and
Experiment with different button shapes and colors.
Do several different versions of buttons in Illustrator.
Save as a jpg file to upload with finished design.
Are the buttons large enough for the button name or should the button name go under/over the button?
Buttons do not need to be round or ovall. Be creative!
• How to make Glossy Buttons in Illustrator
• Buttons in Illustrator CS5
• Creating a Glass Button in Illustrator (video tutorial)

5. Open Illustrator and
Create computer thumbnails.
Thumbnails should be rough layouts of your design.
You may experiment using different images and fonts in each thumbnail or use the same elements in the different layout designs.

6. Choose one of the designs and rework full size in Illustrator.

7. When design is completed in Illustrator:
• File> Save for web and devices,
• to view in Device Central select that option at the
bottom right of save for web and devices menu
• If iPhone 4 is not listed on the left panel, select Browse(top right)
find the correct image and click and drag into the left panel
• Select it and then choose Emmulate (top right)
• your design appears in the device

Be sure to view the video tutorial before you begin.
Device Central Tutorial video

8. After viewing in Device Central, if necesary, modify the artwork based on your observations of the design when seen on the iPhone.

9. if no adjustments need to be made,
take a screen shot of the image
Mac - command+option+shift+4 this gives you a cross hair icon that you can draw a box just around the image you need. This is saved on your desktop as screen shotxxx.
PC - Print screen key>ctrl+P> select PDF and save. Open this image in Photoshop to crop extraneous parts.

Device Central

What is Adobe Device Central
Adobe® Device Central CS5.5 software simplifies the production of innovative and compelling content for mobile phones, tablets, and consumer electronic devices. Plan, preview, and test engaging experiences and deliver them to practically anyone on virtually any device.
Using Adobe Device Central with Illustrator