iCanvas

iPad Application: iCanvasThe Wireframe By: Nancy Yu Wen Sun

Scope: The first objective was to create an iPhone interface, iCanvas, for designers to generate vector art on the go and transfer to Adobe Illustrator.

The second objective of this project was to seamlessly connect iCanvas with other 2 independent mobile applications and expand its functionality.

Duration: 2 months

Team: Matt Viklund (Developer) Anita Phanthikane (Interface Designer) Drew Hutchinson (Interface Designer) Nancy Yu Wen Sun (Interactive Designer)

My roll: As an interactive designer on the team, I had to translate the ideas to workable documents for the developer and interface designer.

Home Page

Library

Canvas Stage

Color Box Tool Box Shape Box

Star Adjust shape Crop Tool Open Kuler Application

Open Hype Application

Export to computer

Flip Tool

Rotate Tool

Undo/ Redo

Shape Adjust shape

Text Tool

Kuler swatch Pen Tool

Brush Tool

Bucket Tool

Gradient Tool

Your own swatch

Edit Save

Help

Credits IP and Port # setting

Application Structure: iCanvas

iCanvas

Create RecentCamera

Credits

“Home Page”

1.1 Apple Tool Bar (Static)

1.2 Name (Static)

1.3 Logo (Static)

1.4 Start Button(Linked to “Library” page)Activate the button with a single tap

