Project: Mobile Smartphone Game Design
Grade: 100 points (see rubric)

Thumbnails Due: Week#4, Monday, 9am
Thumbnail Critique Due: Week#4 Wednesday, 11pm
Final Design Due: Week#5, Monday 9am

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. Your design must be original.
You are not allowed to use the same graphics or font from the original game design.

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:
• Size:The final design must fit the iPhone template (416 x 616 pixels)

• Color: Choose a color palette using kuler.com or the Kuler palette in Illustrator (Window>Extensions>Kuler)

• Once you have chosen a palette, do a screen shot and save as a jpg to place in your thumbnail document. Colors must be rgb only

• Copy:Design Must include the following:
..... Name of the game
..... A minimum of 4 buttons (use any shape)
..... Graphic elements or illustrations only (no photos)
• Final design is placed in a smart phone using a smart phone template.

Process:
1. Choose one of the following smartphone games:
- Hank Hazard
- Drift Mania Championship Gold Lite By Ratrod Studio Inc.
– Dune Rider by Geek Beach
– Tunnel Shoot Pro
- Giraffe's Matching Zoo
- Stop those Fish
- Lion Pride
- Where's My Water?

2. Research the game to understand it's objective and
include a description in the critique forum.
- search for game on App Store
- Google game

3. Choose a kuler.com color palette.

4.Open Illustrator and
Experiment with different images for the game.
Before you design, Google images - smartphone apps to
get some ideas.
Your images must be different from what is used for the game now.
You must create a new logo.
- create your own images in Illustrator -DO NOT use any images used in the original games
- 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

5. 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)

7. Save the thumbnail file as a jpg and upload to the Smartphone Game Design Forum for critique. Include a description/objective of the game in the critique forum.

Thumbnail Example:

6. Open Illustrator and Create 6 computer thumbnails.
Thumbnails should be rough layouts of your design. The elements you use do not need to be finished pieces. For example, you can use flat rectangles with color to represent your buttons.
- Open an Illustrator file - 17" wide x 15" high
- Create 6 boxes, 208px X 306px each.
- Space the 6 boxes evenly within the 17x15 page.
You may experiment using different images and fonts in each thumbnail or use the same elements in the 6 different layout designs. In each thumbnail, change color, scale and position.

8. After the critique discussion, Choose one of the designs and rework full size in Illustrator.

9. When design is completed in Illustrator:
• File> Save for web and devices,

10. Place your final design in the iPhone template provided.
if necesary, modify the artwork based on your observations of the design when seen on the iPhone. It must fit perfectly!

11. if no adjustments need to be made,
Export your Illustrator file as a jpg.

12. Upload to Moodle:
• one (1) jpg of your final design as it appears in the smart phone template (yourlastname_mobildevice.jpg)

• One (1) PDF containing kuler.com color palette, all preliminary button designs, image experiments and the 6 thumbnails and final design.

Create one pdf by opening each jpg file in Adobe Acrobat
(not Acrobat Reader) and combining into one file.
OR
Place each jpg file into an Indesign file and export as a PDF.

• Label each file as:
yourlastname_mobildevice.pdf (jpg)