1.5 Setting Button(Place to change IP and Port#, goes to “IP and Port#” page for reference)

1.6 Credits Button(Linked to “Credits” page)

“IP and Port#” :

Activate Menu by 1.5 Setting Button

3.4.3.1 Back ButtonActivate with a single tap to go back to “Home Page”

3.4.3.2 Edit ButtonActivate keyboard with a single tap. The IP text box and Port # text box becomes editable.

3.4.3.3 IP(stationary label)

3.4.3.4 IP textfieldOn tap, enable the text field.(The longest charactor possible is 16 characters)

3.4.3.5 Port #(stationary label)

3.4.3.6 Port textfieldOn tap, enable the text field.The text length is unrestricted.

3.4.3.7 Keyboard

3.4.3.8 HelpLeads to help info page which teaches the user how to find the IP and Port #

“Library stage”

2.2.1Title: Library (text)

2.2.2 The ThumbnailsActivate the saved canvas (bring to canvas active platform) with one finger double taps

2.2.3DeleteSelect and delete the canvas

deselect

Back

Kuler Palletes

Back

“Canvas Stage” 2.1.1 to 2.1.5 Color swatches(This is also the location where Kuler uploads)Activate the “color wheel“ box with a double-tap Action: color select with a single tap

2.1.6 Switch swatches button between Kuler and your personal picks (there are five swatch spaces for personal picks) If there is no previous Kuler swatch in memory, this button will open the “my Kuler” page1. Activate the switch with a single tap 2. Activate the “my Kuler” page with a double tap

* There are 2 icons needed at this position:1. Kuler & 2. Swatches

2.1.7 Tool Box(Contain tools: Pen, Brush, Bucket, Gradient, Circle, Square)Hold the icon to activate the drop down menu

2.1.8 Shape Tool(Contain: Font choice, Font Size, Convert Text to Vector) Hold the icon to activate the drop down menu

2.1.9 Crop Tool(Contain tools: Crop, Flip, Rotate, undo, redo)Hold the icon to activate the drop down menu- “image tool menu”

2.1.10 Save and Trash(Open “info tool”, which contains: Save, Trash, Open “Library”, E-mail, Open Kuler)Hold the icon to activate the drop down menu- “Save or Trash menu”

2.1.11 Tool Bar Background (Static)

(Both tool bar will disappear when user touch canvas)

“Canvas Stage” :

Activate 2.1.1 to 2.1.5 (Color Box)

2.1.5.1 “C” Text (selection color name)

2.1.5.2 The Cyan slider picker (slider bar)Hold and drag the color picker. The slider has the value from 0% (left side) to 100% (right side).Action: Hold, drag and release on position to select.

2.1.5.3 (C) Cyan Selection result box. Display in percentage

2.1.5.4 “M” Text (selection color name)

2.1.5.5 The Magenta slider picker (slider bar)Hold and drag the color picker. The slider has the value from 0% (left side) to 100% (right side).Action: Hold, drag and release on position to select.

2.1.5.6 (M) Magenta Selection result box.

2.1.5.7 “Y” Text (selection color name)

2.1.5.5 The Yellow slider picker (slider bar)Hold and drag the color picker. The slider has the value from 0% (left side) to 100% (right side).Action: Hold, drag and release on position to select.

2.1.5.9 (Y) yellow Selection result box

2.1.5.12 “K” Text

2.1.5.5 The Black slider picker (slider bar)Hold and drag the color picker. The slider has the value from 0% (left side) to 100% (right side).Action: Hold, drag and release on position to select.

2.1.5.12 (K) yellow Selection result box

2.1.5.13 Picked color displayDisplay the result of the CMYK colorOn tap, close Color Box.

2.1.5.14 ReturnOn tap, close Color Box

“Canvas Stage” :

Activate 2.1.7 (Tool Box)

3.1.1 Brush Tool(Able to draw with finger tip)Making the selection by holding and dragging to the icon and release

3.1.2 Pen Tool(Able to draw with anchor points and lines)Making the selection by holding and dragging to the icon and release

3.1.3 Bucket Tool (Able to fill a closed path with the selected color)Making the selection by holding and dragging to the icon and release

3.1.4 Line Tool(Able to create straight lines)Making the selection by holding and dragging to the icon and release

“Canvas Stage” :

Activate 2.1.8 (Text/ Shape Tool)

3.2.1 Shape Tool PentagonMaking the selection by holding and dragging to the icon and releaseAction: When Clicked Activate pop up box, refer-ence “Shape page”

3.2.2 Shape Tool StarMaking the selection by holding and dragging to the icon and releaseAction: When Clicked Activate pop up box , refer-ence “Shape page”

3.2.3 Shape Tool Round Corner SquareMaking the selection by holding and dragging to the icon and release

3.2.4 Shape Tool CircleMaking the selection by holding and dragging to the icon and release

3.2.5 Shape Tool Square Making the selection by holding and dragging to the icon and release

“Shape page” :

Activate from either 3.2.2 and 3.2.1 (Star and Pentagon tool)

3.2.1.1 Text “Sides”Stationary text

3.2.1.2 Side SliderThe slider changes how many sides on the pentagon or star. (Left value= 0, right value = 100)

3.2.1.3 Side Value Display Display the selected value

3.2.1.4 Text “Size”Stationary text

3.2.1.5 Size Slider The slider changes how many sides on the pentagon or star. (Left value= 0, right value = 100)

3.2.1.6 Size Value DisplayDisplay the selected value

“Canvas Stage” :

Activate 2.1.9 (Image Tool)

3.3.1 Undo and RedoMaking the selection by single tap 3.3.2 Crop ImageMaking the selection by single tap

3.3.3 FlipMaking the selection by single tapAction: To flip image, swipe with one finger across the page

3.3.4 RotateMaking the selection by single tapAction: To rotate image, draw arcs with one finger across the page Or draw arcs with two fingers on the page

To Click off this function: 1. One finger tap off the canvas active area2. One finger tap on other function icon3. One finger double tap on the canvas area

“Canvas Stage” : Activate 2.1.10 (Function)

3.4.1 SaveActivate with one finger tap

3.4.2 TrashActivate with one finger tap

3.4.3 Export to computerActivate with one finger tap

3.4.3-1 A pop up box saying “You haven’t set your destination . Would you like to set it? OK Cancel”

“OK” will lead the user to “IP and Port# page”

“Cancel” will lead to close to box and no action

3.4.4 Open HypeActivate with one finger tap

3.4.5 Open KulerActivate with one finger tap

3.4.6 LibraryActivate with one finger tap

3.4.7 Pop up box (Static)

To Click off this function: 1. One finger tap off the Tool Box active area

Project Leader: Brett ForsythScrum Master: Vincent van HaaffSpecial Suport: Clarence Lee

VFS March 2009

The project was complete at the wireframe stage and has not being developed further due to the large scope we eventually defined. However, the project did expanded my knowledge on application development for Smart Phone and iPad.